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.

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

Dominance Link
Compare any two elements in a design. Either the elements will be equal in every way or one will exert some level of dominance over
the other. The more dominant element will attract the eye and get noticed first. It might even appear to exhibit some sort of control
over the less dominant element.

The more dominant element likely has greater visual weight than the elements it dominates. It will seem to exert force on what’s around
it.

View large version)

As you develop a composition, you’ll see numerous elements exerting dominance over each other. Some elements will dominate, and
some will be subordinate. Without conscious control, you’d just hope that things all work out and that the important information will
attract attention. Fortunately, you do have control.

How to Establish Dominance Link

You design one element to have more dominance than another by giving it more visual weight. The greater its visual weight, the more
an element will attract the eye and exhibit dominance.

You create dominance through contrast, emphasis and relative visual weight. Identical items can’t dominate each other. To exert
dominance, an element has to look different from the elements it’s meant to dominate.

Your goal is to create elements with noticeable differences in visual weight.

You can vary the same characteristics that we talked about in the last couple of articles in this series. As a reminder, here are the most
common characteristics you can vary to set different visual weights:

 size,
 shape,
 color,
 value,
 depth,
 texture,
 density,
 saturation,
 orientation,
 local white space,
 intrinsic interest,
 perceived physical weight,

You can create dominance through visual direction as well. For example, you might surround an element with arrows all pointing to
that element. If there are enough directional cues, the element could become dominant even if it’s of lesser visual weight than other
elements on the page.

You can also have co-dominance, where two dominant elements exist within a composition. However, both will compete for attention
and could ultimately be distracting without the right overall balance in your competition.

Ideally, you want a single dominant element.

The Dominant Element Link

The dominant element in a design is the one with the greatest visual weight (or the one that everything else points to). It’s the element
that attracts the eye first, more than anything else on the page.

Be careful not to make the element so dominant that it completely obscures everything else, but do make it stand out in the design.

Your dominant element is the starting point for the story you’re telling. It’s the entry point into your design. It should attract visitors to
the first place you want them to look.

This is how you start a conversation with visitors. The dominant element is noticed first and sets the context for what’s seen next. It’s
at the top of the hierarchy. It should emphasize your most important information, because it might be the only thing anyone will see.
Whatever message you want people to take away should be clearly communicated in or near your dominant element.

Without an entry point, viewers will have to work harder to find their way into your design. They’ll have to pause and think where to
look first and think about what’s truly important on the page. A lack of entry point will increase the cognitive load on visitors. Don’t
make them think. Provide an entry point into your design.

Focal Points Link

Focal points are also elements or areas of dominance, just not to the same degree as your one dominant element, which could be
defined as your most dominant focal point. Focal points are areas of interest, emphasis or difference within a composition that capture
and hold the viewer’s attention.

The focal points in your design should stand out but should be noticed after the element with the most dominance. The graphic below
shows a lone circle amid a sea of mostly gray squares. The circle is not only a different shape, but is larger and bright red. It’s likely the
first thing your eye notices in the graphic.

Three of the four squares are also reddish in color, though not as bright as the circle. They’re the same size as the other squares in the
image, but they do stand out from the gray squares due to their color.

The circle and the three reddish squares are all focal points because they stand out from the majority of other elements in the graphic.
They contrast with the mass of gray squares. The large bright red circle stands out the most. It’s the dominant focal point, or the
dominant element in this image.
View large version)

As with the dominant element, you can create focal points by giving them more visual weight than everything except the dominant
element — which, again, is your most dominant focal point. You can also create visual direction that leads to different focal points.

Contrast is a good way to create focal points, because contrast calls attention to itself for being different. Anything that can be contrasted
and anything that can affect visual weight or direction can be used to create a focal point, in the same way that it can be used to create
a dominant element. The difference is simply of degree.

Levels Of Dominance Link

If you create focal points and make one of those points the dominant element, then you’re starting to create different levels of
dominance. The dominant element will sit on one level and will be noticed before all others. The remaining focal points will sit on
another level. How many levels of dominance can you realistically have in a design?

Three is a good number. As a general rule, people can perceive three levels of dominance. They notice what’s most dominant, what’s
least dominant and then everything else. There needs to be enough difference between these levels for people to distinguish one from
the next. You want to create distinct levels, not a continuum.

