Top 8 Recommended XD Self-Study Materials! [September 2023]

Are you excited to get into the world of UI/UX but you don't know where to start? This course will allow you to add UX designer to your CV & start getting paid for your new skills.

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.

• Aria: "This course is definitely above expectations so far. I didn't expect to get so much insight into the briefing and the communication between UX Designer and a client. It helps to see the brief and to learn that there are different tiers of income based on projects and experience. Love It!"

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.

• Kate: Excellent course - Dan is an excellent teacher and I thoroughly enjoyed following along with his videos. Highly recommend! July 2018: I have updated this review with an extra star because of how useful this course has been in the months following it's completion. I am using Adobe XD daily and Dan's instruction was instrumental to adding this feather to my front-end web development hat.

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.

• Leigh: "I really enjoyed this course. I was a UX designer before the course and was looking for more information on XD and getting to know the program itself better, and this course really nailed it! It has great UX references and a few refreshing perspectives. As well as it really helps you learn XD in the process. The instructor is engaging and fun to listen to. Really really great course. I highly recommend to any new UX designers, as well as veterans looking for a refresh, or just to learn how to use XD."

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.

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

Adobe XD is the next big thing in the design industry! Learn how to use it to create better designs, impress your work colleagues or your boss, start a new business, or charge more for your freelancing projects.

Note: Adobe XD doesn't work on Windows 7 or 8!

This training is perfect for people of all levels. It doesn't matter if you're a long-time Photoshop user, an Illustrator enthusiast or you're just getting started. Adobe XD will make you a better UI & UX designer. Here's what you'll learn:

• The fundamentals of Adobe XD - how to get up and running with it;

• How to use Adobe XD's advanced features;

• Design beautiful UI (user interface) projects: websites, mobile apps, presentations of all sorts;

• Learn how to apply UX (user experience) principles without getting overwhelmed by loads of theory;

• Create interactive prototypes that will impress clients;

• Help your clients make more money by making key design changes to their websites;

Who is this training program for?

• Anybody that wants to learn about the next big thing in the design world;

• People who are not happy with Photoshop's performance - it's so slow sometimes!

• Web designers who want to make more money from their projects;

• People who need to create sleek and professional presentations (forget PowerPoint!);

• App designers who want to quickly create iOS or Android apps;

• Developers who want a better handover process from designers;

• Project managers that need interactive prototypes done fast;

If you don't have a lot of time to learn about various design programs, then this is the best course for you! Adobe XD is easy to learn and you'll see how through fun exercises and activities, you'll become proficient in no time at all!

"Get great results as fast as possible!" - that's how I've created this course. We don't waste time with boring theory. We start with the absolute basics and we work our way up, gradually, step by step. This is beginner friendly, but in the later sections advanced users will have a lot to learn too!

Important Features Included:

• Course workbooks (cheat sheets): use them to get up and running fast. They contain answers to most questions, detailed explanations about certain techniques shown in the videos, and much more;

• Live chat: my students frequently find me on our Discord group chat. This is a free program where you can chat with my fantastic community of students, ask questions, and get help fast. I'm regularly on there!

• All the sources files are included (.xd files): this means you can easily work along and pick things up at any point

• Facebook group: get access to a private group of over 7000 people who regularly share their designs, insights, and comments.

