Visual Hierarchy & Colour Context in Web Design

Here is something that really gets my goat. Websites with bad Visual Hierarchy. Here is a really great post that goes through the basics.

It's a great read, so I suggest you give it the once over! At it's core, however, the article talks about how as designers it's our job to use colour, texture and shape to portray the function of a website's interface. People are visual thinkers at heart, and process visual data much quicker than reading text. As designers, it's our job to ensure that the design decisions we use make sense and do not serve as a barrier to to whatever it is a user came to your website to do!

So what the hell am I talking about when I mention Colour Context? The foundation of good colour context suggests that we use repeatable design decisions throughout our website in a way that makes sense.

One of the most crucial web design concepts for successful websites is visual hierarchy. A effective user experience in design requires the development of a visual hierarchy. We'll go over the theory behind it and some simple tasks to apply these ideas in this article.

Design as a Tool for Communication

Design is really about communicating visually. A well-crafted design effectively conveys concepts to the audience. In web design, visual hierarchy is all about conveying information visually. Being aware of how others may interpret our work in terms of relationships is essential to improving as a designer.
On a website, visual components like images, colours, and videos can assist convey messages and values. We can experiment with scale disparities when incorporating things into our design to imply that one object is more dominating or closer to us than another.

Colour differences could also imply that one object has a distinct personality that makes it stand out from the other. With relatively simple techniques, a lot of information may be conveyed in a single image.

It is our job as web designers to transform that raw data into scrumptious small bits of visually appealing information. Content ought to be visually appealing and, above all, efficient in conveying the website's intended message.

What is Visual Hierarchy?

The idea behind visual hierarchy is the arrangement of items to indicate their relative importance.

Another visual design idea that mirrors how our brains organise information is hierarchy. As visual beings, people naturally cluster comparable visual objects into meaningful patterns.

The idea behind visual hierarchy is the arrangement of items to indicate their relative importance.

A Visual Toolbox For Designers

Understanding visual hierarchy in design is key to design success. Another visual design idea that mirrors how our brains organise information is hierarchy. As visual beings, people naturally cluster comparable visual objects into meaningful patterns.

Size

Directing a viewer's attention to a specific area of the page is a powerful technique when using size as a hierarchical tool. In most cases, the largest elements should be the most significant, and the smallest elements should be the least significant.

via moda grab 1

For instance, this design gains some order from the use of BIG, bold type. Naturally, the eye should descend to the smaller elements from the larger ones.


Colour

Both a personality and organisational tool can be used with colour. When used in striking contrast, bold colours draw the eye to a specific area of a website. It can be applied to hyperlinks, error messages, and buttons to highlight and contrast them.

laptop trans crazy candles

Colour influences everything from symbolism (cool, subdued colours) to a website's brand (Coca-Cola Red). More complex uses of colour can even be applied to hierarchy-based information classification.


Contrast

Changes in text colour or size will indicate that something needs to be noticed or is different. The main content of a page can be easily distinguished from the footer by switching from a light to a dark background colour.

Visual Hierarchy

Alignment

Elements that are aligned create order. The distinction between a "content column" and a "sidebar column" may be all that is necessary. Adding an information hierarchy to every element on screen is essential.

laptop trans roseheart jewels

Additionally, alignment can assume more intricate hierarchical roles. Think about the impact of information displayed in an eCommerce website's top-right corner, for example. Typically, users anticipate seeing accounts, shopping carts, profiles, etc.


Repetition

Elements are given relative meaning through repetition. Users may assume that a new block of grey text represents a new basic paragraph if all "paragraph" text is grey.

laptop trans smc bikes

Users can presume with confidence that a blue link or a black title differs from grey text when they come across them.


Proximity

Elements are kept apart from one another and sub-hierarchies are formed by proximity. Widgets that are spaced apart from one another within a page are possible.

laptop tran need to pass quick

The title, subtitle, and content of the new information hierarchy are displayed simultaneously by those widgets.


Density and Whitespace

When items are packed closely together, a room feels cluttered and "heavy". Excessive spacing between elements can cause them to lose their relationships with one another.

laptop tran ctk media

When a page is properly designed, it is easy for the eye to discern between related and unrelated elements.


Style and Texture

A hierarchy that both embraces and surpasses the other tools can be imposed through style. A background that is textured and colourful will feel different from one that is flat and grey.

laptop trans steel city classics

The way various visual relationships are created is influenced by style.


Conclusion

Finally, I would like to share a very basic exercise. Make use of a project you're working on or a website you often visit. The activity proceeds as follows:

Enumerate the most important details that visitors are probably looking for.
Assign numbers (1–10) based on how important they are to the typical visitor.
Now take another look at the actual design.
Assign numbers (1–10) based on the visual significance as it appears in the live design.
Do you think the intended importance and the expected importance align?
After completing this brief exercise, make the necessary adjustments to the areas that could use some work. This will assist you in designing navigation experiences for your target users that are both useful and aesthetically pleasing.

Article written by Dan
crossmenu