Dominance: Creating Focal Points In Your Design

When you first come across a new design where does your eye go? What’s the first thing you see on the page? Where in the design is your attention drawn? The answer to all three questions is one of dominance.

Dominance through emphasis of one or more particular elements creates a focal point in your design. It’s where most people will instinctively go when first looking at your work. Dominance will create an entry point on the page from which you can lead the viewer to other parts of the page.

What is Dominance?

dominant (adj) – commanding, controlling, or prevailing over all others

dominance (n) – the fact or state of being dominant

Given the definitions above it shouldn’t be too hard to understand dominance as a design component. When you create dominance in your work you are creating elements that command attention and prevail over other elements.

Every design should have a primary area of interest or focal point that serves as a way into the design. From the primary dominant element, design flow can be achieved by creating elements with secondary and tertiary dominance.

Dominance relies on contrast, since without contrast everything would be the same. You might even think of dominance as contrast in extreme, though it doesn’t have to be.

Consider 2 squares of different sizes. The larger square will likely dominate (even if it’s only slightly larger) and the greater the difference in size between the 2 squares the more the larger will dominate the smaller.

In the image on the left the larger square dominates the smaller square, though not to the extent that the larger square in the image to the right dominates its smaller sibling.

Dominance is the varying degree of emphasis in your design elements. You can create 3 levels of dominance in your work.

1. Dominant: The element given the most visual weight, the element of primary emphasis. The dominant element will advance into the foreground in your composition.
2. Sub-Dominant: The element(s) of secondary emphasis that will become the middle ground in your composition.
3. Subordinate: The elements with tertiary emphasis, given the least visual weight. Subordinate elements will recede into the background of your composition.

It becomes difficult to create a 4th level of dominance. As human beings we can easily distinguish most and least, but things in between quickly move into a gray area where they are seen as equal in dominance.

Why is Dominance Important?

As I mentioned above dominance helps create an area of interest, a focal point or starting point in your design. The dominant element on your page should be the element you want people to see first. Perhaps it’s your logo or the title of the page or whatever else you want people to notice first.

Dominance creates a visual hierarchy in your design. A hierarchy is by default a series of different levels of dominance.

A lack of dominance between elements leads to competition between them. If there are two red circles of equal size in your design, which should I look at first? Different people will choose different circles and some will bounce back and forth between both. Had one circle clearly been dominant your viewer knows to look at it before the other circle.

Without a dominant element on the page your readers must work to find their own entry point into your design. That’s not as easy as it seems and the least amount of work may be moving on to another design on another page on another site. Remember, “Don’t make me think.” Instead make it easy to find a way into your design.

By creating a dominant element in your work you reveal what’s most important in your design and show people were to look first. From there you can create a subdominant element to guide your viewer where to look next.

How to Create Dominance in Your Design

As a general rule the elements in your design with the most visual weight will be the most dominant. However that may not always be the case.

At times the dominant element may be the element that most dominates its immediate surroundings. An object surrounded by whitespace dominates its immediate environment.

In the image above your eye probably falls first on the circle in the center. It’s hardly the largest shape in the image and doesn’t carry the most visual weight. However because it’s completely surrounded by whitespace it dominates its local environment. The shapes with more visual weight tend to blend together here and none dominates its immediate space.

In general though, more visual weight = more dominance in the element

You can add more visual weight to elements through

• Size – As you would expect larger elements carry more weight
• Color – It’s not fully understood why, but some colors are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest.
• Density – Packing more elements into a given space, gives more weight to that space.
• Value – A darker object will have more weight than a lighter object.
• Whitespace – Positive space weighs more than negative space or whitespace.

Keep in mind that visual weight is a combination of all of the above. Your biggest element on the page may also have the lightest color and value and still recede into the background.

Be careful with overdoing dominance. While you want to create an element that dominates your design to serve as the focal point you still want the rest of your design to be seen. Be careful not to make an element so dominant that everything else in the design gets lost. You want your design to be balanced overall.

You can create dominance in elements that don’t have the most visual weight. Objects placed in the center are often seen as a focal point as long as their is enough emphasis given to them. When many other elements all lead your eye to one particular element, that element can become the dominant focal point.

On the web every element is a box. Like it or not when you develop a page you are creating boxes and while there are ways to make things appear less rectangular visually, it’s common to have most of your elements in one box or another. As a result circles gain increased dominance since they contrast with the straight edges of rectangles.

And again consider the image above. The small circle dominates the surrounding whitespace. It may be too small to dominate on its own, but it dominates its immediate environment.

Examples of Dominance in Web Design

The image in the upper left of the WebDesigner.ro site is clearly the dominant element on the page. It pulls you into the design and from there your eye moves right to the navigation and the content

The dominant element on the Ribbons for Red home page is the emblem in the upper left. Notice how red is used to create sub-dominant elements to pull you through the page. Notice too what those sub-dominant elements are and think about what the goals for this page might be.

Denise Chandler’s site uses dominance to create a focal point around the welcome message on the page. You can’t see it in the image here, but if you click through to the site the insects are animated further pulling your eye to the welcome message.

Dominance is created through the large black font. It’s inviting to read and immediately leads you into the navigation, which repeats the black as a background color.

The black background is used throughout the page behind other elements to pull your eye to them and blue is used to provide contrast and help other items on the page stand out. The page does a great job of both pulling you into the design and then pulling you through the design.

Area 17’s site also uses heavy black text to pull you into the design. In this case the dominant element is the A / again in the upper left. Notice how the welcome message in the header also uses black text which pulls you to it and then to short bio about the company to the right.

You then encounter a light red diagonal (easier to see on the live site than in this image) which guides your eye down and to the left to selected projects from the company’s portfolio.

Summary

Dominance is a fairly easy concept to grasp. Most of us can look at any composition and immediately identify the dominant element or elements. What’s important is to be conscious of how each of your elements dominates or is subordinate to its immediate surroundings and the design as a whole.

Dominance is contrast, emphasis, and relative visual weights. You must have contrast to have dominance. Identical items can’t dominate each other. In general the more visual weight an element has the more it will dominate, but look for ways in which elements of lesser visual weight can still dominate.

Be careful not to create so much dominance in one element that the rest of your design becomes too subordinate. The more one element dominates another the more subordinate and seemingly less important that second element becomes.

Use dominance to create an entry point into your design as well as a hierarchy to help guide the eye from one part of your design to the next. The more important an element is in your hierarchy, the more dominance it should exhibit. Try to create 3 levels of dominance in your designs and look for ways to further direct your viewers from most to least dominant.

Again dominance is easy to grasp, so easy and obvious that we may forget to notice it. As you look at new designs and artistic compositions pay attention to where you look first, second, last. Pay attention to what you instinctively see as dominant, sub-dominant, and subordinate and ask yourself why they appear that way.

The 7 Components of Design

• unity
• gestalt
• space
• dominance
• hierarchy
• balance
• Color Part I: Color Theory
• Color Part II: How to Use Color

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.