CF #21: Summarizing & illustrating every single layout design strategy

Key points

  • Master these layout principles and you'll be an unstoppable layout designer: Grids & alignment, sizing & spacing, visual hierarchy, grouping, consistency, scannability, balance, aesthetics, mood
  • Use Stark inside your favourite interface design tool to fix any and all accessibility issues (color contrast, type, visual simulations and more!)
  • We should all have a brain-dump journal. Empty your mind into the real world. This makes your thoughts tangible and easier to navigate.

Briefly but effectively summarizing (and showing) every single layout principle, my favorite all-in-one accessibility tool, brain-dump journalling, and more

1 Effective Tip

Summarizing every single layout strategy you need to know

Grids & Alignment

Alignment gives our eyes a consistent positional reference point, making content consumption easier.

Grids let viewers find information more quickly and let designers organize information more quickly.

Grids and alignment on abstract.com
abstract.com

Sizing & spacing

A spatial system creates visual harmony and rhythm.

Pick a base unit like 8pt and let all of your sizing and spacing be multiples of that base number.

The spatial system also applies to the grid’s spacing parameters.

Meaning, if you pick a base unit of 8pt, your grid’s side-margins and gutters should be any multiple of 8 (e.g. 72 for side-margins and 24 for gutters).

Intentional sizing and spacing
Via Elliot Dahl (designsystems.com)

Visual hierarchy

Gives our eyes a clear viewing sequence by varying the visual weight of elements.

The visual weight of an element can be manipulated by using any of the following strategies:

  • Scale
  • White space
  • Color contrast
  • Format
  • Position
Visual hierarchy demonstrated on a Porsche ad
Porsche

Grouping

Chunking content reduces visual noise and relates elements. This helps comprehension greatly.

Elements can be grouped using proximity, similarity, or boundary.

Proximity: Related elements are closer together.

Similarity: Related elements are visually similar.

Boundary: Related elements are enclosed within the same boundary (a background color or dividers).

Grouping shown on a website
Juraj Masar

Consistency

Makes a layout predictable and easier to visually and functionally navigate.

This also means less decision-making for creators since there's one agreed-upon source of truth for both that layout (internal consistency) and for that type of layout (external consistency).

Both internal and external consistency are important.

Internal consistency = Uniformity within the layout

External consistency = Follows industry standards

Consistency explained
suku.world

Scannability

Gives us the most relevant content at a glance, typically through the most visually prominent elements.

  • Headings
  • Non-decorative imagery
  • Bulleted lists
  • Tables
  • Decorated text
  • Highly isolated elements
Scannability explained
cal.com

Balance

Gives us visual satisfaction (visceral appeal) and contributes to mood.

A symmetrical layout feels static and classical.

An asymmetrical one conveys modernity and dynamism.

An off-balance layout may create intrigue or discomfort.

Different types of balance

Aesthetics & Mood

Relevant Information + Easy consumption + Relevant mood = Beauty

There is an informational message and a feeling message.

Mood is the feeling message and it is conveyed through balance (layout style), typography, colors and visual treatment.

Demonstrating what makes a layout aesthetic
Julia Khachirova

Take it to go! Download the PDF version by clicking the image below:

Download layout principles

Sidenote:

I know some might ask about things like white space and color contrast as standalone principles.

I view white space and color contrast as mere tools within the principles of visual hierarchy and balance.

An element's place within a visual hierarchy can be affected by varying the white space surrounding it or by changing its color contrast ratio.

White space and color contrast are simply used to increase or decrease the visual weight of an element.

1 Useful Tool

Stark - The all-in-one accessibility tool

Stark is a complete accessibility toolbox usable inside your design tool of choice (Figma, Sketch, XD).

Check contrast, typography, vision simulations and more.

Everything you'd ever need to find and fix accessibility issues.

Preview of Stark accessibility tool

Bonus resource: Creatorfuel Inspiration

In case you missed it last week 😉.

Categorized inspiration to spark creatives ideas.

Built and curated by yours truly.

Over 200 inspo pieces neatly organized in the following categories:

  • Layout
  • Color
  • Typography
  • Web design
  • Copywriting
  • Imagery
  • 3D
Creatorfuel inspiration screenshot

1 Idea To Think About

Changing your mind

We should all have a doc titled "Things I changed my mind about" and refer to it regularly. Things we think are such eternal beliefs can be eroded over time and it's important to know why.

Via @startingfromnix on Twitter

Do this:

Fire up your task-tracking tool or life management tool of choice and create a page called "Things I changed my mind about".

Whenever you change your mind about something significant add it to this page and add a reason... "Why I changed my mind".

Use it as a brain-dump journal of sorts.

Empty your mind into the real world. This makes it tangible and easier to navigate. You never know what you'll uncover or learn about yourself.

Set a recurring monthly reminder in your calendar to review this journal.

Also, if you're comfortable, would you tell me about something notable you changed your mind about recently? I'm nosy and curious.

Shower Thoughts

1) One day the world will be at a point where there is no one left whose birth year starts with a one.

2) School just catches you up on all of humanity’s progress so that you can continue where we left off.

3) Someone still remembers you for a random act of kindness that you made years ago.

Via Reddit