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