Visual hierarchy is a crucial element in any design – whether in graphic design, web design, book design, interior design, or even architecture. One could say that the visual hierarchy is the delivery of a user experience or design that allows the user to process the necessary information efficiently in a way that embodies balance to the visual eye. There are certain principles in design that help foster balance. Without following these principles, your graphic designs or websites can be bland or too busy – not allowing the user to digest your message efficiently.
These design principles exist to help you effectively communicate your message through design and challenge you to ask yourself the intention behind placement and balance. You can work within or even against these principles to achieve your goal – however, it’s vitally important to make conscious design choices and to be able to defend them. These elements can be a large headline, a bright color, working around an image, etc. There are many ways to create balance in design.
Let’s take a look at some of these principles and how they can help create balance in your design and prioritize the most important elements of your design.
Don’t Betray Your Visual Hierarchy!
Hierarchy is a principle in which designers use visual components to improve a design’s organic appeal and show each page/screen’s importance by manipulating characteristics. Designers place elements to create interfaces that optimize the user experience and drive conversions, in the case of conversion-focused sites.
Key Elements in Visual Hierarchy
- Typography, Texture, and Style – Using fonts that are pleasing to the eyes helps draw attention to the focus of the message. Typography styles (Serif, Sans-Serif, Script) can also communicate the type of industry they work in – professional/formal, family-centric, etc.
- Scale to Size – Using intentional scale to size helps give users an idea of the size of your product or if you are making an exaggeration. It’s important to keep realistic proportions top of mind.
- Color – Bright colors typically attract more attention than muted tones, and sometimes, knowing how to blend colors can also help. Color depends on the tone you would like to communicate to your audience. You can read our article on Color Theory at this link.
- Contrast – Dramatically contrasting colors are more eye-catching.
- Alignment – Using a grid or guides can be helpful to keep things straight & laid out with proportional spacing.
- Proximity – Placing elements close enough can seem related.
- Whitespace – Add more space around the elements draws the eye towards them.
- Perspective – Create an illusion of depth.
Now that we understand what visual hierarchy is, we know there are many aspects to consider, like fonts, colors, images, and placement. Intentional visual hierarchy creates a balance and helps designers and developers manipulate these characteristics and logically layout each element so that the viewer and user can easily digest important elements.
Design Mistake #1: The Orphan
An “Orphan” is best described as a lonely word or two located in the last line of a paragraph or situated at the start of a new column or page – separated from the rest of the text or paragraph. Orphans disrupt the flow of reading because the viewer has to connect it to the previous line.
Design Mistake #2: The Miss-Aligned Text
Alignment is the placement of text/texts or any other design elements on a page, so they line up. When designers do not follow those design principles, it creates a “Miss-Aligned Text.” Most people won’t even notice as it is mainly invisible, but you’d undoubtedly see if that poster had poor alignment.
Design Mistake #3: Improper Use of White Space
White space is what it sounds like, the area around the image or a word(s). White space allows text, patterns, textures, buttons, logos, and other objects to have room to breathe. “Improper Use of White Space” misuses areas in your design that do not contain content. Depending on the use of your design, your use of white space may vary. For example, a website hero graphic will potentially have more negative space to the left of an image so that HTML text can be placed on top of the image. The thought process behind the “white space” is to emphasize other layout elements intentionally.
Design Mistake #4: Inaccurate Scale to Size
When designers talk about scaling, it usually means the quality and proportion of the size of the design element to be bigger or smaller. Scaling is the progressive classification of size, amount, importance, or rank. “Inaccurate Scale to Size” is the opposite of when the scale is in harmony; it’s in proportion.
How To Spot Bad Hierarchy
Let’s look at what bad Hierarchy or Design No-Nos is. We did a few graphics to show you what a designer’s worst nightmare is.
The examples shared on the “How to Spot Bad Hierarchy” have many mistakes. Can these be avoided? Of course, designers should pay close attention to the common errors, and it is vitally important to learn that Visual Hierarchy is so essential to all designers.
Final Thoughts
There is so much thought that goes into graphic designing and web designing than popular thought. All designers and web developers should know the principles of design hierarchy because without this knowledge, well, let’s say, and your designs won’t be as impactful as you want them to be or too busy. They will be too difficult to navigate on the website. To avoid these visual design hierarchy mistakes, picking the right Agency for your brand is paramount.
Here at Kingdom Branding, we are passionate about designing with intention and understand the core importance of visual design hierarchy. Schedule a discovery session with us, and we will be happy to talk you through the process of creating your brand.
Resources:
- https://baerpm.com/2015/11/12/the-five-elements-of-visual-hierarchy/#:~:text=Below%20are%20the%20five%20components,contrast%2C%20alignment%2C%20and%20proximity.
- https://uxdesign.cc/how-bad-hierarchy-in-design-can-confuse-users-4fb089f29aa8
- https://www.flux-academy.com/blog/understanding-hierarchy-in-design
- https://www.edgee.net/five-techniques-for-fixing-widows-and-orphans-using-indesign-illustrator/
