What is Visual Hierarchy?
As the name states, visual hierarchy is about establishing which elements of a design are the most important ones. We can set important elements on a webpage by figuring out the types of contents in which people are drawn attention to. Overall, visual hierarchy is all about defining a path for users in order to guide them through the page. During the process, we use a combination of position, size, colors, spacing, borders, and shadows to establish a meaningful visual hierarchy between elements and components.
Fundamentals
-
Position important elements closer to the top of the page, where they get more attention.
-
Use images mindfully, as they draw a lot of attention (larger images get more attention).
-
Whitespace creates separation, so use whitespace strategically to emphasize elements.
Text Elements
-
For text elements, use font size, font weight, and whitespace to convey importance.
-
Text Elements: titles, sub-titles, links, buttons, data points, icons. You may de-emphasize less important text, like labels or secondary/additional information.
Between Components
-
Emphasize an important component using background color, shadow, or border (or multiple).
-
Try emphasizing some component over another component by de-emphasizing that component.
-
Components to emphasize: Testimonials, call-to-action sections, highlight sections, preview cards, forms, pricing tables, important rows/columns in tables, etc.
