Adobe Experience Design CC, First Take: A feature-light work in progress

adobe-xd-ft-main.jpg
  • Editors' rating
    Not yet rated
  • Average user rating

Photoshop may be the design tool behind most website and app interfaces, but Adobe's powerful image editor isn't the ideal tool for user experience (UX) design and prototyping, because it can do many other things as well.

Although Adobe is working on a simplified Photoshop interface that exposes only a subset of tools, what that gives you is very limited. Starting from scratch gives the company a better chance of competing with tools that are designed specifically for design layout or fast prototyping like Sketch and InVision, which already have a reasonable adoption rate among developers and designers working on apps.

adobe-xd-ft-main-2.jpg

Adobe Experience Design CC offers a new approach to UI design and prototyping.

Image: Mary Branscombe/ZDNet

Project Comet, which Adobe has now released as a preview called XD (or Adobe Experience Design CC, to give it its full name), is meant to be a quick and easy tool for both design and prototyping -- creating wireframes and design outlines, and testing out interaction models like transitions and clickable buttons inside your design -- that's not cluttered by existing features.

Of course, starting from scratch also means starting with fewer features, so the gap between what Adobe promises to have in XD and what's currently available is quite large.

For a start, XD only runs on Macs at the moment. It will come to Windows as a desktop app in late 2016. There will also be companion apps for iOS and Android, to let you preview and test prototypes directly on devices.

Sketch, connect, share

There are two modes in XD: Design for laying out your app and web interfaces with simple graphics and text tools; and Prototype, where you drag wiring lines from one connector on your artboard to another to prototype the flow through the interface.

adobe-xd-ft-new-design.jpg

Adobe XD has sizes for iOS and web, plus UI kits with artboards that you can copy for iOS, Android and Windows.

Image: Mary Branscombe/ZDNet

Top ZDNET Reviews

The 'Start a new design' prompt that you see when you open XD only has design sizes for iPhone 6, iPad, a 1920-by-1080 website and a custom size. However, you can also start with a UI kit with artboards sized for your app's platform -- iOS, Google Material for Android and Microsoft Windows. (Ironically, although XD is initially available only on OS X, there isn't an OS X UI kit on the list.)

adobe-xd-ft-windows-ui-kit.jpg

The UI kits come with artboards for standard layout patterns and tools.

Image: Mary Branscombe/ZDNet

Pick the Windows UI kit and you get multiple screen sizes for phones, tablets and desktops, along with standard interactions like action pickers, date dropdowns, time pickers, input fields, overlays, navigation panes, progress bars, toggles, lists, virtual keyboards, a hub and a media player.

The Material UI kit has Android-specific widgets like notifications, toasts and bottom sheets as well as lists, buttons, switches, dialogs, text fields, and a choice of light and dark themes. The screen sizes here match Android and Chrome devices -- smartphone, portrait 7-inch and landscape 9-inch tablets and a desktop size for Chromebooks.

The iOS UI kit is rather different, with artboards for common iOS screens -- Search, Settings, Share, Music, Contacts, Mail, Messages, News, the Lock Screen and others -- as well as interactions like Share and 3D Touch, plus a few Apple Watch screens.

adobe-xd-ft-artboards.jpg

You lay out your UI states as artboards using vectors and bitmaps.

Image: Mary Branscombe/ZDNet
adobe-xd-ft-interaction-lines.jpg

Drag connectors between artboard objects to create the flow of your app in Prototype mode.

Image: Mary Branscombe/ZDNet

All this makes the UI kits a good shortcut for designs on multiple platforms. But even on the largest desktop artboards, you can only lay out designs to fit the size of the screen, not for long scrolling web pages Cleverly, there's also a sample file that works as a tutorial to get you started quickly.

Bitmap input from Photoshop is via copy and paste only. You can copy a selection that's a single layer or a merge of all the layers in the image; if you want a subset of layers, you'll have to hide or remove layers first. Vectors can be pasted from Illustrator, but your selection comes in as a group and you'll need to double-click to edit the vectors in XD. When you paste from Illustrator you don't get embedded images that are in your design, even if they're included in the selection. That's one of a long list of improvements that Adobe promises in a future (monthly) update.

adobe-xd-ft-grid-drag.jpg

You can drag images in from the Finder, or copy and paste from Photoshop.

Image: Mary Branscombe/ZDNet

Images can be pasted from a browser, but you can't drag and drop yet. You can drag images (PNG, JPG, GIF, TIFF and SVG) into the XD canvas from the Finder (and in due course from Explorer when XD comes to Windows). And in a bid to move Sketch users over, you can drag layers from Sketch that are marked as exportable and set to SVG, although you can't import SVG files with all their styles.

If you drag a TIFF or a PNG or SVG you get it at full size, but if you drag a JPG it comes in at half the original size because Adobe assumes it's a photo that you'll want to scale down. If that's not what you want, there isn't a setting to change it, but it's one of the things that Adobe's taking feedback on and might change in a future update.

There's a small toolbar on the left with the minimal set of tools, which are simple and intuitive -- drag to select multiple objects, double-click to choose one object in a group, for example. All the options appear at the side in the properties inspector.

