Rapidly Create Mobile App Prototypes with Adobe XD
3.5 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
15 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Rapidly Create Mobile App Prototypes with Adobe XD to your Wishlist.

Add to Wishlist

Rapidly Create Mobile App Prototypes with Adobe XD

Without programming, create an app prototype that runs on your phone or on the web
3.5 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
15 students enrolled
Created by Bob Flisser
Last updated 5/2016
Current price: $10 Original price: $70 Discount: 86% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Quickly create a mobile app prototype from scratch
  • Import images and create image masks
  • Create buttons for user interaction
  • Insert screens and apply backgrounds
  • Draw simple shapes with various techniques
  • Draw custom shapes and edit them
  • Quickly create repeating items on the screen
  • Duplicate screens
  • Use built-in system screens and objects
  • Link buttons to pages
  • View and test the prototype on your phone and on the web
View Curriculum
  • The knowledge you already have is probably enough! You should know what mobile apps generally look like, how to select, resize and move objects around and how to switch from one window to another.

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.

Contents and Overview
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

  • What all the parts are of the user interface and what they do
  • How to start a new project
  • Drawing and filling shapes and several methods of aligning them
  • Two ways of masking images
  • How to create a button shape
  • Adding and editing text
  • Creating new pages
  • Duplicating existing pages
  • Drawing and editing custom shapes
  • Quickly creating repeating items, like a list of products to order
  • Using built-in UI screens for Apple, Google and Windows devices
  • Using a workaround to paste objects in an exact X and Y place
  • Using Prototype mode to link objects and pages
  • Testing your prototype in XD
  • Testing your prototype on your own mobile device
  • Sharing your prototype with other people
Who is the target audience?
  • If you need to create a prototype mobile app or website quickly, this course will show you how to do it using Adobe XD. You don't need any programming knowledge. If you're familiar with other Adobe applications, you'll learn the material faster, but having that experience isn't necessary for this course.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
20 Lectures
Creating a Project from Start to Finish
20 Lectures 01:42:15

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.

Preview 02:15

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.

Download practice files for this course and install fonts

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.

Viewing the Completed Project

In this lesson, we'll get an overview of the screens and tools in Adobe XD.

Taking a Tour of the Program

In this lesson, we begin our adventure, creating the first, blank screen and adding content.

Creating a New Project

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.

Masking an Image

There are several options for drawing button shapes. That's what we'll look at here.

Drawing a Button Shape

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.

Adding and Formatting Text

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.

Creating a New Screen

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.

Preview 12:08

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.

Quickly Create Repeating Items with the Repeat Grid

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.

Creating a New Screen Based On an Existing One

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.

Breaking the grid

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.

Using Built-In UI Screens

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.

Pasting an Item in Place On Multiple Screens

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.

Using Prototype Mode to Link the Screens

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.

Testing the Site in XD

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.

Sharing the Project

Our project is now available using a web address on Adobe Creative Cloud. So let's see the app on an the iPhone 6+.

Viewing the Site on 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.

Thank You and Goodbye (For Now)
About the Instructor
Bob Flisser
4.6 Average rating
43 Reviews
404 Students
4 Courses
Trainer, author, web & multimedia developer

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.