Imagine for a second you’ve lost your significant other at the mall. You can’t find him in the throng. Kinda tough, right? The simplest hack would’ve been to have him wear a colorful clown’s wig or do something outrageous so you can spot him immediately in the crowd.

The analogy may seem kind of silly. But what we’re taking about here are visual cues, which can be important to get you where you need to go on a webpage or even find your lost spouse in the mall. We touch a little upon visuals in our Intro to Responsive Design, but we wanted to delve deeper in this lesson.

A Hands-On Principle

Creating visual cues is the best method to present a sites’ structure and content. These cues are like landmarks that help your visitors find their way around your site and content fast. Without cues, you will lose visitors immediately.

The first guiding principle: Elements that do not act similarly, or do not belong to the same category, shall not look the same. This may seem straightforward, but it’s easy to take for granted, especially when using content management systems with pre-built themes. The treatment of color, shape, size and negative space are your most powerful tools. Let’s dive into each of those in turn.

White Space

Use white space to compose and segment your site into sections, like navigation and main content. It reduces the time and mental effort needed to scan and segment the site on the part of the visitor. You put them in control so they can quickly find the content they are looking for. White space even allows you to indirectly move less important sections of your site to the very bottom, out of direct sight. And using white space has another benefit: It also forces you to remove excess content while achieving clear visual structure between sections.

Color

Color is very powerful. You can use it to differentiate distinctive elements or emphasize others to direct the users’ attention. For example, when you want users to click one button, but provide a few other options, give the high-priority button a color that contrasts with the background more than the low-priority buttons. Color can even help emphasize specific elements in a subtle manner like a “Shop” button within a navigational section, although their proximity to each other already creates a group.

Colored images that fill the screen are the new status quo. Studies show that elements (e.g. a button) placed close to human faces get the most attention, especially when the person actually looks toward the element itself. A common problem with this approach, though, is placing the button relative to the person’s face. Considering the plethora of devices and screen resolution these days, getting the position right on every device is hard. So this needs special attention to get the biggest benefit.

Layout. Device capabilities. Bandwidth. These are the techniques that often concern web designers. But when the goal is to make websites easy to use, visual cues are just as important as any media query.

---