OUGD504 - Studio Brief 2 - Prototyping with Adobe XD

Creating a Prototype of the website

Adobe XD allows a user to interact with elements of the design without the need for any coding which makes it a useful way of mocking up a design to get a better understanding of how it would work together.  Interactions within XD are limited to clicking on different elements which effectively simulates how a website would be used anyway, with the use of a mouse. The software is purely for mock up purposes only and is suitable for designers who want to visualise how the design would come together. Within industry once the design had been completed this would then be passed on to a developer who would code and create a full functioning website suitable for the web. 

Before being able to use Adobe XD all the layouts for the design had to be made in Illustrator first. To create a realistic flow between elements every time something would be clicked a new screen had to be created to mimic the actions that someone would take within the website.

Many of the stills were very similar and had very little difference between them e.g. a pop up being shown then a box being ticked in the pop up.

To help with this the duplicate artboard function on Illustrator enabled whole art boards to be repeated easily, this saved lots of time and meant that each screen didn't have to be completely built everytime, which wouldn't have been practical for 40 - 50 stills. Also this allowed for the consistent placement of elements within each still which would mean when played everything would stay the same aside from the bit that was supposed to be changing.

Within Illustrator adding elements of the web e.g. the task bar and tabs at the top of the screen, made the design more effective as a mock up the use of the duplicate button aided this. 

However the process of creating all the still frames in Illustrator was a lengthy process for a short prototype of different elements. Once completed these were exported as jpegs so that they could be placed onto artboards within XD.

Having never used XD before the tutorial enabled me to learn some of the basic skills in order to use the software. However because still jpeg images were being used as frames this meant the whole thing did not have to be created within XD. Using Illustrator first, meant that the design could be created fully before being moved across, XD has much more limited design tools that are more suited to placement of images and text rather than designing.  The main thing learnt that was useful with the use of stills was making connections between elements to allow interactivity from the click of one area which would then take you on to the next screen. This involves dragging a link from an element that would be engaged with then connecting it with the relevant screen. The use of the design section, which allows elements to be created and the prototype section, which allows links to be made between screens, is simply defined and allows for intuitive swapping between the two modes. 

Within XD it was found that placing all the images into the software in the correct order made it easier to create the connections between the different elements. In some parts a frame was missed out so had to be added to the end of the row. Because of this it meant that the links had to stretch over other frames making it more complicated to see which bits were connected with what.

Because the design was made using purely still jpeg images this mean that some elements within the software had to be created for connections to be made between. To do this boxes were drawn around the areas that would be clicked, the fill and outline on these was turned to clear which meant they would not be visible in the final design. 

From these boxes connections could then be made to the screen that it would lead to in the prototype section.

To simulate the almost instant switch between screens when using a website all the transition settings were set to none so that when clicked it went straight  to the next frame. This also helped create quite realistic drop down boxes which seemed almost reactive with the instant transitions.

XD allows the prototype to be previewed throughout the creation process meaning that it is easy to see whether things are connected as wanted and allows for adjustment of elements during the design process. 

The use of Adobe XD allows for an effective and competent prototype of a design with the need for  limited skills. Some elements however cannot be created with the use of this software such as simulating predictive text. If in the design there is a search bar or somewhere to type then it is not possible to make it look like each letter is being entered into the search because you would have to click the screen each time for a new letter to appear. The software allows a user to interact with the design however does not have the function on windows to allow the process of using the design to be filmed.

It was found on an Adobe Forum that this function was not currently available but would be in the future.

In order to do this the record function (Windows G) has to be used from the X Box app. This allows a video of the design being used, to be captured and shown to people. However XD would not allow the preview to go to full screen which meant that there was an extra bar at the top and black space around the design slightly detracting from the idea of creating a real life simulation.