Site icon akquinet AG – Blog

Adobe Experience Design – Review

tl;dr? A summary and pros and cons list can be found at the end of this article plus some useful shortcuts.

The German version of this article is published here.

What is Adobe Experience Design?

It’s Adobe’s missing piece for rapid prototyping of interactive wireframes and simple sharing of those. Design some screens for your app, pull some arrows between them to define interaction, check your work in the preview mode, share the link and do a live demo directly on your phone. The workflow is surprisingly easy.

The tool is currently available for Mac only in version 0.5.2. It’s a preview, hence we will be lenient and wait for features like layers and scrollable boxes.

Designing

I’m a software developer, not a designer and definitely no Photoshop expert. Nontheless, starting with Adobe XD felt intuitive and easy. I watched the intro tutorial videos and stepped through the example project. This took less than half an hour.

I made some sketches on paper and started designing. I selected a screen size and added a few artboards. Each screen size needs its own design, which is a bit annoying. Positioning and resizing is super easy. Selecting an obstructed object is not, as there is no layer system (they’re working on it). Adding stuff from Photoshop or Illustrator also works.

One of the most hyped features is the repeat grid. Build a template object and let it repeat itself as far as you drag. Resizing or moving something in the template will affect all copies. Changing content will not, so you can have uniformly layouted boxes with different content. I was missing a possibility to extend the template, e.g. add an icon. My workaround was to undo the repeat grid, change the template and repeat it once more. The repeat grid is still a cool feature that greatly facilitates layouting and spacing. Definitely a time-saver.

Images can be dragged over shapes to fill them – neat! Minor nitpicking: I couldn’t figure out how to move or resize the image afterwards. This worked with the masking feature but I couldn’t change the picture in either option. I used this to fill circles with profile pictures, backgrounds with images and icon shapes with textures.

Designing the screens was a lot of fun. The interface is very intuitive and I soon felt familiar with it. Off to add interaction!

Prototyping

Designing was intuitive? Prototyping even more so! Select the object and drag an arrow onto the screen you want. Change transition type and duration, that’s it.

The interface is intentionally kept simple but there is always a tradeoff between features and simplicity: There is no way yet to add effects like hovering behavior, scrollable containers or popup menus. In my prototype I solved this by making copies of my artboard and changing just one detail. Copying? As a software developer this makes me cringe – redundancy! A master screen as a template would be nice.

Preview and Share

The preview mode displays your prototype. Click and check if your interaction works the way you want it. You can record your interaction or share a link to your app. Very convenient to demonstrate your prototype directly on a phone without any copying of files. Or simply export your screens as images.

Summary

Adobe XD is a helpful tool to create UI prototypes really fast. It is intuitive and easy to learn. Design your app, add interaction, test it in preview mode and share it. Smart features like the repeat grid get rid of laborious manual work. The current preview version is lacking some features like a layer mode or master screens and different screen sizes have to be adapted manually. Overall the whole prototyping process is covered and fast design iteractions are possible.

Pros

Cons

∗ features planned for a future release, check current features here

Shortcuts (add + shift to undo some of them)

Move space + drag
Repeat grid cmd + R
Group cmd + G
Lock cmd + L

The images used in the prototype are from iStock and Library of Congress.

^ To the top!

Exit mobile version