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 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.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: …and the log-out page for when browsing using a desktop browser: 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. 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. 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 matchingh1
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.Frequently Asked Questions about Emphasis in Design
What is the role of emphasis in design?
Emphasis in design is a strategy that aims to draw the viewer’s attention to a specific design element. This could be an image, color, shape, or text. It’s achieved by creating a point of focus that stands out from the rest of the design. Emphasis can be used to highlight the most important information or to create a visual hierarchy, guiding the viewer’s eye through the design in a specific order. It’s a crucial tool for effective communication in design.
How can I create emphasis in my design?
There are several ways to create emphasis in design. Contrast is one of the most effective methods. This could be contrasting colors, sizes, shapes, or textures. Another method is through the use of space. By leaving a lot of space around an element, you can draw attention to it. You can also use lines to guide the viewer’s eye to the point of emphasis. Lastly, repetition of a certain element can create emphasis.
What is the difference between emphasis and focal point in design?
While they are closely related, emphasis and focal point in design are not the same. Emphasis refers to the design technique of making a certain element stand out. It’s about creating a visual hierarchy where some elements are more dominant than others. On the other hand, a focal point is the specific element that draws the viewer’s attention. It’s the part of the design that is most emphasized.
How does emphasis contribute to the overall effectiveness of a design?
Emphasis contributes to the overall effectiveness of a design by guiding the viewer’s attention to the most important elements. It helps to create a visual hierarchy, ensuring that the key messages are easily understood. By emphasizing certain elements, a designer can control the order in which information is processed, improving the communication effectiveness of the design.
Can a design have more than one point of emphasis?
Yes, a design can have more than one point of emphasis. This is known as multiple points of emphasis. However, it’s important to balance these points to avoid confusing the viewer. The points should work together to guide the viewer’s eye through the design in a coherent and logical manner.
What is the relationship between emphasis and balance in design?
Emphasis and balance are both key principles of design that work together to create an effective composition. While emphasis is about making certain elements stand out, balance is about arranging elements in a way that achieves visual equilibrium. Too much emphasis on one area can disrupt the balance of the design. Therefore, it’s important to carefully consider both principles when creating a design.
How can I use color to create emphasis in my design?
Color is a powerful tool for creating emphasis in design. Bright, bold colors naturally draw the eye and can be used to highlight important elements. Conversely, using a monochromatic color scheme with one bright accent color can create a strong point of emphasis. It’s also possible to use color contrast, such as complementary colors, to make an element stand out.
What is the role of typography in creating emphasis?
Typography plays a crucial role in creating emphasis in design. Different font sizes, styles, and weights can be used to create a visual hierarchy and draw attention to specific text. For example, larger, bold text naturally stands out and can be used to emphasize headings or key information. Italic or underlined text can also be used to create emphasis.
Can emphasis be overdone in design?
Yes, emphasis can be overdone in design. If too many elements are emphasized, it can create visual clutter and confusion, making it difficult for the viewer to understand the key message. It’s important to use emphasis strategically and sparingly to ensure that the design remains clear and effective.
How does emphasis relate to the other principles of design?
Emphasis is closely related to the other principles of design, including balance, contrast, repetition, alignment, and proximity. These principles work together to create a cohesive and effective design. For example, contrast can be used to create emphasis, while balance ensures that the emphasis doesn’t overwhelm the rest of the design. Similarly, repetition can reinforce emphasis, while alignment and proximity can guide the viewer’s eye to the point of emphasis.
Jason Beaird is a designer and front-end developer with over ten years of experience working on a wide range of award-winning web projects. With a background in graphic design and a passion for web standards, he’s always looking for accessible ways to make the Web a more beautiful place. When he’s not pushing pixels in Photoshop or tinkering with markup, Jason loves sharing his passion for the Web with others.