1. Getting Started
2. Introduction
3. How to get the most out of this training
4. Download all the resources from the course
5. Get started with Adobe XD
6. Create your first design in Adobe XD
7. Adobe XD vs Photoshop
8. How to get around Adobe XD
9. Best way to select layers in XD
10. Exercise: Practice your selecting
11. From Photoshop or Illustrator to Adobe XD!
12. Cloud documents and saving your work
13. Adobe XD quirks
14. Section conclusions
15. Adobe XD's tools and features
16. Introduction
17. How to work with rectangles like a pro
18. Best way to work with images
19. How to design a modern presentation
20. Use the ellipse, polygon and line tools
21. How to edit shapes in Adobe XD
22. Discover the Pen tool in XD
23. Create geometric shapes
24. Add text to our presentation
25. Work with colors and gradients
26. Grids, guides, smart guides – pixel perfect designs
27. The alignment tools - Overview
28. How to use the alignment tools
29. Create a collage
30. Let’s have fun – use all the tools
31. Section conclusions
32. Saving and exporting your work
33. Export our work as PNGs
34. Share your work to get feedback
35. Optional - Save presentations as PDFs
36. Share your work with developers
37. Shrink your PNGs and JPEGs without losing quality
38. Adobe XD advanced features
39. Introduction
40. Fast designing with repeat grid
41. Quickly replace content
42. Components – a revolutionary feature
43. Practice working with components
44. Why we need to talk about style guides
45. How to supercharge your color use
46. How to work with character styles
47. Here’s how you actually set up your assets panel
48. A smarter way to work with linked assets
49. Undecided? Keep multiple versions!
50. Working with several designers AT ONCE
51. Section conclusion
52. First web design project
53. Introduction to our first web design project
54. Create the website’s header
55. My advice for perfect social media icons
56. Setting our typography
57. Adding the search bar
58. The website’s categories
59. Build the content area with repeat grid
60. Pagination through XD components
61. Create the footer
62. Overview of the homepage
63. Create the product details page
64. Finishing touches on the product details page
65. Responsive design
66. What is responsive design?
67. Designing without coding: why and how?
68. Making the mobile version of the homepage
69. Adjusting the design for the mobile version
70. Editing the footer for the mobile version
71. Create the mobile version for the product details page
72. Design variation #1 - color
73. Design variation #2 – typography
74. Design variation #3 – the layout
75. Key things about our design
76. Make the design interactive (prototyping)
77. Introduction to prototyping
78. The fundamentals of wiring a prototype
79. Trigger types in Adobe XD
80. Transition Animations and Easing
81. Auto-animate – the incredible game changer
82. Auto-animate and drag
83. Previous artboard – a must in any large project
84. How to make menus and pop ups seem real
85. Jump to a part of your design with “Scroll To”
86. Here’s why your animations don’t matter
87. Advanced Prototyping
88. Here’s why we should animate our design
89. What you should and shouldn’t animate
90. Create hover states for social media & main menu
91. Prototyping the search box – hover and down state + drop-down
92. Create a hover state for the repeat grid
93. Setting up the pagination and footer
94. How to quickly change your layout with stacks
95. Extras: Make the navigation work
96. The First Key to Becoming a Great Web Designer
97. The first pillar of web design
98. Best settings for a web design project
99. Case study: Non-standard layouts
100. Exercise: Create a standard website layout
101. How to size your web elements correctly
102. My formula for perfect text
103. Case study: text layers
104. Color Contrast
105. Case study: Colors – Part 1
106. Case study: Colors – Part 2
107. How to align elements in the hero area
108. 3 rules for web design icons
109. Case Study: Visual Balance
110. Thoughts on the first pillar of web design
111. The Second Key to Becoming a Great Web Designer
112. Introduction
113. What’s the point of the website?
114. The user versus the business owner
115. Analytics in Web Design
116. Templates & Website Builders – The web designer’s death?
117. Case Study: 4 versions of the same website
118. E-commerce homepage layout
119. E-commerce product details
120. E-commerce checkout
121. Why aren’t websites pixel perfect?
122. Landing page vs a website
123. Case studies: the client’s needs
124. Lead generation in landing pages
125. Why landing pages have a bad reputation
126. Digital product landing page
127. A/B testing landing pages
128. Case Study: Landing page analysis
129. Final thoughts about the client’s needs
130. The Third Key to Becoming A Great Web Designer
131. Introduction
132. What's UX?
133. Improve the checkout process to double sales
134. Improve the mobile version to double sales
135. 7 website tweaks that show attention to detail
136. Upgrading the mobile product page
137. Doing 1-on-1 sessions with a coder
138. Bad UX is very expensive
139. The best example of good UX and attention to detail
140. UX case study – forms
141. UX case study – icons
142. UX case study – vague actions
143. UX case study – hierarchy
144. UX case study – fake content
145. UX case study – buttons
146. Complete Responsive Website Design Project
147. Download all the resources here
148. The most important question when starting a new project
149. How to research/find inspiration for your project
150. Set up the most important part of the layout
151. Create the top bar
152. How to choose fonts for your project
153. How to choose beautiful colors
154. Organize the top bar
155. Create the structure for the header
156. Set a style for the header
157. Attention to detail in the header
158. Building a great hero area
159. Redesign the categories menu
160. How to display all the product details in a grid
161. Here’s how you find the best layout for the grid of products
162. Create the first version of the product card
163. The second version of the product card
164. The third version of the product card
165. How to design a clean and modern FAQ section
166. Create a newsletter sign up form
167. How to design a beautiful footer
168. Final variation and thoughts about the homepage
169. DOWNLOAD THE FINAL PROJECT HERE
170. How To Create Interior Pages
171. Analysing how we can improve the product page
172. Setting up the layout for the top part of the product page
173. How to organize lots of information in the product’s page
174. How to add small details that make a difference
175. How to handle large quantities of text
176. Creating the sidebar
177. How to Create A Responsive Design
178. Introduction to the mobile version
179. How to start the mobile version for the homepage
180. How to adjust the top bar for the mobile version
181. Here’s how you create the header for the mobile version
182. Modify the hero area & categories for the mobile version
183. Improve the navigation for the mobile experience
184. Create a grid of products suited for the mobile version
185. Finishing the grid of products – mobile version
186. Make the text easy to read in the FAQ section
187. How to make the newsletter form fit the mobile version
188. Make a new layout for the footer
189. Conclusions: e-commerce mobile version
190. Responsive Design for Interior Pages
191. The mobile version for the product’s page
192. Create the mobile structure for the product’s page
193. How to style items in terms of their importance
194. Create a variation to improve sales
195. 10% more work for 50% better results
196. Create another layout for the product’s page
197. Make a smarter structure for the mobile version
198. Create the reviews and nutritional tabs
199. Adding small details that matter
200. Checking the design on a real phone

