14 March 2016

First impressions with Adobe Experience Design

I’ve had a short time to design and prototype in Adobe’s new Experience Design app, the fruit of Project Comet. While Experience Design (Xd for short) has a lot of potential, it’s missing a great deal of features available in other prototyping apps such as Flinto or even Keynote. For Xd to succeed they need to include a lot more in version 1, and do this quickly.

The preview app is divided into two modes: Design and Prototype. Each has strengths and weaknesses. But overall, Xd needs a lot more features to make it fully useful. The only good feature so far is that it’s free with your Creative cloud membership.

What follows is my first impression with Xd and it’s a bit of a ramble as I went from one tool to another. I fully recognise that Xd is a Preview app and may not be ready for primetime, however a little discussion about what we want as designers is probably helpful.

Design

Diving into design in Xd is a new experience. The workspace is unlike most of Adobe’s professional apps, it’s simplified with less of a barrier to entry. The app is both new and familiar so the learning curve was easy, once I adjusted to the new arrangement of the single window environment. (Somehow I’ve become comfortable with the density of tools, features and palettes in Adobe’s other apps).

While Xd is not feature rich in the design mode, the app has included the most useful and basic tools enabling someone to draw the UI of a website or mobile app. Creating artboards is also simple with preset sizes. Compared to my main UI app Illustrator, Xd has pretty much the core tools I use: rectangle, circle, line, vector pen and text tools. I’d estimate those are 95% of the tools I use (scissors tool would be helpful). There is a colour picker attached to an objects colour settings, and this brings up a magnifying glass for easier colour selection.

The repeat grid tool allows you to easily replicate rows of content, common in most mobile apps. Initially items in the repeated rows can’t be changed. It’s possible to ‘ungroup’ the grid and modify individual rows, then turn ‘repeat grid’ back on to add more rows.

At first I struggled to adjust an image inside a mask. In the tutorial you drag a JPG or PNG (the only images supported) onto a grey circle and magically the image is masked. However I have been unable to change the size or positioning of the image inside that image. In other masked images it’s been as simple as double clicking the mask to access the clipped image. There’s also no way to easily release a masked image.

Basic alignment (including useful on screen guides), Path manipulation (add, subtract, etc) and simple arrangement are included. Layers aren’t included in case the artboards become cluttered with lots of elements, however this is not a terrible feature to leave out of a preview version.

There doesn’t appear to be any manual guide lines or grids available. But moving objects around brings up guides relative to other objects and there’s full pixel-perfect placement control on the inspector.

The text control is limited with the exclusion of shortcuts for changing type case, underlining or striking-through text. You can control the letter-spacing, but only for an entire text box, and there’s no line-height control.

The only other downside seems to be the lack of import support for Adobe’s own file types. You can however import SVG (that’s right, ‘import’ is the function called Place in other Adobe apps). So far I have not found a way to integrate designs in Illustrator with layouts in Xd. On the flip side export is limited to PNG and SVG images, though there’s a helpful option for exporting for specific devices, but where’s the PDF export?

There are a few pleasant surprises I discovered from my initial use. The vector drawing tools are good and useful, and adding bezier curves is simple. Rounding corners is also simple with control over all or individual corners, however it’s almost by luck that I found them. Four targets appear on rectangles; dragging one toward the centre increases the corner radius, while holding down opt/alt controls just that corner.

Adobe wants Xd to be able to produce production-ready assets for web and mobile apps. This is where the export shortcuts could come in handy, however greater control over the typography would be an important feature to include first so the assets are pixel-perfect.

Prototyping

In the second mode, Xd is meant to take your screens and give you the ability to animate the interactions between them. This works well enough, more robust than Keynote, but minimal compared to Flinto.

I do find linking objects to other screens simple enough, however the control of the animation is limited. So far there not much you can animate on individual screens, no ability to add overlaid objects was as alerts, and no way to make the screen scrollable. In preview, only one gesture is supported, single tap. To be fair I was not able to test my prototype on a device as the sharing feature gave me an error (hey this is bleeding edge technology, I guess).

Preview does include video recording, which is an excellent feature for getting around the sharing, however it’s less a substitute and more a useful feature for demoing the prototype.

I really wish this mode was more robust. For a simple prototyping tool there’s enough control to connect screens together. However more refined tools are needed to demonstrate interactions on individual screens, say with being about to scroll, swipe or tap elements and show the expected interaction.

Summary

I can see a lot of potential with Xd, however I also see that Adobe has a mountain to climb to even catch up to other apps already in the marketplace. Sketch is planning to include these prototyping tools in a future version, and it will be hard for Sketch not to over deliver compared to Xd (the customers already lost to Sketch will be hard to persuade back if Xd doesn’t leapfrog Sketch in a major way).

Project Comet was announced in October 2015 and has only just been released as Experience Design some five months later. (On the surface Xd appears to be just Comet in a public preview). Adobe needs to pick up the pace and fulfil their promise to be updating the app regularly, but even then there are a lot of features to add before I’d be willing to switch to Experience Design. I wish the Adobe engineers good luck, anything to move people away from using Photoshop as a UI tool will be a good thing.

We’re witnessing the birth of a lot of very good UI and prototyping tools. Adobe has noticed, and so has Invision which is buying up and building their own toolset. Neither Adobe, Invision or Sketch have released their full design and prototyping solutions, but it will be interesting to see who ships first with the best product.

Aside from more robust animation controls and better control over object interaction, a few of the tools need the same level of control you find in Illustrator. It would also be nice to eventually have object libraries, particularly for speeding up wireframing.