An Adobe Experience Design QuickStart

of 09

An Adobe Experience Design Quick Start

The three artboards showing interactivity and the Experience Design Preview Panel are shown.
There is a lot uunder the hood when it comes to creating Interactive Prototypes in Adobe Experience Design CC.

When Adobe introduced Adobe Experience Design CC earlier this month the company was, understandably,  entering an entirely new type of graphics software field whose roots match the rise of mobile design. The software category is Prototyping.

Prior to the arrival of mobile design and app development designers could get away with comping up screen designs in Photoshop or Sketch 3. The designs were then explained, verbally, which tended to introduce confusion into the process as each person involved formed differing mental images of what was being explained.

The rise of mobile and the shift to Responsive Web Design (RWD) required not only differing screen sizes for the project but also introduced interactivity and motion into the mobile design process. Both interactivity and motion are difficult, at best, to describe.

Over the past couple of years a new genre of software – Prototyping- has arisen. The whole purpose of this genre is rather simple: show how the interactivity and motion work. This is something I have written about in this column. I have done pieces on, UXPin and Principle For Mac explaining how to use these applications as a key element in the UX/UI Prototyping process. The time has arrived to introduce the “New Kid”.

Experience Design (XD) is not in that league yet but I suspect it will become a major contender as the current free Preview Release picks up the promised updates and new features as it moves from its current iteration to a 1.0 release over the next year or so. In this “How To” I am going to show you a quick way of getting started with XD and, along the way, point out a rather simple method of moving from Photoshop or Sketch 3 artboards to an interactive XD prototype.

Let’s get started.

Editor’s Note:

Adobe Experience Design CC is, at the moment a Macintosh-only application. Adobe has been very clear about this and is on record as saying a Windows version is being developed.

of 09

How To Use The Experience Design CC Interface

Arrows are pointing to the Tools and preoperties panels and three iPhone 6 artboards have been added to the project.
Don't be fooled by the Minimalist interface because there are a lot of powerful tools and features in this application.

 XD uses the artboard concept as its design basic. Everything happens on an artboard and, if you are a Photoshop or Sketch 3 user you are, most likely, very familiar with artboards. In XD every mobile, tablet or desktop screen a user sees is an artboard. In fact, when you open the application the first decision you will be asked to make is to choose an artboard size. In this case, I started with the iPhone 6.

When the application opens you are in for a bit of a surprise because the interface is so sparse. On the left are the Tools:

  • Selection: Use this to move content and artboards around or to select items on an artboard.
  • Rectangle, Ellipse, Line: These are vector tools and can do some pretty interesting things beyond drawing boxes, circles and line. They can be used as interactive elements, masks and even merged together to create custom shapes.
  • Pen Tool: If you are familiar with the Illustrator, Photoshop or Sketch 3 pen tools, you know how to use this one. In fact, it can also be used to edit SVG images.
  • Text Tool: This is the weakest link in the line up but I suspect it will become quite robust over the next few months. Use this one to add single lines or multiple lines of text.
  • Artboard Tool: Use this tool to add new artboards to an XD project. In fact feel free to use this tool to add artboards of any size to an XD project. One of the neatest features of XD is the ability to work with multiple artboard.

At the top of the interface are the two views: Design and Prototype. The default view is Design but you can switch between them at any time. Farther over on the right are the Zoom, Preview and Share buttons.

The panel on the right is the Properties Panel. It is context sensitive meaning it will change based upon the tool you have chosen.

In this instance I will need two more artboards. To accomplish this, I selected the artboard tool and clicked it twice to add them.

A Quick Word About Artboards

Anything placed on a specific artboard will display images based on the device’s scaling factor. This means the current iPhone 6 artboard may show a size of 375 x 667 but any images placed on it will need to be output @2X in Photoshop and Sketch. This applies to any of the devices shown in the Properties Panel. For Apple devices the factors are 1, 2 and 3. For Android devices you might want to check out the Dimensions chart in this article.

of 09

How To Export A Photoshop Image For Placement in Experience Design CC

The Photoshop Export As panel showing the art boards and the 2x scaling factor is shown.
Use the Photoshop Export As.. feature to export artboards of elements for XD.

To start, I created three artboards in Photoshop and designed the interfaces for each one. Once I was finished I selected File>Export> Export As and selected 2X from the Size pop down. You will notice all three artboards are shown in the dialog box. I held down the Shift key, selected the three artboards and made sure 2X was chosen.

I then selected PNG as the output format and clicked the Export All button. I was then presented with a dialog box asking me where to put the images.

At this point I could quit Photoshop.

of 09

How To Export A Sketch 3 Image For Placement in Experience Design CC

The Sketch 3 interface containing the artboard is shown and the Export area of the Properties Panel is highlighted.
you can export artboards or all of the elements in a Sketch 3 artboard for use in XD.

The Export process in Sketch 3 is remarkably similar to Photoshop’s.

Select the artboard in the Layers panel. The image will appear in the Properties panel. From there select the scaling factor, format and click the Export button. If you want to export all of the items on the artboard, select them in the Properties panel and click Make Exportable. From there you set you scaling factor and format. When you click the Export Layers button. All of the selected layers are exported to the selected folder.

As you can with Photoshop, you can also copy and paste selections from Sketch 3 into XD.

of 09

How To Import Content Into Experience Design CC

The Finder is open and an arrow shows an image being dragged from the Finder to the XD artboard.
Drag and drop is a neat feature and don't forget you can also copy and paste content from Photoshop, Sketch 3 and Illustrator.

Though you can import images and graphics into XD using File>Import there is another method that is much less tedious.

With XD open, open the folder containing the content to be added in the Finder. Select the items to be added to the artboard and drag and drop them from the Finder into place on the selected artboard.

One other aspect of adding content is really neat. XD can’t use the .ai format from Illustrator. What you can do, instead, is to select the item in the Illustrator document and copy and paste it into the selected artboard. It will be converted to the SVG format when it arrives in XD. This is especially useful if your project involves a few dozen icons.

of 09

Adding Interactive Hotspots In Experience Design CC

An arrow pointing to the rectangle shows that the fill and stroke options are turnedd of the Properties Panel.
There is a lot you can do with the drawing tools including the creation of interactive hot spots.

Right now the artboards consist of flattened png images. The plan is the create a “Click Through” that establishes the navigation through the project. Seeing as how there is no “Button Tool” in XD, we will have to manually create the interactive hotspots. Here’s how …

Select the Rectangle tool and draw out a rectangle over the area the user should tap.  If you want to round off the corners of the shape, drag the corner handles – the little circles inside the shape – inwards.

To make it a Hot Spot, turn off the visibility for the Border and Fill areas in the Properties panel. I then added Hot Spots to the Back icons and the Let’s Go button.

Though I have added Hot Spots, you could just as easily create the buttons and text using XD’s tools.

of 09

How To Add Transitions In Experience Design CC

The hotspot is selected on the artboard and a
Dragging wires to their target artboards opens the target dialog box where you set the transition, easing and duration.

At the moment, all you can do is add transitions between the artboards. Micro-interactions and motion are on the plan as additions to Experience Design. The process of creating transitions is relatively uncomplicated. Here’s how …

Click Prototype view and select an interactive element. You will notice it sports a blue arrow. Drag the arrow to where you want the user to go. When you do a blue line, called a “wire” appears and, when you release the mouse the Target dialog box appears. Click and hold on the Segue pop down and select a transition method. In this case I want the Login Page to slide in towards the left. Select an easing method and a duration for how long the motion will last. In this case I want the Login to slide in over .4 seconds.

of 09

How To Test An Experience Design CC Project

An arrow runs from the Preview button to the open Preview Panel.
Preview is where you can test and record the test of your project.

Once the project is “wired up” you can also test it. To do this click the Preview button in the upper right corner.

The Preview panel opens and you can now test the project by clicking on the buttons. If something isn’t quite right, click on the artboard, make the change and open a Preview.

One of the more brilliant aspects of the Preview is the Record button in the upper right corner of the Preview panel. Click this and and will create a video of the user moving through the project.

of 09

How To Share an Experience Design CC Project

Arrows point from the Share button to the Share Dialog box and the Share Link dialog box.
Projects can be shared with the stakeholders by creating a link to the project on an Adobe server.

You can share your prototypes with all of the project’s stakeholders. Here’s how …

Click the Share button in the upper right corner to open the Share dialog box. If you want to change the name, enter is in the Title area. If you would like to use an icon for the project, drag and drop a 120 x 120 jpg or png image into the icon area.

When you click Create Link, the project is uploaded to an Adobe server and the Share dialog box changes to show the link. If you click on the link the project will be launched in your browser. If you click Copy Link , the link is placed on the clipboard and you can share it with your stakeholders. If you make changes to the project, save them and click the Share Again button. This will update the project on the web server.

If there is no interactivity Forward,Home and Back buttons will be added to web page.