CF #14: What makes a layout "look good"?

Key points

  • VAS by 3M is an AI tool that gives you feedback on your layout's visual hierarchy
  • Intentional alignment (using grids), scannability, and clear visual hierarchy make a layout "look good"
  • A web page's layout should clearly convey the following 3 things in 3 seconds or less: 1) What the page is about 2) Why the user should care 3) Where they should go next
  • Apply what you learn by sharing it on social and setting a deadline for doing so
  • People are under the misconception that some are born with an "eye" for design. Raw talent. Your "eye" is honed, not inherent.

My new layout design course, an incredible visual hierarchy tool, what makes a layout "look good", two steps to applying what you learn and much more.

3 useful tools

1) Typographic Posters

Posters are designed to draw you in and move you with a message as quickly as possible.

This is why Typographic Posters is one of my favorite places to get unique layout inspiration (for any type of project).

Screenshot of Typographic Posters website

2) Visual Attention Software by 3M (Predicts how people will view your layout at a 92% accuracy)

Sometimes you've been staring at your work for too long to be objective.

Want to see what your audience sees? As in, which elements they'll see first, second, third? Give it a shot. It just might surprise you.

Screenshot of 3M

3) Figma

Long time Figma user here.

Can't believe I haven't recommended this one before.

It has become an underrated all-in-one tool that many can benefit from: Designers, generalists, marketers, solopreneurs. Everyone.

What I create in Figma:

  • Web design
  • Slideshow presentations
  • Social media posts
  • Youtube thumbnails
  • Brainstorming and planning
  • I even write some documents in Figma
Screenshot of Figma's user interface

3 effective tips & techniques

1) What makes a layout "look good"?

Our example:

Print layout covering coffee

#1: Aligned to a grid for visual consistency:

Coffee print layout showing good use of alignment

#2: Spacious type for scannability:

Coffee print layout showing good use of white space

#3: Clear visual hierarchy to facilitate comprehension

Coffee print layout showing good use of visual hierarchy

2) 70% of online retailers fail this visual hierarchy test

EyeQuaint ran the 3 W's test on 43 of the biggest eCommerce websites in the world.

The 3 W's test is quite simple.

A web page's layout should clearly convey the following 3 things in 3 seconds or less:

  1. What the page is about
  2. Why the user should care
  3. Where they should go next

The results were fascinating.

Out of 43 websites, 30 failed the test, including Walmart, GAP, and Office Depot.

Screenshot of Office Depot's website showing that their offer is not immediately visible

Best Buy and H&M did very well on the other hand:

Screenshot of Best Buy and H&M's websites showing that they passed the visual hierarchy test

3) How to apply the things you learn in two steps

STEP 1: Commit to sharing what you learned with others (Instagram, Twitter, Blog, Youtube).

Make this your first instinct. Always.

Example: If you just learned a new piece on the piano, commit to recording yourself playing so you can post it on Youtube and Instagram.

STEP 2: Give yourself less time

Set a deadline for sharing what you've just learned.

Give yourself just enough time to do it right but not enough time to sit there and second guess yourself.

Convert what you learned into something real.

3 ideas to think about

1) Visual design can be boiled down to using layout, color, and typography to fulfill the requirements of a project.

“I create shapes and stuff in Figma and they pay me for it. Unbelievable.” -brianmoyano on Reddit

2) There is a high likelihood that most layout templates on the internet have not been tested for usability.

3) People are under the misconception that some are born with an "eye" for design. Raw talent. Your "eye" is honed, not inherent.

Shower thoughts

1) Humans invented machines to save some effort and now go to the gym to make up for the saved effort. We’re weird.

2) 200 years ago, people would never have guessed that humans in the future would communicate by silently tapping on glass.

3) If everything goes smoothly, you probably won't remember today.

Via Reddit

Tell me, what was the #1 thing you took away from this email? How will you apply it to your life/career/business?

Reply to this email with your answer. I'll be sure to get back to you!

Much love

-Izzy