As marketers, it’s our job to present information in clear, concise ways.
Websites are just as much about visual communication as written communication.
You’ve likely heard about visual hierarchy before, as it’s a necessary element of effective web design. Although your site layout it might seem like a concern reserved for your design team, your site’s structure can have significant impacts on your marketing, brand message, and the way audiences read your content.
Visual Hierarchy Primer
Visual Hierarchy relates to the way information is laid out on your page. This, in turn, will determine how well users are able to internalize the information you present.
On its most basic level, visual hierarchy answers one question: What’s most important on your site? A well-structured page hierarchy will help guide your audience throughout your site in subtle, psychological ways that contribute to a positive user experience.
Let’s dig in.
Typography
Typography relates to the size, shape, and placement of on-page text. Here, we’d like to discuss three elements of typography that play central roles in visual hierarchy:
- Headers and Size
- Font Style and Design
- Text Layout and Format
Size and Headers
While the concept of titles and headers are certainly intuitive, the rise of online blogging has hammered them into us.
Effective use of h1, h2, and h3 tags gives search engines context for what words are most important along with improving SEO. And as it turns out, this context works the same way for us humans. The biggest text is most important. Smaller headers are less valuable (though still more important than plain text). This organizational structure is how we as a species have trained ourselves to interpret information. We scan for information (usually in a particular “F” pattern; but, more on that in a minute) and use article headings to make snap decisions about whether we should read more.
Font Style
Digital media gives us plenty of opportunities to apply stylistic flair to our websites. Although headers specifically involve what text is considered most important, edgy brands can take it a step further and apply unique font styles to their text.
Check out the Australia-based advertisers over at Milkable.me. Their home page features a blend of bold block lettering alongside looping, twisting cursive. Do any words on the page tell you what the company does? Not at all. Despite this, its brand identity shines through. And while you shouldn’t use wacky fonts on every page on your website, unique fonts like these can add a typographical weight to text and draw attention in ways not otherwise possible.
Text Layout and the F Pattern
We’ve talked about the F shaped reading pattern before; according to research, when users visit a page, their eyes travel left to right to scan for relevant headers, then after shifting down, their eyes travel in a second horizontal movement, ending with a vertical motion down the left side of the screen.
Most website owners structure their pages this way without really knowing why. This pattern brings each element of our typographical design home to bear in an easy to remember format. Users scan for relevance in the first few headers, and gradually read less as they proceed downward. Keep this pattern in mind as you design your site, particularly if your page features a call-to-action or navigational menus that you don’t want your audience to miss.
Color
Of course, visual hierarchy isn’t just about font. Other factors, like color, can play a role as well.
Different colors elicit different emotions. Warm colors are inviting. Cool colors are soothing. Deliberate use of a color scheme that aligns with your brand image can send powerful messages to the reader before they read a single word.
Consider online fashion retailer, rvlt.com. Each image in its scrolling landing page features striking colors that pop off the screen. The colors they chose don’t have anything to do with their brand per se, but conjure an image of the brand’s style for you to consider before you set digital foot in its store. This design works in tandem with its front-and-center text and minimalist layout to deliver large amounts of information in a small space. Remember the impact of well-placed color when crafting your marketing messages on your landing page.
Visual Structure
The concepts involved in effective visual hierarchy could fill an encyclopedia, but several tenants are key to remember:
- Readers scan in particular patterns, no matter what type of site you have
- Headers and weighty fonts provide instant information about the most important site elements
- Seemingly “cosmetic” choices like color or font style can influence your market from behind the scenes
When done right, visual hierarchy isn’t something that gets attention. It should provide a nuanced structure to help information flow naturally; a by-product of a well-designed website. Take a look at your page and make sure it meets the above criteria to guarantee that your marketing messages are clear to your audience.
