Optimizing the user experience is key to your app’s success. Artist Erica Larson creates reusable image and menu overlays in her prototypes to test her designs. In this short tutorial, see how Larson brings her mobile app ideas to life in Adobe XD.

Graphic artist Erica Larson dreams up inspired designs every day as a member of the Adobe Studio team. In other words, she makes stuff that makes others want to make stuff.

Step 1: Set the stage

Larson starts by duplicating her primary artboard. To do this, she clicks the artboard name as she holds the Alt (Windows), or option (macOS), key then drags the artboard to the right.

Fully designed health/beauty app artboard duplicated, mobile menu design is to the left, and product overlay is on the right

Step 2: Seek and hide

Larson wants to initially hide some elements on the artboards so they come in and out of view as the user interacts with the app. She Shift+clicks across artboards to select them all, then moves the Opacity slider in the Property Inspector to 0%.

Selection boundary around objects on two artboards, Property Inspector shows Opacity set to 0

Step 3: Bring in the menu

Larson clicks the Prototype tab to define interactivity. She selects the hamburger menu icon on the first iPhone artboard and drags a wire to the Menu artboard. She sets the Action to Overlay and chooses Slide Right as the Animation so the menu will slide over the artboard. Then she drags the green circle of the overlay to move the menu into position. She finishes by repeating this technique for the hamburger menu on the second iPhone artboard.

Prototype tab is active, blue dotted line from first artboard to menu overlay, Property Inspector shows interaction settings

Step 4: Reveal what’s hidden

Next, Larson drags a wire from the Info icon to the second iPhone artboard. This time she wants the hidden elements to fade in to view, so she sets the Action to Transition and the Animation to Dissolve.

Blue line connects information icon on first artboard to the second artboard, Property Inspector shows interaction settings

Step 5: Reduce and reuse

Larson’s final step is to wire a hotspot on the model’s cheek to the Product overlay. She selects a dot, drags the wire to the Product overlay artboard, and defines the interaction. She then moves the overlay into position over the second artboard. When finished, she clicks Desktop Preview to test everything.

Blue dashed line from dot on model’s cheek to product overlay, Property Inspector, and Desktop Preview highlighted

Create realistic experiences

Design reusable image and menu overlays for your mobile app.

Hand holds mobile phone with health and beauty app design on the screen, Adobe XD mnemonic to the lower left

Note: Project files included with this tutorial are for practice purposes only.

12/11/2019

Artist: Erica Larson

Adobe Stock contributor: blackzheep

此页面是否有帮助?