Top 8 Recommended XD Self-Study Materials! [November 2024]

Would you like to know how to quickly design websites and apps with Adobe XD? Learn about the process, theory, techniques and test your skills by working on the class project!

Join Martin Perhiniak (Graphic Designer and Adobe Certified Instructor) and learn his workflow and best practices he developed over 20 years working as a creative professional for clients like BBC, Mattel, IKEA, Google, Pixar, Adobe.

In this class you'll learn:

• Designing a mobile app prototype with multiple screens

• Creating engaging interactions for both desktop and touch screens

• Designing navigational menus

• Designing a website prototype

• Implementing parallax scrolling effect to your prototype

Who this class is for?

• Anyone planning to become a Graphic Designer, Web Designer or User Interface designer

• Creatives aiming to improve their technical skills and understanding of design theory

• You don't need to be a creative professional to take the class

What you will need?

• Adobe Creative Cloud

• Desire to make something awesome

Create an engaging, eye-catching website and mobile app prototype for a product or brand.

Even if you’re new to designing apps and websites or using Adobe applications, you’ll find the simple and effective techniques discussed in this course easy to use and apply to your work!

1. Introduction
2. Introduction App and Web Design
3. App Design
4. Overview of the App Design
5. Welcome screen
6. Creating the profile screen
7. Interactions for the profile screen
8. Buttons and background for the profile screen
9. Toggle interactions
10. Auto-animate and toggle interactions
11. Nested components
12. Creating the advice screen
13. Finalising the advice screen
14. Setting up animations
15. Interactions between screens
16. Sticky menus
17. Menu overlay
18. Help Menu screen set up
19. Website Design
20. Website Design
21. Adding Interactions to Website Design
22. Parallax scrolling
23. Adjustments to Parallax scrolling
24. Menus and Navigation for Website
25. Sharing your prototype
26. Assignment
27. Assignment
28. Conclusion
29. Conclusion

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

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

Embark on a Transformative Journey to UX/UI Mastery!

Are you ready to dive deep into the world of User Experience (UX) and User Interface (UI) Design? Whether you're a complete beginner or looking to sharpen your skills, this comprehensive course is meticulously crafted to guide you, step by step, through the essential concepts, tools, and real-world projects that will transform you into a proficient UX/UI designer.

Course Highlights:

• Demystifying UX/UI: Understand the crucial differences between UX and UI design and why they are both pivotal to creating exceptional digital experiences.

• Adobe XD Mastery: Navigate the Adobe XD interface with ease and confidence, mastering the tools necessary to bring your creative visions to life.

• Hands-On Assignments: Engage in practical assignments designed to reinforce your learning and develop your skills in design, typography, and animation.

• Real-World Projects: Tackle real-world problems and learn how to secure a job by creating responsive website designs, conducting user research, and developing design strategies.

• Comprehensive Understanding: Delve into essential topics such as market research, competitive analysis, creating user personas, empathy maps, user journey mapping, information architecture, wireframing, and more.

• From Scratch to Pro: Whether you are starting from scratch or have some prior experience, this course is designed to be accessible and challenging for everyone.

  
  

• What You Will Learn:

• Master the Art of Design: From creating multiple shapes to developing an Instagram profile page for tablets, you will engage in assignments that build your design proficiency.

• Understand Your Users: Learn how to conduct user interviews, gather insights, create empathy maps, and truly understand your customers' needs and desires.

• Develop a Design Strategy: Create mood boards, conduct market research and competitive analysis, and develop a comprehensive design strategy.

• Craft Exceptional User Experiences: Develop user personas, create user journey maps, user flows, and information architecture to craft experiences that delight your users.

• Design with Confidence: Understand the website sizes and grid systems, create wireframes, and develop high-fidelity wireframes with confidence.

  
  

  
  

  
  

  By the End of This Course:

You will have developed a comprehensive understanding of UX/UI design, mastered the tools and techniques necessary to create exceptional digital experiences, and completed a final case study UX/UI project that you can proudly showcase in your portfolio.

Beginner-Friendly:

Don't worry if you are a beginner; this course is designed to start from scratch, ensuring everyone can follow along and progress through the steps to mastery.

Enroll Now and Transform Your Future!

