Web Design Styles and Visual Hierarchy

Nothing in web design should happen by accident.

To put that another way, every web design choice you make should be deliberate and serve a stronger purpose. Even the smallest details can influence how users perceive your brand; indeed, the smallest details are usually what separate exceptional brands from run-of-the-mill businesses.

Understanding these web design concepts first involves understanding how viewers take in information on your page. The study of this process and how to most effectively telegraph information to your audience is known as visual hierarchy.

Visual Hierarchy in Web Design

Visual hierarchy is both complicated and quite simple. In its most basic form, it answers the question “what’s most important on your page?” Most content is formatted this way out of habit. The title is biggest. Headers are smaller, yet still larger (and more significant) than body text.

Research shows that people tend to absorb information in predictable ways. Consider the F-shaped reading pattern. Our eyes scan the top of a page, travel down the left side, move right, and then continue downward. While not every piece of content you own needs to follow this format, it’s one example of how understanding psychology can improve your web design.

Get a fresh pair of eyes to assess your site. Is the information you want to present organized in clear, logical ways? Or do users have to hunt for important details?

Understanding visual hierarchy is the lynchpin of website design, and influence all other elements described below.

Headers

As mentioned above, headers help readers understand the content of your page at a glance. Creating this scannability is a big deal, as most users won’t stick around for more than 15 seconds before leaving.  It’s critical that your web pages, articles, and email templates use headers generously to provide your readers with as much info as possible in a short amount of time.

Typography

Every choice you make gives your audience information, including aesthetic choices like typography. While considerations like these can be subjective, there are a few concrete rules you should follow when choosing a font style:

• It must be readable for the average viewer. We love Wingdings as much as the next designer, but font choices that give readers the impression of Egyptian hieroglyphs won’t help your brand.
• It must be consistent with your brand identity. Serious brands use serious fonts. Wackier, right-brain brands can get away with a little more and still maintain a consistent persona.
• Stick to your choice. Nothing is harder to read than a page that switches fonts every few paragraphs.

Color

The psychological connection between color and emotion is well-established. We won’t go into all of them here, but just as you select your font choices and your content layouts, you must choose a color scheme that is stylish and effective for your brand. If you’re interested in telegraphing authority, expertise, and serenity, go with cool tones like blues and greens. Brands that want to generate excitement about a product should stick with warmer hues.

And just like your typography, pick a style and be consistent. We all lived through the garish Myspace days when users could use basic HTML to embed the entire color spectrum on their profiles. It’s over for a reason, folks.

Every Decision Counts

High-impact websites don’t throw elements together willy-nilly. Every aspect of your site design must be backed by a strategy, from the way your page is laid out to the fonts you choose to the colors you display. Understanding the psychology behind these decisions can help you get the most out of the page that powers your online presence.