Visual hierarchy: a study of design principles in action
Today in my UX Design course we learned about visual hierarchy and why it matters. We covered different design principles, such as size, contrast, whitespace, proximity, symmetry, the rule of thirds, the rule of odds, implied movement, the concept of “below the fold”, and eye tracking.
To practice our newly-learned skills, we were challenged to take screenshots of a few websites and identify the different principles of visual hierarchy in play.
First, let’s take a look at MindBody Online
The Unique Value Proposition (UVP) is immediately clear: MindBody provides wellness-related services for everyone and for businesses. A place where health-conscious customers can explore and grow.
While the two images have similar feels, the readability is wildly different. The image on the left provides excellent contrast for the white text. The image on the right, however, makes the white text extremely hard to read.
They do a great job placing everything you’d need at first glance above the fold.
Since the landing page has minimal content, the implied movement is pretty straight forward. Just like the text alignment, my eye movement (or saccades, if you want to get fancy) starts on the left and move right.
The plain dark gray background of the footer provides a great contrast to the white lettering.
I like that the designers put what would normally be on the top navigation bar at the bottom, below the fold. To me, it says “you’re the most important part. We come second.”
All in all, MindBody’s landing page is simple, direct, and easy to use.
Now let’s take a look at Ally Bank*
The first thing I notice when I look at Ally’s landing page is the white space. It provides great contrast, making the text extremely easy to read.
Their UVP is immediately communicated.
The combination of text and graphic as their hero image says, “we’re the best online bank, and we’re here to help you thrive”. They’ve literally underlined this with their UVP: We’re always looking for new ways to deliver financial opportunity — no matter how you define it.
The primary and secondary navigation bars are easy to, well, navigate. And the teal background of the login button makes finding it relatively effortless.
Below the fold, we see a great example of the rule of odds when displaying their other services. Proximity shows us that these sections are related.
*In the spirit of honesty: I’m a longtime Ally customer and have had nothing but top-notch service. So while I’m not getting paid for any of this, I have to admit that I’m completely biased.
Lastly, let’s take a look at every tech-savvy parent and grandparent’s favorite website: Facebook
Their UVP is front and center (well, front and left, but you get the idea). Immediately I know that it’s a place for me to connect with friends around the world. I don’t even have to leave the page to sign up, it’s all right there. And best of all, it’s free!
The navigation bar is simple: just the logo and the login fields.
The footer, while a bit chaotic, contains everything else you could possibly need in plain English (or Spanish, French, Chinese, Arabic, etc).
With contrast, proximity and plenty of white space make Facebook’s landing page straightforward and easy to navigate.
To sum it all up:
I learned a lot. But if I had to take away just one thing, it would be who you are/what you stand for matters. And you should always put your most important information first.
