Autoplay
Autocomplete
Previous Lesson
Complete and Continue
User Experience Design Essentials - Adobe XD UI UX Design 2022
Getting Started
Introduction to Adobe XD Essentials training course (2:14)
Getting started with your Adobe XD project (2:26)
What is Adobe XD for & does it do the coding (5:31)
What's the difference between UI and UX in Adobe XD (3:32)
What we are making in this Adobe XD course (1:11)
What is a persona & task flow in UX design (11:26)
Class Project 01 - Create your own brief (3:24)
Wireframing Low Fidelity
What is Lo Fi Wireframe vs High Fidelity in Adobe XD (2:55)
Artboards & how wide should my website or app be in Adobe XD (9:38)
Type, Color & Icon Introduction
Working with type in your XD wireframes (11:25)
Rectangles, Circles, Buttons and Rounded corners in Adobe XD (8:25)
How to use color in Adobe XD (6:16)
Strokes & copy & paste appearance in Adobe XD (11:55)
Class Project 02 - Wireframe (4:10)
Free icons for your Adobe XD & UX UI projects (7:58)
How to find and use existing UI kits in Adobe XD (7:15)
Groups & issues editing icons in Adobe XD (15:48)
Class Project 03 - Icons (5:13)
Prototyping - Level 1
How to add interaction to your prototype in Adobe XD (7:28)
Prototype animation & easing in Adobe XD (6:10)
How see your design on XD App on iPhone & Android (10:21)
Class Project 04 - Testing on your phone (5:12)
Animation
Getting started with auto-animations in Adobe XD (11:17)
Understanding more about animation in Adobe XD (9:55)
Class Project 05 - My first animation (4:58)
Feedback & Commenting
Sharing Wireframes for comments in Adobe XD (7:09)
Moodboard - High Fidelity UI Design
Mood Boards & resources for Hi fidelity UI design in Adobe XD (8:20)
How to create a mood board in Adobe XD (7:47)
Class project - Mood Board (1:41)
How to work with Columns & Grids in Adobe XD (15:19)
Columns & Grids
View port aka dotted line on the page in Adobe XD (4:05)
How to add & delete guides to Adobe XD (4:26)
Colors
Color Inspiration & the eyedropper in XD (7:10)
How to create a color palette in Adobe XD (10:43)
How to create gradients in Adobe XD (5:10)
Class Project 07 - Colors & Columns (3:31)
How to save and reused color swatches in Adobe XD (3:17)
Text & Fonts - Level 2
What fonts can I use in my web or app design in Adobe XD (12:17)
Check what other font’s people have used (3:28)
What common font sizes should I choose in web design (6:11)
How to make Character Styles in Adobe XD (16:17)
Plugin - Adding our first Plugin Lorem Ipsum to Adobe XD (5:19)
Class project 08 - Text (5:01)
Drawing
Drawing & editing shapes in Adobe XD (5:51)
Strangeness with shapes in Adobe XD (5:12)
Learn to draw with the pen tool in Adobe XD (8:41)
Working with stokes & lines in Adobe XD (6:02)
Class Project 09 - Icons & Buttons (7:22)
Working with Illustrator
Do I need to know Illustrator with Adobe XD (10:06)
Images
Masking & cropping images in Adobe XD (4:36)
Free images to use in your XD mockups - Unsplash Pexels Freeimage (2:53)
Darkening background images with opacity in XD (3:40)
Blurring backgrounds and objects in Adobe XD (5:30)
Working with Photoshop
Do I need to know Photoshop with Adobe XD (10:29)
Snack bar Toast banners using masked image in Adobe XD (5:56)
Class Project 10 - Add images (1:58)
Components & Instances
How to make & use components in Adobe XD (6:35)
Difference between Main & Instance Components in Adobe XD (12:49)
How to create component hover states in XD (7:48)
Class Project 11 - Buttons (5:08)
Repeat Grids
How to use the repeat grid in Adobe XD (6:58)
Class Project 12 - Repeat Grid (7:12)
Updating & issues with repeat grids of the edge (3:02)
Stacks
How to use stacks in XD to make a form (11:23)
Class Project 13 - Stacks & Checkout Page (1:40)
Micro Interactions & Animations
The difference between animation & micro interactions (6:19)
Dan drawing stuff in Adobe XD (6:54)
More animation in Adobe XD (10:43)
Class Project - My Second Animation (1:44)
Micro interaction toggle switch in Adobe XD (10:27)
Micro interaction burger menu turned into a cross in XD (3:02)
Class Project 15 - Micro interaction (2:14)
Prototyping Level 2
How to pin navigation to the top in Adobe XD (7:18)
How to add a popup overlay modal in Adobe XD (8:27)
Slide in mobile nav menu overlay in Adobe XD (10:42)
Class Project 16 - Popup & Navigation (3:22)
What are Flows in Adobe XD (3:17)
Exporting
How to share your document with clients & stakeholders & user testers (12:34)
Talking to your developer early in the XD design process (4:54)
Export the right image file formats from Adobe XD (17:09)
Batch export images at once using Mark for Export in XD (5:23)
How to export code in XD for engineers using Design Specs (6:42)
What is a style guide in Adobe XD (11:43)
Class Project 17 - Final Design (3:13)
What Next
Whats next after Adobe XD Essentials (5:06)
How to add a popup overlay modal in Adobe XD
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock