Start Here
3 lessons

Module 1 - Lesson 4

Layout and Spacing

Lesson Overview

This lesson is all about using correct spacing, and the value of white space in web design. You are going to learn about the most important aspects of spacing and using it effectively. I will share some tips to speed up your workflow and improve the overall consistency.

Video Chapters

00:00 Introduction

01:38 What is white space

02:22 Separate without cluttering

03:00 Highlight your CTA's

03:34 Give an impression of luxury

04:17 Improve legibility of text

05:10 Start with too much white space

06:29 Spacing and Sizing System

08:31 Sizing scale

09:34 How to use the sizing system

10:53 Avoid ambiguous spacing

Action Items

Try changing the default section and row padding to add too much space, so that it forces you to remove it instead of always adding it when needed. This is a setting hidden in the Theme Customizer -> General and Layout Settings -> Row height and the Section height. Try changing these values to 10 (for 10% top and bottom padding) to see if that helps you consider using more white space in your designs. You can do the same for tablet and phones – in the Theme Customizer -> Mobile panel, this time using pixel values.