This course is constantly being revised and updated with new lessons.

Learn UI/UX design with Adobe XD!

Design like a pro!

Have you ever wanted to design your own app, website or blog? These days, we use them without a second thought. They have become an integral part of both the human experience and the financial market. It’s easy to come up with a new idea for a viral new app, but not as easy to make that app a reality - or so you might think. That’s where Adobe XD comes in. Adobe XD is an essential and collaborative UI/ UX design tool that can help you design a wide range of interfaces in great detail - and we’re here to teach you how.

In this course, you’re going to learn everything about user interface design with Adobe XD. Step-by-step, we’ll cover everything you need to know from opening the program for the very first time to finalising your finished design. You’ll learn all of the tools, as well as how and when to use them. We’ll also cover everything you’ll need to be able to collaborate with other web developers easily through its collaborative feature. During the course, you will learn about the principles of User Interface Design in order to design with purpose, as well as the principles of Human-Computer Interaction. Finally, we’ll teach you how to adapt to specific project requirements, as well as how to wireframe in order to turn your design into a functional prototype.

Our instructors have years of experience not only in UI/UX design, but also in teaching, and the expertly-crafted syllabus is designed to be easy to follow and thorough. We’ve even included plenty of examples explained and designed on-screen for you to study. That’s why this is the only Adobe XD course you’ll ever need to design professional apps, websites and blogs!

Start designing today!

After taking this course you’ll be able to:

• Use Adobe XD professionally

• Create prototypes and receive feedback on it very flexibly

• Achieve an understanding of the process, purpose, and tools of prototype design

• Understand the principles of User Interface Design in order to design with purpose

• Learn the basics of Human-Computer Interaction

• Discover the standard tools in User Interface

• Adapt to specific project deliverables in User Interface

• Make your own app and website designs

