Adobe Experience Design Tricks, Tips, and Techniques

01
of 07

Adobe Experience Design Tricks, Tips, and Techniques

The Design view of Adobe Experience Design is shown.
Adobe Experience Design offers you a number of graphics features that let yotr creativity loose.

When Adobe introduced Experience Design as a Public Preview, the company accomplished two rather amazing feats at the same time. First, they staked out a space in the emerging prototyping software market. Second, they created an opportunity for users to play with a "work-in-progress" and is letting the users influence that progress. Now that the application has been available for a few months, I thought it would be a good time to share some Experience Design tricks, tips, and techniques.

But first, you may be wondering what is meant by Prototyping Software. Among the major players in this space are Proto.io, Principle, UXPin, Atomic.io, Experience Design and InVision. Unlike applications such as Sketch 3, Photoshop and Illustrator where static designs are produced, these graphical editors introduce interactivity, motion and other features common in today’s mobile and web design space.

With the rise of mobile and the inevitable, laser-like focus on the User, it is no longer sufficient for a designer to whip up a few sketches, pull together a few comps and then release the project or upload it to a web server. The UI/UX workflow has fundamentally changed things. Every step of the process from identifying the user, sketches, wireframes, mockups and prototyping are now subject to rather extensive user testing.

It is that last stage – prototyping - where the pain points are discovered and fixed before the project moves into final production. This is where interactivity, motion, screen transitions and placement of everything on the screen are so critical. Issues and problems can’t simply be shown as a static image or explained verbally. After all, these products are for real humans. Rather than move all of that to code, the prototyping process is increasingly being undertaken by graphics  software designed just for that purpose. It is easier to fix a mistake, replace an image, rewrite some text, move a button and so on using a visual editor than constantly rewriting and debugging code.

In fact, this software has become a key component in today’s “Rapid Prototyping” Design and Development environment.

With that said, let’s have some fun with Experience Design.

02
of 07

Create a Destination Pin With a Simple Circle in Adobe Experience Design

The image shows the five steps to creating a Destination Pin with only a circle.
Experience Design's vector capabilities make icon and interface element creation a breeze.

One neat aspect of XD is its use of vector drawing tools. Can’t find an icon? No problem. Roll your own. Here’s how:

  1. Select The Ellipse Tool and, with the Option/Alt-Shift keys pressed, draw a circle.
  2. With the circle selected, set the Fill color to FF0000 and the Border to none in the properties.
  3. Double-click the circle to show the anchor points. Drag the bottom anchor downwards.
  4. Double-click the selected Anchor Point and the curves are replaced with lines.
  5. Draw another small circle with a white fill and no stoke. Move it into position and select the pin and the circle. In the Align panel at the top of the Properties click the Horizontal Center button and the Pin is created.

03
of 07

Create a Background Blur in Adobe Experience Design

The three stages involved in creating a background blur are shown.
Create a background blur in XD using nothing more than a shape and an image/.

It is a common to have text or other content over a background image.  The problem here is the image, more often than not, overpowers the content above it. One way of solving this issue is to blur the background image. You can blur the image in Photoshop or other image editing software, but this is somewhat inefficient, especially since XD can now handle this task for you. Here’s how:

  1. Create a new artboard and add your background image.
  2. Select the Rectangle Tool and draw a rectangle over the image. With the Rectangle selected, set the Fill to White and the Stroke to None.
  3. With the Rectangle selected , select Background Blur in the properties panel. The three sliders are Blur Amount, Brightness and Opacity. Here’s what they do:

  • Blur Amount: Adjusts blurriness of the image beneath the shape. The maximum value is +50.
  • Brightness: Adjusts the highlights and shadows in the image. The Minimum value is -50 and the Maximum value is +50.
  • Opacity: Affects the transparency of the shape and the visibility of the image under the shape. The values range from 0% to 100%.

If you really want to “switch things up”, change the color of the shape and play with the Opacity value to change the “look” of the image..

04
of 07

Create a Scrim in Adobe Experience Design

The steps to creating a scrim effect are shown.
Use gradients to provovide contrast when images and color get in the way of interface elements.

A common design problem is interface elements elements have to be a common color but, are lost when placed over a background image or solid color. The solution is a scrim. A scrim is a somewhat opaque gradient placed between the interface element and the background. This is easy to accomplish in XD. Here’s how:

  1. Create your artboard in XD, add an image and copy and paste an interface elements from the appropriate UI Kit – File >Open UI Kit … – into the artboard. In the above image the photo makes the Status bar and the App Bar difficult to see.
  2. Select the Rectangle Tool and draw out a rectangle. In the Properties Panel select Fill and select Gradient from the pop down in the Color Picker. Set the gradient colours to Black and White. Set the A value – Opacity- to 60% and the White A value to 0%.
  3. With the Rectangle selected, select Object>Arrange>Send Backward. The interface elements are now visible over the image.

