Before spending your time and effort to code a mobile app, it's a good idea to create a prototype. You might even be required to create one by a client or boss. That's a good thing, because a prototype serves as a blueprint, so you can see in advance what you're creating. Not only does Adobe XD makes this process fast and visual, you don't have to do any coding. It's better than making static screen mock-ups in other programs like Illustrator and Photoshop because you can create simple interactions and links, view the results on your mobile device, and easily share the results with other people. You can see what you're getting before you start the actual development.
If you are involved in any way with designing or developing apps or websites, this course is for you.
This version of Adobe XD runs only on the Macintosh. Adobe has said they will release a Windows version towards the end of 2016.
This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. There are 20 lessons and you can complete the course in less than a day. All project files and fonts are included.
Here is what you will learn
Adobe XD, a/k/a Experience Design, lets you create realistic prototypes of apps rapidly, accurately, and without having to write any code. Since XD is made by Adobe, you may find the user interface and the tools familiar. But it also has unique features, like the dynamic Repeat Grid and Prototype mode.
Once you've completed your project, you can use Adobe Creative Cloud to share the prototype with other people and view it on your own device, without having to deal with security issues. This way, you can see how your app will look and behave before you start programming.
In this course, we will complete a small project from start to finish, using all the tools and features of XD. All the class files and fonts are included. XD currently runs only on the Macintosh, and Adobe said they will release a Windows version towards the end of 2016. If you learn the Mac version, you'll probably be able to use the Windows version without much trouble.
In this lecture, download a zip file that contains all the class files for this course, and install the fonts. If you aren't familiar with installing fonts, this video shows you how. To unpack the zip file, just double-click it. On the Mac, it will create a new folder with all the contents.
This course is project-based: we use all the tools and features of Adobe XD in creating a project. This lesson shows you what the finished project will look like, including the interactions.
In this lesson, we'll get an overview of the screens and tools in Adobe XD.
In this lesson, we begin our adventure, creating the first, blank screen and adding content.
In other programs, masking can be a confusing process or at least take multiple steps. But in Adobe XD, masking images is automatic! Let's see how to do it.
There are several options for drawing button shapes. That's what we'll look at here.
Adding, editing and formatting text is an important part of any graphics application. We'll see how Adobe XD does it. If you installed the fonts included with this course, you'll be able to use them and your project can look just like what's in this lesson.
Until this point, our project consists of only one screen. In this lesson, we create a new one and format it differently from the first one.
You can draw any shape you want if you know how to use the Pen tool. It uses Bezier curves and XD combines some of the tools you might be familiar with in other Adobe applications. We'll also use some shortcut techniques for drawing straight lines.
The Repeat Grid will let you quickly create a list of items, like products in a catalog. This isn't just the Step & Repeat feature from Adobe Illustrator; the Repeat Grid is dynamic.
If you want to create several screens that look the same, don't do each one from scratch. In this lesson, we duplicate an existing one to save time and insure consistency.
If you break a Repeat Grid, it loses its dynamic properties. You usually want to avoid that, but sometimes it's something you want to do. Here is an example.
Many mobile apps need to integrate with built-in screens of the operating system. So to make your prototypes easier and faster to build, Adobe XD includes many screens from iOS, Android and Google. Here are a couple of ways you might use them.
If you want to copy an object from one screen and paste it in the exact, same location on other screens, this is the way to do it.
Once you've created your designs, you'll want to get all the buttons and screens linked and create the animation of page transitions. This is what Prototype mode does.
After you finished building your design and have all the buttons and pages linked, you can test the prototype in XD before exporting it to your browser or mobile device. That way you can make changes or fix problems before going live.
Our project is now complete and we've tested it in XD. Now we can share it with our own mobile device and with other people. Here's how.
Our project is now available using a web address on Adobe Creative Cloud. So let's see the app on an the iPhone 6+.
Thank you for participating in this course, and I hope you found it useful! You can contact me via this page, on my blog at flisser.com and on Twitter @BobFlisser. Let me know if you have questions or if there is anything else you would like to add to this course.
Bob Flisser has been a trainer and technical writer since the 1980s. He currently has over a dozen video courses released by several commercial publishers, and was the co-author of a series of books of tips and shortcuts for Microsoft Word, Excel, PowerPoint, and Windows. He has also written magazine articles and training manuals, and created training centers for companies large and small.
Since 1995, Bob has been the vice president and the web and multimedia developer at Software School, Inc., a software training and graphic design company in New Jersey. He is also a board member of the Mediatech Foundation, which provides free technology access to his community.
Bob is a graduate of The George Washington University with a degree in financial economics and international business.