4.62 out of 5
4.62
106 reviews on Udemy

Adobe XD Masterclass: Learn UI & UX Design from Zero to Hero

Learn the next big thing - Adobe XD! You'll look like a superstar designer, even if you're a beginner!
Instructor:
Cristian Doru Barin
751 students enrolled
English [Auto]
Use Adobe XD like a professional
Advanced design techniques for modern projects
Make your designs interactive by creating prototypes
Everything you need to know about Adobe XD
How to create awesome UI work and how to design for great UX

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 is totally free but it 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.

Getting Started

1
Introduction
2
How to get the most out of this training
3
Download all the resources from the course
4
Adobe XD vs Photoshop
5
Get started with Adobe XD
6
Create your first design in Adobe XD
7
How to get around Adobe XD
8
Best way to select layers in XD
9
Exercise: Practice your selecting
10
From Photoshop or Illustrator to Adobe XD!
11
Cloud documents and saving your work
12
Adobe XD quirks
13
Section conclusions

Adobe XD's tools and features

1
Introduction
2
How to work with rectangles like a pro
3
Use the ellipse, polygon and line tools
4
Editing shapes
5
Pen tool
6
Let’s have fun – use all the tools
7
Work with colors and gradients
8
Grids, guides, smart guides – pixel perfect designs
9
The alignment tools - Overview
10
How to use the alignment tools
11
Work with text layers like a pro
12
Best way to work with images
13
Create a collage
14
Section conclusions

Saving and exporting your work

1
Export our work as PNGs
2
Share your work to get feedback
3
Optional - Save presentations as PDFs
4
Share your work with developers
5
Shrink your PNGs and JPEGs without losing quality

Adobe XD advanced features

1
Introduction
2
Fast designing with repeat grid
3
Quickly replace content
4
Components – a revolutionary feature
5
Practice working with components
6
Why we need to talk about style guides
7
How to supercharge your color use
8
How to work with character styles
9
Here’s how you actually set up your assets panel
10
A smarter way to work with linked assets
11
Undecided? Keep multiple versions!
12
Working with several designers AT ONCE
13
Section conclusion

First web design project

1
Introduction to our first web design project
2
Create the website’s header
3
My advice for perfect social media icons
4
Setting our typography
5
Adding the search bar
6
The website’s categories
7
Build the content area with repeat grid
8
Pagination through XD components
9
Create the footer
10
Overview of the homepage
11
Create the product details page
12
Finishing touches on the product details page

Responsive design

1
What is responsive design?
2
Designing without coding: why and how?
3
Making the mobile version of the homepage
4
Adjusting the design for the mobile version
5
Editing the footer for the mobile version
6
Create the mobile version for the product details page
7
Design variation #1 - color
8
Design variation #2 – typography
9
Design variation #3 – the layout
10
Key things about our design

Make the design interactive (prototyping)

1
Introduction to prototyping
2
The fundamentals of wiring a prototype
3
Trigger types in Adobe XD
4
Transition Animations and Easing
5
Auto-animate – the incredible game changer
6
Auto-animate and drag
7
Previous artboard – a must in any large project
8
How to make menus and pop ups seem real
9
Jump to a part of your design with “Scroll To”
10
Here’s why your animations don’t matter

Advanced Prototyping

1
Here’s why we should animate our design
2
What you should and shouldn’t animate
3
Create hover states for social media & main menu
4
Prototyping the search box – hover and down state + drop-down
5
Create a hover state for the repeat grid
6
Setting up the pagination and footer
7
How to quickly change your layout with stacks
8
Bonus: Make the navigation work

User Experience (UX)

1
Introduction
2
What’s UI, what’s UX?
3
Bad UX is very expensive
4
UX case study – icons
5
UX case study – buttons
6
UX case study – forms
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6
4.6 out of 5
106 Ratings

Detailed Rating

Stars 5
70
Stars 4
27
Stars 3
6
Stars 2
2
Stars 1
0
68eb099f9b3190507ac073b17f242b24
30-Day Money-Back Guarantee

Includes

8 hours on-demand video
1 article
Full lifetime access
Access on mobile and TV
Certificate of Completion