As a designer or artist, if you understand some basic psychology and human visual perception, you can create compelling work that attracts attention, communicates clearly, and keeps people engaged.
All art and design is created by people, for people.
To capture people’s attention and draw them in, you need understand how we think and see, and use visual hierarchy to make our work relevant.
It doesn’t matter whether you’re designing websites or painting portraits. People see certain things first, and other things last. It’s your responsibility to guide their eyes through your design and to create compelling calls to action.
What is visual hierarchy?
Visual hierarchy is the ordering of content in a composition so that you effectively communicate information and create meaning.
You use visual hierarchy to direct your viewers’ eyes to the most important information first, and then to secondary and tertiary content.
Visual hierarchy has to make sense. Most of the time it’s up to the graphic designer to figure out what the important information is, and what’s the supporting content. And then, to arrange the elements of your design in the the space so that the viewer will enter the design at the right place, travel through the design based on “signs” or “cues”, and take the desired actions before exiting the design.
People are hit with visual stuff — what I call clutter — constantly. To capture their attention, you have to get noticed. To get noticed, you have to stand out. You stand out by being different, bigger, heavier… you get the idea.
Given this understanding, you’ll realize how important visual hierarchy is. You want people to engage with and react or respond in the desired way.
How do I use visual hierarchy in my designs?
To create visual hierarchy, use the elements and principles of design. You have to consider:
PROPORTION The size relationships of the elements in the design to each other and to the design size as a whole.
POSITION is the location of the elements within the design space. Is there a logical path of travel from one thing to another? Are you composing the design based on the Gutenberg Principle or working against that natural flow?
Is the DIRECTIONALITY of elements helping or hindering the order of information?
Is there enough CONTRAST between the working elements and the background so that the design is legible and readable throughout?
As you compose your design, step back often to see it from a distance, study it, and ask yourself;
What elements need to be larger, bolder, brighter or advance in space so they’re emphasized and call more attention to themselves?
What elements need to be quieted down by making them smaller, duller, or sit back in space so they support instead of fight the more important things?
What elements do I need to eliminate because they’re just cluttering up the design?
For a design to work the way it’s supposed to, everything in it needs to get along and contribute to the whole design. Every element has a different role to play, but all elements have to play together.
When everything’s competing for attention, the viewer will get tired and frustrated. They’ll dismiss the design and leave without completed the call call to action.
Get rid of what’s not working.
Is visual hierarchy always necessary?
If the purpose of your design requires you to use hierarchy, yes, it’s necessary.
But if the purpose doesn’t require hierarchy, don’t use it.
So you need to know why you’re creating the thing.
For example, surface designs may not need any hierarchy. They’re decorative, and the way people use them is different from the way people use an app or read a magazine.
Not all compositions require you to lead the viewer through the design from most imporant to least important thing.
It's easier said than done.
Understanding the principle of visual hierarchy is relatively easy compared to using it effectively.
As with anything in learning visual design or art, you have to apply what you learn over and over again in order to truly acquire it.
So, be deliberate about having clarity of the principle, noticing it at work in design all around you, analyze how it’s used, receive the results of your observations, and apply them in your own work.
Follow and connect with Alvalyn