Make a first impression with visual design



Business Benefits

Ensure that users do not immediately bounce from your website by grabbing and holding their attention in the crucial first few seconds of a visit.

Ensure that the visual design does not negatively impact page load speed by restricting fonts, video, and large images.

Many abandon a website before it even loads because the website fails to load quickly enough. Take the following steps:

  • Use a tool like to optimize images for your website.
  • Use images with a single dominant subject (like a single person) rather than complex images (like crowds).
  • Favor illustrations with blocks of flat color.
  • Limit the number and variations of fonts.
  • Consider using a variable font.
  • Avoid background images that add no value to the content.

Aim to ensure any webpage downloads in under 2 seconds on a standard connection for your users.

Clearly communicate the purpose of the site and the benefit it provides to the user immediately on page load.

  • Ensure that as soon as the page loads, the user is instantly aware of what the page is about and how it can help them, without the need to scroll or do anything more than scan a couple of lines of copy.
  • Include a strapline that both explains the purpose of the page and its primary benefit. Also, attempt to include two or three additional benefits “above the fold.”
  • Avoid copy that is inspirational, but lacks clarity about the purpose of the page.

Remove user interface elements that fail to help the user understand the purpose of the website and the benefits it provides. For example, images that are purely decorative.

Every screen element demands user attention. If there is too much going on within the design, users will either abandon the site due to cognitive overload or miss critical content and calls to action. Systematically review every user interface element and remove anything that does not actively aid the user in understanding the offering and its benefits.

Common examples of content that can be removed include:

  • Company news (less than 1% of users read news on most websites)
  • Purely decorative images.
  • History of the company information.
  • Team information.
  • Welcome copy.

Make the page scannable by using headings, imagery, bullet lists, and content blocks.

Break copy down into easy-to-scan content blocks. Each block should consist of a descriptive heading, an image that helps reinforce the message, and a short description (ideally under 160 characters or using a bulleted list). Include a link to more information if required.

Remove superfluous words and write in short sentences that are easy to digest. Write in plain English, avoid jargon, and get to the point as quickly as possible.

Demonstrate the relevance of the site to the user by showing “people like them” in images.

If you aim for middle-aged mums, ensure that your imagery contains pictures of that audience, ideally using your offering. This approach ensures that a user instantly knows on page load that this offering is relevant to them.

Leave the user with an appropriate feeling towards the brand through careful use of color, typography, imagery, and layout.

We strongly associate certain colors with certain feelings. For example, almost all fast food franchises use yellow and red because red triggers associations with hunger. In contrast, the combination of red and yellow are associated with speed.

Equally, your choice of font can leave users with a very different impression. For example, a serif will come across as stable, established, and formal, while a slab serif will appear strong, powerful, and masculine.

Finally, consider other stylistic elements such as negative space, gradients, etc., as these also shape the user’s impressions.

Test the initial impression of your design with a 5-second test.

Before launching a new design, test it has the right first impression. That can be done by showing the design to users for 5 seconds and then asking them the following two questions.

  • What can you remember about the page?
  • What impression did the page leave you with?

It is possible to run this as an online survey using a tool like Usability Hub.

Last edited by @hesh_fekry 2023-11-14T16:10:34Z