Latest Posts

Designing a coffee app in Adobe XD with Paul Trani! In this episode Paul will kick off the day by designing an app for the worlds most popular drink all in Adobe XD. He’ll even show some prototyping tricks specific to this kind of app.

Then, join us on Adobe Live, Tuesday at 9am PT, where you can use what you’ve learned from Paul to work alongside four professional graphic designers as they take you through their process. Find out what inspires them, how they problem solve and what it takes to create beautifully designed experiences.

Paul Trani is a Senior Worldwide Evangelist for Adobe where he inspires designers everywhere to use their creativity and new technology to create compelling experiences for all screens. With over 20 years of experience across 40 countries Paul has become a sought after designer, speaker and presenter on all things design and creative related.

—–

► Click HERE to watch LIVE: http://bit.ly/AdobeLiveBe
► View our SCHEDULE: http://bit.ly/BeSchedule
► Click HERE for REPLAYS: http://bit.ly/AdobeLivePlaylists

► Behance: https://www.behance.net/paultrani
► Instagram: http://www.instagram.com/ptrani
► Twitter: http://twitter.com/paultrani
► Facebook: https://www.facebook.com/paulryantrani

Design reusable image and menu overlays for your mobile app.

Start from scratch, or download practice files [https://adobe.ly/2UOw4Ik] for a head start. Steps below.

Prep your project:

1. Open an .xd document, or use ours (make-popup-overlay_start.xd).
2. Duplicate the artboard: Hold the option key as you drag the title of the iPhone artboard to create a duplicate.
3. Hide mobile app hotspots: Shift+click each of the dots on the main image on the first iPhone artboard. Then, move the Opacity slider in the Properties Inspector to 0%. Click the info icon on the new artboard and reduce its Opacity to 0% as well.

Wire the mobile menu overlay:

1. Click Prototype at the top to enter prototype mode.
2. Click the hamburger menu icon on the first iPhone artboard. Drag a wire from the blue arrow to the Menu artboard.
3. Choose Overlay from the Action drop down. From the Animation drop down, choose the way you want the menu to transition over the screen when the user taps the menu icon. We chose to have it slide right.
4. Drag a wire from the hamburger icon on the second iPhone artboard to the Menu artboard. Notice how Adobe XD remembers your most recent settings. Click away from the Trigger pop-up window to close it.

Wire the image pop-up overlay:

1. Drag a wire from one of the dots on the second iPhone artboard to the Product overlay artboard.
2. Keep Overlay as the Action and set your preferred Animation. We chose Dissolve for this transition.
3. Click the green circle at the center of the overlay indicator and drag to position it.
4. Click the info icon on the first iPhone artboard and drag a wire to the second one. Change the Action to Auto-Animate or Transition.

Test your prototype:

1. Click Desktop Preview (the Play icon) at the top right.
2. Click the hamburger icon to confirm the menu slides in. Click it again to hide the overlay menu.
3. Click the info icon.
4. Click a dot on the main image to display the product description.

That’s it!

To learn, more visit our Adobe XD CC Tutorials page: https://adobe.ly/2UXPESo

Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1

LET’S CONNECT
Facebook: http://facebook.com/adobecreativecloud
Twitter: http://twitter.com/creativecloud
Instagram: http://www.instagram.com/adobecreativecloud/

Adobe Creative Cloud gives you the world’s best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.