Most people don’t read web pages, they scan them. A website’s design, specifically each page, needs to engage and lure visitors to stop and pay attention.
When we look at something, our minds put objects into order of implied importance. We recognize the items with the most contrast to the surroundings and rank them accordingly. This is visual hierarchy.
In design, we use this concept to create pages which stimulate and engage readers. This makes it easy to quickly navigate a page, while focusing on the information we want to communicate.
We create visual hierarchy by using tools such as contrast, size, colour and style.
A shift in text colour or size or changing a background colour from light to dark creates contrast. This suggests the item, which is “not like the rest”, requires attention or action. We often apply this to registration, contact or purchasing, call-to-action icons.
In web design, size matters. We make the most important elements of information, larger. Font size, icon size, photo or graphic size is manipulated to draw attention the information a visitor is looking for. When scanning a page your potential customers ask themselves, “What’s in it for me?” Telling them visually, demands they read the text. Less important information has a smaller font or image size.
Web designers use colour to create the tone and style, including layout, of a website. This is organizational colour. Creating a footer with a different background colour (usually darker) says “this information is similar”.
We are all familiar with hyperlinks being a different colour demanding our attention. This is functional colour. Icons, logos and images in different colours work the same way, drawing our attention to them.
Style can be used as a tool of visual hierarchy on its own and as a way to pull colour, size and contrast together. When too many elements are packed into the page, it can feel cluttered. Text should be presented using bullet points, headlines, and images – all contributing to the style and feel of your site. Design elements and the site’s information should work together.
Contact Sudymo Web Services to discuss how we can utilize key components of visual hierarchy design elements to optimize your company’s website.