Visual Hierarchy is the arrangement of elements in a way that implies relative importance. It’s the designer’s attempt to guide the order in which the eyes perceive information presented. The way we perceive information is affected by several factors that contribute to how we rank the hierarchy of the content within the layout. White space (also know as Negative Space) plays an important role in effective visual hierarchy, and in this article we will look into it.
White space helps with readability and comprehension immensely. Have you ever looked at a menu / a website / an interface and thought, “This looks and feels great, but I’m not sure why?” The answer usually is good use of white space. A study found that good use of white space between paragraphs and in the left and right margin increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.
Gestalt principles of grouping are a set of principles that account for the observation that humans naturally perceive objects as organized patterns and objects. Gestalt psychologists argued that these principles exist because the mind has an innate disposition to perceive patterns in the stimulus based on certain rules. These principles are organized into five categories:
We will discuss these in more detail in the next tutorial.
Let’s take a look at Helen Tran’s site and how she uses white space intentionally:
Beautiful portfolio! Now let’s take a closer look:
Notice how there are 4 clear blocks of content. Let’s break it down either further:
Helen uses a combination of line height, font size, color, and white space to separate content within each block itself. This allows for ease for users to naturally navigate the sections of these blocks of content.