Open a well-designed website.
Can you find the grid?
How many columns?
Where are the margins?
Screenshot and annotate with your grid overlay guesses.
Mira, will you pray for us today?
Grids are invisible scaffolding — they create consistency and speed up every design decision.
A structure for learning anything with AI.
Use when learning something new
Break down the topic into sub-topics. Get the map.
Why does this matter? Where does it fit?
One piece at a time. Don't move on until you get it.
Ask for analogies, examples, different explanations.
Cross-check facts. AI can be confident and wrong.
Use when you have some knowledge to work with
Explain it to AI in your own words. Ask for feedback.
Ask AI to quiz you. Answer BEFORE seeing feedback.
Ask for the smallest possible hint — not the answer.
Ask AI to guide you with questions, not explanations.
I do / We do / You do
Topic: Visual Rhythm and Spacing
"I want to learn about visual rhythm in design. Watch how I use AI."
Notice: I'm actively directing the conversation, not just absorbing.
We'll continue learning about visual rhythm together.
What practice should we use next?
Chunk It (learn another piece)
Translate (ask for examples)
Why First (understand importance)
Teach Back (explain what we learned)
Quiz Me (test ourselves)
You're practicing CHOOSING practices, not just watching.
Same topic: visual rhythm
Try Chunk It or Translate — learn something new about visual rhythm using AI.
Try Teach Back — explain what you've learned so far to AI and ask it to check your understanding.
Swap roles after 4 minutes.
Debrief: What felt different about taking in vs. strengthening?
The invisible structure behind every good design
Grids reduce decision-making.
That's how professionals work fast without sacrificing quality.
Box model, auto-layout, 4px spacing system
Mobile 4-column, desktop 12-column
Same content adapts across breakpoints
Total width = content + padding + border
Margin is spacing between boxes, not part of the box itself
Developers use debug borders to visualize boxes — you can think this way too.
Use both — margin creates gap, padding creates internal space
Consolidate into padding
Figma auto-layout is NOT the CSS box model.
It's closer to CSS Flexbox.
Space on ALL sides of each element (including outer edges)
Space only BETWEEN siblings (not on outer edges)
To add space around an auto-layout frame, wrap it in a parent and use padding.
Columns, gutters, margins — the visible structure you set up
The spacing rhythm between all elements — what creates the "clean" feel
Use 4px increments for all spacing.
Why 4px? Divides evenly, aligns with browser defaults.
Avoid 5px or 10px increments.
"The grid is an attitude."— Massimo Vignelli
375px frame width
1440px frame width
Same content, different column spans.
I DO
WE DO
Create a simple card with these elements:
Mobile example →
WE DO
Experiment with placement:
Try spanning 3 or 4 columns. How does it feel?
Try full width or 2 columns side-by-side.
What changed? What stayed the same?
YOU DO
5 minutes
Can someone understand the layout at a glance?
Is it obvious what's most important?
Use boxes and text labels, not real content
Wireframes separate structure decisions from visual decisions.
Too much detail, real images, actual text — distracts from layout decisions
Simple boxes, placeholder labels — lets you focus on structure
Due: Wednesday, Feb 18 @ 11:59pm
These wireframes become the foundation for your high-fidelity work.
Same content, different arrangement — let the grid guide you.
Due before class:
C2: Type Hierarchy
Due Wed @ 11:59pm:
C3: Mobile + Desktop Wireframes
Next Up:
Homework: