Visual Identity + Web Design

The Importance of Visual Hierarchy in Web Design

visual hierarchy

The Importance of Visual Hierarchy in Web Design

Gather ‘round kids, it is story time with talonX. Ok, well, less story time and more blogging time – but same thing different name.

Today, we are going to talk about logo placement, web design and how to marry the two. Building a brand is not the easiest thing to do, but building a brand in the digital age is even more daunting. The sheer amount of companies and brands on the market now is staggering.

In Calgary in 2010 there were over 52,000 businesses with employees. That is an absolute minimum of 52,000 brands that are competing with each other for time on an audience’s social media page, mobile device and google search. It’s pretty much guaranteed that there is a business or twelve that is your direct competition – and that is why your website has to be branded and designed strategically.

Your website is your first line of defence against all the other businesses out there in just the Calgary area alone, not to mention the world. It makes sense that your first instinct is to flash your logo around your website as much as you can – like an ADHD squirrel on speed, but please don’t!

Trying to think outside of the box? Have a great idea to put your logo on the right hand side of the website, instead of the left like everybody does? No. Just no. There is a reason that nearly every professional web designer you meet will put it on the top left side of the page, and that reason goes by the name of visual hierarchy.

Visual hierarchy is the way that you arrange the information (in this case on a website) that implies importance. Visual hierarchy influences the way that the eye moves around a page and almost anything that was designed professionally is designed with this in mind. From the bible to the take-out menus in your kitchen drawer, visual hierarchy has ruled your life and you didn’t even know it.

Visual hierarchy is a part of the cognitive fluency theory, your brain would prefer to take the easy way out and think only about easy things. Of course, this hierarchy is different for different cultures and different languages but in North America and most of what is considered the “western” world, our hierarchy is pretty standard. It is so standard that you never question why pretty much everything you look at follows the same pattern – until you come across something really poorly designed that does not follow the hierarchy and immediately decide it’s not worth your time. You scanned it and immediately disregarded it. The logo was probably in the middle on the right hand side, with the most pertinent information at the bottom.

Every culture in the world reads from the top down and in most English speaking countries we read from left to right. The poynter institute (journalism nerds) have done many tests that show that pretty much everyone quickly scans a page before they invest time into it. The two most typical scanning patterns are Fs and Zs. If you scan in an F pattern you scan the information on a page moving your eyes in the pattern of an F, if you scan in the Z pattern well… you get it. Note that both of these scanning patterns start at the top left corner. Which is (hopefully) where your logo is placed as web designers consistently design with this principle in mind.

There’s another reason that having your business logo consistently placed on the top left corner is effective. It’s for people (like us) that always have about 45 tabs open on their browser, if a person is browsing through your site and they have opened multiple pages they always know that they haven’t left your webpage and each page they click through your site is another impression of your logo. Impressions = brand recall.

Link your logo to your homepage. If and when a user gets lost in your website they instinctively know that a simple click of your logo will take them back to your homepage. This does two things, it makes them actually interact with your logo AND it keeps them on your site. A user will instinctively know to do that because it is the norm, best practice, whatever you want to call it.

Now, we are not saying be like everyone else, that is the exact opposite of everything that talonX stands for, but when it comes to the fundamentals stepping too far out of the box can be more of a detriment than a help – trust us, we are the professionals for a reason.

If you want to get out of the box with your website or brand design call us up or stop by and have a coffee. We can help you get out of that box without setting it on fire.

 

 

 

Newsletter

Get first glimpse at cutting edge design, special deals and discounts, and important updates on our services. No spam, just love.

Sign Me Up Yo!

  • Ready to get a quote? Why not fill out one of our ever popular...

    Starting Checklists!

    Website Checklist
    Logo Checklist
    Animation Checklist

    Want to talk directly?
    P: 1.587.487.6094
    E: studio@talonx.com