fbpx

Featured, Opinions

Prototyping with Adobe XD

Creating interactive prototypes for clients to test is an essential part of the design process. Adobe XD makes the experience easy.

Gone are the days of sending static designs to clients. With Adobe XD (and other applications), you can now make interactive prototypes to send to your clients that can be viewed how they should be.

Why use Adobe XD?

It’s not just the prototyping that makes Adobe XD awesome, the tools that Adobe XD have are all you need to design a great website or app for mobile and desktop. It’s essentially an ultra simplified version of Adobe Illustrator. I’ve written a blog post about all of the Adobe XD features here.

With the addition of plugins, Adobe XD lets you choose how you want to use the app without cluttering space or being intrusive. The Plugins are hidden away in the top menu and there are useful hot keys for some. My favourite plugins at the moment are Change Case which allows you to change the casing of text which honestly should be part of the core app but hey, we’ve got a plugin for it. Another favourite is Lorem Ipsum which fills in text boxes with lorem ipsum, I do this fairly often so I’m glad i no longer have to leave the app to copy it from a browser.

If you’re wanting a good lorem ipsum generator loremipsum.io is great, the website has a clean modern design and you can generate lots of lorem ipsum. It also has a brief history as to where lorem ipsum came from and some facts about it.

A look at interactive prototypes

Below is a look at a few features of the Adobe XD prototype preview.

No coding required.

Artboard linking

Being able to replicate pressing a button is a really useful feature for Adobe XD. You can show a client an entire project without leaving the preview or publish link. You can see the entire flow of a website or an app which is important for getting a feel of how it works and what it will look like when doing so.

Auto animate

Auto animate is my favourite feature in preview. This allows you to see all your objects animate into place without any code. It brings a whole new experience to viewing mockups and give them a little life. All you have to do is select ‘auto animate’ under ‘actions’ when linking artboards in prototype mode.

Notes: For objects to animate you must use the same object on the previous artboard. Auto animate also isn’t available in the publish online feature… yet.

Drag trigger

When viewing the artwork in zoom the drag trigger lets you drag the screen to look at the rest of the image. This is great for side-scrolling elements on a website or app.

Recording

The recording itself is also a feature. This is great for quickly showing how something will look when clicked or dragged like above for example.

Fixed position

This is used for elements that you want to hold in place while scrolling. Useful for navigation bars and other elements like chat bubbles. You can also fix the position of everything except a certain element or group of elements like a chat bar, making it so everything is fixed while you scroll through the chat.you can now make interactive prototypes to send to your clients that can be viewed how they should be.

Share prototype for review

Comments

In the online version of your prototype there’s a comment system with pins to comment or ask questions about certain parts of the prototype. There can be as many guests as you want to view your prototype, they just need to login as a guest and type in their name. The Creative Cloud app will notify you if you have any comments on your prototype. This makes for quick design changes. This is also featured in share for developers.

Hints

If you aren’t sure where any of the links are, in the online published version there are hints as to what you can click on. The hints can be shown by clicking anywhere on the prototype and will highlight any clickable elements with a light blue box. So if you get lost while going through the prototype you can see where you can click to move on. Unfortunately this isn’t a feature in the Adobe XD app when you preview your prototype.

Don’t forget about the developers

Having a functioning prototype isn’t just for the clients, the prototypes are also really useful for the developers. Being able to see what steps you need to take to get to certain screens and to see how some thing to animate is going to save the developers a lot of time. With the entire workflow sorted and the design already in place there doesn’t have to be as much back and forth between designers and developers.

Share prototype for development

There’s also a feature to share your design to developers. This collects all the character styles, colours, screen size and all the links on the page and where they lead to. The links all have animation types and the timing for each. Clicking any of the elements gives you all of its styling. Hovering over other elements while having something selected gives you its relative position. All of the styling can be copied easily to the clipboard to paste into css files.

The only feature this doesn’t have is to download any assets such as images and icons. I’m sure in the future this will be added as i’ve seen other apps with this function.

Minor Issues

Having many artboards with linking

While having lots of artboards at times is necessary, it tends to become hard to manage them all. As long as you have your artbaords in groups and have them labelled accordingly you shouldn’t have too much trouble. I tend to write on the background which artboards are important and separate groups that are cut off from the rest of the app so they don’t get mixed up.

Another issue with this is when you publish your online link. Having too many boards makes it take longer to load. Having a faster internet connection may help but if you plan on sending it to a client, maybe try an alternative to the online publish.

Alternatives to try are:

  • Screen sharing
  • Meeting with them
  • Make a recording

There is always a work around, you just need to be prepared.

It’s not as bad as it looks

This is an example of having many artboards (118) linking between each other. It looks chaotic and messy but it’s organized and labelled. You’ll only see it like this if you’re in prototype mode with all the artboards selected. Fortunately this project was in-house so i was able to show the prototype from my desk.


Bzzt! Processing…

To have a client waiting for 100 screens to load wouldn’t be a great experience for them regardless of how great the app or website might look. Avoid this if possible.

Outro

Adobe XD has developed a lot in the last 2 years and I’m looking forward to all the new features and plugins that will become available in the future.

To try Adobe XD for yourself for free, download it here.

If you like this post, leave a comment, share or like it.

Peace!!

Written by:

Jamie Fraser

Graphic Designer at NinjaDojo Software


Even from an early age, Jamie always had an appreciation for everything art and design. Following his passion led him to be our expert in Graphic Design. Ask him to design anything, he'll do it.