Small cat lines

Cat Lines

Designer

Dominance, focal points and hierarchy in design

As designers we tend to think about layout in terms of three principles: dominance, focal points and hierarchy. Which element should stand out, which should be next in line, where should the eye lead from/to etc. However, part of our issue is that some clients want everything to be a focal point and can’t easily distinguish what the hierarchy of the content should be, due to the fact they see everything as being equally important.

A typical scenario is where a client asked the question of “Can you make the logo be bigger?”. Then when you make the logo larger it doesn’t match the H1 (This is the headline text within a design, the largest title size), which we are then asked to change as well… Before you know it you have lost control of the design. You cannot emphasise everything, if you do that, nothing would have any presence on the page. A once lovely design just becomes noise.

You can see these principles in most forms of creativity. For example, when painters create a piece of artwork there is a background, a mid ground, and a foreground. Each parts dominance to the picture is relative. Elements in the background of a landscape portrait should not appear larger than those in the foreground. If this were to happen the eye would lose perspective. The same principles are applied within web design but in a different context. The perspective is that of the user; what they need to see first and what you want them to click through to.

Dominance

Some parts of the page need to have more dominance than others in order to helpfully guide your user through the path of your site. Dominance is the only way to display visual hierarchy. The more dominant an element is the more likely it is to have a greater visual weight on the page. This can take on different forms such as a bolder colour, a larger scale image or a heavier and larger scale font. As the designer, I have control (based on the client's brief) as to what has dominance and what becomes a secondary and tertiary element.

Research and experience shows us that the eye is attracted to this more dominant part of the design naturally. There should not be similarities between an element that is supposed to be dominant and another that is supposed to be secondary. The two need to be sisters not twins. They should feel as though they are part of the same design, so as to keep styling consistent. They should not be identical. As a designer you should be able to create parts of your page that are noticeably distinguishable in terms of their weight.

It is becoming more common in design to see a video centrally placed, there to draw the user toward watching it. A simple cue for the eye would be to have the video large and high up the page, potentially as a banner and if you wanted another indicator you could use an arrow with some text as a nice visual cue to get the user to click.

It does not have to dominate a design by size alone, you can do this in many clever ways. There should never be a dominant element that is so heavy that it completely takes over the entirety of the page. It should be a starting point for the journey you want your user to go on.

Focal Points

The second point to focus on are the focal points of your design. These have dominance but not as great as that of the main element. They are areas of interest such as cards, chunks of information, imagery etc.

They should have a different composition in order to draw the eye in, but not take away from the top element in the hierarchy. For example, If you have a large image on your design and then have below that a set of smaller images of a different shape. Your eye will be drawn to the large dominant image first and the neater smaller images second. Colour can play a part in this too. If your dominant element is bold and colourful, and your secondary elements are toned back, this also gives the eye visual clues as to what it should focus on and in what order. This can work in the opposite way as well, but to a negative effect. If the colours were swapped so the bold and bright is on the elements you want your user to see second they could be drawn to that first, which you don’t want. So as a designer you need to be very careful as to what you use and where.

Having contrast and weight within the design is also another good way to promote focal points. A contrasting element calls to be looked at because it is visually different to other parts of the page. By changing how a focal point looks you are creating different levels of dominance throughout the design of the page. Again remembering that by having everything the same you will confuse your user. However, this does not mean to say that EVERY element of your design needs to be different. You need to have some structure. If you have too many differing elements you encounter the same problems as if nothing differed at all. Too many or none will confuse your user's eye and everything will look like it blends and there will be no focus or journey.

If there were a number of different levels to have within a design it would be to have a primary, secondary and tertiary levels. You can have more but, I would say no more than five due to the fact that every element that differs past three will only dilute the distinguishing factors you worked so hard to create in the first place. A good approach is to think of it like a painting in the most simplistic of terms where you usually have a foreground, midground and background. In this instance the most dominant focal point in your hierarchy is the foreground and the secondary focal points are the mid-ground and other elements are the background noise. This is information that you still want users to have access to, however it isn’t overly important for them to see straight away.

Hierarchy

This is how you start the conversation with your users and is all about the content that you want the user to see. Whether it is about your company as a whole, the offers you have on, or the product/service that you provide. The message that you want people to take away should be clearly communicated and near or part of your dominant element.

A client might have a clear idea as to how they present the hierarchy of their content which is great. However if they don’t you can work with them to help gain an understanding of what that should be. It is so important that this is presented in the right way as this is how you begin a channel of communication with your user.

If all of your information has the same hierarchy your user will struggle to find what you are wanting them to see. They might click away from your site as they cannot see a clear route in. Your user should clearly see the direction in which they should go; you should not add to their thought process. Make it as easy for them as you can.

By designing distinctive elements to a page you create visual hierarchy within a design. This should also match the hierarchy of the content, being paragraph text etc. The visual hierarchy of the design should show the priorities in order of the information you are wanting to present. Hopefully, you will have the content of your page provided by the client, whether it is new or you are using content from a current site.

Hierarchy in a design needs to be established by having the most important items within the title and first paragraph or two and this should encompass the 5 W’s. This is then followed by important details within the page that flesh out the story. Towards the bottom part of the page usually (even though I hate the phrase) below the fold you should get the general background information.

The more a user stays on a page the more detail they should be able to see. If someone is going to visit your site quickly the important information needs to be high up so that they take this in first. Again three is recommended but you can have more, just don’t go overboard.

Summary

It is impossible to emphasise every part of design. You have to pick what you want to stand out and other elements will naturally fade into the background. I would say in conclusion that three levels of dominance are the ideal to have within a design. By having much more than this you can easily dilute the levels that you are trying to put in place. The third level should be the majority of the content of your site, it is the detailed information. The important information will be more prominent by using the three principles above, lessening as the design unfolds. By sticking to these rules you should be able to communicate with your users efficiently.

It is also always good when designing to take a step back and actually take a look at the overall design when in a good place as you can see if you are sticking to these principles or if you page kind of blends into one. If your page is starting to blend, see what elements you can change in order to make them stand out and you will soon regain that hierarchy. Some sites come together easier than others, and it really is a balancing act. So just keep looking back and eventually each page will flow seamlessly and your user will be sure to view the information in the right order.

With every solution you create you hope to get it right the first time, and while this is a great aim this cannot always be achieved. Being able to work collaboratively with the client enables us to gain a far better understanding of their business goals and objectives. We are then better able to present their content in the right way using the principles mentioned above. Every business will be different and that is what I enjoy most. You might think that you have everything sussed in terms of layout, but each design is totally different.