Basics of Visual Hierarchy
Look around feverishly for anything that is interesting or vaguely resembles what you’re looking for, or is clickable — Steve Krug
You can’t deny that the above quote isn’t our default setting when going through google search results, checking a new website or an application. That’s basically how we use the web.
Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance. In other words, it influences the order in which the human eye perceives what it sees. The importance of this Visual Hierarchy (VH) in user interface design can’t be emphasized enough. It helps in
- Presentation: How your application is seen by your audience; this includes the tones and emotions it evokes in your audience.
- Interaction: How your application behaves in response to user actions.
- Organization: The structure of your application.
In summary, we use VH to communicate messages, illuminate actions and organize information. Users don’t read; that’s why we need to help them, and help us (product/service providers), know and understand what they need to do on our product.
Now how do we apply this? How do we ensure we are helping our users scan our content better? How do we highlight the important information and tone down the less important ones? Here are a few ways we can do that :
- Size and Scale
Let’s start with sizing which is a very basic but crucial principle that helps differentiate elements in a space. When you increase the scale of an element, you immediately give it a distinction from other elements, that way you’re pulling the attention of everyone who lays eyes on it. But you will have to be careful to not “over-scale / oversize” an element so you don’t intimidate or diminish the importance of other elements.
2. Colour, please!
Colours are very useful in conveying tones, emotions and highlighting importance. Understanding how colour works, in contrast, will help you in making better decisions. There are tons of ways we can use colour in VH, few which are:
- Using colour as a focal point on your design can help pull attention, no matter where it’s placed in context. That’s why texts links are blue; *well, most links. It’s also why accent colours are recommended when picking out a colour scheme; they help in highlighting important little perks using a different colour from the colour theme.
- Using colour to highlight between the primary and secondary actions. Filled buttons command respect and show that they are the most important action to take. They communicate the main thing/action on that specific page. Outline buttons convey that you have a choice to either click them or not but it’s not important you do. Now, buttons without a colour splash are just saying “meh”. When applying this, you should understand through your UX strategy what is important for your product, knowing what to place in a bold button and a “meh” button.
Now in context,
3. Utilize Typefaces
Typography plays a huge role in visual design. Web design is 95% typography. Using it right conveys every emotion your brand is about to your user. Plus it is the ying to colour’s yang and when utilized well, they are the perfect eyegasm.
I implore every creative reading this, please explore typography and typefaces. I could come across 10 product design screens in a day, and at least 6 of them have the same “font”. Some designers don’t even know more than the default fonts on their system and that’s boring and not creative sorry not sorry.
Back to the topic, how do we utilize typeface in relation to VH?
- You don’t need to use two or three typefaces in a design when you can harness just one type and it’s various font and sizes. One quick tip is to skip a font-weight. Go from light to medium, bold to regular. This applies better on types that have more than 6 font families. This alone helps in creating enough contrast.
- In addition, you can balance larger fonts that have a lighter weight with smaller fonts that have a heavier weight so they’re perceived with similar importance.
There should be a clear difference in weight and size between the types you will be working with. That way, it’s easy to create a visual symmetry and hierarchy.
Another way to balance contrast in typography is by introducing colour. Colour in this context means tones, tints and shades.
4. White Space
Now, this is the bind between all I’ve talked about. White Space. Here’s a twitter thread I made on it. White space (which is necessarily not white) is the blank or negative space between elements in a design. It can be used to group elements together or separate them to give them greater importance. Always know that the space you leave blank is as important as the space you use.
Look at white space on these examples;
The next example shows Size/Scale, Color, Typography and White Space I talked about in conjunction to create a pleasing hierarchy.
We’ve gone over a few tips and examples of visual hierarchy for UI/UX Design. They might seem like a lot to take in, but what you can do is start simple and focus on that one thing of great importance and rank the rest lesser. You might come across clients that don’t understand what balance and visual hierarchy mean and you might hear them say things like
“Can we make the logo bigger and centred?”
“Oh, we need to bold some of these items so they can be bigger”
“Can we make this red pop more ?”
Blah blah blah, in this case, you need to step back and really understand the goal of this design. Who is the target of the design, where are you aiming for ? what kind of emotion and tone do you want to relay to your users? By answering these questions and understanding your answers, you’ll be able to use VH effectively and also make your client{s} understand why the logo will not be big and centred if it’s not necessary. *eye roll
I’ll love to hear from you so you could tweet at me here or via mail. Also, here’s a link to my previous article on steps you should take before starting a design project.
I’m currently open to product design collaborations and remote jobs; you can contact me and view my portfolio here.
