Transcribed Notes:
Learning Goals
Build a Hidden Skeleton: Use a grid to align text and images, ensuring your design looks structured.
Control Reading Order: Control exactly where a viewer looks first, second, and third by adjusting the size, weight, and placement of your elements.
Learn to Use Proximity: Intentionally use proximity to group related pieces of information together.
What is Layout?
The Concept: Layout is the art of organizing all your elements so they communicate a clear message. The goal is to lead the viewer’s eye in a specific order.
A Good Layout: Feels invisible, uses clear hierarchy, has a consistent grid and spacing, and is legible and readable.
A Bad Layout: Feels like work for the viewer, confusing visual hierarchy, inconsistent alignment, and hard to read fonts.
The Grid (The Skeleton)
The Concept: Before you place a single drawing, you must have a hidden structure.
What it is: A grid is a series of horizontaland vertical lines that act as a guide for designers to place elements.
Why it matters: When elements align to a grid, the design looks professional andorganized rather than floating on the page.
Proximity
The Concept: Proximity is the idea that items that are close together are perceived as being related.
The Rule: If you have a title andan image that go together, putthem close. If you have unrelated items, move them apart.
The Benefit: It reduces visual clutter and helps the viewer understand the relationship between different parts of yourdesign.
White Space
The Concept: Also known as negative space, this is the area of the design left empty.
The Benefit: White space is a tool. It gives the eye a place to rest and the amount of empty space forces the viewer’s eye straight to the text.
Visual Hierarchy
The Concept: Not everything in your design is equally important. Use size, weight, and color to tell the viewer the order to look.
Level 1 (Foundation): Main titles, massive pull-quotes, or a primary high-contrast graphic.
Level 2 (Support): Subheadings, section titles, captions,bullet-points, or secondary images.
Level 3 (Details): Body text, terms and conditions, captions, page numbers, and source links.
The Z-Pattern
The Concept: In Western cultures, we read from top-left to bottom-right.
The Path: The eye usually moves in a Z shape across a page.
The Dot Secret: Place your most important info at the top-left and your Call to Action at the bottom-right where the Z ends.
Symmetrical vs. Asymmetrical
The Concept: How you distribute visual weight on the page depends on the kind of layout you use.
Symmetrical Layouts: Elements are centered and mirrored. It feels formal, traditional, and calm.
Asymmetrical Layouts: Elements are different sizes but balanced by their weight. It feels modern, energetic, and exciting.
Repetition
The Concept: Using the same style of lines, shapes, or colors throughout your layout.
The Result: It creates a brand. It makes the layout feel like one cohesive piece of art rather than a bunch of random ideas.
How to do it: Use the same line weight for all your drawings or the same corner roundness for all your shapes.
The Silhouette Test
The Concept: Squint your eyes until the design becomes a blur.
The Goal: If you can still see the clear blocks of information and important headers,your layout is successful.
The Fix: If the blur looks like one giant grey mess, you need more contrast and white space.