05
of 07

Create an Image Avatar in Adobe Experience Design

the 4 steps to create and edit a mask are shown.
The ability to create masks and edit them in Experience Design is a huge time saver.

A common Design Pattern is found in Chat apps where people talk to each other and the speaker’s picture appears on the screen. These avatars are usually images that have been masked. It is dead simple accomplish this in XD. Here’s how:

  1. You start with an image and a circle or other shape on the artboard. You can fill the circle with any color. What you don’t need to do is to add a stroke color. It will disappear when you create the effect, so why bother. If you do need to stoke the circle, copy it to the clipboard.
  2. Move the circle on to the image and select both the image and the circle. With bot objects selected, select Object >Mask with Shape. When you release the mouse , the Avatar is created. From there you can resize it.
  3. If you  need to add a stroke, paste the circle sitting on your clipboard onto the artboard. With the copy selected turn off the fill in the Properties and add a stroke color and width. To line them up, select both objects and click the Center Align buttons in the Align options at the top of the properties panel.
  4. If you want to move the photo around in the mask, double click the mask. This will show the image and the mask shape. Click on the image and drag it into position. When you release the mouse, the image will be in its new position inside the mask.

06
of 07

Play With Adobe Experience Design Artboards

Orientation, Custom Color and Scrolling set up are shown in the three steps in the image.
orientation, Custom Colours and Vertical Scrolling are rather neat artboard features.

The Experience Design artboards aren’t just there for you to place content. They, too, can be manipulated. Here are a couple of things you can do:

  1. If you need Landscape and Portrait versions of an artboard, duplicate the artboard and, with the duplicate selected, click the landscape button in the Properties panel. The Artboard will change to Landscape orientation. If the Artboard has content on it, click the Artboard’s name and the Artboard properties will appear in the Properties Panel.
  2. To add a custom color to the Artboard, and the project for that matter, select the Artboard and click the Fill color chip in the Appearance section of the Properties Panel. Enter the hexadecimal value for the color and click the + sign. The colour will be added as a Custom Color. To apply that colour elsewhere, select an object and click the Custom Colour chip to apply the color.
  3. Artboards can be made vertically scrollable.  To do this, select the artboard and change its height either on the Properties Panels or by dragging  the bottom of the artboard downwards. In the Scrollable area of the properties panel, select vertical from the pop down menu and enter the viewport height for the screen. That dashed blue line shows you the bottom of the viewport. To test it, click the Play button and scroll away. To turn off scrolling, select None in the Scrolling pop down.

07
of 07

Edit a Mobile UI Kit in Adobe Experience Design

The five steps showing how the UI Kit is edited are shown.
The UI Kits are fully editable.

Experience Design contains a rather complete UI Kit for developing iOS, Android and Windows UI’s. When you first open them, you may think they are pretty well set in place. Not quite—each of the bits and pieces in those kits is fully editable. Let’s find out by building an Android wireframe.

  1. You start by selecting the Artboard tool and selecting Android Mobile in the Google section of the Properties Panel.
  2. Select File> Open UI Kit> Google Material . This opens the Material Design UI Kit.  Select the Magnifying Glass and marquee the Screen Guides artboard. I like to start with this one because it gives me the guides for proper on screen placement of the interface elements. If you click on one of the Blue bars you will see it is locked. Click the lock attached to each of them to unlock it. Marquee the artboard and copy the selection to the clipboard. Return to your document and paste the screen into your artboard.
  3. Click once on the App bar that the top of the artboard. Notice how you can select it. Select Object>Arrange>Bring to Front. Your selection is now above the Screen Guides. This should tell you each of the elements on the screen is able to be edited.
  4. Double click the Status Bar at the top and, in the Properties Panel set the Fill color to 455A64. Double click the App Bar and set its fill to 607D8B. This should tell you each element in a UI kit can be edited to meet the project’s colour specifications.
  5. What about the icons? Here’s how to change their color. Double click the heart to select it. If you look at the Properties Panel, you may assume you can’t edit the selection. Not quite. Double click the heart one more time. The Properties open and you change the fill color to FF0000. Repeat this double-double-click trick for for the remaining icons and the text.