I’ve written about the principle of emphasis before, in Stand Out from the Crowd, where I gave practical ways to emphasize different parts of your design. You will see that much of emphasis is achieved through strategic use of the principle of contrast.

The principle of emphasis also supports direction. Think of emphasis as the stepping stones on the path of direction; emphasis tells the viewer what is important and where to look next in the hierarchy, which creates a direction or flow.

Emphasis supports balance, too. If your focal point is smack in the center of the layout, that’s rather boring, but use the rule of thirds to place your eye-catching element and you instantly improve the layout.

What is Emphasis?

Emphasis is about hierarchy. Although many other principles contribute to hierarchy, emphasis is what they all ultimately lead to.

Emphasis is used to…

• Create focus
• Guide the eye

Creating Emphasis

Although emphasis can be created by using just one of the elements of design, it is often most effective to combine several of them together, along with principles like contrast and unity. That sounds like a paradox doesn’t it? Create emphasis with contrast and unity. Well, briefly, you want the focal point to stand out, so it needs to be different, but you want it to fit in with the rest of the design, too. See if you can use small elements of focal point—stroke size, shape, color—in smaller doses throughout the rest of the design. Make those instances point to the one object that brings them all together. But more on that in an article dedicated to unity!

Warm colors like red, orange and yellow draw the most attention, while the cool colors—blue, purple and green—recede. The most effective (and probably tacky) way to call attention to an object is to make it red.

You are already familiar with at least one way of using lines to emphasize—underlining text! Be careful about underlining text in websites that are not hyperlinks, though; this is a widely recognized convention and users will be frustrated if they can’t click on underlined text (and to them, it may appear to be a mistake).

Large-scale objects will be more quickly seen than smaller objects, which is why the client always wants their logo bigger! Scale and color are probably the easiest ways to create emphasis.

Separate important information with shapes; a dividing rule (thick line) between a pull quote and the body copy, a shaded box around a call to action or circles around the numbers in a step-by-step process. Circles are also a supreme way to draw attention. Think spotlight!

Leave plenty of space around an object that you want to emphasize. This creates no question as to its importance.

Spots that have more texture—be it a pattern or a visual representation of a tactile element—tend to stand out against areas with a solid color or smooth texture. Also remember that with print, more options open up in terms of texture: you can add varnishes, foils and various types of embossing, debossing, etc., to further emphasize objects. Think about all those lovely paper sample books you get from the paper rep!

Our eyes are quick to locate the area of lightest or highest value. Whatever piece of information you want to stand out, place it in the lightest area of the layout.

Examples of Emphasis

Get the Glass

This is a concept presented to the California Milk Processor Board for the Get the Glass Flash game created as a multi-media advertising campaign. You can see that the area of highest contrast (and not coincidentally) is the milk glass at the top of the mountain. The glass is also the largest element in size (simply the dimensions) and scale (compared to a normal glass). There’s plenty of space around the glass, too; the helicopter is relatively small and the clouds are scaled back to just add a basic texture but not be at all distracting.

Even as you move down the layout, the down-spot over the criminals and the van is shaped in such a way that it points back up to the glass (direction). Interestingly enough, the glass is also literally elevated in the space because it is on top of a mountain. If this ever when in to print, another cool thing to do with it would be to add a glossy varnish and emboss the glass.

Red Cross

Such an interesting use of texture to emphasize! The first thing I noticed what the patch that had no rain, where the kids are. If you make the image smaller or step back from it a bit, then the first area to notice is the paper sheltering them because of the high contrast in value and it being the lightest area in the whole layout. Second to that we see the box with the tagline on the bottom right, again because of its value. Interesting that even though this is a Chinese ad for the Red Cross, it still “reads” left to right and top to bottom. Don’t Chinese characters read top to bottom and left to right?

LoveLeft

How can you not love that quote? It’s pretty easy to see how Stefano uses emphasis in his website. Blue is used to emphasize links and the logo (and, perhaps unwisely, the dates of events… they look too much like the links). The largest spot of blue is the logo and it’s in a circle shape.

Where an object is placed on the page can help support its emphasis, too. In western cultures, we read top to bottom and left to right, so often the upper left-hand corner is where we look first. You can easily see this convention in websites, like this one, where the placement of objects is even more focused because the user can only take in so much of a webpage at once without scrolling. So what do we do? Put the logo in the upper left corner of course! Oh, and leave a decent amount of space around it, too, just for added focus.

How you can improve your sense of Emphasis

Some quick ways to make the important information stand out:

• In terms of stacking or layer order, keep it on top (nothing overlapping/hiding it)
• Make it bigger! Simple, yet effective.
• Use red (sparingly please!)
• Leave tons of space around it
• Use a circle
• Remember the rule of thirds when placing objects
• Decrease distractions by making a greyscale layout. Add color to the focal point only.
• Step back from the project. What catches your eye first? Should it?

Patrick from Design Meltdown has a great suggestion for improving your use of emphasis

list all of the elements required on a page in order of importance. Then, design with that in mind so that the visual hierarchy of the page reflects the determined importance.

And notice that this is a step you can take before you even open Photoshop!

Grab the free Creative Curio RSS feed (What is RSS?) so you don’t miss the rest of this series on the Principles of Design! We have already gone over the principles of balance, contrast, direction, economy and coming up are proportion, rhythm (repetition) and unity (harmony) and how to apply them in your designs. This will be a weekly feature on Wednesdays until we’re done with the principles.

If you’re interested in more applied design theory, take a look at the Elements of Design Real World Examples series.