A Weekend with Adobe XD: Everything You Need to Design A Mobile App

Weekends are a great time to give new creative tools and techniques a try; no pressure from bosses or clients, and (hopefully) no email or phone call interruptions. This weekend, between time with friends and family, try designing an mobile app with Adobe XD. It’s our all-in-one UX/UI tool for designing, prototyping, and sharing your website and mobile app experiences.

To get you up and running as quickly as possible, we’ve compiled some of our best UI kits, tutorials and resources to teach you how to design a mobile app with XD.

Four Steps to Designing a Mobile App

Step 1: Download Adobe XD and Wires

Turn your best ideas into beautiful user experiences quickly by downloading the latest version of Adobe XD and the free wireframe kits. The Wires kit includes a comprehensive set of ready-to-use components, templates and more.

Step 2: Design

Follow this tutorial to learn how to design a mobile app with XD. You’ll learn XD basics like creating artboards, designing icons and splash screens, importing images, and working with Repeat Grid.

Tutorial includes:

Step 3: Prototype

Follow this tutorial to turn your designs into interactive prototypes. Wire artboards together, switch back and forth between design and prototype mode, and preview your experience.

Tutorial includes:

Step 4: Share

With this tutorial, you’ll see how to share your prototype for feedback, preview on a mobile device, and share design specs with developers.

Tutorial includes:

Step 5: Add the Finishing Touches

Download these free UI resources to help you refine whatever mobile app experience you’re designing.

Keep learning and share your work

Share your weekend projects with us on Twitter by hashtagging your work with #MadeWithAdobeXD.

Head over to The Adobe Blog’s Design section for more UX tips and tricks, and for UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.

Hungry for More?

Play with these UI Kits

See Adobe XD in action with this AdobeLive Behance project

Behance can be an great resource to see what is possible with Adobe XD. Check out this beautiful example of UX design in action, created in Adobe XD by Bahdis Mousavi and Rolf Jensen or read more about how Pacific University used Adobe XD to redesign their website.

Mousavi and Jensen used Adobe XD to create a beauty services mobile app that allows the user to follow a specific stylist, barber, or make-up artist, and then view their schedule and portfolio. The app also allows users to give feedback on the provider’s services, solving two key problems in the beauty services industry: users can rate the individual, not the establishment, and the user can always keep track of their preferred provider, even if they change salons.

This Behance project includes the XD source file, so you can download and play with it and see all of the elements that went into Mousavi and Jensen’s interactive prototype.

Follow The UX Design Process with Travis Nielson’s Livestreams

When you’re ready to see just how powerful Adobe XD is in the UX design process, Travis Nielson’s AdobeLive livestreams are full of great insights and advice. Travis Nielson is a product interaction designer at Google, a YouTuber, a podcaster, and a writer, who’s passionate about UX design. These three videos show Travis working through the entire UX design process, from planning to sketching and finally designing, prototyping, and building finished products.

Video 1: “Instagram for Podcasts” Mock App

In the first video, Travis uses Adobe XD to create a mock app, the “Instagram for podcasts.”

What you’ll learn:

He explains UX design, taking you through the process of developing a use case and identifying target users. He then sketches the UI/UX interface and designs a low fidelity prototype in Adobe XD.

Video 2: “Instacast Prototype” Wireframing

In the second video, Travis finishes several high fidelity art boards and demonstrates a live preview of the Instacast prototype.

What you’ll learn:

Video 3: Building Out Profiles and Episode Artboard

In the third video, Travis builds out the podcaster profile and episode list artboards.

What you’ll learn: