Autoplay
Autocomplete
Previous Lesson
Complete and Continue
The Complete 2021 Adobe XD UI UX Design Essentials Course
First Section
Introduction to the User Experience Course (2:53)
Getting started with your Adobe XD project (2:21)
What is UI vs UX - User Interface vs User Experience vs Product Designer (6:19)
Exercise Files - User Experience Design
Completed Files - User Experience Design
The Brief
The UX brief & persona for our real life project (11:22)
Wireframing Low Fidelity
Wireframing (low fidelity) in Adobe XD (1:58)
How wide should my website or app be in Adobe XD (13:06)
Working with existing UI kits in Adobe XD (7:49)
Type, Color & Icon Introduction
Working with type in your XD wireframes (9:09)
Basic Colors & buttons in Adobe XD wireframes (14:14)
Free icons for your Adobe XD & UX UI projects (11:45)
Adding footers & Lorem Ipsum to our XD wireframe (5:27)
New Pages & Artboards in Adobe XD (4:19)
Class Project 01 – Wireframe Homepage & Contact Us Page (11:11)
Prototyping a Website - Introduction
Prototyping & adding interactivity to Adobe XD (8:53)
How to create a Popup Modal or popup box in Adobe XD (7:57)
Class project 02 – Prototype (2:54)
Symbols & Repeat Grids
Working with groups & isolation mode in Adobe XD (2:29)
How to make & use symbols in Adobe XD (17:19)
Production Video - Left Nav (3:52)
Using the repeat grid in Adobe XD (5:27)
Updating symbols & problems with using repeat grids (8:54)
Prototype Trick to save time in Adobe XD (6:03)
Navigation tricks & tips in Adobe XD (4:48)
Class Project 03 - Symbols & Repeat Grids (4:07)
Prototyping a App - Introduction
Mocking up an App in Adobe XD (9:40)
How to use the XD App on iPhone & Android (8:04)
Adding iPhone & Android battery & status icons to mockup (3:10)
How to fixed the position of the nav or battery icons in XD (1:01)
Production Video - Login & Dashboard (6:45)
Wireframe Feedback
Sharing Wireframes for comments in Adobe XD (13:32)
Recording your interactions via video using Adobe XD (3:13)
Class project - Wireframe Feedback (1:21)
High Fidelity UI Design
Mood Boards & resources for Hi fidelity UI design in Adobe XD (7:43)
Class project - Mood Board (0:59)
How to create a 12 Column or Grid in Adobe XD 2018 (4:57)
Colors
Working with colors inside Adobe XD CC (9:02)
Tricks for using colors in Adobe XD (6:34)
How to create gradients in Adobe XD (3:50)
Class project 06 – Colors (2:14)
Text & Fonts Advanced
Use Web safe fonts or iOS or Android specific fonts in Adobe XD (18:00)
How to use Character Styles in Adobe XD (6:59)
Font & Text tips tricks in Adobe XD (5:43)
Adding our first Plugin Lorem Ipsum to Adobe XD (5:39)
Creating realistic buttons in Adobe XD with paste properties (13:15)
Class project 07 - Text & Buttons (2:21)
Drawing
How to draw your own custom icons in Adobe XD (4:13)
Working with stokes & lines in Adobe XD (14:28)
Learn to drawing with the pen tool in Adobe XD (14:34)
Drawing practise with the pen tool in Adobe XD (7:15)
Production Video with some drawing tips (12:27)
Working with Illustrator
Back and forth with Illustrator in Adobe XD (9:34)
Class project 08 - Draw your own icons (1:49)
Working with InDesign
Working with InDesign in Adobe XD (11:38)
Images
The pros & cons for working with images inside Adobe XD (3:58)
Working with images and CC Library connection (11:01)
Adobe Stock connection to find similar image for XD project (5:20)
Free images to use in your XD mockups - Unsplash Pexels Freeimage (1:48)
Masking & Opacity & Blurring background images (6:44)
Working with Photoshop
Working with Photoshop in Adobe XD (8:41)
Production Video – Infographic (12:12)
Class project 09 - Full Hi Def mockup (5:38)
APP Design
How to make a mobile phone mockup with Adobe XD & Photoshop (18:08)
Class project 10 - Mobile Website (1:24)
Placeholder content & Plugins
Hidden features for Adobe XD Repeat Grid (5:17)
Plugin - Content Generator in Adobe XD (4:29)
Plugin - UI Faces adding random profile photos to XD (3:15)
Plugin - PhotoSplash automatically import Unspash images (4:31)
Plugin - Copy Cat or Mimic to style and images from a site (3:19)
Asset Panel
Advanced Asset Panel tricks in Adobe XD (4:37)
Symbol - Advanced
Advanced Symbol Tricks & Tips for Adobe XD (7:52)
Micro Interactions
What are UI micro interactions in Adobe XD (7:21)
Button grow or full screen image micro interaction in Adobe XD (6:13)
Animated Image Gallery with micro interactions in Adobe XD (6:39)
Full vector change micro interaction in Adobe XD (8:19)
Class project 11 - Micro Interactions (5:12)
Prototyping Advanced
Time delay transitions in Adobe XD (4:42)
How to create a popup menu or modal in Adobe XD (12:16)
Animated mobile side nav for burger menu in Adobe XD (3:26)
How to make a working drop down menu in Adobe XD (3:24)
How to use the drag transition in Adobe XD (7:19)
How to make a number ticker scroll using masks in Adobe XD (6:51)
Voice Interactions
How to add Alexa style voice commands to Adobe XD (9:37)
User Testing
What is user testing in Adobe XD (16:53)
How to run an unmoderated UX User Test in Adobe XD (12:07)
Class project 12 - User Testing (2:23)
Pitching to clients & customers
Mocking up your designs in situ on a real phone in Photoshop (9:21)
Advanced micro interactions & prototyping with Protopie in Adobe XD (2:40)
How to add animation in Adobe XD using Adobe After Effects (9:39)
Exporting
How to export images & assets from Adobe XD for developers (12:56)
How to export code in XD for engineers using Design Specs (10:49)
What Next
Class Project 13 – Roar Cycles (10:29)
Conclusion for Adobe XD training course (6:11)
Button grow or full screen image micro interaction in Adobe XD
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock