How to Improve Your Website Design for Better Conversions

Not all websites are created equal. From those that are cluttered to those that have nothing but blank space, what makes different elements of website design cooperate in such a way that a potential customer stays on your website?

The answer is conversion design.

Conversion design is about making a website functional. Your CTA’s need to stand out, the best offer has to be straightforward and in the most visible place, it’s about making the psychology of color or responsiveness work for your business. In a way, conversion design is one of your sales tools.

To get the hang of putting things together, here are the basics:

The Elements Of Good Design

Color

What do you usually think of when you focus on colors? “Are these my brand/logo colors?” or maybe “does this color go with the overall design?”

In general, it’s important to remember your branding and aesthetics, but it’s also worth your while to recognize the emotions (how people feel looking at a color) and whether or not their eye catches your button, banner, or that sentence about an exclusive offer. So, how do you achieve the golden ratio of color in design? Feelings + Contrast.

Every color evokes (on average) a certain feeling:

Yellow – Optimism (Nikon, McDonald’s, National Geographic)

Orange – Friendliness (Nickelodeon, Orange Crush, Firefox)

Red – Excitement (Kellogg’s, Coca-Cola, CNN)

Purple – Creativity (Hallmark, T-mobile, Taco Bell)

Blue – Trust (Dell, HP, Oral-B)

Green – Peace (Animal Planet, Whole Foods, Deer)

Grey – Balance (Apple, Nike, Mercedes)

According to Help Scout, coupling colors with either contrasting hues or hues in the opposite spectrum is not only preferred by customers but it also builds a hierarchy in your website.

Imagery

Gone are the days of cheesy stock photos with fake smiles and 90s computers (although Vince Vaughn and the 70s might be bringing them back).

Today imagery is used to point you in the right direction, focus your attention, and as directional cues. Yes, arrows are important, the right color and size of your button plays a role, but do you know what your images are doing?

I bet you have a picture of a person or two in one of your images, where are they looking? You see, humans have a natural tendency to follow someone’s gaze. Wherever your “image people” are looking – your customer will look too.

Kissmetrics highlighted a few examples, where thanks to heatmaps we see how important it is to think about visual cues.

Responsiveness

Responsive websites allow for one website that adjusts instead of 2 or 3 websites you need to keep updated for different users. But besides the obvious “less hassle” point, it’s important to note that more and more users are going mobile, what’s more – so is SEO.

Awwwards noted in their article “Why Responsive Design Support is the Most Important Feature You Can Add to Your Website” that last year (April 21st, 2015 to be exact) Google began rewarding sites that were built for different platforms. Moreover, if you were to google a phrase on your mobile device – the top results will be composed of “mobile friendly” a.k.a. Responsive websites.

Overall Design

It’s pretty clear that you should never use Comic Sans or Verdana in any of your landing pages or banners. But did you know that consistent kerning/tracking/leading (the space between characters or lines of text), sans serif fonts (characters without projecting features), and type of font can have a huge impact on how your copy is received.

Jost Hochuli argues:

The reception of everything written – including typography – takes place in two ways: firstly, in the act of reading itself, that is the conversion in the brain of the perceived succession of the letters, and secondly as a (most unconscious) visual perception, that triggers associations with what has previously been seen and arouses feelings

Once you have your typography down, there’s the white space and visual hierarchy. You know what images, buttons, and text you want to use – but are you positive you know how to put them together? Think about the natural information flow. In what order would your customers train of thought go if he or she were thinking about making a purchase?

So, are there any elements besides banners, copy, and images that you need to think of? There sure are! Make a connection with your customer by building trust. Credibility is important, factors that build trust are:

  • Testimonials
  • Media logos
  • Well known client logos
  • Videos or images in the “about us” section

Three Examples To Remember

So far you’ve learned about some of the most important factions to take into consideration when you’re creating your website. Now that you have that knowledge, I wanted to show you three personal brand websites that I think are good examples of websites done right. Take a look if you see something consistent showing up in all three of them!

1 Neil Patel

neil-patel

We all know him, we all adore him, we all follow him. His personal website is just as good as the content he shares. Let’s break it down:

  • The white space is well balanced
  • There is a contrast in the text and colors
  • Color is used to build friendliness but also as a visual cue
  • The most important information is highlighted
  • The image used builds trust and credibility

2 Ann Handley

ann-handley

Our favorite writing and content marketing superstar knows how to use color contrast to build a solid visual cue. Let’s break it down:

  • The orange and blue/green/grey color give a sense of peace, friendliness, but also importance.
  • The solid bar with the logo and short info on who Ann Handley is, makes you instantly focus on what is holds above and below. It is a clear cut visual cue to notice the subscribe and menu bars.
  • Making the subscribe button darker, you are drawn to see what it is.
  • Although the large images distract, keeping a consistent color contrast does help to focus on the title of the latest post as well.

3 Grant Baldwin

grant-baldwin

My personal favorite. Grant Baldwin is the champion of not just design that converts, but also of aesthetic design. Let’s break it down:

  • Blue and orange hues to draw on friendliness and trust.
  • Excellent use of contrast to instantly draw your attention to the CTA button.
  • Using the same color and larger elements, Grant also draws you attention to the menu bar.
  • Using an image showing him in his element shows his passion but also how well he does what he does (hey, wouldn’t you want to be in that audience?)
  • The entire copy and image focuses on the middle of the page, eyes don’t wander or become bored as you are shown a consistent image.

Putting Conversion Design To Good Use

Good design builds trust, organizes information, gives visual cues to save time and show the value of your product or service, it is written in an engaging way, the contrast in color and imagery sends a consistent and memorable message.

To recap, begin your planning by thinking what you want your company to portray. Friendliness? Boldness? Peace? Trust? Then pick the colors your brand identifies with. From there on it’s all about balance, visual hierarchy, and using images that don’t draw attention away from your message.

Do you have any design conversion questions lingering in the back of your mind? Maybe you’d like to add an example of good design to my list? Let me know in the comments below!

Melanie Richards

Melanie Richards

Hi I'm Melanie Richards, a brand strategist and web designer. I help thought leaders, coaches & consultants level-up their online presence so it reflects their true value and generates more consistent, qualified leads. Need help with your online presence? Book a call to chat!

Posted in