1. Introduction
2. Welcome to the Course + UI Overview
3. User Research and User Needs
4. UI Principles
5. Wireframing
6. Building a Wireframe
7. Designing a Wireframe
8. Drafting
9. Look-through into the Start Screen
10. Exploring the interface of Adobe XD
11. Menu Settings
12. Tools Panel
13. Properties Panel
14. Using UI Templates
15. Assets Panel
16. Understanding the Layers Panel
17. Designing
18. Creating Symbols and Icons
19. Using Grids, Artboards and Repeat Grids
20. Masking Images
21. Working with Color and Creating a Color Palette
22. Adding and Formatting Text
23. Designing a Login Screen
24. Background Blurs
25. Designing a Slide Out Menu
26. Exercise and Application
27. Prototyping
28. Prototype Panel
29. Prototyping Ready Designs
30. Testing Prototypes
31. Sharing Prototypes
32. Using Device and Desktop Preview
33. Commenting and Previewing Prototypes
34. Application
35. Creating a User Journey
36. Creating a user Flow Diagram
37. App Scenario Pt.1
38. App Scenario Pt.2
39. Website Scenario Pt.1
40. Website Scenario Pt.2
41. Real Life Examples Pt.1
42. Real Life Examples Pt.2
43. Real Life Examples Pt.3
44. Real Life Examples Pt.4
45. Keep Learning
46. Smartwatch Interface Design
47. Content Creation
48. Plugins
49. Website Animations
50. Last Words

In this course, you'll learn how to create beautiful mobile & web user interfaces that you can then turn into real usable prototypes with the help of Adobe XD.

Adobe XD is a vector-based user experience design tool for web apps and mobile apps, developed by Adobe Inc. It's available for macOS and Windows.

In this course, we'll work with a fictional client called Healthy Bites to design a mobile app and a landing page for their food ordering app.

Is this course for you?

You're in the right place if any of these apply to you:

• You’re interested in user interface & user experience design (UI/UX) but not sure where to start.

• You’re an entrepreneur with an app idea and want to turn your idea from a sketch to a realistic mockup and prototype.

• You want to brush up your design skills to get the job that you want at companies like Airbnb, Google, Apple, etc.

• You’re already designing and want to jump into Adobe XD and further your knowledge of more design software.

• You’re interested in earning income as a freelance designer.

• You simply want to enter a new career path, and graphic design has interested you.

By the end of this course:

You will learn many useful design tools available in XD and how to design complete mobile apps and landing pages from scratch. You will also gain the skill to turn your designs into usable prototypes that you can share with your team members, colleagues, or clients.

What do I need?

This course is for both beginners & experienced designers looking to expand their skills.
All you need is a computer (macOS or Windows), an Adobe Account, and a web browser (to Install Adobe Creative Cloud).

About your instructor:

This course is taught by entrepreneur & designer Nima Tahami. Nima has more than 12 years of experience designing and developing dozens of mobile apps and web apps for both clients and startups of his own. Nima's latest startup, ShiftRide, has been covered in many news outlets, including Forbes, where his app was highlighted for its ease of use.

Nima has created this course to help people become the best designer they can be. Design is part of the foundation of many things from great products & websites to great advertisements and everything in between. Nima has also designed and developed an open-source iPhone development library by the name of FCAlertView, helping 350,000+ app developers use beautiful customizable alert prompts within their applications.

Course Overview:

The course is broken down into 4 main parts: Getting Introduced to Adobe XD, Designing a Full Mobile Mockup, Creating a Usable Prototype, and Designing a Landing Page.

Getting Introduced to Adobe XD:

• Installing Adobe XD and Creating Files.

• Understanding the layout and menu options.

• Creating shapes, lines, paths, and text.

• Aligning & distributing objects.

• Using Wireframe UI Kits.

Designing a Full Mobile Mockup:

• Introducing a food ordering app project called Healthy Bites.

• Creating wireframes from our app requirements.

• Designing the pages required for the app.

• Designing cards and inputting sample data.

• Using repeat grid & stacks.

• Using components to reuse objects.

• Using plugins to speed up our design process.

