8 Web Design Tips to Boost Conversions and User Experience

by | 5 Oct 2020

[vc_row unlock_row=”” row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”80″ shift_y=”0″ z_index=”0″][vc_column][vc_column_text]It’s no surprise that first impressions matter. When a visitor lands your website for the first time, they immediately form assumptions on your business and decide whether to take the next step or abandon mission completely. The way your homepage (or landing page for that matter) is set up can make or break your conversion rates, regardless if they have come via search or even the best referral.

You only have a very tiny window of opportunity to engage a user when they first land on your site, so make every. second. count!

That’s why it is important, even more so now than ever before, to follow website design best practices that will directly impact your conversion rate. You don’t just want your website to look beautiful, you want it to function as a conversion machine and be sending through those hot little leads.

Here’s how.

Consider the Rule of thirds

This design principle essentially divides your website into thirds – or nine equal squares.


The four middle intersections are strategic positions and create the most impact for image or design. Place your most important elements such as CTA’s (call to actions), key headlines or USP’s (unique selling points) at these intersections since this is where eyes will be drawn.


Consider the F layout

The F layout relies upon various eye-tracking studies for its foundational concept. These studies show that website visitors read the screen in an ‘F’ pattern – seeing the top, upper left corner and left sides of the screen most… only occasionally taking glances towards the right side of the screen. These eye-tracking studies argue in favour of placing the most important elements of your website (branding, navigation, call to action) on the left side of the design.

Here is a heatmap demonstrating the F layout.


And what this looks like as a wireframe.


Images by envato.


Colour & Contrast

Getting your colour palette right and incorporating a contrast colour for your CTA’s is critical.

If your call to action or lead magnet is blending in with everything else on the page, who’s going to see it and click on it? Chances are, no one.

If you want your users to convert on an offer, make sure it stands out from the rest of the page by using a greater contrast colour.


Direction Cues

You want to make it as simple as possible for visitors to take action and that means building your webpages so that they point the way to the action you want them to take. Think arrows, triangles, lines or imagery to create a strong connection between the user and the image. Did you know, research suggest we are all wired to react to a baby’s face.


I mean come on, if you didn’t just smile are you really even human?


Leave plenty of white space between section

The more white space – also called negative space – the better. The less cluttered that your designs are, the easier it’s going to be for the visitor to decide where they are supposed to take action. If you group items too close together, you risk overwhelming visitors and convincing them to click away.

White space also makes it easier to communicate a single key message to your user as it’s given breathing space and a clear focus.


Gestalt principle is the law of similarity

Our brains love to take shortcuts and make assumptions all the while reassuring ourselves that everything has been thought out.

For example, we assume unification or relatedness to visuals based on proximity and whitespace. Visuals in close proximity are perceived as related although that may not be true. Another example is that of similarity, where elements that look similar are considered to be related and elements that look different unrelated. To apply this in your web design, try grouping items you want to be associated with one another such as a glowing testimonial under the lead magnet or item you are selling.


High quality images and human faces

Using high quality images and, in particular, human faces will ensure that your conversion centered website elicits emotional responses.

Human faces are very powerful (as we just discovered). We are all constantly exploring the world around us by looking for something familiar. Familiarity gives us a feeling of comfort and reassurance.

“When we see a face, we are automatically triggered to feel something or to empathize with that person. If we recognize content on a website — such as a problem, dilemma, habit or whatever else — we feel connected and understood.”
– Aarron Walter, User Experience Designer

Here are some of our resources for sourcing hi quality imagery:

Adobe Stock
Death to Stock
Superfamous Studios


Social Proof

At our very basic, we are all social creatures and as such, we look to other people to guide our behaviour. Including social proof will help visitors feel better about any decision to engage with you and buy from you. One of the simplest ways to help build rust is to deliver social proof which is simply feedback on how other customers and visitors have felt about your products and services. This can be simple in the form of star ratings or longer in the form of full testimonials, reviews or recommendations.


There you have it! Some simple design principles to keep in mind when next approaching your website home or landing page design. One item not covered here but still just as important is the age old mantra “Keep it simple (stupid)”. The simpler your content can be, the more intuitive the pathway (and not to mention aesthetically pleasing) and more likely the conversion.

Many of these principles can be implemented fairly quickly and easily, if you would like a hand reviewing or optimising your site for conversion and user experience, get in touch with Digibrand today.[/vc_column_text][/vc_column][/vc_row]

Jessica Foord

I’m a digital designer, story weaver, connection builder, and supporter of your brand. Here you will find my latest musings, industry updates or little tips to help make your web life simpler.