Introduction

How to get the most out of this training

Get started with Adobe XD

Create your first design in Adobe XD

Adobe XD vs Photoshop

How to get around Adobe XD

Best way to select layers in XD

Exercise Practice your selecting

From Photoshop or Illustrator to Adobe XD!

Cloud documents and saving your work

Adobe XD quirks

Section conclusions

Introduction

How to work with rectangles like a pro

Best way to work with images

How to design a modern presentation

Use the ellipse, polygon and line tools

How to edit shapes in Adobe XD

Discover the Pen tool in XD

Create geometric shapes

Add text to our presentation

Work with colors and gradients

Grids, guides, smart guides – pixel perfect designs

The alignment tools - Overview

How to use the alignment tools

Create a collage

Let’s have fun – use all the tools

Section conclusions

Export our work as PNGs

Share your work to get feedback

Optional - Save presentations as PDFs

Share your work with developers

Shrink your PNGs and JPEGs without losing quality

Introduction

Quickly replace content

Components – a revolutionary feature

Practice working with components

Why we need to talk about style guides

How to supercharge your color use

How to work with character styles

Here’s how you actually set up your assets panel

A smarter way to work with linked assets

Undecided Keep multiple versions!

Working with several designers AT ONCE

Section conclusion

Introduction to our first web design project

Create the website’s header

My advice for perfect social media icons

Setting our typography

Adding the search bar

The website’s categories

Build the content area with repeat grid

Pagination through XD components

Create the footer

Overview of the homepage

Create the product details page

Finishing touches on the product details page

What is responsive design

Designing without coding why and how

Making the mobile version of the homepage

Adjusting the design for the mobile version

Editing the footer for the mobile version

Create the mobile version for the product details page

Design variation #1 - color

Design variation #2 – typography

Design variation #3 – the layout

Key things about our design

Introduction to prototyping

The fundamentals of wiring a prototype

Trigger types in Adobe XD

Transition Animations and Easing

Auto-animate – the incredible game changer

Auto-animate and drag

Previous artboard – a must in any large project

How to make menus and pop ups seem real

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

Here’s why your animations don’t matter

Here’s why we should animate our design

What you should and shouldn’t animate

Create hover states for social media & main menu

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

Create a hover state for the repeat grid

Setting up the pagination and footer

How to quickly change your layout with stacks

Extras Make the navigation work

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

rules for web design icons

Case Study Visual Balance

Thoughts on the first pillar of web design

Introduction

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

AB testing landing pages

Case Study Landing page analysis

Final thoughts about the client’s needs

Introduction

What's UX

Improve the checkout process to double sales

Improve the mobile version to double sales

website tweaks that show attention to detail

Upgrading the mobile product page

Doing 1-on-1 sessions with a coder

Bad UX is very expensive

The best example of good UX and attention to detail

UX case study – forms

UX case study – icons

UX case study – vague actions

UX case study – hierarchy

UX case study – fake content

UX case study – buttons

The most important question when starting a new project

How to researchfind 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

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

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

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

% 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

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

Do this before you start freelancing

Here's what I suggest you do next