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