Adobe launches all-new design tool

Today, Adobe has revealed a new design tool that it hopes will help designers take user experience to the next level and aid prototype building. Adobe Experience Design CC (Preview), available now, is an early release of its much anticipated UX design and prototyping tool.

First demonstrated as Project Comet at Adobe MAX in October 2015, Adobe is releasing this preview to invite the UX design community to give input into the evolving product feature set. Experience Design (or XD) is available as a free download to anyone with an Adobe ID and the company expects the first commercial release to be available for Adobe Creative Cloud members later this year.

Adobe Experience Design has been created so that you can switch easily from wireframing, visual design, interaction design, prototyping, preview and sharing, all in one powerful tool. The main features are:

• Streamlined designSpeed up your design process with intuitive tools that let you draw, reuse and remix elements to create wireframes, visual designs, interactive prototypes and production-ready assets all in the same app.
• Interactive prototypesAdd interactions and animations to accurately test how users will experience your design. Switch easily between design and prototype without leaving the app.
• Live previewsEliminate guesswork by previewing your designs complete with transitions. Make changes and see them immediately applied so your experience looks just the way you want it.
• Easy sharingSend a link to team members and get quick feedback on your designs. Share production-ready artwork with developers so they can build to your specifications.

So that's what Adobe has told us, but we got Lance Evans to take a look at these features and discover just how essential or otherwise Experience Design could be.

First impressions

With the huge line of applications in the Adobe store, you would really think they had it all covered. But there are niches which have gone untapped for far too long, at least some might say.

You might have learned about this product under the pre-release name of 'Comet'. But Adobe is now releasing it under the official name 'XD', which is shorthand for Experience Designer. The name itself conjures up a whole mess of exotic and creative projects, doesn't it? Well, rein some of those expectations in just a bit, this is a first release after all.

What it is and what it isn't

By 'experience', Adobe is mostly speaking to the 'user experience' that one gets when inside software products, or similar interfaces like those in apps and websites. It can also be applied to interactive media of all sorts, and even web advertising.

The basic idea is fairly simple, and all operations are accomplished in two modules: Design and Prototype. The Design mode is pretty much as the name suggests, a place to design the page. Except there isn't just one page, there are many, of course. And you get to design these pages – or interfaces if you prefer – using many tools similar to InDesign or Illustrator. So you will likely feel right at home.

A host of evolved workflow techniques have been designed to speed up the process. For example, creating a masked/cropped image is now as easy as drawing a mask on the page, and then dropping in a photo – just a two step process!

Of course we hardly ever need a project in just one size these days. Why should our lives be simple, right? So XD allows us to craft our projects using preset page sizes for iPhones, iPads, the web, and of course custom size options.

This is where we touch on a 'what it isn't' moment. At least for now, XD isn't for non-Apple users, running only on the Mac. While Adobe promises to have a Windows version later this year, it is currently following their recent trend of the last many years by releasing Mac and iOS products well before Windows/Android (sigh!).

So you have brought in art from Illustrator and Photoshop, and created some great interface design pages in XD's Design mode. Now what?

The next step is to move into its Prototype mode in order to begin creating the user workflow, or 'experience'. This is done by dragging to create schematic-style linkages between the many design pages in the project. Each link-point also allows for a range of transition controls, which will enhance the final prototype presentation.

Each button and option in a project must logically link off to some resulting action or new page. Even a simple project containing a few pages, with a few options or buttons on each page, can result in a prototype that has a few dozen path-flows for the user to experience. Mapping it out with clarity for all actions > results, will often expose flow problems that need to be addressed.

It would be very normal to find yourself heading back to add more pages in Design mode, or perhaps removing some, until it all worked as needed. This is all good, and part of what XD helps to streamline.

All done. Then what?

The fruition of all this work comes with two types of export. One general set of output options is for sharing presentations of the project. Right now XD lets you do this in two ways. You can either output a movie that shows the way one would step through a project. A movie is easily distributed. However a movie format can only be of limited value in showing off an interactive project.

So the second option is more appealing. It is an interactive export to run on a web browser platform (using HTML5 I would presume). This is far better, and will hold us until platform specific players arrive, as promised by Adobe.

The last output option is the one for production. Adobe currently suggests export to their Dreamweaver and Muse platforms. They do not currently seem to suggest output to Flash (which is now called AnimateCC) for AIR application developers. Hopefully that will come.

Bottom line

Like a lot of what Adobe has offered in recent times, there is more evolution than new here. They have taken the best of various existing tools, then evolved and innovated it into a faster specialized workflow.

If you are fortunate, or unfortunate, enough to work in a crazy high-paced 'integrated' design shop, then you owe it to yourself to explore what XD can offer.

Liked this? Read these!

• Top Chrome extensions for designers and devs
• Choose a website builder with these top tools
• Behold the very best in website templates
• The very best WordPress tutorials
• Discover the best user testing software