Getting Started
  • Introduction to the User Experience Course
  • Getting started with your Adobe XD project
  • What is UI vs UX - User Interface vs User Experience vs Product Designer
The Brief
  • The UX brief & persona for our real life project
Wireframing Low Fidelity
  • Wireframing (low fidelity) in Adobe XD
  • How wide should my website or app be in Adobe XD?
  • Working with existing UI kits in Adobe XD
Type, Color & Icon Introduction
  • Working with type in your XD wireframes
  • Basic Colors & buttons in Adobe XD wireframes
  • Free icons for your Adobe XD & UX UI projects
  • Adding footers & Lorem Ipsum to our XD wireframe
  • New Pages & Artboards in Adobe XD
  • Class Project 01 – Wireframe Homepage & Contact Us Page
  • Class Project 01 – Wireframe Homepage & Contact Us Page
Prototyping a Website - Introduction
  • Prototyping & adding interactivity to Adobe XD
  • How to create a Popup Modal or popup box in Adobe XD
  • Class project 02 – Prototype
  • Class Project 02 – Prototype
Symbols & Repeat Grids
  • Working with groups & isolation mode in Adobe XD
  • How to make & use symbols in Adobe XD
  • Production Video - Left Nav
  • Using the repeat grid in Adobe XD
  • Updating symbols & problems with using repeat grids
  • Prototype Trick to save time in Adobe XD
  • Navigation tricks & tips in Adobe XD
  • Class Project 03 - Symbols & Repeat Grids
  • Class Project 03 – Symbols & Repeat Grids
Prototyping a App - Introduction
  • Mocking up an App in Adobe XD
  • How to use the XD App on iPhone & Android
  • Adding iPhone & Android battery & status icons to mockup
  • How to fixed the position of the nav or battery icons in XD
  • Production Video - Login & Dashboard
Wireframe Feedback
  • Sharing Wireframes for comments in Adobe XD
  • Recording your interactions via video using Adobe XD
  • Class project - Wireframe Feedback
  • Class Project 04 – Wireframe Feedback
High Fidelity UI Design
  • Mood Boards & resources for Hi fidelity UI design in Adobe XD
  • Class project - Mood Board
  • Class Project 05 – Moodboard
  • How to create a 12 Column or Grid in Adobe XD 2018
Colors
  • Working with colors inside Adobe XD CC
  • Tricks for using colors in Adobe XD
  • How to create gradients in Adobe XD
  • Class project 06 – Colors
  • Class Project 06 – Colours
Text & Fonts Advanced
  • Use Web safe fonts or iOS or Android specific fonts in Adobe XD
  • How to use Character Styles in Adobe XD
  • Font & Text tips tricks in Adobe XD
  • Adding our first Plugin Lorem Ipsum to Adobe XD
  • Creating realistic buttons in Adobe XD with paste properties
  • Class project 07 - Text & Buttons
  • Class Project 07 – Text & Buttons
Drawing
  • How to draw your own custom icons in Adobe XD
  • Working with stokes & lines in Adobe XD
  • Learn to drawing with the pen tool in Adobe XD
  • Drawing practise with the pen tool in Adobe XD
  • Production Video with some drawing tips
Working with Illustrator
  • Back and forth with Illustrator in Adobe XD
  • Class project 08 - Draw your own icons
  • Class project 08 - Draw your own icons
Working with InDesign
  • Working with InDesign in Adobe XD
Images
  • The pros & cons for working with images inside Adobe XD
  • Working with images and CC Library connection
  • Adobe Stock connection to find similar image for XD project
  • Free images to use in your XD mockups - Unsplash Pexels Freeimage
  • Masking & Opacity & Blurring background images
Working with Photoshop
  • Working with Photoshop in Adobe XD
  • Production Video – Infographic
  • Class project 09 - Full Hi Def mockup
  • Class project 09 - Full Hi Def mockup
APP Design
  • How to make a mobile phone mockup with Adobe XD & Photoshop
  • Class project 10 - Mobile Website
  • Class project 10 - Mobile APP/Website
Placeholder content & Plugins
  • Hidden features for Adobe XD Repeat Grid
  • Plugin - Content Generator in Adobe XD
  • Plugin - UI Faces adding random profile photos to XD
  • Plugin - PhotoSplash automatically import Unspash images
  • Plugin - Copy Cat or Mimic to style and images from a site
Asset Panel
  • Advanced Asset Panel tricks in Adobe XD
Symbol - Advanced
  • Advanced Symbol Tricks & Tips for Adobe XD