top of page
  • Writer's pictureoliver yulianto

Three UI techniques you must include in your web design strategy

Updated: Aug 14, 2023

You have a new business and just started creating your new website or you’ve already had a website up and running for a while and you aren't getting the results you want?

An effective and easy to implement web design strategy is using VISUAL HIERARCHY

Having high resolution images, interactive animations & engaging graphics can be highly beneficial, however, if they aren't implemented with intent it can damage your effectiveness.

So what is visual hierarchy?

Visual hierarchy is the principle of arranging elements to show their order of importance on website. The focus of this article is around the following principles

  1. Scale

  2. Colour & contrast

  3. Proximity

Why is this important?

When a customer/user finds your page (after you put in countless hours of SEO) they quickly decipher the information consciously & subconsciously. They soon make up their mind if your business solves their problem.

It is imperative that the copy, images, colors, text & call to actions combine on your website to clearly show that your service aligns with their needs.

Failure to implement in your web design strategy can lead to a high bounce rate & low conversions and ultimately less money for your business .

How do I create a visual hierarchy?

  1. Understand Your Users:

Before diving in changing your web design strategy it's essential to understand your target audience and their preferences. Conduct user research, analyze your competitors, and gain insights into what visual elements and patterns resonate with your users this can be done through

  • surveys

  • user interviews.

  • Competitor analysis

By aligning your design choices with their expectations, you'll create a more engaging and compelling user experience.

For example you run a plumbing business specializing in residential contracts.

You may have found through your research that the majority of users want to speak to a plumbing specialist directly. This may prompt you to included a CTA with a contact number as a focal point of your landing page so you can lead users to easily solve their problem.

The information you get from user research will help you form you web design strategy and visual hierarchy principles to priorities key content and information

image of small business website

  1. Use Scale

Visual hierarchy in its essence is what the name suggests “ ordering the visual elements on the page based on its level of importance”.

After doing some user research on what customers are searching for on your website. Now you can use scale to attribute size to the most important aspect of your website that align with their query.This will take some adjusting particularly if you want a more creative layout, however, the same principles apply

  1. Make the most FOCAL point the largest element of your page

  2. The second most important information needs to be shown through a reduction in size

  3. The third most important element needs to be smaller in size again.

visual representation of visual hierarchy in web design

By working in a scale of thirds you can ensure that you are creating strategic web design that communicates directly to the needs of the use through hierarchy

Leverage Color and Contrast:

Color is a powerful tool for creating visual hierarchy. A simple way to break it down for your web design strategy is the 60:3:10 rule. This is

  1. 60% - Primary Colours

  2. 30% - Secondary Colours

  3. 10% - Accent Colours

visual representation of colour theory

Image via

To maintain a cohesive brand identity and avoid overwhelming users with excessive visual elements . Employ contrasting colours to highlight important information and guide users' attention. Experiment with colour saturation and brightness to create emphasis and differentiate between different levels of information or functionality.

3 - Proximity

Group Related Elements: Place related elements in close proximity to visually connect them and communicate their relationship. For example, group together navigation links or related features within a section. This helps users understand the organization of your content and makes it easier for them to find what they are looking for.

This in turn will make it less likely for user to bounce from your website as they spend less time searching for unrelated information.

visual representation of proximity

A strong visual hierarchy is essential for small businesses aiming to create more strategic web design, convey their message effectively, and drive conversions. By understanding your users, establishing clear information hierarchy, utilizing typography and color effectively, embracing white space, and leveraging visual cues, small businesses can create intuitive and visually compelling experiences. Remember to continuously test, gather feedback, and refine your design to ensure an optimal visual hierarchy that aligns with your users' needs and goals.

If your working hard doing everything else it take to run a successful business let us at look after all your web design needs.

13 views0 comments


bottom of page