No items found.
No items found.
Wall of Love
Roadmap

Visual hierarchy fully explained (& illustrated)

Key points

Topics

  • 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.

Fresh Youtube videos

Random

Reflections

Have you forgotten about the fundamentals?

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.

...read full post
Aug 15, 2023

Nonfiction books are too long

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.

There's elegance in brevity.

...read full post
Aug 14, 2023

A note on this weird cold plunge trend

So many of these "gurus" telling us to take cold showers and cold plunges 😂 😂

If you’re tired all the time:

  • Go get your bloodwork done and see what you’re deficient in
  • Get outside. Get some damn sun
  • Sleep well
  • Use your mind to build something – It'll energize you

Stick to high-impact basics. These little micro-optimizations aren't going to change anything.

Enjoy your hot showers 🔥🚿

...read full post
Jul 21, 2023