A good layout is arranged such that it creates an intentional viewing sequence wherein elements are noticed one after the other
Visual weight is the force with which an element draws our attention
The relative visual weight of elements dictates hierarchy (the pecking order)
Visual weight can be increased or decreased by manipulating any of the following 5 parameters: scale, white space, content format, color contrast, position
Scale: Bigger elements are noticed first
White space: Elements with more white space surrounding them are noticed first
Format: Videos are noticed first, followed by images, icons, shapes, and text
Color contrast: The higher the luminance difference (higher contrast ratio) between a foreground element and its background the higher its visual weight
Position: Elements positioned high up are noticed first
Visual hierarchy is, in my opinion, the most important layout design strategy. It creates a viewing sequence which makes consuming a composition much much easier. It makes sense of the layout as a whole by producing a story (every story has a beginning, middle, and end) and relating elements via the pecking order it creates.
Creatorfuel helps you master high-value skills of the digital era. Learn more.
weekly creatorfuel
Actionable tips & tools for creative minds.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
weekly redesigns
Learn design through redesigns
Every Tuesday, I redesign something you send me and explain my exact thought process
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
In a layout, what determines the order in which we notice elements? As in, what dictates which elements we notice first, second third, and so on?
The answer to that is visual weight.
Visual weight
An element's visual weight is the force with which it attracts our attention. The heaviest elements are noticed first while the lightest are seen last.
5 parameters can be manipulated to vary an element's visual weight (and thus its ranking in the visual hierarchy):
Scale
White space
Format
Color contrast
Position
We'll summarize and illustrate all 5 strategies.
1. Scale & size
Larger elements are noticed first. If you want to emphasize a particular element, just make it bigger than the others.
2. White space
Less content density around an element means less cognitive load (less distractions) and more attention given to that element.
3. Content format
Viewers notice videos first, then photos, followed by icons, shapes & lines, and text is seen last.
4. Color contrast
The more pronounced the difference in luminance (quantified by the contrast ratio), the higher the visibility.
5. Position
We’ve been accustomed to consuming layouts (such as books) from top to bottom. As a result, we visually prioritize elements at the top of a layout.
The visual hierarchy cheat sheet
weekly creatorfuel
I share tips & tools every creator should know.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
weekly redesigns
Learn design through redesigns
Every Tuesday, I redesign something you send me and explain my exact thought process
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
I’ve learned that no amount of coaching, fancy apps, “creativity hacks & tips” etc, will make up for:
Subpar sleep
Low vitamin D3 (lack of direct sunlight exposure)
Lack of movement (sports, resistance training, cardio)
Poor diet (macro and micronutrients)
Nonexistent stress management
Get these right first.
They are the highest impact things you can do.
Ignoring these is like a student ignoring the fundamental concepts needed to ace an exam and instead focusing on color-coding their notes, using fancy study apps, and organizing their study space with intricate decorations.
Master the basics. Everything else falls into place.
Most nonfiction books should've been 1000-word articles.
I find myself abandoning a lot of books right around the 25-30% mark.
Not because they're bad, but because I fully get the gist by that point and it's right around when the repetition of examples and ideas begins.
I'm okay with abandoning a book midway now. Just a couple years ago, I would power through the whole thing in fear of missing out on some crucial ideas in the later chapters.
Now, I just have fun with it. If it piques my interest, great – I'll buy it, read the chapters that seem interesting, get what I came for and move onto the next one.
I think a lot of these authors are just trying to meet some sort of quota. I dunno.