The following are some guiding principals that will help ensure that the most important information is visually highlighted by the layout of your landing page. This is essentially a conversation about how to establish an effective "Visual Hierarchy" on your Landing Page. Visual Hierarchy refers to the phenomenon of drawing site visitors attention through the use of various visual elements such as font style, use of imagery, or effective use of spacing. One key concept in creating effective visual hierarchy is:
- Limit the use of "attention grabbers" - An "attention grabber" is something on the page that is highly noticeable - a Call-To-Action (AKA - a button) is a good example of this. Too many buttons dilute their significance and leave your site visitor unsure where to go or what to click on. Keep it focused.
Next we will explore a few other key concepts for creating effective visual hierarchy - size, color, and placement
Size
The larger a piece of content is on a page, the more it is likely it is to be seen, and the more important it will seem. For page layouts, this means making the one or two pieces of content that are most important for that page full width.
You can also increase size by simply adding more content to a page block. This could mean that you add a description or image to a block. It could also mean that instead of including a particularly important link in a Link Collection block, you make it a stand-alone Promo block so that it takes up more space on the page. Speaking of Promo - the 'big description' display option is a way to make it more visually prominent on the page.
Color
In the example thumbnail to the right, the dark section in the middle of the page is considered to be in high contrast with surroundings. It is important to understand that contrast at a most basic level just means 'difference'. Contrast is not something that is inherent to any particular color(s). In the example to the right, the contrast is created because the blue is a much darker color than the surrounding light grey sections. The same blue would be low contrast if the sections above and below were a darker color.
Contrast is also helping the card to stand out within the blue section due to it's white background.
Warm Colors
Warm colors (orange or red) tend to be more noticeable while cooler colors (blue or green) tend to fade into the background. Because of this, all buttons on GOVHub websites are designed with warm colors - Orange if the background color is light or Yellow/Gold if the background color is dark.
Placement
The F-Pattern - A general pattern to the way that people tend to visually scan through websites.This pattern was discovered through eye-tracker studies in which the participants wear glasses that can pinpoint the focus of their gaze on a webpage. The warm colored splotches on the page are the most frequently focused on content. What this pattern tells us is that, generally speaking, site visitors tend to (1) look across the top of the page from left to right, then (2) scan down the left side of the page until something grabs their attention, (3) then scan from left to right along the line of the thing that grabbed their attention, (4) then just continue scanning down the left side of the page until they lose interest or reach the bottom of the page. So it is advisable to take advantage of the trend by purposely placing key pieces of content on the left if using multiple columns and that your section titles or any other page element that a user is likely to scan horizontally on is very clear in conveying it's purpose or message so that the site visitor can make a quick decision as to if it is relevant to them.
Spacing
Leaving empty space around an object also helps it to stand out. Ample use of empty space around page elements helps keep the page from feeling cluttered and makes it easier to navigate. In the example to the right, there is a 2 column (2/3-1/3) section with at the top, then a 1 column in the middle and a 3 column section at the bottom. The middle 1 column section helps break the page up. If a 3 column section was used in the middle the page might start feeling cluttered and overwhelming.
