UI/UX & Web Design using Adobe XD 2018 - User Experience Design | Daniel Scott | Skillshare

UI/UX & Web Design using Adobe XD 2018 - User Experience Design

Daniel Scott, Adobe Certified Trainer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
43 Lessons (6h 2m)
    • 1. Introduction to Adobe XD

    • 2. Getting started with your Adobe XD project

    • 3. What is UI vs UX User Interface vs User Experience

    • 4. The brief & persona for our real life project

    • 5. Wireframing (low fidelity) in Adobe XD

    • 6. Working with existing UI kits in Adobe XD

    • 7. Working with type in your XD wireframes

    • 8. How to create forms, checkboxes & buttons in Adobe XD

    • 9. Free icons for your Adobe XD & UX UI projects

    • 10. ProtoTyping & adding interactivity to Adobe XD

    • 11. Production video student views

    • 12. How to make & use symbols in Adobe XD

    • 13. Using the repeat grid in Adobe XD

    • 14. Mocking up an App in Adobe XD

    • 15. How to use the XD App on iPhone & Android

    • 16. Production Video Sign up screen & Dashboard

    • 17. Sharing Wireframes for comments in Adobe XD

    • 18. Mood Boards & resources for Hi fidelity UI design in Adobe UX

    • 19. Why do you need a 12 column grid in Adobe XD

    • 20. How to create a 12 Column Grid in Adobe XD 2018

    • 21. Working with colors inside Adobe XD CC

    • 22. Use Web safe fonts or iOS or Andriod specific fonts in Adobe XD

    • 23. How to use Character Styles in Adobe XD

    • 24. Creating realistic buttons in Adobe XD with paste properties

    • 25. How to draw your own custom icons in Adobe XD

    • 26. How to make a gradient & blur in Adobe XD

    • 27. The pros & cons for working with images inside Adobe XD

    • 28. Working with Illustrator, Photoshop & InDesign in Adobe XD

    • 29. How to mask in Adobe XD

    • 30. Production Video Adding text fields & buttons in Adobe XD

    • 31. 31b How to make a popup model in Adobe XD with a blurred background

    • 32. Creating 12 column card dashboard using the repeat grid tool in Adobe XD

    • 33. How to make a mobile phone mockup with Adobe XD & Photoshop

    • 34. Make an APP version of your Adobe XD UX project

    • 35. Hidden features for Adobe XD Repeat Grid

    • 36. Advanced prototyping using buttons & dropdown menus in Adobe XD

    • 37. One more Prototype trick & faking depth of field for mockup

    • 38. UX User Testing in Adobe XD

    • 39. How to export images & code from Adobe XD for developers

    • 40. Class Project for Adobe XD

    • 41. Shortcuts & Cheat Sheet for Adobe XD

    • 42. BONUS: Software Updates

    • 43. Conclusion for Adobe XD training course

104 students are watching this class

About This Class

*Important Note: Hi everyone. Recently I've been working on an updated version of this course to cover some of the more recent versions of Adobe XD. Check it out if you'd like to see the new course!

Click here for the new course



Hi there, my name is Dan & I am an Adobe Certified Instructor. Together we are going to learn how to use Adobe XD. We will use this UX and UI design tool to create a beautiful User Interface & streamlined User Experience.  

During our course we will use an actual freelance project which I am working on. It’s a project that needs both a website interface & a mobile app, so it will give you a good idea of how to manage your own UX projects.  


This course is aimed at people new to design & user experience. We will start right at the beginning and work our way through step by step. 

First I’ll show you how to construct a good brief & UX persona. Then you will learn to create simple wireframes, from there we will learn how to implement colours & images correctly in your designs. You will learn learn the do's and don'ts of choosing fonts for web & mobile apps. We will also cheat a little by exploring pre-made UI kits to speed up our workflow.  


We will build & prototype both a website design and a mobile app design, connecting pages and also adding full interactivity ready for user testing. I will share with you all the secret tricks inside Adobe XD that help you speed up repetitive tasks and we will work all the way through to exporting correct files & creating your design specs. 

There is a project for you to complete during this class which will help develop your skills and will give you something for your own portfolio.

It is now time to upgrade yourself & learn Adobe XD. 

Get your downloadable exercise files here.

Get your downloadable completed files here.


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
  • Forum support from me and the rest of the BYOL crew
  • 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.