1. Introduction
2. Introduction
3. UX vs UI what is the difference?
4. Start knowing the Environment and Working with Tools
5. Create Simple Shapes
6. Assignment Create Multiple Shapes
7. Assignment Create an Owl
8. Working with Types
9. Create Typography with Shadows
10. Masking images within a shape in Adobe XD
11. Assignment Create an Instagram Profile page for Tablet Repeat Grid
12. How to use components Colors Character Style in Libraries or assets panel
13. Create a Responsive Website Design
14. Real world project – Problem Statement – how to get the job
15. What is User Research Design Strategy How to create work timeline
16. How to do User interview Create Gathering insight
17. How to do Market Research and competitive analysis by creating mood board
18. How to Create a User Personas
19. How to Create an Empathy Map - Get to know your Customer
20. Create User Journey Mapping or Customer journey Map
21. How to Create User Flow
22. What is Card Sorting and How Moodboard Can Help
23. How to Create Information Architecture
24. How to Create Wireframes or Low fidelity wireframing
25. Website Sizes and Grid System High fidelity wireframing
26. Design Hero Section or Slider or banner design Hi Fi Design
27. info Page Design for main page Hi Fi Design
28. Design Trending Section Hi Fi Design
29. Design Recommended Section Hi Fi Design
30. Design Special Offer section Hi Fi Design
31. Design Discount section Hi Fi Design
32. Design Latest News Section Hi Fi Design
33. Design Testimonials section Hi Fi Design
34. Design Subscribe and Footer Section Hi Fi Design
35. Design Filter Page Hi Fi Design
36. Design Pagination Hi Fi Design
37. Design Recommended and popular sections Hi Fi Design
38. Design Book Single page and info Hi Fi Design
39. Create Component Animation for Product Details Hi Fi Design
40. Create My Card Page Hi Fi Design
41. Create Shipment Tracking Hi Fi Design
42. Design About us page
43. How to Start Prototyping and Animation - Hi Fi Design
44. How to Start Prototyping and Animation
45. Prototyping the main page
46. Prototyping the main page
47. Create animated component Filter page Prototyping Hi Fi Design
48. Books Categories prototyping Add to card animation Hi Fi Design
49. Finish the prototyping and animation Hi Fi Design
50. Record your prototype and Final check Hi Fi Design
51. The secret of choosing colors – Color emotion guide to create design system
52. Add Colors to color pallet
53. How to find the best Fonts for our website
54. How to Create character style for your design
55. Design the website menu bar
56. Web Design Hero Section or Slider or banner design
57. Website info sections
58. Design trending sections
59. Design recommended sections
60. Design Mobile Web View header
61. Design info and trending sections Mobile Web View
62. Design Recommended Sections Mobile Web View
63. Design Special offer sections Mobile Web View
64. Design Discount and Popular Sections Mobile Web View
65. Design Latest News and Testimonials Mobile Web View
66. Design Filter page Categories
67. Design Listed Books
68. Design Pagination and Finish the Filter page
69. Design Filter Page Mobile Web View
70. Design the Single Page
71. Design the Single Page
72. Design the Single Page - Mobile Web View
73. Design My Card Page
74. Design My Card Page Web Mobile View
75. Design Shipment Tracking Page
76. Design Shipment Tracking Page Web Mobile view
77. Design About Us Page
78. Add Video to Header and Use Lottie Animation in Adobe XD
79. Create Hover Animation trending sections
80. Drag Animation with Scroll Groups
81. 3D Animation Testimonial Section
82. Drop Down Animation – Component State
83. Categories Animation – Component State
84. Animating Counter and Add to Card Animation – Component State
85. Final Prototyping and wireframing
86. Mobile Web view Prototyping and wireframing
87. App intro Page Design and Prototyping Animation
88. App Onboarding Sing in - Sign Up Design and Prototyping Animation
89. Rules for Perfect Mobile App Design
90. App Main Page Design Prototyping Animation
91. Using Component State App Menu Design and Prototyping Animation
92. App Search bar Simple Prototyping Animation
93. App Categories Design and Prototyping Animation
94. Search bar Professional Design and Prototyping Animation
95. Design and prototyping Sorting based on categories
96. BookStore Special Drag Animation
97. Single page Design and Prototyping Animation
98. Text and Tone E book component change for better reading Animation
99. Flip Page Effect Adobe XD Design and Prototyping Animation
100. 3D Glass Effect Credit Card Adobe XD Design Prototyping Animation
101. Payment info Design Prototyping Animation
102. Shipment Tracking and Side Menu Design Prototyping Animation
103. App Main Menu Prototyping Animation
104. User Testing by Sharing your Work and Getting Feedback
105. Final Project UX UI Case Study Design Grocery Shopping Website Mobile Web Vi