Fixing common graphic & web design layout mistakes (real example)

Key points

  • Increase the difference in size between heading levels to make visual hierarchy more obvious. This leads to easier content scanning
  • Be careful not to overuse text decoration or include too many different colors. This create visual noise. If everything is important then nothing is important
  • Prioritize separating content with white space over using background colors or lines. This reduces cognitive load
  • Reduce the number of content columns so as to not interrupt the vertical momentum of moving down a layout

Exploring some of the most common graphic & web design layout mistakes and concepts, including visual hierarchy, white space, content density, and visual noise. These are applicable to website layouts, magazine layouts and more. Graphic design tips brought to you by Creatorfuel.

I use a tool called Ubersuggest to do keyword research for my blog.

This is their dashboard (It sucks)

It’s uninviting and cluttered beyond belief.

How to improve a bad layout (Read more about this)

I inspected the page and made a few quick changes as you can see.

Make heading levels more obvious

why?

Clearer hierarchy makes content consumption easier

Less bold text. Less colors. Less visual noise.

why?

if everything is important, then nothing is important. let’s let the important stuff shine.

Separate content with white space

why?

We hate thinking. reduce cognitive load by removing stuff that doesn’t need to be there

Reduce the number of content columns

why?

Having so many columns interrupts the vertical momentum of moving down a page

It's not perfect, but..

in just a few minutes we made it a little easier for our brains to interpret this layout