Web Design


Adobe XD for Web Design: Essential Principles for UI & UX

Learn Responsive Web Design, UI & UX Principles, Prepare The Design For Coding, Increasing Sales via A Great Design

4.57 (27 reviews)


9.5 hours


May 2021

Last Update
Regular Price

Unlimited access to 30 000 Premium SkillShare courses

What you will learn

Design modern websites in Adobe XD

Learn the principles of UI & UX

Create beautiful designs for real companies

Learn how to prepare a design for coding


Create beautiful and responsive website designs in Adobe XD. This course will show you how you can design a beautiful website from scratch without any previous experience. Here's what's included:

  • essential exercises that will teach you how to work like a professional;

  • a complete web design project, from start to finish, both the desktop version and the responsive version;

  • how to prepare the design for coding;

  • how to understand what clients want & how to help them achieve their goals;

  • UI & UX principles that will help you design any website, no matter the style or client.

I made this course for anyone interested in web design - from beginners to professionals, from designers to coders, from business owners to someone who's looking to start a new career or earn some money.

Adobe XD is the next big thing in terms of design tools. It makes you look like a professional designer even if you're just a beginner. Start right now and take your designs to another level. At the end of this course, you'll have a beautiful project for your portfolio, but also a deep understanding of what makes a website design successful.

Also included:

  • access to a community of over 10.000 students who are learning the same thing - chat in real time with them!

  • my mini e-books with my best advice for beginners;

  • access to a Facebook group of over 15.000 designers;

  • unlimited access to the course & you can watch it as many times as you want;


Adobe XD for Web Design: Essential Principles for UI & UX
Adobe XD for Web Design: Essential Principles for UI & UX
Adobe XD for Web Design: Essential Principles for UI & UX
Adobe XD for Web Design: Essential Principles for UI & UX


Getting Started with Web Design


Quick answers to popular questions

Web design - what you need to know

How to select layers like a professional designer

Exercise practice your selecting

Here’s what coders do with our designs

Exercise: Test your skills & attention to detail

Solving the previous exercise

The three keys to becoming a great web designer

Our First Complete Responsive Website Design Project

Download all the resources here

The most important question when starting a new project

How to research/find inspiration for your project

Set up the most important part of the layout

Create the top bar

How to choose fonts for your project

How to choose beautiful colors

Organize the top bar

Create the structure for the header

Set a style for the header

Attention to detail in the header

Building a great hero area

Redesign the categories menu

How to display all the product details in a grid

Here’s how you find the best layout for the grid of products

Create the first version of the product card

The second version of the product card

The third version of the product card

How to design a clean and modern FAQ section

Create a newsletter sign up form

How to design a beautiful footer

Final variation and thoughts about the homepage


How To Create Interior Pages

Analysing how we can improve the product page

Setting up the layout for the top part of the product page

How to organize lots of information in the product’s page

How to add small details that make a difference

How to handle large quantities of text

Creating the sidebar

How to Create A Responsive Design

Introduction to the mobile version

How to start the mobile version for the homepage

How to adjust the top bar for the mobile version

Here’s how you create the header for the mobile version

Modify the hero area & categories for the mobile version

Improve the navigation for the mobile experience

Create a grid of products suited for the mobile version

Finishing the grid of products – mobile version

Make the text easy to read in the FAQ section

How to make the newsletter form fit the mobile version

Make a new layout for the footer

Conclusions: e-commerce mobile version

Responsive Design for Interior Pages

The mobile version for the product’s page

Create the mobile structure for the product’s page

How to style items in terms of their importance

Create a variation to improve sales

10% more work for 50% better results

Create another layout for the product’s page

Make a smarter structure for the mobile version

Create the reviews and nutritional tabs

Adding small details that matter

Checking the design on a real phone

Incredible variations in no time at all

Prepare the Design for Coding

Preparing the design for coding

How to give the coder what he needs from Adobe XD

How to prepare graphics for coding

Server-side content and multi-layer graphics

Getting up and running with Zeplin

Best way to handle assets for the coders

Here’s why it’s essential you deliver what’s needed

How the coder sees the projects

The First Key to Becoming a Great Web Designer

The first pillar of web design

Best settings for a web design project

Case study: Non-standard layouts

Exercise: Create a standard website layout

How to size your web elements correctly

My formula for perfect text

Case study: text layers

Color Contrast

Case study: Colors – Part 1

Case study: Colors – Part 2

How to align elements in the hero area

3 rules for web design icons

Case Study: Visual Balance

Thoughts on the first pillar of web design

The Second Key to Becoming a Great Web Designer


What’s the point of the website?

The user versus the business owner

Analytics in Web Design

Templates & Website Builders – The web designer’s death?

Case Study: 4 versions of the same website

E-commerce homepage layout

E-commerce product details

E-commerce checkout

Why aren’t websites pixel perfect?

Landing page vs a website

Case studies: the client’s needs

Lead generation in landing pages

Why landing pages have a bad reputation

Digital product landing page

A/B testing landing pages

Case Study: Landing page analysis

Final thoughts about the client’s needs

The Third Key to Becoming A Great Web Designer


What's UX?

The best example of good UX and attention to detail

Improve the checkout process to double sales

Improve the mobile version to double sales

7 website tweaks that show attention to detail

Upgrading the mobile product page

Doing 1-on-1 sessions with a coder

Course Conclusion

What's next?


Charles9 July 2021

Course was good. I definitely learned some things and picked up some great tips. I don't agree with everything he said but that is okay too.

Ronald10 June 2021

The only reason I give it a 4.5 stars is becuase the pase its way to fast to follow it. But that being said, It is possible to follow it by pausing and rewinding a bit very often. Do follow the guidence of watching and listening the video first then running again but implementing it. The reason is that he shares a lot of theory for you to understand better. Just be patient, go through the entire course and at the end you will see that the information he shares is extremely useful. On top of that, you can use this as a reference to come back when you need to refresh your skills and knowledge.

Joshua25 May 2021

Chris is the best. I won't lie i have learnt alot from taking his courses. His explanation, presentation, attention to details and the zeal to ensure his student are successful is just amazing.

Husain12 May 2021

As an intermediate XD user, I've been really enjoying this course. I'm especially glad to have learned a lot of tips and important bits of information that would help speed up as well as improve my web design process. Thank you, Chris!


5/14/202192% OFFExpired


Udemy ID


Course created date


Course Indexed date
Course Submitted by