User Experience Design Essentials - Adobe XD UI UX Design

This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and
work all the way through, step by step.

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

Overview
Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn
Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry
professionals to product high quality & functional mockups. By the end of this course, you
will be able to produce practical and effective User Experience (UX) and User Interface (UI)
designs.
Throughout the course I’ll invite you to participate in a real-life freelance project which
I’m working on. It’s a project that requires a fresh website and mobile app interface. This
will prepare you for dealing with real world projects if you choose to move towards a
UX/UI career path.
This course is aimed at people interested in UI/UX Design. We’ll start from the very
beginning and work all the way through, step by step. If you already have some UI/UX
Design experience but want to get up to speed using Adobe XD then this course is perfect
for you too!
First, we will go over the differences between UX and UI Design. We will look at what our
brief for this real-world project is, then we will learn about low-fidelity wireframes and
how to make use of existing UI design kits.
I’ll go over all of the essential tools necessary for creating excellent wireframes,
including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups,
symbols and repeat grids. We will even make use of the new prototyping app so that you
can experience your prototype on your mobile device.
An important part of maximising your UX Design workflow is being able to utilise other
software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make
use of both to help boost your XD productivity.
One of the awesome new features of XD is micro-interactions. I’ll be teaching you all
about those and how to use them to grow icons and scenes. This is one of the parts of
web design that’s growing and being adopted rapidly so you won’t want to miss out on
learning it early.
There are two class projects for you to complete during this class, these will help develop
your skills and will give you something for your own portfolio.
It is now time to upgrade yourself & learn Adobe XD.
What are the requirements?
You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from
Adobe.
No previous design experience is needed.
No previous Adobe XD skills are needed.
What am I going to get from this course?
92 lectures of well-structured, step by step content.
 Learn to design websites & mobile phone apps.
Work with fonts & colors.
Prototype your designs with interactions.
Test on mobile phones.
Send your designs for feedback & commenting.
Export production ready assets.
Create your first UX brief & persona.
Create quick wireframes.
How to use premade UI kits.
Learn professional workflow tricks & shortcuts.
You will get the finished files so you never fall behind
Downloadable exercise files
Forum support from me and the rest of the BYOL crew
All the techniques used by UX professionals
What is the target audience?
This course is for beginners.
Aimed at people new to the world of design & user experience.
No previous Adobe XD experience is necessary.
For anyone that needs to add ‘UX Design’ to their portfolio.

Download free exercise files

https://www.bringyourownlaptop.com/exercise-files?
utm_source=Youtube&utm_medium=Description&utm_campaign=XD_Long