InstructorTayla Coman
TypeOnline Course
Buy NowBook Now

Course Overview


Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry professionals to product high quality & functional mockups. By the end of this course, you will be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.

Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.

This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!

First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.

I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.

An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.

One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.

There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.

It is now time to upgrade yourself & learn 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?

  • 92 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.
Section 1Getting Started
Lecture 1Introduction to Adobe XD
Lecture 2Getting started with your Adobe XD project
Lecture 3What is UI vs UX - User Interface vs User Experience
Section 2The Brief
Section 3Wireframing Low Fidelity
Lecture 5Wireframing (low fidelity) in Adobe XD
Lecture 6How wide should my website or app be in Adobe XD?
Lecture 7Working with existing UI kits in Adobe XD
Section 4Type, Color & Icon Introduction
Lecture 8Working with type in your XD wireframes
Lecture 9Basic Colors & buttons in Adobe XD wireframes
Lecture 10Free icons for your Adobe XD & UX UI projects
Lecture 11Adding footers & Lorem Ipsum to our XD wireframe
Lecture 12New Pages & Artboards in Adobe XD
Lecture 13Class Project 01 – Wireframe Homepage & Contact Us Page
Section 5Prototyping a Website - Introduction
Lecture 14Prototyping & adding interactivity to Adobe XD
Lecture 15How to create a Popup Modal or popup box in Adobe XD
Lecture 16Class project 02 – Prototype
Section 6Symbols & Repeat Grids
Lecture 17 Working with groups & isolation mode in Adobe XD
Lecture 18How to make & use symbols in Adobe XD
Lecture 19Production Video - Left Nav
Lecture 20Using the repeat grid in Adobe XD
Lecture 21Updating symbols & problems with using repeat grids
Lecture 22Prototype Trick to save time in Adobe XD
Lecture 23Navigation tricks & tips in Adobe XD
Lecture 24Class Project 03 - Symbols & Repeat Grids
Section 7Prototyping a App - Introduction
Lecture 25Make an APP version of your Adobe XD UX project
Lecture 26How to use the XD App on iPhone & Android
Lecture 27Adding iPhone & Android battery & status icons to mockup
Lecture 28How to fix the position of the nav or battery icons in XD
Lecture 29Production Video - Login & Dashboard
Section 8Wireframe Feedback
Lecture 30Sharing Wireframes for comments in Adobe XD
Lecture 31Recording your interactions via video using Adobe XD
Lecture 32Class project - Wireframe Feedback
Section 9High Fidelity UI Design
Lecture 33Mood Boards & resources for Hi fidelity UI design in Adobe XD
Lecture 34Class project - Mood Board
Lecture 35How to create a 12 Column Grid in Adobe XD 2018
Section 10Colors
Lecture 36Working with colors inside Adobe XD CC
Lecture 37Tricks for using colors in Adobe XD
Lecture 38How to create gradients in Adobe XD
Lecture 39Class project 06 – Colors
Section 11Text & Fonts Advanced
Lecture 40Use Web safe fonts or iOS or Android specific fonts in Adobe XD
Lecture 41How to use Character Styles in Adobe XD
Lecture 42Font & Text tips tricks in Adobe XD
Lecture 43Adding our first Plugin Lorem Ipsum to Adobe XD
Lecture 44Creating realistic buttons in Adobe XD with paste properties
Lecture 45Class project 07 - Text & Buttons
Section 12Drawing
Lecture 46How to draw your own custom icons in Adobe XD
Lecture 47Working with stokes & lines in Adobe XD
Lecture 48Learn to draw with the pen tool in Adobe XD
Lecture 49Drawing practise with the pen tool in Adobe XD
Lecture 50Production Video with some drawing tips
Section 13Working with Illustrator
Lecture 51Back and forth with Illustrator in Adobe XD
Lecture 52Class project 08 - Draw your own icons
Section 14Working with InDesign
Section 15Images
Lecture 54The pros & cons for working with images inside Adobe XD
Lecture 55Working with images and CC Library connection
Lecture 56Adobe Stock connection to find similar image for XD project
Lecture 57Free images to use in your XD mockups - Unsplash Pexels Freeimage
Lecture 58Masking & Opacity & Blurring background images
Section 16Working with Photoshop
Lecture 59Working with Photoshop in Adobe XD
Lecture 60Production Video – Infographic
Lecture 61Class project 09 - Full Hi Def mockup
Section 17APP Design
Lecture 62How to make a mobile phone mockup with Adobe XD & Photoshop
Lecture 63Class project 10 - Mobile Website
Section 18Placeholder content & Plugins
Lecture 64Hidden features for Adobe XD Repeat Grid
Lecture 65Plugin - Content Generator in Adobe XD
Lecture 66Plugin - UI Faces adding random profile photos to XD
Lecture 67Plugin - PhotoSplash automatically import Unspash images
Lecture 68Plugin - Copy Cat or Mimic to style and images from a site
Section 19Asset Panel
Section 20Symbol - Advanced
Section 21Micro Interactions
Lecture 71What are UI micro interactions in Adobe XD
Lecture 72Button grow or full screen image micro interaction in Adobe XD
Lecture 73Animated Image Gallery with micro interactions in Adobe XD
Lecture 74Full vector change micro interaction in Adobe XD
Lecture 75Class project 11 - Micro Interactions
Section 22Prototyping Advanced
Lecture 76Time delay transitions in Adobe XD
Lecture 77How to create a popup menu or modal in Adobe XD
Lecture 78Animated mobile side nav for burger menu in Adobe XD
Lecture 79Advanced prototyping using buttons & dropdown menus in Adobe XD
Lecture 80How to use the drag transition in Adobe XD
Lecture 81How to make a number ticker scroll using masks in Adobe XD
Section 23Voice Interactions
Section 24User Testing
Lecture 83What is user testing in Adobe XD
Lecture 84How to run an unmoderated UX User Test in Adobe XD
Lecture 85Class project 12 - User Testing
Section 25Pitching to clients & customers
Lecture 86Mocking up your designs in situ on a real phone in Photoshop
Lecture 87Advanced micro interactions & prototyping with Protopie in Adobe XD
Lecture 88How to add animation in Adobe XD using Adobe After Effects
Section 26Exporting
Lecture 89How to export images & code from Adobe XD for developers
Lecture 90How to export code in XD for engineers using Design Specs
Section 27What Next
Lecture 91Class Project 13 – Roar Cycles
Lecture 92Conclusion for Adobe XD training course

Leave a Reply