How to Create Dominance and Visual Hierarchy in Website Design

Imagine you’re strolling on the streets and happen to notice these advertisements:

Image Source

There are many hoardings and banners and obviously, one out of these will catch your attention first. Probably the hoarding titled ‘Eleven Art’? Does it mean that hoarding is dominating and prevailing? Perhaps because of its colour scheme? Red has been known to draw the attention of the users.

Just like the above example, in a website design, when two elements are placed in a design layout, either one of them will attract the user’s attention more and exert some dominance over the other or they will be equal in every aspect. It might be larger in size, or have an attractive colour, maybe located in the middle or top area, or the subject matter might stand out. It’ll appear as if it controls the lesser elements to a certain degree. You will end up noticing that first. Consider this example below:

Isn’t it evident that the red triangle stands out and draws your attention more than the grey circles? This is because the triangle dominates in size and colour.

As we continue to add more and more elements to the design layout, some dominate others; and there would be one that dominates all of them and prevails. This element demands attention and becomes the entry point of our design. It will be the first element that will draw the user’s attention in the entire layout.

Elements of lesser dominance become the user’s focal points. They are not the most dominant on the composition however they dominate over the majority of elements on the design layout. This is not the first element the user’s attention would be drawn towards, it’ll perhaps be the second or third.

How to Create Focal Points in the Design?

The designer can create focal points by emphasising on the dominant element through contrast and emphasis. In order to gain the user’s attention, the element must contrast with its surrounding elements. Greater emphasis creates more contrast in the composition. Conclusively, it is about giving website elements greater visual weight so that they stand out.

Designers can control the size, density, colour, local whitespace, value, shape, position, style, shape, depth, and orientation to control the visual weight of the elements. The eyes are a good judge to determine which element weighs more, especially if the goal of the designer is to have elements with large differences in the visual weight.

For example, in this website design below, the icons of facebook, twitter, messenger are focal points whereas the logo and the headline dominate the design.

Similarly, in this design, the app store, google pay option and the details of the event are focal points.

What is Dominance?

Dominance in simple terms refers to the state of being controlling, commanding or prevailing. Every design should have a focal point or primary area of interest that serves its way into the design. The design flow can be achieved by creating secondary and tertiary dominance.

Consider these 2 polygons of different sizes. The larger polygon is likely to dominate (even though it is slightly larger) and the greater the difference in size between these 2 polygons, the larger will dominate the smaller.

A lack of dominance between the website elements in the composition leads to competition and user’s attention. Consider these circles present in the composition. Which one would you look at first? Chances are your eyes will dodge back and forth between the two circles.

This is because there is no dominant element the user’s eyes could anchor to. Without a dominant element, the viewers would struggle to find an entry point into the design layout. This may be more difficult than it sounds and would not only lead to inattentiveness but the viewer’s may also skip to another website. The designers must reduce the amount of effort it takes to enter the composition by having a dominant element that makes the starting point obvious.

How to Create Dominance in Your Design?

Dominance helps to create an area of interest, a focal point or starting/entry point in the design. The dominant design in the webpage or design should be the element that you want your user’s to see first, perhaps a slogan, headline, title of the page or your logo.

Just like in this website design, the designer wants the logo to be dominant.

However, in this website design, the designer wants the user’s to get anchored to the headline.

As a thumb rule, the elements in the design with the most visual weight will be the most dominant one. However, that may not be true.

Just like in the above image, your eyes will probably fall first on the circle in the centre. It is not even the largest shape in the image and does not carry the most visual weight. However, because the element is completely surrounded by whitespace, it dominates the local environment. The elements with more visual weight blend together and do not dominate its immediate space.

Levels of Dominance

Designers can create three levels of dominance in their layout. That is a realistic maximum, the more levels, the less contrast will exist between each level, and lesser the contrast, the harder it will be to distinguish one level from the next.

When creating levels of dominance in the design, the layout will be a part of one of these levels below:

• Dominant: This is the element with the greatest visual weight. It will have primary emphasis and will advance in the foreground.
• Sub-dominant: These are the elements that have secondary emphasis on the design. These have less visual weight than the dominant element but more than every other element. It becomes the middle ground in the composition.
• Subordinate: These elements are given the least visual weight. They recede into the background of the layout.

Designers could also add 4th level of dominance. Human beings can easily distinguish between most and least, but everything in between these levels of dominance tends to become a grey area of equal dominance.

Just like in this image, the red square is at the dominant level. It carries the most visual weight given its dimensionality, colour, and size. The yellow circle in the lower left hand side and the cluster of dots above it are in the subdominant level and serve as a focal point. The former uses a drop shadow to give it extra weight and the latter to use local density to give the group extra visual weight. Every other element in the composition sits at the subordinate level and recedes into the background.

Similarly, in this website’s design, the slogan- “the anti-staffing recruiting company” is dominant because it carries more visual weight and has more whitespace around and is larger in size, with contrast. The sub-dominant textual content in the design would be the names below the photos and the logo of the organisation. They weigh less than the slogan but more than other elements on the page. Lastly, the subordinate dominance in the website design is the navigation tool that has the least visual weight. It recedes into the background of the layout.

Conclusion

It is easy to determine dominant elements in the design, but the task for the designer is to be conscious of how each of the elements dominate each other to its immediate surroundings and the design as a whole.

Dominance can be created by contrast, emphasis and visual weights. Identical elements cannot dominate each other. The more visual weight an element has, the more it will dominate the other elements. However, this may not always be true, designers must also consider elements of lesser visual weight and determine their dominance.

Designers could use dominance to create an entry point in the design. Additionally, by determining hierarchy, designers can also exhibit dominance in the design that would guide the visitor’s eye from one part of the design to the next.

One way designers could incorporate dominance and hierarchy in the design is by observing new designs and compositions and paying attention to where they look first, second and last. Determining what you consider dominant, sub-dominant and subordinate instinctively and why they appear in that way.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]