The Pen tool is fairly simple and has a handy feature, if you can find it: you can change the anchor points, styles and properties of paths in the way you'd expect; but if you double-click on the points of a line you've drawn, it turns into a Bezier and you can work directly with the curves, using keyboard shortcuts for the control points and angles. This is simple and intuitive to work with, but it's not clear that anyone will find it unless Adobe actually labels the feature in the interface. You can't add fills, shadows or multiple borders to a line though.

adobe-xd-ft-smart-guides-grid.jpg

The pink smart guides help you place objects on the artboard and change spacing in repeat grids.

Image: Mary Branscombe/ZDNet

XD's Repeat Grid is a nice feature, allowing you to drag images in from the Finder to fill out a grid of products or icons in your design. You can also drag a selection inside XD to repeat it across the artboard as many times as you want. Any item on the canvas can be repeated, horizontally or vertically -- select one of the items and you select all of them.

If you drag an image onto a shape, it becomes the fill for the shape, but you can't yet edit how the object works as a mask. The next update (or the one after that) might add options like bringing in sample data or generating lorem ipsum to fill in layouts.

adobe-xd-ft-prototype-connector.jpg

Choose how the preview will animate when moving between artboards.

Image: Mary Branscombe/ZDNet

Simple transitions between the different artboards are available -- just slides and dissolves that you see when you preview your design. But you can't tell XD to animate objects inside a design, so you can't see how a menu drops down or a slider moves content across an artboard, or even how an interface behaves when you tap or hover. Nor can you yet blur parts of an artboard to simulate the way that works in the iOS interface.

In preview mode you can record a movie of how you move through the interface. An XD design can be shared on an Adobe website (annoyingly not password protected) or exported as SVG or PNG images (and eventually PDF).

Simple and minimal

Adobe XD definitely deserves the preview label and the 0.5 version number. Some of the basic things you can't do yet include previewing fonts, formatting text individually (changing the font size or colour for one word changes the whole text object), kerning or setting line heights -- or even using styles to make changes to text across your design. You can't lay out a scrolling area inside an artboard, but instead have to make the area for text or a table big enough to fit it all in rather than letting it scroll in place. If you want to be able to resize text, you have to drag out a text area with the Text tool rather than just clicking and typing.

adobe-xd-ft-text-controls.jpg

At the moment, XD has very simple controls for text editing.

Image: Mary Branscombe/ZDNet

You can't customize shortcuts, and there are no keyboard shortcuts for zooming (although you can use the trackpad). There are smart guides that let you snap items into place and adjust spacing in repeat grids, but no column or grid guide, no way to layout responsive grids, no on-screen ruler, no layers (just bring forward and send backwards for objects) and no measurements (although you can see the distances for snapped objects).

There's no high-contrast mode for the interface, which is an issue not just for developers and designers who prefer a dark theme, but also for users who need the accessibility options.

There's no blend support yet and if you want to make a gradient, you have to paste it in from Illustrator. You can't use Adobe Stock to get stock images or store styles for text and images, or pieces of designs that you want to reuse, in your Creative Cloud Libraries, although Adobe plans to add both of those workflows and many of the other missing features. XD will get its own colour picker, but for now you're just getting the standard Mac colour picker, which means you can't create colour swatches; you have to go back and use the eyedropper to pick up colours. For features Adobe isn't building itself there will be a JavaScript plugin architecture.

And don't expect to see all the tools you'd use in Photoshop or Illustrator, even when the product is more developed. You can rotate objects by dragging the corner of a selection, but there won't be a rotation tool with a dialog into which you can type precise angles. The vector drawing tools in XD are for creating UIs and icons, rather than drawing in general. Similarly, there will be a way to copy and paste from Photoshop and pull in smart objects from Creative Cloud libraries rather than full support for import from and export to Photoshop. Features like that will be an interesting test of the way Adobe plans to let user feedback dictate the development of XD, as experienced Photoshop users may be looking for something more familiar. For now, XD is a minimal app with a minimal interface that's designed to get out of the way.

At this point it's also a minimal viable product: the list of things it can't do that it should do -- and probably will do -- is far longer than what it can actually do at this point. Adobe is trying to come up with a new way to do layers, add in a good workflow for preview on devices and fill in all the features needed for user interface design, wireframing and prototyping.

The XD product team also clearly has a definite view on how to build an interface that has layout tools designed to work with the data that will fill in your app or website where the interface almost disappears into the background rather than slapping panels and palettes all over the screen.

So far though, what you get is a very sleek preview that doesn't have autosave in design mode or a back button in preview mode, and where some of the most interesting tools are baffling unless you watch a tutorial because they're not explained in the interface. As much as adding new features -- which it needs to do quickly enough to make this a useful product -- Adobe must also find a way to make XD's excellent but hidden features more immediately obvious.

Read more

Topics: Developer, Enterprise Software, Reviews

Top ZDNET Reviews

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Newsletters

You have been successfully signed up. To sign up for more newsletters or to manage your account, visit the Newsletter Subscription Center.
See All
See All