Emphasis in Design

Closely related to the idea of unity is the concept of emphasis or dominance. Rather than focusing on the various elements of a design fitting together, emphasis is about making a particular feature draw the viewer’s attention. When you design a web page layout, often you’ll identify an item in the content, or the layout itself, that you want to stand out. Perhaps it’s a button for users to press, or an error message for them to read. One method of achieving such emphasis is by making that element into a focal point. A focal point is any element on a page that draws the viewer’s eye, rather than just being part of the page as a whole or blending in with its surroundings. As with unity, there are a few tried-and-true methods of achieving a focal point.

Placement

Although the constraints of practical web design do not often allow for it, the direct center of a composition is the point at which users look first, and is typically the strongest location for producing emphasis. The further from the center an element is, the less likely it will be noticed first. On the Web, the top-left corner of the page also tends to demand a lot of attention for those of us who read from left to right (remember that many languages, like Hebrew and Arabic, are read from right to left) and scan a page from top to bottom.

Continuance

The idea behind continuance or flow is that when our eyes start moving in one direction, they tend to continue along that path until a more dominant feature comes along. The figure below demonstrates this effect. Even though the bottom splotch is bigger and so tends to catch your eye first, your brain can’t help but go “Hey, looky there, an arrow!” Soon enough, you’ll find yourself staring at the smaller object.

Continuance and placement: creating emphasis

Continuance is one of the most common methods that web designers use to unify a layout. By default, the left edge of headings, copy, and images placed on a web page form a vertical line down the left side of a page before any styling is applied. A simple way to make additional use of this concept is to align elements to the lines of your grid. This creates multiple lines of continuance for your visitors’ eyes to follow down the page.

Isolation

In the same way that proximity helps us create unity in a design, isolation promotes emphasis. An item that stands out from its surroundings will tend to demand attention. Even though he’s sad to be apart from his buddies, the isolated monkey in the image below stands out as a focal point on the page.

Isolation: a sad monkey

Contrast

Contrast is defined as the juxtaposition of dissimilar graphic elements, and is the most common method used to create emphasis in a layout. The concept is simple: the greater the difference between a graphic element and its surroundings, the more that element will stand out. Contrast can be created using differences in color, size, and shape. Take a look at the Twitter home page:

The Twitter.com home page: using orange for contrast

…and the log-out page for when browsing using a desktop browser:

The Twitter.com desktop-browser log-out page: again, using orange for contrast

If there’s a singular link or button you want your visitors to click on in a page, it’s known as a call to action. When you look at the preceding layout, what first grabs your attention? For me, it’s the “Sign Up” and “Download now” buttons. It’s the only place on the page that uses those bright orange and yellow colors, and the text is much bigger than other elements, such as the search field or “Sign in” button. In both cases the call to action elements have plenty of continuance, isolation, and contrast. Twitter really wants you to click those buttons, so it’s creating as much emphasis as possible to ensure its call to action is effective.

Proportion

Another interesting way of creating emphasis in a composition is through the use of proportion. Proportion is a principle of design that has to do with differences in the scale of objects. If we place an object in an environment that’s of smaller scale than the object itself, that object will appear larger than it does in real life, and vice versa. This difference in proportion draws viewers’ attention to the object, as it seems out of place in that context.

In the image just below, I’ve taken our sad, isolated monkey and superimposed him over the skyline of Manhattan to prove my point. Between the sharp contrast in color and the difference in proportion, your brain immediately says, “Hey, this isn’t quite right,” and you’re left staring at the monkey until you force yourself to look away.

Proportion: a monkey in Manhattan

This principle works for miniaturization as well. Take a look at the BeerCamp event website (pictured below), designed by David DeSandro. The first element you probably notice is the massive BeerCamp headline. From here, though, my eye jumps straight to the arrow and into the row of buildings. This is due to both continuance and eye-catching use of proportion. For those interested in the possibilities of CSS3, I should point out that no images are used to create what you see here.

The BeerCamp 2010 homepage: a tiny piece of SXSW history

Creating emphasis in your design isn’t just the key to making your call to action stand out. It’s also how we move a viewer’s eyes across the page. By giving elements a descending level of emphasis, you can suggest an order for visitors to follow. If you keep this in mind as you build your sites, you can echo the emphasis you create with semantic HTML markup and CSS. For instance, by matching h1 to h6 headline tags with a respective level of visual emphasis, you can provide a similar view of what’s visually important in the page to search engines and vision-impaired visitors.

In the next article, we’ll look at some well-tested examples of designs from which you can work.

The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book (the second edition of which is out now). This is the seventh part of the first chapter.

The entirety of the color chapter has been digitized, so if color is more (or also) your thing check out the color chapter here on Design Festival.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Brian Jones

    Thanks for the post. Funny this came out today as I just received Jason’s new edition of Principles of Beautiful Web Design on Saturday. Great book!

  • http://www.mpsantoshkumar.info SEO in Hyderabad

    i am a freelance web designer, great post read on this website regarding web design

  • Ejita Karim

    Very nice blog, I loved all your posts thanks a lot.

  • charley

    Really lovely information. This would help me improve how i get the information out on my site.

    Thanks Jason

  • http://friendly-machine.com John Hannah

    I your book and it’s always nice to flip through it every once in a while or read an except here on Design Festival. If others don’t have it, the book is a worthwhile investment even if you’re already familiar with design principles. I find going through a good design book can stir my creativity. Thanks for the great resource!

  • DeAnna

    Loved this article. Controlling the user’s eye is so important!
    I am a fine artist turned graphic designer. This is a tough transition, and am always looking for information on web design.
    I wrote an article about this transition here http://pingtechgroup.com/fine-art-graphic-design-vs-website-design-a-most-difficult-transition/
    I will be back to read more!
    Thanks!