Master Figma for Web Design & Freelancing: Learn UI/UX

The biggest difference in Figma versus other programs

Here’s how you create buttons in Figma

The basics of working with color

How to work with color like a pro

How to add images: frames vs rectangles

Create a gallery / collage in Figma

Here are the 3 types of text in Figma

Discover the properties of text layers

How to work with text like a pro

Effects in Figma: blur, shadows & more

An overview of components

Here’s what makes you a good web designer

Introduction

Set up the desktop version the correct way

Create the header

Create the main menu

Set up the search box

Create a dropdown menu

Create the most important item – the card

How to improve the cards

Set up the secondary navigation

Create the pagination

Create the foundation for the footer

Adding content in the footer

How to handle visual imperfections

Here’s what you need to remember

Bonus: This tool can help you work much faster

Contest: €200 for one landing page design

Discover what freelancing is REALLY all about

Without this skill, you can’t succeed!

Best and worst way to get started as a freelancer

How to set up your freelancing profile

The truth about freelancing platforms: Upwork, Freelancer, Fiverr

Crowdsourcing revealed: the pro’s and con’s

Poll: What are your goals?

Don’t go on 99designs before you watch this!

Revealed: Coding and Photoshop vs Adobe XD vs Figma

Here’s how to start a portfolio and get clients

The importance of your mindset

Is the competition too difficult on 99designs?

9 tools for working longer: fix eye, back, neck pain

Improve your mood & concentration

What nobody tells you about prototyping

Prototyping is essential but has one major flaw

Use prototyping to find mistakes and flaws

Overlays in your prototypes (pop ups)

Timers in prototypes

Scrolling in prototypes

Prototype smarter with this method

Making an interactive dropdown

Final exercise - Make a complete prototype

Introduction

Best settings & website components

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

What you need to know about 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

Final thoughts

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 perfect?

Case studies: the client’s needs

Landing page vs a website

Lead generation in landing pages

Why landing pages have a bad reputation

Testing landing pages

Case study: my landing page

Final thoughts about the client’s needs

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

Here's what you need to remember

The most important question when starting a new project

How to research/find inspiration for your project

Set up the foundation of the project

Create the top bar

Set up the header

Decide on a styling for the header

Create the most important part – the hero area

Create the secondary navigation – product categories

Here’s where sales are made … or not!

Create the first version of the card

Set the style for the card

Finishing touches for the card design

Don’t forget about this important detail!

Create the FAQ section

Here’s why auto-layout is awesome

Create a newsletter sign up form

Set up the footer’s foundation

Finishing the footer

Explore variations & improve your design

How to approach the interior pages

Set the top area for the product’s page

Adding content to the product’s page

How to add clear calls to action for visitors

Main content area

Create a table for the sidebar

Conclusions

Introduction to the mobile version

How to start the mobile version for the homepage

Create the header for the mobile version

How to rearrange the hero area

Set up the card for the grid of products

Don’t skip this step when creating product cards

Arrange the FAQ section for the mobile version

Recreate the newsletter in a narrow space

Create the footer for the mobile version

Conclusions

Preparing the design for coding

Zeplin - the missing link!

How to set up the project for the coder/client

Server-side content and multi-layer graphics

Here’s what developers want from your design

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

Final thoughts and what’s next

Bonus lecture