Web Design #9 - Visual Hierarchy

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.