Web Design #9 - Visual Hierarchy

hjbaek91·2021년 9월 24일

[Learn] HTML/CSS

목록 보기

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.


  • 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.

Improving Everyday

0개의 댓글