You could create more than three levels of dominance, but each additional level will reduce the contrast between neighboring levels.
Unless you’re sure you can contrast each level well enough, stick with three.

 Dominant
This is the level with the most visual weight and the one that gets the most emphasis. Your dominant level will usually consist
of a single element in the foreground.
 Sub-dominant
This is the level of focal points, with the exception of the dominant element or dominant focal point. It gets secondary
emphasis. Elements on this level get less emphasis than the dominant level but more than the subordinate level.
 Subordinate
This is this level with the least visual weight. It should recede into background to some degree. This level will usually contain
your body of text.

It’s possible for different people to look at a composition and think that different elements are focal points or even the dominant
element. Remember to go big enough with your differences in visual weight to make clear which level is more dominant. You want your
dominant element and focal points to be as obvious as possible.
Visual Hierarchy Link
As you design distinct levels of dominance, you create visual hierarchy in the design. Ideally, this visual hierarchy will match the
conceptual hierarchy of your content. If an article’s heading is more important than a caption in the article, then the heading should be
more visually dominant.

Base your visual hierarchy on the actual priorities of the information being presented. First, prioritize everything that will go on the
page, and once it’s set, design a visual hierarchy to follow that prioritization.

Visual hierarchy enables visitors to scan information. It helps you communicate a message quickly and effectively. The top of the
hierarchy (the dominant element) should help to answer questions a visitor might immediately have upon landing on the page.

Within seconds, visitors should be able to pick up the key points and main message of the page. They can do this if you make the most
important information the most visually prominent.

People who stick around longer than a few seconds should be able to scan through the focal points in your design to gain the next most
important message(s) that you want to communicate, and so on with the rest of your information.

The Inverted Pyramid of Writing Link

Establishing hierarchy in a design is similar to the way journalists use the inverted pyramid of writing. The most important news is all in
the first paragraph or two. The lead covers the who, what, where, when, why and how. It tells you everything you need to know.

Wikipedia) (View large version)

The lead is followed by important details that fill out the story. They’re details that provide context or help you understand the story in
greater depth. Toward the end of the article is the general and background information that’s nice to know but not necessary to
understand what’s going on.

If someone reads only a sentence or two, they should come away with the most important information. The longer they stick around
and the more they consume, the more details they’ll get.

Visual hierarchy works the same way, except that it doesn’t have to flow linearly from the top of the page. You get to control where
people look first, second and so on

Again, three level of dominance or hierarchy are recommended, although four or five are still possible.

Gestalt Principles And Visual Hierarchy Link

One of the reasons I started this series with an article about gestalt principles was to show how they lead to many of the design
principles we work with.

Visual hierarchy evolves out of gestalt. Focal points are one of the gestalt principles. Your dominant element is an extreme focal point.
Both use contrast to stand out. The other side of the coin is similarity, which helps us to see things as the same. Similarity and contrast
are necessary ingredients in hierarchy.

Such laws as the ones of prägnanz and symmetry are about creating order and making things simpler and clearer. That’s exactly what
you’re doing when you build hierarchy in a design. You’re organizing design elements to establish a sense of order.

The dominant element is likely seen as the figure. The least dominant elements are likely seen as the ground. Really, any principle
related to connection or separation can be applied to dominance and hierarchy.

Summary Link
You can’t emphasize everything. In order for some elements in a design to stand out, other elements must fade into the background.

By varying the visual weight of some elements and the visual direction of others, you can establish different levels of dominance. Three
levels is ideal; they’re all that most people can discern.

On one level will sit your dominant element. It’s an entry point into your design, and it should be or be near the most important
information on the page. A second level of focal points can draw attention to the next most important information visitors should see.
Your third level holds everything else. Most of your content will be on this level.

Designing different levels of emphasis or dominance will create a visual hierarchy in your design, with more important information
being more visually prominent. It will help you communicate with visitors quickly and efficiently.

We’re getting close to the end of this series. Next time, we’ll look at compositional flow, movement and rhythm. I’ll talk about leading
visitors through a design so that they’re more likely to find information in the order you want them to see it.

7. Emphasis / Dominance

‘Dominance’ is an important principle of design that relates to the visual weight of an architectural composition, while ‘Emphasis’ refers
to the object or element which first catches the attention of the viewer. An architect needs to create an area of emphasis or a focal
point, which is considered as the visual starting point from which the eye will begin the journey of recognizing the whole architecture
work.