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.
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).
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 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).
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
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 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.
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.
Julia Khachirova Take it to go! Download the PDF version by clicking the image below: 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.
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 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