Senpai Design 101: The Journey Continues (Week 2) Visual Hierarchy

Osaz Eyyh
SENPAI
Published in
4 min readJul 21, 2018

We’ve all had our fair share of chaotic apps,websites or fliers that just had information flying all around in disarray.

Like an untidy room, everything shouts for attention

With everything screaming for attention, it could be quite difficult to make sense of it all and determine what’s important and what’s not quickly .
this takes time and in this age of super-fast internet speeds and the need for info fast, that’s time you (or the company hiring you) just can’t afford and might well be the difference between on-boarding new customers or just another unproductive day at the office with no new sign-ups.

With this in mind, designers obviously have a huge responsibility to ensure that content is organised properly, helping direct the viewer’s gaze rather than causing frustration.

As many experienced designers have said,

“Don’t force your users to have to think”

proving once again that design is more than just pretty visuals and fancy fonts but also really serious stuff — Human Psychology 😱🤓.

Organising content properly and in order such that it is easily useful to users is what is referred to as Visual Hierarchy (a huge word to show its really
huge importance) and it can prove to be very difficult or frustrating if we’re just going by the Rule of thumb. Luckily for us however, there are principles that designers can follow to achieve Strong Visual Hierarchy thanks to the important work of Psychologists who have spent years conducting research and studying how Human Beings see things. Because of their huge success and dedication, Designers now have a direction to follow to create things that resonate positively with the viewers.

The most popular of these principles are the Gestalt Principles (founded by Max Wertheimer and has been improved over the years by other people) whose major philosophy is that Humans due to the workings of our brains, eyes and experiences garnered over time, tend to see the whole by default before going deeper to identify the parts that make up that whole.

“The whole is other than the sum of the parts.”—Kurt Koffka

It’s like how you would see the whole Painting before noticing the individual characters that make it up or how you see the vast forest before noticing the individual trees or how you see the Rainbow before noticing the different colours .

You get the point 😀.

There are many Gestalt principles and depending on who you ask they include: Similarity, Continuity, Proximity, Common fate aka Synchrony, Figure/Ground,Uniform Connectedness, Symmetry, Common Region,
Past Experience, Law of Focal Point, Law of Prägnanz which are heavily influenced by things such as Colour, Size, Fonts, Spacing etc and a proper understanding and utilization of them can help designers achieve Strong Visual Hierarchy and communicate the intended message quickly.

My take on some of the Gestalt Principles

These principles will not be discussed in this article but there abound a number of really detailed articles which you can check out.

For the scope of this article and as my quiz for the course this week, I’ll be trying (emphasis on trying) to show how a website of my choice — krispykreme.ng in this case — is obeying the laws of visual hierarchy.

I must state at this point that I just really love this website for no reason (or wait! maybe that’s just the power of Visual Hierarchy at work *wink*).

I mean who wouldn’t , just look at those Donuts!
Some more Gestalt Principles at work here
Landing page : A lot of high-quality images are used to draw the viewer’s attention, white-space just makes everything pop.

I think the designers of this website are really awesome and did a great job of with the Visual Hierarchy of the website.

From the landing page, you’re just drawn in and you can almost hear the donuts calling out to you. I don’t know about you but for me if I had some cash I’d definitely get me some donuts and for Krispykreme, that would mean a new customer — all thanks to Visual Hierarchy.

All Designers should learn how to properly utilize Visual Hierarchy. I sure will.

--

--

Osaz Eyyh
SENPAI
Writer for

Budding multi-disciplinary Designer trying to change the World by improving myself one step at a time.