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 93

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. XD Course Updates New Features 2021
- 93. Conclusion for Adobe XD training course

Introduction

Comments

Contact Us
Bio
FAQ
All Courses
Resources

Powered by instructorHQ
Terms of use Privacy policy
© Bring your Own Laptop Ltd 2021