Introduction
  • Quick answers to popular questions
  • Download the workbook for this section
  • Design platforms and this course vs “Profitable Freelancing”
  • Web design explained: Design vs Coding
  • Set up Photoshop for web design
  • How to select layers like a pro
  • Here's why companies need websites designed in Photoshop
  • Exercise: create a website and identify 3 mistakes
  • Solving the previous exercise
  • The three pillars of a great web designer
  • Web Design Quiz #1
The First Pillar of Web Design
  • Download the workbook for this section
  • 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
  • How to align icons with text
  • 3 rules for web design icons
  • Case Study: Visual Balance
  • Thoughts on the first pillar of web design
  • Web Design Quiz #2
The second pillar of web design
  • Download the workbook for this section
  • 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
  • A/B testing landing pages
  • Case Study: Landing page analysis
  • Final thoughts about the client’s needs
  • Web Design Quiz #3
The third pillar of web design
  • Download the workbook for this section
  • Introduction
  • 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
From Photoshop to Working Code
  • Download the workbook for this section
  • Preparing the design for coding
  • Getting up and running with Zeplin
  • From Photoshop to Zeplin
  • Getting deliverables out of Photoshop
  • Server-side content and multi-layer graphics
  • How to handle the handover process
  • Important notice
The basics
  • System requirements & best settings
  • Color management quiz
  • Photoshop version comparison
  • Piracy & stealing
  • Monitors: best panel types, resolution, brand, size
  • Web design just in Photoshop, no coding
  • What you need to know about Photoshop
  • How to monetize the skills you are about to learn
  • Grid systems
  • Setting up your workspace
  • Topics I won't cover in depth
The Principles
  • Communicate effectively
  • Communicate effectively quiz
  • A website must tell a story and create an atmosphere
  • Simple & clean or highly detailed?
  • How to understand the clients' needs
  • All about inspiration
  • Hands on: How I get my inspiration
  • Exercise: Inspiration
  • Step by step approach
  • Hands-on: Using the step by step approach to create an icon
  • All about wireframes
  • All about wireframes quiz
  • The role of imagery, stock photos and free photos
  • Custom Graphics
  • Hands-on: Creating custom graphics
  • Alignment tools
  • Symmetry, proper spacing and white space