Adobe XD Mobile & Web UX/UI for Dummies: Quick Crash Course!

person icon Abhilash Nelson

Adobe XD Mobile & Web UX/UI for Dummies: Quick Crash Course!

Learn everything to get started with stunning prototypes and UX/UI Design in Adobe XD in few hours!

updated on icon Updated on Sep, 2023

language icon Language - English

person icon Abhilash Nelson

architecture icon Design,UI/UX


30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 19,000+ top Tutorialspoint courses anytime, anywhere.

Course Description

Hello and welcome to my new course Adobe XD for Dummies.

This tutorial is a crash course about how you can start using Adobe XD for your project prototyping.

In the first session, we will see how we can download and install Adobe XD into your computer.

Then in the next session, we will have a quick overview about the Adobe XD application's user interface.

Then we will proceed with managing the artboards in XD which is where we are creating our individual screen designs. Just like other Design Softwares, XD also will be using a concept of layers while prototyping.

We will deal with layers in the next session.  Then as the next step, we will proceed with basic things like creating basic shapes and manipulating the properties of them.

Then we will try with different text editing options.  And then we will play with colors and gradient color combinations.

Then to make designs more attractive and natural, we can use the various blurring and shadow options available. We can easily duplicate elements, rotate, resize, align and do other translations using Adobe XD.

Also it features boolean operators like Adding, subtracting etc.

Then we will see how we can import assests like images and how we can apply masks to the images or elements. And also we will try shape editing and pen tool to create custom shapes other than the ones that are predefined in the application.

Repetition is a big problem while dealing with screen designs. Adobe XD solves this by using a feature called repeat grids. Also we will see different export options available.

Protyping is the step in Adobe XD by using which we can link the different screens by creating hot spots in screens by which the customer can interact with the prototype.

We will also see how we can include pluggins in the Adobe XD application to increase its capability and add additional functionality Adobe XD .

We will then try to design a quick and easy mobile chat application. We are making use of the sample Adobe XD Documents, called as UI Kits available from the Adobe Website and reusing components to create our app quickly and effectively.

Our app will be having a splash screen which transitions automatically to a login or register screen. We will design these screens by using most of the UI Kit elements.

Then later we will design a chat listing screen where all chats will be listed and a conversations screen for individual chats. We will also create an overlay menu just like the mobile apps are having now a days.

Also we will link together these screens using the prototyping options available.

After that we will go ahead with a simple website design. We will be designing a university website. We will first design a Home Screen. Here also we can create it quickly as we are reusing the elements from the web design UI Kit.

Then we will create an About us screen to have the contents and a Contact us screen. Later we will link the screen together so that the user can interact with it.

Overall this is a quick and easy crash course which enables you to learn Adobe XD in only few hours. There will also be a course completion certificate provided at the end of this course to include in your portfolio. So be ready to create stunning prototypes and impress your clients. See you soon in the class room.


What will you learn in this course:

  • Beginner who wants to start with Adobe XD UI/UX design and prototyping.


What are the prerequisites for this course?

  • A standard configuration computer is the only requirement.
Adobe XD Mobile & Web UX/UI for Dummies: Quick Crash Course!


Check out the detailed breakdown of what’s inside the course

Adobe XD Mobile & Web UX/UI
30 Lectures
  • play icon Course Introduction and Table of Contents 06:52 06:52
  • play icon Downloading and Installing Adobe XD 03:47 03:47
  • play icon Getting Familiar with the Adobe Xd Interface 09:31 09:31
  • play icon Managing Artboards 12:41 12:41
  • play icon Layer, Groups and Components 12:44 12:44
  • play icon Basic Shapes 07:29 07:29
  • play icon Text Editing Features 06:56 06:56
  • play icon Gradients and Colors 05:37 05:37
  • play icon Blur and Shadow 04:24 04:24
  • play icon Duplicate, Align, Rotate and Resize 09:12 09:12
  • play icon Boolean Operator Tools 03:32 03:32
  • play icon Importing and Masking 04:09 04:09
  • play icon Repeat Grid and Exporting Assets 08:58 08:58
  • play icon Pen Tool Shape Editing and Drawing 08:31 08:31
  • play icon Assets and Components 06:43 06:43
  • play icon Prototyping and Linking Screens 06:44 06:44
  • play icon Quick Session: Extending Functionality with Plugins 02:45 02:45
  • play icon Mobile Chat App - Downloading UI Kits and Resources 10:50 10:50
  • play icon Mobile Chat App - Splash, Register, Login Screens 08:22 08:22
  • play icon Mobile Chat App - Chat List and Conversation Screens 05:57 05:57
  • play icon Mobile Chat App - Prototyping and Linking Screens 05:38 05:38
  • play icon Mobile Chat App - Left Side Menu Overlay 09:31 09:31
  • play icon Sharing Options 03:36 03:36
  • play icon Real Android Device Preview 09:09 09:09
  • play icon Real iOS Device Preview 06:24 06:24
  • play icon Quick Website Design using UI Kits - Downloading UI Kits 11:15 11:15
  • play icon Quick Website Design - Home Page 08:54 08:54
  • play icon Quick Website Design - About Page 05:56 05:56
  • play icon Quick Website Design - Contact Us Page 05:18 05:18
  • play icon Quick Website Design - Prototyping and Linking 07:46 07:46

Instructor Details

Abhilash Nelson

Abhilash Nelson

I am a pioneering, talented and security-oriented Android/iOS Mobile and PHP/Python Web Developer Application Developer offering more than eight years’ overall IT experience which involves designing, implementing, integrating, testing and supporting impact-full web and mobile applications.

I am a Post Graduate Masters Degree holder in Computer Science and Engineering.

My experience with PHP/Python Programming is an added advantage for server based Android and iOS Client Applications.

Course Certificate

User your certification to make a career change or to advance in your current career. Salaries are among the highest in the world.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
People having fun around a laptop

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
People having fun around a laptop

Talk to us