UI / UX

course structure

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

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 and 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

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 and 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

Prototyping a Website -Introduction

  • Prototyping & adding interactivity to Adobe XD

  • How to create a Popup Modal or popup box in Adobe XD

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

Prototyping a Website -Introduction

  • Prototyping & adding interactivity to Adobe XD

  • How to create a Popup Modal or popup box in Adobe XD

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

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

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

High Fidelity UI Design

  • Mood Boards & resources for Hi fidelity UI design in Adobe XD

  • 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

High Fidelity UI Design

  • Mood Boards & resources for Hi fidelity UI design in Adobe XD

  • 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

Text and 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

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 practice with the pen tool in Adobe XD

  • Production Video with some drawing tips

Text and 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

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 practice with the pen tool in Adobe XD

  • Production Video with some drawing tips

Working with Illustrator

  • Back and forth with Illustrator in Adobe XD

Working with InDesign

  • Working with InDesign in Adobe XD

Working with Illustrator

  • Back and forth with Illustrator in Adobe XD

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

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

App Design

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

Placeholder content and 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

App Design

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

Placeholder content and 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

Asset Panel

  • Advanced Asset Panel tricks in Adobe XD

Symbol-Advanced

  • Advanced Symbol Tricks & Tips for Adobe XD

Micro Interactions

  • What are UI micro interactions in Adobe XD

  • Button grow or full screen image micro interaction in Adobe XD

  • Animated Image Gallery with micro interactions in Adobe XD

  • Full vector change micro interaction in Adobe XD

Prototyping Advanced

  • Time delay transitions in Adobe XD

  • How to create a popup menu or modal in Adobe XD

  • Animated mobile side nav for burger menu in Adobe XD

  • How to make a working drop down menu in Adobe XD

  • How to use the drag transition in Adobe XD

  • How to make a number ticker scroll using masks in Adobe XD

Micro Interactions

  • What are UI micro interactions in Adobe XD

  • Button grow or full screen image micro interaction in Adobe XD

  • Animated Image Gallery with micro interactions in Adobe XD

  • Full vector change micro interaction in Adobe XD

Prototyping Advanced

  • Time delay transitions in Adobe XD

  • How to create a popup menu or modal in Adobe XD

  • Animated mobile side nav for burger menu in Adobe XD

  • How to make a working drop down menu in Adobe XD

  • How to use the drag transition in Adobe XD

  • How to make a number ticker scroll using masks in Adobe XD

Voice Interactions

  • How to add Alexa style voice commands to Adobe XD

User Testing

  • What is user testing in Adobe XD

  • How to run an unmoderated UX User Test in Adobe XD

Voice Interactions

  • How to add Alexa style voice commands to Adobe XD

User Testing

  • What is user testing in Adobe XD

  • How to run an unmoderated UX User Test in Adobe XD

Pitching to clients & Customers

  • Mocking up your designs in situ on a real phone in Photoshop

  • Advanced micro interactions & prototyping with Protopie in Adobe XD

  • How to add animation in Adobe XD using Adobe After Effects

Exporting

  • How to export images & assets from Adobe XD for developers

  • How to export code in XD for engineers using Design Specs

Pitching to clients & Customers

  • Mocking up your designs in situ on a real phone in Photoshop

  • Advanced micro interactions & prototyping with Protopie in Adobe XD

  • How to add animation in Adobe XD using Adobe After Effects

Exporting

  • How to export images & assets from Adobe XD for developers

  • How to export code in XD for engineers using Design Specs

What Next?

  • Conclusion for Adobe XD training course

What Next?

  • Conclusion for Adobe XD training course

Jump start your career in UI / UX

Get industry ready resources right in your inbox!

Get industry ready resources right in your inbox!