• Using responsive resize to create designs.

• Exporting and sharing our designs.

• Developer handoff

Creating a Usable Prototype:

• Adding interactivity to our designs and turning them into a prototype.

• Creating scrollable pages.

• Previewing our app on the desktop.

• Browsing our prototype on our mobile devices.

• Recording and sharing prototypes

• Adding animations to our prototypes.

  
  

Designing a Landing Page:

• Designing a landing page with multiple sections

• Creating beautiful backgrounds

• Adding images & text to our landing page

  
  

So what are you waiting for?

Let’s get started learning how to design real-world projects using Adobe XD and take our design skills to a whole new level together.

1. Introduction
2. Intro to Course
3. Getting Started with Adobe XD
4. What is Adobe XD?
5. How to Install Adobe XD
6. Managing Your Adobe Account
7. The File Browser
8. The Layout
9. The Menu Options
10. Shortcuts
11. Exploring Adobe XD
12. Creating Shapes
13. Shapes Exercise Solution
14. Drawing Lines
15. Using the Pen Tool
16. Boolean Options
17. Boolean Options Exercise Solution
18. Adding Text
19. Grouping Objects
20. Grids
21. Alignment & Distribution
22. Wireframe UI Kits
23. Zoom Shortcuts
24. Designing Our Mobile App
25. Project Introduction
26. Getting Inspiration
27. App Requirements
28. Drawing Our Wireframes
29. Completing Our Wireframes
30. Creating Our XD File
31. Splash Screen
32. Adding and Masking Images
33. Login Page
34. Phone Verification Page
35. Organizing Our Artboards
36. Using a Navigation Bar
37. Creating Card Views
38. Polishing Our Card View
39. Inputting Sample Data
40. Completing Our Main Page
41. Using Components
42. Converting Our Buttons to Components
43. Components Exercise Solution
44. Menu Item Cards
45. Creating a Counter Button Component
46. Using Stacks
47. Completing Our Menu Page
48. Completing Our Mobile App Design
49. UX Resources
50. Designing a Logo
51. Placing Our Logo
52. Creating a Color Scheme
53. Applying our Color Style
54. Gradients
55. Setting up a Character Style
56. Applying Our Character Styles
57. Order Page
58. Component Variation
59. Order Progress Page
60. Exercise Solution
61. Adding Blurs
62. Adding Shadows
63. Shadow Exercise
64. Profile Page
65. Adding Icons
66. Payment Page
67. Designing a Payment Detail Page
68. Location Page
69. Using Plugins
70. Finishing Our Location Page
71. Past Orders Page
72. Adding Sample Data with Google Sheets
73. Polishing Up our Designs
74. Responsive Resize
75. Responsive Resize Exercise
76. Exporting and Sharing
77. Select Export
78. Batch Export
79. Exporting Our Artboards
80. Sharing Artboards
81. Developer Handoff
82. Inviting Editors
83. Document History
84. Sharing Libraries
85. Importing Sketch Files
86. Prototyping
87. What's Prototyping?
88. Creating a Transition
89. Connecting Our Pages
90. Vertical Scrolling
91. Creating Component Connections
92. Creating Overlays
93. Using Auto-Animate
94. Completing Our Prototype
95. Mobile Device Preview
96. Sharing Prototypes
97. Multiple Flows
98. Lottie Animation
99. Adding a Delivery Animation
100. Adding Videos
101. Website Design
102. Landing Page Requirements
103. Wireframing the Landing Page
104. Navigation Bar
105. Header Section
106. Mobile App Section
107. Restaurant Section
108. Contact Us Section
109. Applying our Color Scheme
110. Adding a Custom Font
111. Adding Blobs & Illustrations
112. Polishing it Up
113. Creating a Prototype
114. Recording our Prototype
115. Conclusion
116. Conclusion

Hi everyone welcome to Adobe XD mega course.

Before I jump into the details of the course I want to quickly tell what adobe xd is used for.

