Developing Emphasis in Web Design

Simply put, emphasis is creating a focal point that will grab the viewer’s/user’s eye. In web design, it is often referred to as ‘eye-direction’ and if you have ever designed a call to action you know all about emphasis. Developing emphasis in web design can be tricky in that it all depends on what you want to accomplish with it. For the most part, whatever the product is, is what will be our focal point and in most cases it’s not the picture of the product but how to get the product that becomes the focal point – the call to action.

Dominance and Subordination

Before we run through some basic concepts and examples there are a couple of things to consider when developing emphasis. There are many, many elements of form and function on a website – nothing is static anymore. You’ll have navigation, images, logos, copy, buttons, forms, links, galleries, animations… well, there is a lot of stuff to cram on a website. The problem is this: we can’t emphasize everything. Out of all the elements on the page, we need to understand what is dominant and what is subordinate.

Dominance is all about what is important and I bet it’s gonna be whatever you want your user to accomplish, the purpose, the point of view – but that’s just a guess. Because art is all about communication – you want to make sure that the message you are trying to tell your users (or instructions) is dominant, all other items should be subordinate and supportive to that. Subordinate elements should capture some of the user’s attention or even guide the user to the dominate element, but they should never eclipse the dominant element on the page. These elements should always support your focal point.

I tried to come up with some crazy awesome real world analogy for this (that hasn’t been used before) but the only thing I could really come up with is a band. In any given band, the emphasis is always the good looking lead singer with all the talent and the personality, right? They are the member of the band that directly carries the message to the audience. The bass player, drummer, guitarist and keytar player (or shoulder synth if you prefer) all back up the vocalist and help to move the message from the vocalist to the audience. Don’t get deceived by the attention hogging presence of the lead singer, the most important elements in any composition – whether musically of artistically – is the subordinate elements that work to build the foundation for the message to be heard or seen.

Create a Focal Point

Most designers get lost in the elements and can never quite figure out how to create emphasis in web design. But it’s actually a pretty easy thing to develop and chances are many of us do it without even thinking about it.

The main three components to emphasis are:

• Proportion
• Contrast
• Physical Relationship

Proportion

Proportion is essentially the size and scale relationship of two or more elements on the page. Larger objects demand more of our attention so a really quick way to create a focal point is to make the focal element bigger than things around it. Putting a larger size object next to smaller objects will instantly grab the attention of the viewer. But simply making something big may not be enough if you have a lot of elements that are competing with it.

Scale is the relative relation between elements, scale is how we perceive the relationship of the objects. Certain elements have natural relationship and natural sizes, so if you decrease the size of larger objects and increase the size of smaller objects, their disproportionate relationship will stand out and demand attention. This use of scale is more common is photography, but you can also do this in web design; for example, you could make your navigation buttons disproportionately larger in comparison to an image or title – assuming you want your navigation to be the focal point.

Contrast

A really easy way to create focal points in web design is to use contrasting elements. Contrast is really about making one element stand out against another element making it more visible. However, too much contrast can be distracting or can over shadow subordinate elements altogether, so the trick is not to add too much contrast between elements – just enough to create a separation.

You can create contrast between elements by using one or more of these three properties:

• Color
• Shape
• Size

The use of color is a great way to create contrast. Bolder and brighter colors like red, orange, or neon colors naturally demand our attention. A red object next to a blue element will always be the focal point. This is also true for black and white, but depending on on what value is used, the white or the black will be the focal point. A white object on a black background will demand our attention and a black object on a white background will grab our eyes.

The shape of objects can also influence contrast. An element with a more complex shape (like a star or sunburst) will contrast more than smoother, simpler shapes like squares and circles. We have all seen those star/explosion ‘stickers’ on web sites the read “Try it FREE!!!” and the reason why they stand out (besides the obnoxious bright yellow color) is their star or explosion shape, a circle shape will most likely just blend in with other elements like buttons or images.

Like we talked about earlier, a larger object stands out in a group of smaller objects because a larger object has more contrast. Imagine Dwayne Wade standing in the middle of munchkin land. Bigger objects, brighter objects and busier objects demand our attention so use them to create contrast in your web design composition.

Physical Relationship

Just the mere physical relationship between objects will create emphasis. Every object has a gravitational pole to the other objects that are around it and the above methods all have influence in decreasing or increasing an objects gravity. But like gravity, the position of elements can drastically change the weight of objects as well.

Physical factors are:

• Isolation
• Proximity
• Similarity
• Eye Direction (Continuance)

Isolation simply means if an element is isolated from other elements or not. You could create emphasis by simply isolating an element on a page with no other elements surrounding it – or even present on the page. Isolation works regardless of contrast or proportion. If you take ten of the same elements and group nine of them on one side of the site and isolate one on the other side, the lonely element by itself will always grab your attention.

Proximity is huge. When objects are touching or overlapping, the overlapping object will always get the attention. But contrast does play a big role in the proximity between objects. If objects are all really close to each other, the higher contrasting object will stand out even if objects overlap. When objects are closer together they will tend to blend together, so contrast or overlapping objects will help to break the confusion.

Similarity doesn’t mean that one object has to be different than all the others. What it really means is the focal power similar objects have with each other. When two or more objects look almost the same they will build a visual link with each other and depending on their proximity, they will combine forces and grab the user’s attention – kind of like a swarm of killer bees.

Using multiple objects together to move the user’s eye across the page is called eye direction or continuance. Continuance is a great way to guide the user through your page to exactly where you want them to go. You can hold the hand of the user by simply grabbing their attention with a high visibility object and then leading them to the next highest visibility object and then to the next until they make it to the end – where you want them to be.

Mind Control

To sum up, emphasis is vital to web design and development because each web site has a goal and it’s our job to get the users to complete that goal. These techniques are all versions of user mind control. You can blatantly grab and hold their attention with a big bright explosion or you can take them by the hand and lead them down a subtle path. Which ever method you choose just keep in mind that you only have a few seconds to grab their attention, so make it count.