Ex1: Adobe XD Prototyping

Importing Images and altering style

Within XD the programme allows you to comfortably import images and video with ease and little hassle. Through the tutorial I’ve learnt this can be done various ways, whether thats through dragging an image file onto the workspace or importing files through the file section on the menu bar. You can also design a number of different shapes using the shape tool that XD provides such as squares, circles and triangles. Once they’ve been drawn onto the page you can use them as a mask tool to import images on top of so that the image takes that shape and crops out excess amount of the photo that isn’t wanted/needed. This is beneficial as it takes out the step of cropping and aligning the image yourself so your process is sped up and less time is taken on more mundane tasks.

Whilst you’re designing the visual identity for whatever app or web page you’re in the process of and you decide you don’t like a certain aspect of the colour scheme there is a way around having to individually change each colour for every component on your pages. When clicking into your library you can see multiple headings such as the colours, character styles, components and videos – each documenting the current colours and styles of assets that you’re using. You can then click into the colour section and click the plus icon to reveal all the separate colours that XD has picked up on. Here I wanted to change the blue colour used for the text and icons into a pink so I edited the current colour and used the colour wheel to locate the specific one I wanted to use.

Another tool that XD utilises is the way you can import multiple images at once into pre-existing shapes that you’ve created on an art board. Here I was able to select each image file and drag and drop them into the corresponding on the left in order to have each image positioned and aligned exactly the same as one another.

Creating Transitions

A part of XD’s expertise is due to the prototype feature which allows the user to connect various components to one another for a engaging user experience where the user can easily click through buttons and pages within the workspace. Once you have clicked into the prototype mode from the design mode you can find you’re able to drag assets to one another and connect them together, here I’ve done that and dragged the blue arrow from the “Finding Beauty in the Badlands” to the second art board so that when the user clicks the box for more information the larger page will appear and display more information for the user to read before they can press the arrow icon to land themselves back on the home page.

Sticky header

To design a successful user interface for a mobile app a big part of what makes it easier to navigate is to keep the header and navigation tools such as the search bar and the arrow key at the top of the page as the user scrolls down to view the content. A way to do this its to make the header sticky so that no matter what point you are at in the scrolling process you are able to see which page you are on and easily switch between the content that you want to view next.

Introduction to using XD

Adding content from within the application is very easy to do and allows you to copy as many elements as you wish as well as alter them in whichever way suits the project most. Here I’ve turned the various assets within the first art board into a component which i can then easily drag and drop into another. I can also press alt and drag in order to duplicate them and bring them over to their respective workspace.

Within app design it is imperative that the animations between the slides are smooth and look equal to one another. Here the tutorial showed me how to animate seamlessly from one page to another by enlarging the circle iconography in the middle as they move to the centre to give the illusion of it magically transitioning from off the page to the middle. This was was also aided by the interaction menu on the right which previews several settings for which can be applied to the animation as well as the type of transition that can be implemented.

This part of the tutorial highlighted in further detail how art boards can be connected to each other and incorporate interactions. As the first art board would’ve been to long for the screen size once previewed you are able to click on the name of the art board and beneath a blue dotted line will appear which you are able to manually alter in order to show however much screen you want before you have to continue scrolling to access the rest of the page.

Here I’ve recorded myself previewing the app and using the arrow keys to navigate around the page just by connecting them together in XD’s prototype mode.

Interactions and Overlays

Overlays are another tool to use to create a more interesting navigation system where one art board can pop up on top of another when the setting in prototype mode has changed to an overlay rather than just a regular transition.