Adobe XD is a simple easy to use application dedicated to UI UX design we can call it user interface or user? basically, we use adobe xd to design mobile apps and websites

Just like our other mega courses this course is designed to take you from absolute beginner to advanced level in UI design.

This course is divided into 4 main parts, basics of design mode, basics of prototype mode, advanced technique and finally working with real projects.

In the design mode basics. We will start with downloading Adobe XD and installing then we will open it for the first time.

I will show you how to work with artboards, shape tools line tools, I will teach you how to use text tools, how to use images easily and effectively. After that, we will cover alignment tools and boolean operations. Then I will show you how to work with components and assets inside XD. later, we will cover a very exciting feature in XD which is a repeat grid. After that, we will cover responsive resize I will show how to use it and how to get an advantage from it for your designs. The last thing we will cover some free Plugins, we will cover the most useful ones. When you finish this part you will have a complete understanding of Adobe XD design tools, you will be ready to use what you have learnt to create some professional design. Together we are going to design two screens of a finance app, we will use all that we learnt in the design mode basics part.

After we covered and practised everything about design mode we will move to the prototype model. We will start with the basics and then we will cover all of the tools and settings in the prototype mode. We will cover time transition, component states, scrolling groups, overly animation, drag animation, sound, voice and keyboard triggers and much more. At the end we will cover an exciting prototype feature which is auto animate, we are going to animate the design we made in the design part with auto animate.

After we covered both design and prototype mode we will cover some advanced techniques. Like 3D transform and animation, Glassmorphisms, input prototype, scroll number scroll colours.

At the end of the course, we are going to create two projects together, the first one is a website homepage for a financial company, we will create it from scratch, we will start with the brainstorming and written form then we will design and prototype it.

The second project will be an e-commerce app, we will start this one from the brainstorming to the design and then to prototyping.

After you finish this course you will have a full understanding of Ui design and Adobe XD. You will be ready to use Adobe XD effectively and professionally. You will be ready to start your carrier with UI design.

1. Introduction
2. Introduction
3. Facebook Group
4. Difference between UI and UX designer
5. Basics Of XD Design Mode
6. Basics - Design Mode
7. Download Adobe XD, First time opening it
8. Working with Artboards
9. Working with Shapes and Lines
10. Working With Text
11. Working With Images
12. Alignment Tools & Boolean Operations
13. Assets & Components
14. Repeat Grid
15. Responsive Resize
16. Plugins
17. Design Mode Homework
18. Finance App Homework
19. Background and Credit Card Design
20. Buttons And The Rest Of The Screen Design
21. Second Screen Design
22. Basics of XD Prototype Mode
23. Everything About Prototyping
24. Basics and Time Transition
25. Component States
26. Overlay, Scroll and Drag Prototype
27. Voice, Sound, Gamepad Key Prototype
28. Auto Animate
29. Prototype Homework
30. Some Advanced Techniques
31. Some Advanced Techniques
32. Color & Number Scroll Effect
33. Character Input Prototype
34. Glassmorphism
35. 3D Transform and Prototype
36. Advanced Section Homework
37. Wallet X Website Design
38. Wallet X Website UI
39. Menu Bar and BG
40. Landing Page P1
41. Landing Page P2
42. Benefits
43. Credit Card And More
44. Prototype
45. E- Commerce Mobile App
46. E Commerce App
47. Onboarding screen design
48. Login and Signup Screen Design
49. Nike Home Screen Design P1
50. Nike Home Screen Design P2
51. Puma & Adidas Home Screen Design
52. Single Product Preview Design
53. Favourite Screen Design
54. Profile Screen Design
55. My Cart Screen Design
56. Search Screen Design
57. Prototype - Onboarding, Sign in & Sign up
58. Prototype - Scrolling Effect
59. Prototype - Single Product Preview
60. Prototype - Between Nike, Adidas and Puma Screens
61. Prototype - Favorites Screen
62. Prototype - Profile Screen
63. Prototype - My Cart Screen
64. Prototype - Search And Finalize
65. Prototype - Running your App on Mobile
66. End
67. End