Warm-Up: Learn About Visual Rhythm

  1. Open Claude or ChatGPT
  2. Send: "I want to learn about visual rhythm and spacing in design. Can you break this topic down into the main sub-topics I should understand?"
  3. Follow up: "Let's start with just one of those. What's the first thing I should learn? Please explain it to me, including why it is important, and provide me with trusted resources for digging deeper."
  4. Be ready to share what you learned

Prayer

Mira, will you pray for us today?

Unit C: Hierarchy & Responsive Web

Grids are invisible scaffolding — the system that makes designs feel intentional.

Today

Visual Rhythm Share-out
Grid Systems in Figma
C3: Mobile + Desktop Wireframes
Work Session

Why this matters

Without grids, you're guessing.

Every spacing decision becomes a debate with yourself.

Grids reduce the amount of decision-making you have to do about layout.

That's how professionals work fast without sacrificing quality.

By the end of today...

Grid Fundamentals

You'll understand the box model, how auto-layout relates to it, and the 4px spacing system

Figma Grids

You'll set up proper layout grids for both mobile (4-column) and desktop (12-column) frames

Responsive Thinking

You'll see how the same content adapts across breakpoints while staying consistent

Grid Systems

The invisible structure behind every good design

Every element is a box

Content → Padding → Border → Margin

  1. Total width = content + padding + border
  2. Margin is spacing between boxes, not part of the box itself

Developers use debug borders to visualize boxes — you can think this way too.

Margin vs. Padding

When to use which?

Different backgrounds

Use both — margin creates gap, padding creates internal space

Same backgrounds

Consolidate into padding

Auto-Layout ≠ Box Model

Figma auto-layout is closer to CSS Flexbox

  1. Has padding — internal spacing inside frames ✓
  2. Has gap — spacing between child elements ✓
  3. No margin — no external spacing property

Gap vs. Margin

Gap only creates space BETWEEN children

Margin

Space on ALL sides of each element (including outer edges)

Gap

Space only BETWEEN siblings (not on outer edges)

To add space around an auto-layout frame, wrap it in a parent and use padding.

Two types of grid

Explicit Grid

Columns, gutters, margins — the visible structure you set up in Figma

Implicit Grid

The spacing rhythm between all elements — what creates the "clean" feel

Use 4px increments
for all spacing

4, 8, 12, 16, 20, 24, 32, 40, 48...

Why 4px? Divides evenly, aligns with browser defaults.
Even numbers divide cleanly. Avoid 5px or 10px increments.

"The grid is an attitude."

— Massimo Vignelli

Common Grid Patterns

Mobile

4 columns
375px frame

Desktop

12 columns
1440px frame

Same content, different column spans.

Figma Grid Setup

Watch, then try together

Demo: Setting Up Grids

  1. Create desktop frame (1440px) with 12-column grid
  2. Create mobile frame (375px) with 4-column grid
  3. See how same content aligns to different grids

Let's Try Together: Build a Product Card

Create a simple card with these elements:

  1. Image placeholder (gray rectangle)
  2. Product title
  3. Price
Product Title
$49.99

Mobile example →

Place Your Card on Both Grids

Experiment with placement:

Desktop (12-col)

Try spanning 3 or 4 columns. How does it feel?

Mobile (4-col)

Try full width or 2 columns side-by-side.

What changed? What stayed the same?

Your Turn: Set Up Grids

  1. Create or select your desktop frame (1440px)
  2. Add a 12-column layout grid
  3. Create or select your mobile frame (375px)
  4. Add a 4-column layout grid

5 minutes — raise your hand if you need help

What Makes a Good Wireframe?

Clarity

Can someone understand the layout at a glance?

Hierarchy

Is it obvious what's most important?

No Distracting Details

Use boxes and text labels, not real content

Wireframes separate structure decisions from visual decisions.

Cluttered vs. Clear

Before ✗

Too much detail, real images, actual text — distracts from layout decisions

After ✓

Simple boxes, placeholder labels — lets you focus on structure

The goal: solve the layout problem before committing to details.

C3: Mobile + Desktop Wireframes

Due: Wednesday, Feb 18 @ 11:59pm

  1. Simple wireframes for both mobile AND desktop PDP
  2. Show: product title + details, image placements, button placements, page layout
  3. Focus on structure, not visual polish

These wireframes become the foundation for your high-fidelity work.

Same content, different arrangement — let the grid guide you.

Next up

Work session — Set up grids, then start C3 wireframes

Get feedback — Grid setup, content alignment, thumb-zone navigation for mobile

Homework

C3: Mobile + Desktop Wireframes (due Wed @ 11:59pm)

Begin high-fidelity PDP designs

1 /