Fundamental design principles, using Stripe as a case study.
Visual Hierarchy.
I have always believed in some form of hierarchy to life and existence in itself but this article is not about my philosophical musings, it is about Visual hierarchy.
Visual hierarchy is the ability for a design to draw the user’s attention through the design in a meaningful and digestible way. In web design, visual hierarchy gives the user a sense of direction and order on what action to carry out on the page, or specify the use of the platform.
A few of the things used to define visual hierarchy, are as follows:
1. Size
2. Color
3. Space
4. Alignment
5. Grouping
Stripe.com is my favorite website to visit
Yeah, I love stripe so much that is my subheading, we would use stripe to explain Visual Hierarchy.
I simply love everything about stripe’s website and the homepage ain’t even the most fascinating page it has, but it is what we would focus on for this page. Now due to visual hierarchy the fist thing the user’s eye gets draw to within a split second is the banana on the right side of the screen, yeah I know you think the phone should be the most captivating thing, and hence the user saw that first but I say it is the banana and then perhaps the tomato because although the phone and tablets are pretty big and bold, they are also white which helps create an easy contrast and draws your eyes towards the fruits and then the devices in section 1, here the color and contrast has created a from of unity that describes the relationship between the individual parts of the design, and also the whole of the composition. Note that size is the major feature that comes into play in section 1 as well as color.
The user’s gaze then shifts next to the heading in section 2, which immediately explains the product. Stripe is amazing for online payments by the way, you should look them up. Sadly you may not be able to use them if you are in Nigeria which means you should look into the best and secure alternative in the country called Payant. Here size and grouping comes into play, the size of the subheading being grouped with the text beneath it.
Now based on the kind of user, the hierarchy of section 3 and 4 could be swapped, for a developer and a designer such as myself I would most probably throw a quick glance at the navigation bar (section 3) before focusing in the call to action buttons in section 4. The call to action buttons aid in giving you a sense of direction on what you are to do next, if you are going to use Stripe for the 1st time you would have to create an account.
Objects must be aligned in a symmetrical manner to be seen as whole, hence the alignment of the navigation links with the stripe logo on the header section(3) of the web-page. Also space was applied in section 4, so as not to distract from the content in section 3 but to help lead you to the right action as soon as you are done reading.
Now scrolling through the website brings you to another beautify implementation of visual hierarchy built to target a specific type of user, the developer. This is was created by taking advantage of human centered design( I would cover that in another article). This implementation has been divided into 3 sections.
In section 1 you see the use of size and color, the icon and the subheading take priority with text to help further explain/buttress a certain point, and yeah grouping comes into play also.
In section 2and 3 grouping and color play an important role, the background color and the tiny button at the bottom right share slightly similar colors hence the users immediate knows this what to do, in this case this is a form of sandbox to test code snippets. Color also links both sections together, the highlighted color of the buttons on the right helps the user to easily identify them as tab buttons and to know what tab is active and what isn’t.
Understanding design hierarchy is really important and would really improve your skills and your understanding of design. You can learn more by reading up cool stuff here and here.
Hey, read the links and practice what you have read in your designs, also watch out for my article on human centered design sometime this month or next.
Cheers.
