Understanding Visual Hierarchy
Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance i.e. it influences how the human eye perceives what it sees.
I’ll be showing how the OnePlus mobile phone website obeys some of these visual hierarchy. Red boxes will be used to envelope each group to be analysed and also the numbers in red represents the order of hierarchy.
Let’s start with the hero of the site
The image of the phone will be spotted first because it obeys two laws of visual hierarchy i.e. size and color. The image of the mobile phone is large and bright red in color so it catches the attention of the eye first this is because the eyes is attracted to bright colors especially on inert backgrounds.
Next thing the eye notices is the block containing the name of the phone and it’s price, and what attracts the eye is the big and bold text of the “The Red You Need”
Next up to be noticed is the OnePlus logo and the navigation bar that follows will be next. The navigation bar is seen as a group because it satisfies the Gestalt principle of proximity. That’s all there is to the Hero of the website.
Now, we move to the content of the site
As you can see, the font and also the font size of each heading of the three groups has a different typeface in contrast to each ones content. The contrasting typeface depicts hierarchy.
Next is a 3 x 1 picture grid
The grid is seen as a single group because of the similarity principle of gestalt that it obeys. The blue on the left and red on the right makes it look like colors of the french flag so the eye will perceive it as a single element.
And finally, the footer of the page
The heading of each column is bolder than the content below it so as to depict visual hierarchy and each column is perceived as a single group even though there is no border because it satisfies the proximity principle of gestalt
The phone number is blue to depict that it’s a hyperlink and it’s clickable.
Also, the social icons satisfies the gestalt principle of closure relative to the background of the page which in turn makes the eye perceive them as social media icons.
Conclusion
I hope i have been able to put out some obvious and not so obvious visual hierarchies with this simple illustration of the visual hierarchy on the OnePlus website.
Thanks for reading.
