This lesson is exclusive to members

Previous Next

User Experience Design Essentials - Adobe XD UI UX Design

Class Project 15 - Micro interaction

Daniel Walter Scott

Download Exercise Files

Contents

Getting Started
- 1. Introduction to Adobe XD Essentials training course FREE
- 2. Getting started with your Adobe XD project FREE
- 3. How to earn your certificate FREE
- 4. What is Adobe XD for & does it do the coding
- 5. What's the difference between UI and UX in Adobe XD
- 6. What we are making in this Adobe XD course
- 7. What is a persona & task flow in UX design
- 8. Class Project 01 - Create your own brief FREE
Wireframing Low Fidelity
- 9. What is Lo Fi Wireframe vs High Fidelity in Adobe XD
- 10. Artboards & how wide should my website or app be in Adobe XD
- 11. Quiz question 1
Type, Color & Icon Introduction
- 12. Working with Type in Adobe XD wireframes
- 13. Rectangles, Circles, Buttons and Rounded corners in Adobe XD
- 14. Quiz question 2
- 15. How to use color in Adobe XD FREE
- 16. Strokes & copy & paste appearance in Adobe XD
- 17. Quiz question 3
- 18. Quiz question 4
- 19. Class Project 02 - Wireframe
- 20. Free icons for your Adobe XD & UX UI projects FREE
- 21. Quiz question 5
- 22. How to find and use existing UI kits in Adobe XD
- 23. Groups & issues editing icons in Adobe XD
- 24. Class Project 03 - Icons
Prototyping - Level 1
- 25. How to add interaction to your prototype in Adobe XD
- 26. Quiz question 6
- 27. Quiz question 7
- 28. Prototype animation & easing in Adobe XD
- 29. Quiz question 8
- 30. How see your design on XD App on iPhone & Android
- 31. Class Project 04 - Testing on your phone
Animation
- 32. Getting started with auto-animations in Adobe XD FREE
- 33. Quiz question 9
- 34. Understanding more about animation in Adobe XD
- 35. Quiz question 10
- 36. Class Project 05 - My first animation
Feedback & Commenting
- 37. Sharing Wireframes for comments in Adobe XD
- 38. Quiz question 11
Moodboard - High Fidelity UI Design
- 39. Mood Boards & resources for Hi fidelity UI design in Adobe XD
- 40. How to create a mood board in Adobe XD
- 41. Class project 06 - Mood Board
Columns & Grids
- 42. How to work with Columns & Grids in Adobe XD FREE
- 43. Quiz question 12
- 44. Quiz question 13
- 45. View port aka dotted line on the page in Adobe XD
- 46. Quiz question 14
- 47. How to add & delete guides to Adobe XD
- 48. Quiz question 15
Colors
- 49. Color Inspiration & the eyedropper in XD
- 50. How to create a color palette in Adobe XD
- 51. How to create gradients in Adobe XD
- 52. Quiz question 16
- 53. How to save and reused color swatches in Adobe XD
- 54. Class Project 07 - Colors & Columns
Text & Fonts - Level 2
- 55. What fonts can I use in my web or app design in Adobe XD
- 56. Check what other font’s people have used FREE
- 57. What common font sizes should I choose in web design
- 58. How to make Character Styles in Adobe XD
- 59. Quiz question 17
- 60. Plugin - Adding our first Plugin Lorem Ipsum to Adobe XD
- 61. Class project 08 - Text
Drawing
- 62. Drawing & editing shapes in Adobe XD
- 63. Strangeness with shapes in Adobe XD
- 64. Learn to draw with the pen tool in Adobe XD
- 65. Quiz question 18
- 66. Quiz question 19
- 67. Working with strokes & lines in Adobe XD
- 68. Class Project 09 - Icons & Buttons
Working with Illustrator
- 69. Do I need to know Illustrator with Adobe XD
Images
- 70. Masking & cropping images in Adobe XD FREE
- 71. Quiz question 20
- 72. Free images to use in your XD mockups - Unsplash Pexels Freeimage
- 73. Darkening background images with opacity in XD
- 74. Quiz question 21
- 75. Blurring backgrounds and objects in Adobe XD FREE
Working with Photoshop
- 76. Do I need to know Photoshop with Adobe XD
- 77. Snack bar Toast banners using masked image in Adobe XD
- 78. Class Project 10 - Add images
Components & Instances
- 79. How to make & use components in Adobe XD
- 80. Quiz question 22
- 81. Quiz question 23
- 82. Difference between Main & Instance Components in Adobe XD
- 83. Quiz question 24
- 84. How to create component hover states in XD
- 85. Quiz question 25
- 86. Class Project 11 - Buttons
Repeat Grids
- 87. How to use the repeat grid in Adobe XD
- 88. Class Project 12 - Repeat Grid
- 89. Updating & issues with repeat grids of the edge FREE
- 90. Quiz question 26
Stacks
- 91. How to use stacks in XD to make a form
- 92. Quiz question 27
- 93. Class Project 13 - Stacks & Checkout Page
Micro Interactions & Animations
- 94. The difference between animation & micro interactions
- 95. Dan drawing stuff in Adobe XD
- 96. More animation in Adobe XD
- 97. Quiz question 28
- 98. Class Project 14 - My Second Animation
- 99. Micro interaction toggle switch in Adobe XD
- 100. Quiz question 29
- 101. Micro interaction burger menu turned into a cross in XD FREE
- 102. Class Project 15 - Micro interaction
Prototyping Level 2
- 103. How to pin navigation to the top in Adobe XD
- 104. Quiz question 30
- 105. How to create a Popup Modal or popup box in Adobe XD FREE
- 106. Quiz question 31
- 107. Quiz question 32
- 108. Slide in mobile nav menu overlay in Adobe XD
- 109. Class Project 16 - Popup & Navigation
- 110. What are Flows in Adobe XD
Exporting
- 111. How to share your document with clients & stakeholders & user testers
- 112. Talking to your developer early in the XD design process
- 113. Export the right image file formats from Adobe XD
- 114. Batch export images at once using Mark for Export in XD
- 115. How to export code in XD for engineers using Design Specs
- 116. What is a style guide in Adobe XD
- 117. Class Project 17 - Final Design
What Next
- 118. Whats next after Adobe XD Essentials FREE
- 119. How to request your certificate FREE

Comments

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