Personal Branding
To make sure your designs communicate as effectively as possible, it helps to approach design strategically rather than just going with a gut feeling of what looks good.
If you've ever attempted to design something on your own, you're likely familiar with the feeling that something isn't quite right.
Sure, there can be a lot of things that aren’t quite right
But the most overlooked “flaw” in any design is VISUAL HIERARCHY - that thing that takes any design from a flop to something great
What is visual hierarchy?
Visual hierarchy is the art of guiding your audience's eyes through your design in a way that makes them go, "Wow, I get it!" Imagine a website where the headline is bigger, the subheading is a bit smaller, and the body text is smaller still. Boom! That's visual hierarchy in action.
When designing, ask yourself these
three questions
Where will the viewer’s eyes initially go (the focal point)?
Where’s the second place the eye will go?
Where does the viewer’s eye finally end up?
Techniques for establishing visual hierarchy
Size and Scale
In graphic design scale and proportion as design elements refer to the size of one graphic element in relation to another graphic element in design or artwork.
Size and scale are one of the core principles of graphic design, and they can affect on the meaning of your design and it can help the viewer to identify quickly the most important elements from your design and focus on the primary information.
The bigger the shape, the more it will draw the viewer’s attention attention
Color and contrast
Did you know that color plays a vital role in Graphic Design? It helps create visual hierarchy and directs the viewer's attention towards specific graphic elements by using color and contrast in a design. Brighter colors are often used to highlight the most important elements.
Colors naturally draw our attention, especially when they are used strategically to emphasize certain information or images. Bright colors like red or yellow are hard to miss, be it on a traffic sign or a flyer in your local coffee shop.
But, going overboard with all the colors of the rainbow in a design negates any impact the colors might have had in creating visual hierarchy. So, it's always better to use colors sparingly and with purpose.
Type Hierarchy
Typographic hierarchy in graphic design is a system used to organize in a visual way using typography the order of importance of the information shown in the design, where the title will be the most important element, and it will be bigger than the body text, and that will help the viewer to identify the main topic of the design easily.
This basic, three-level approach can be applied to any type of design, from creating your own business cards to websites. Let’s break down the levels and what they’re typically used for:
Level One: Generally, your level-one typography will be the most important content. This should be the most immediately visible typographic element in your design.
Level Two: Level-two elements usually help organize your design into sections or group related information together. They shouldn’t stand out as much as your level-one type, but should clearly direct viewers to the different parts of the design and help them navigate it easily.
Level Three: For a text-heavy layout, the level-three typography is generally the complete message, purpose, or details of the design. It could be long or short — a whole article, a short note, a brief description — but the primary concern for this level is that it’s highly readable since the font size will likely be somewhat small.
Spacing
Spacing in the visual hierarchy is used to give all your graphic elements in design more space and room to breathe, making it easier for the viewer to identify all objects in your design and order them by importance.
White (or blank) space and spacing in general is one of the most neglected design principles. But it’s also one of the most important.
When you fail to plan for some blank space in a layout — perhaps in an effort to include as much information as possible — you risk ending up with a jumbled, confusing design. That’s because white space is essential for separating and organizing the elements in your design and helping it look orderly and well balanced.
You’ve probably seen it before: a website or flyer design that’s so jam-packed with information, text, and imagery that you don’t even know where to start looking at it. Don’t create one of those designs that turn away visitors because it’s impossible to navigate.
Always plan for unused space. It’s essential for things like:
Giving the viewer’s eyes a place to rest and a path to travel through the design
Separating your layout into sections (the flip side of this is proximity — reducing space to place related items closer together — also an aspect of good spacing)
Proximity
When it comes to graphic design, there's this really cool thing called proximity that can help make your designs more effective. Basically, proximity is when you group related design elements together to create a visual connection or emphasize their relationship.
By doing this, you can guide the viewer's eye and make it easier for them to understand the information you're presenting. Whether you're designing a website or a brochure, using proximity can help you create a cohesive and easy-to-understand design.
The key is to find the right balance so your design doesn't become too cluttered. When used correctly, proximity can not only improve the clarity of your design, but also make it look more professional and visually appealing.
Alignment
Let's talk about alignment in graphic design. It's super important and can make a big difference in creating a clean and polished look. Basically, alignment helps organize elements in a way that guides the viewer's eye and creates a sense of order and professionalism.
When you use consistent alignment throughout your design, it helps to create a smooth flow that makes it easy for people to absorb the information. Whether you choose to center-align for a balanced look or justify for a clean and structured appearance, the alignment should match the overall design goals.
Using alignment with typography, images, and other graphic elements can really enhance the overall design and make it look more sophisticated. Plus, it reinforces the hierarchy of information, making it easier for people to navigate and understand the content. So, always keep alignment in mind when creating your designs!
Perspective
When it comes to graphic design, perspective is super important because it adds depth and visual interest to your creations. By playing around with perspective, you can influence how people perceive the space, scale, and importance of different elements in your designs.
Perspective also helps you create a hierarchy of design elements. When you position elements strategically, the ones closer to the foreground grab more attention, while the ones in the background support them. This is a great way to tell a story or emphasize specific elements you want to stand out.
Using linear perspective to create depth or atmospheric perspective to show distance are just a couple of ways to incorporate perspective into your designs. Doing this not only makes your designs look better, but it also makes them more engaging and captivating for your viewers. So go ahead and experiment with perspective in your designs!
One great example
Of visual hierarchy in action is Apple’s Website
At first glance, it might seem simple, but the strategic use of white space, focal points, typography, and colors can make a design effective and pleasing to the eye. When used correctly, visual hierarchy ensures that every design feels just right, even if there are only a few elements used.
When everything stands out, nothing stands out. The basic foundation of a hierarchy is that some elements need to be emphasized, while others not.
SQUINT TEST
But what if you’re just not sure if your visual hierarchy is working the way you intend it to? There’s an easy way to test its effectiveness that you can do at any time, no special tools required. It’s the trusty “squint test”
Just sit back from your computer screen a bit and squint at your design so all the details blur and you just see general shapes. What still stands out? Is it what you would want viewers to look at first? If so, then you’re in good shape — if not, then it may be time to go back and try something else.
Now you have some tools and techniques to start creating effective visual hierarchies. Go put them to good use!