Day One with Adobe XD: All The Resources You Need to Start Designing, Prototyping, and Sharing No Matter Your UX Skill Level
Adobe XD is your one-stop UX/UI tool for designing, prototyping, and sharing web and app prototypes. As Senior Creative Cloud Evangelist Paul Trani puts it, now is the perfect time to start learning the program, at the ground level. As the tool continues to grow and add features, you’ll become a UX leader in no time. Fortunately, Paul is happy to help launch you on the right path. At Adobe MAX, Paul showed UX/UI designers and enthusiasts of all skill levels just how easy it is to start creating in his lab, Mastering Adobe XD for Beginners. We asked him to share some of his top tips for jumping right into XD and gathered a few resources to help you start creating and sharing amazing website and app prototypes from day one.
1. Come Up With An Idea
Before you launch, think about apps or websites you use on a regular basis. Take notes on what you like about them so that when you launch XD, you know where to start and what you’d like your prototype to look like. If you need some extra inspiration, head over to Behance and search for projects made with Adobe XD to see what others have created. “Look at what you like using, and take hints for those apps. It’s going to help your designing because those popular apps have already put a lot of work into those apps, and then it’s more stepping on the shoulders of giants,” said Paul Trani.When you open XD for the first time, you’ll see a start screen. This will let you select an artboard size – this is your canvas to create any type of website or app you’d like, formatted for any device you want to see it on. If starting from scratch is intimidating, the sample app, right there on the start screen, is a great place to start.
https://blog.adobe.com/media_ad49c48dea9757c17a55588299e1593a28103e07.gif
“Open the sample file, check it out, and start playing around with it. It’s there right when you launch XD, and it’s a really great place to get a feel for the program and start imagining what your app would look like.,” said Trani.
2. Start Designing
After you’ve played with the sample app, it’s time to create your own website or app from scratch. Paul recommends taking a subject or activity you’re interested in and creating a design and prototype based on that. The best place to start, once you open your blank page in XD, is to get to know some of the tools at your disposal. This tutorial will help you get to know the interface and what’s available to you in Design mode.https://blog.adobe.com/media_aa385d8cb1f7acdb07a3079611bbc020e08b1a98.gif
“The great thing about Adobe XD is it’s simple to learn. You’re not overwhelmed with tools and you’re not going to get lost in the app,” said Trani.https://blog.adobe.com/media_bbdee28f720d8347afc89cc27eebe3a47fab86dd.gif
When you’re ready to get a little more sophisticated with your buttons, icons, and other graphics in your design, check out this tutorial on how to use Adobe XD’s Pen tool. There are also iOS, Android, and Windows UI resources that will help you kick-start your next design project. Just go to ‘File > Get UI Kits’ for a direct link to these. We’ve also developed two free wireframe UI kits for mobile and web to help you get started.
http://blogs.adobe.com/creativecloud/files/2017/10/coverimg3.png
Wire up a prototype.
Adobe XD also lets you wire your multiple app screens together in prototype mode so you can communicate user flows seamlessly. You can create transitions between your artboards to simulate the flow of your app. It’s simple to do, and you can follow the steps in this tutorial to turn your static designs into interactive prototypes.
https://blog.adobe.com/media_322bb26b10ca032ba466c7e2a95afd234ae6a01f.gif
“It makes the whole idea of building an app very tangible. You actually feel like you’re designing and coding an app, even though you’re just building a prototype with no coding experience required. It’s super fun,” Paul said. Once you’ve wired up your prototype, you’re also able to preview it on your Mac or Windows 10 desktop or on any iOS or Android device via the Adobe XD mobile app, available in the Apple App Store or Google Play Store.
Share and collect feedback.
Whether you’re looking to test the user experience of your app or get feedback from team members, Adobe XD has a variety of ways to show others and collaborate. Since you’re just starting out, you’ll probably want to simply send your app design to some friends to check out the interactive sharing and feedback features. This tutorial video demonstrates how to create a live link to your project that you can send your friends. Anyone with that link can access your prototype, interact with it, leave comments, and mark-up the page with their feedback.”Some things work, and some things don’t, and trying and failing can be useful too. You don’t get too tied up in your way of thinking, and that’s what’s great about XD’s ability to prototype and share with others. Your thinking could be completely wrong— feedback will fix that,” Paul said. You can share your design with anyone you want to, regardless of whether they have a Creative Cloud account or not. Take their feedback, make changes, and play around until it’s time to share the next iteration of your design.
Next steps.
Adobe XD is designed to be easy to jump into, but still powerful enough to be an essential tool for any UX designer who wants to design, prototype, and share quickly and efficiently. “The great thing about Adobe XD is that it’s simple to learn. It’s everything you need to design something, and then prototype it fast,” Paul said.
For more training on designing, prototyping, and sharing in Adobe XD, check out Paul Trani’s Lynda.com course, and for more in-depth Adobe XD tutorials, click here_._