Adobe XD Masterclass: Learn Web Design UI & UX Design

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Introduction

Lecture 2: How to get the most out of this training

Lecture 3: Download all the resources from the course

Lecture 4: Get started with Adobe XD

Lecture 5: Create your first design in Adobe XD

Lecture 6: Adobe XD vs Photoshop

Lecture 7: How to get around Adobe XD

Lecture 8: Best way to select layers in XD

Lecture 9: Exercise: Practice your selecting

Lecture 10: From Photoshop or Illustrator to Adobe XD!

Lecture 11: Cloud documents and saving your work

Lecture 12: Adobe XD quirks

Lecture 13: Section conclusions

Chapter 2: Adobe XD's tools and features

Lecture 1: Introduction

Lecture 2: How to work with rectangles like a pro

Lecture 3: Best way to work with images

Lecture 4: How to design a modern presentation

Lecture 5: Use the ellipse, polygon and line tools

Lecture 6: How to edit shapes in Adobe XD

Lecture 7: Discover the Pen tool in XD

Lecture 8: Create geometric shapes

Lecture 9: Add text to our presentation

Lecture 10: Work with colors and gradients

Lecture 11: Grids, guides, smart guides – pixel perfect designs

Lecture 12: The alignment tools – Overview

Lecture 13: How to use the alignment tools

Lecture 14: Create a collage

Lecture 15: Let’s have fun – use all the tools

Lecture 16: Section conclusions

Chapter 3: Saving and exporting your work

Lecture 1: Export our work as PNGs

Lecture 2: Share your work to get feedback

Lecture 3: Optional – Save presentations as PDFs

Lecture 4: Share your work with developers

Lecture 5: Shrink your PNGs and JPEGs without losing quality

Chapter 4: Adobe XD advanced features

Lecture 1: Introduction

Lecture 2: Fast designing with repeat grid

Lecture 3: Quickly replace content

Lecture 4: Components – a revolutionary feature

Lecture 5: Practice working with components

Lecture 6: Why we need to talk about style guides

Lecture 7: How to supercharge your color use

Lecture 8: How to work with character styles

Lecture 9: Here’s how you actually set up your assets panel

Lecture 10: A smarter way to work with linked assets

Lecture 11: Undecided? Keep multiple versions!

Lecture 12: Working with several designers AT ONCE

Lecture 13: Section conclusion

Chapter 5: First web design project

Lecture 1: Introduction to our first web design project

Lecture 2: Create the website’s header

Lecture 3: My advice for perfect social media icons

Lecture 4: Setting our typography

Lecture 5: Adding the search bar

Lecture 6: The website’s categories

Lecture 7: Build the content area with repeat grid

Lecture 8: Pagination through XD components

Lecture 9: Create the footer

Lecture 10: Overview of the homepage

Lecture 11: Create the product details page

Lecture 12: Finishing touches on the product details page

Chapter 6: Responsive design

Lecture 1: What is responsive design?

Lecture 2: Designing without coding: why and how?

Lecture 3: Making the mobile version of the homepage

Lecture 4: Adjusting the design for the mobile version

Lecture 5: Editing the footer for the mobile version

Lecture 6: Create the mobile version for the product details page

Lecture 7: Design variation #1 – color

Lecture 8: Design variation #2 – typography

Lecture 9: Design variation #3 – the layout

Lecture 10: Key things about our design

Chapter 7: Make the design interactive (prototyping)

Lecture 1: Introduction to prototyping

Lecture 2: The fundamentals of wiring a prototype

Lecture 3: Trigger types in Adobe XD

Lecture 4: Transition Animations and Easing

Lecture 5: Auto-animate – the incredible game changer

Lecture 6: Auto-animate and drag

Lecture 7: Previous artboard – a must in any large project

Lecture 8: How to make menus and pop ups seem real

Lecture 9: Jump to a part of your design with “Scroll To”

Lecture 10: Here’s why your animations don’t matter

Chapter 8: Advanced Prototyping

Lecture 1: Here’s why we should animate our design

Lecture 2: What you should and shouldn’t animate

Lecture 3: Create hover states for social media & main menu

Lecture 4: Prototyping the search box – hover and down state + drop-down

Lecture 5: Create a hover state for the repeat grid

Lecture 6: Setting up the pagination and footer

Lecture 7: How to quickly change your layout with stacks

Lecture 8: Extras: Make the navigation work

Chapter 9: The First Key to Becoming a Great Web Designer

Lecture 1: The first pillar of web design

Lecture 2: Best settings for a web design project

Lecture 3: Case study: Non-standard layouts

Lecture 4: Exercise: Create a standard website layout