Welcome! Start learning now. Cancel anytime

Sign Up

Please subscribe to watch this video

Previous Next

User Experience Design Essentials - Adobe XD UI UX Design

Working with Photoshop in Adobe XD

Daniel Walter Scott || VIDEO: 59 of 92

LOGIN or SIGN UP to watch this video Sign Up to Download Exercise Files

Contents

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

Comments

Overview