Adobe XD: UI/UX & Web Design Using Adobe XD


In this UI/UX & Web Design Using Adobe XD training course, you will create a real-world website interface and mobile app, resulting in one beautiful, streamlined user experience. Project Files included!

Length: 4 hr 55 min

This title is available in the Total Training All-Access library.

Subscribe Now


This UI/UX & Web Design Using Adobe XD training course is aimed at beginners. You will begin by constructing a design brief, creating simple wireframes, and then adding your design elements. Along the way, you will learn the do’s and don’ts of choosing fonts, as well as explore pre-made UI kits to speed up your workflow.

By the time you’ve completed this course, you will know how to design a website and mobile app, connect pages, add interactivity, and export all your files. Plus, you will learn all the secret tips and tricks inside Adobe XD that help you speed up repetitive tasks. 

It’s time to upgrade your design skillset and get started learning Adobe XD!

What are the requirements?

  • You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
  • No previous design experience is needed.
  • No previous Adobe XD skills are needed.

What am I going to get from this course?

  • 42 lectures of well-structured, step by step content.
  • Learn to design websites & mobile phone apps.
  • Work with fonts & colors.
  • Prototype your designs with interactions.
  • Test on mobile phones.
  • Send your designs for feedback & commenting.
  • Export production ready assets.
  • Create your first UX brief & persona.
  • Create quick wireframes.
  • How to use premade UI kits.
  • Learn professional workflow tricks & shortcuts.
  • You will get the finished files so you never fall behind
  • Downloadable exercise files
  • All the techniques used by UX professionals

What is the target audience?

  • This course is for beginners.
  • Aimed at people new to the world of design & user experience.
  • No previous Adobe XD experience is necessary.
  • For anyone that needs to add ‘UX Design’ to their portfolio.


Sample clip




CHAPTER 01: OVERVIEW           0:16:25

  1. Introduction to Adobe® XD 0:02:03
  2. Getting started with your Adobe XD project 0:00:51
  3. UI vs UX – User Interface vs User Experience 0:02:09
  4. The brief and persona for our real life project 0:11:22



  1. Wireframing (low fidelity) 0:01:58
  2. Working with existing UI kits 0:08:27
  3. Working with type in your XD wireframes 0:05:21
  4. How to create forms, checkboxes and buttons 0:07:41
  5. Free icons for your Adobe XD and UX UI projects 0:14:48
  6. Prototyping and adding interactivity to Adobe XD 0:10:08
  7. Production video – student views in Adobe XD 0:03:14
  8. How to make and use symbols 0:07:22
  9. Using the repeat grid 0:07:23
  10. Mocking up an App 0:08:35
  11. How to use the XD App on iPhone and Android 0:06:56
  12. Production Video – Sign up screen and Dashboard 0:10:46
  13. Sharing Wireframes for comments 0:12:30



  1. Mood Boards and resources for Hi fidelity UI design 0:07:47
  2. Why do you need a 12 column grid in Adobe XD 0:02:47
  3. How to create a 12 column grid in Adobe XD 2018 0:02:47
  4. Working with colors inside Adobe XD 0:05:30
  5. Use Web safe fonts or iOS or Android specific fonts 0:08:44
  6. How to use Character Styles 0:03:06
  7. Creating realistic buttons with Paste Properties command 0:05:39
  8. How to draw your own custom icons 0:09:04
  9. How to make a gradient and blur 0:02:11
  10. The pros and cons for working with images inside Adobe XD 0:03:39
  11. Working with Illustrator, Photoshop® and InDesign® in Adobe XD 0:08:35
  12. How to mask in Adobe XD 0:08:51
  13. Production Video – Adding text fields and buttons in Adobe XD 0:06:54
  14. How to make a popup modal with a blurred background 0:04:24
  15. Creating 12 column card dashboard using the repeat grid tool 0:23:01
  16. How to make a mobile phone mockup with Adobe XD & Photoshop 0:14:42
  17. Make an APP version of your Adobe XD UX project 0:14:40
  18. Hidden features for Adobe XD – Repeat Grid 0:08:56
  19. Advanced prototyping using buttons and dropdown menus 0:21:32
  20. One more Prototype trick and faking depth of field for mockup 0:07:33
  21. UX User Testing in Adobe XD 0:01:55
  22. How to export images and code from Adobe XD for developers 0:12:51


CHAPTER 04: WHAT NEXT?      0:19:11

  1. Class Project 0:05:07
  2. Shortcuts and Cheat Sheet 0:11:50
  3. Conclusion 0:02:14

Daniel Scott

Daniel Scott is a Microsoft Trainer and Adobe® Certified Instructor, and he recently was a featured speaker at the Adobe Max conference in Las Vegas. He’s been teaching for more than 14 years – covering topics such as print, digital publishing, web, and video. He loves to see how it all connects, and how we can share those connections. He prides himself on delivering the best service to his clients and making sure all his students learn to their fullest potential. He is currently the lead trainer at Bring Your Own Laptop Training Center in New Zealand.

Adobe Certified Expert

You may also like…