A Weekend with Adobe XD: Everything You Need to Design A Mobile App
by Patrick Faller
posted on 01-23-2018
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.
- Your XD workspace
- Basic shapes and text
- Repeat Grid
- Using UI kits
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.
- Prototype mode
- Wiring artboards
- Preview mode
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.
- Sharing prototypes
- Preview on mobile
- Adding comments
- Sharing design specs
Step 5: Add the Finishing Touches
Download these free UI resources to help you refine whatever mobile app experience you’re designing.
- Travel Companion UI Kit — From hotel, flight, and activity listings to buttons and icons, here’s a comprehensive kit for travel-themed apps or websites.
- Transportation UI Kit — With more than 60 customizable screens full of symbols and other elements, like navigation, Navigo helps you design transportation experiences for apps or websites.
- Apple iOS Design Resources — This new UI materials make it easier to quickly design iOS apps.
- Google Material Sticker Sheet — Provides elements like light and dark symbols for status bars, app bars, bottom toolbars, cards, drop-down menus, and more to design Android apps.
Keep learning and share your work
Share your weekend projects with us on Twitter by hashtagging your work with #MadeWithAdobeXD.
Hungry for More?
Play with these UI Kits
- Windows UI Kit — Allows you to start designing Universal Windows Platform (UWP) apps.
- Office UI Fabric Design Kit — Helps you to design seamless Office and Office 365 experiences.
- Smartwatch UI Kit — A comprehensive UI Kit for the smartwatch with more than 20 customizable components and more than 30 customizable icons.
- Dashboard UI Kit — Includes 100 customizable components across 10 screens, with more than a dozen charts (the backbone of many dashboards) to help simplify the dashboard design process.
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:
- The basis of UX design, from the process of developing a use case to identifying target users.
- How to sketch the UI/UX interface and design a low fidelity prototype in Adobe XD.
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:
- How to sketch and research the user workflow.
- How to wireframe in Adobe XD.
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:
- How to wireframe new experiences into the feed.
- Tips and tricks on design, user research, and user experience.
Topics: Creativity, Design
Products: Creative Cloud