People are always searching for web design tips and tricks.
Here’s the best one I can give you:
“Your website is a marketing platform and should be treated as such.”
Your website’s job, isn’t just to look pretty. That’s an added bonus.
As a service business, your website should:
- Inform visitors about your offering
- Build trust and recognition with your visitors
- Convert visitors into leads
It’s a case of “Yes, I understand what you offer. Oh, and you’ve done it for other people like me. Great, let’s talk.”
In an ecommerce business, it’s pretty similar.
“There’s the product I want. This website looks reputable. Yes, I’m happy to buy from here.”
That’s the thought process you want your website visitors to go through.
Anything else, is negative.
You’ve done the hard work attracting visitors to your website, make sure you squeeze each of them for what they’re worth.
What Your Website Should Do (Remember ITC!)
There are a few things that your website should do for your visitors.
As we outlined above:
- Build Trust
In that order. Here are the three things you want to happen.
1: Inform and Engage
The worst thing your can website do, is cause bounces. People clicking away from your site, is bad for business.
You’ve lost their attention. And attention is everything.
A bounce is when someone lands on your site, and rather than interacting, jump (or bounce) straight off.
This is measured in your Google Analytics as Bounce Rate. The lower the percentage, the better it is for your business.
This is the one area where you really need to focus on getting your web design right.
Good web design and high quality content will keep people engaged, while informing them about your offering.
2: Build Trust and Reputation
Once your visitor has decided whether you can provide the product or service they’re looking for, the next thing they’re deciding, is whether they trust you.
Trust means a lot in this day and age, where any Backroom Billy can build a dodgy website and start ripping people off.
Here a few quick things you can do to help instill trust with your visitors:
- Install an SSL certificate (this adds the padlock in the address bar)
- Add reputable logos (like Paypal and Stripe) if you use them for processing payments
- Proudly display customer reviews and testimonials
- Offer a free consultation or money back guarantee (then they have nothing to lose)
- Provide contact information so people can call or email you (rather than hiding it away!)
By doing that, you’re going to position yourself as reputable. You’re not trying to hide behind your website.
You run a genuine business (I hope!), with a great offering. Make sure you demonstrate that to your visitors!
3: Guide a Buying Decision
So, you’ve got a visitor, engaged them with your content, and won their trust.
Your website needs to guide a buying decision, and move your visitor down your sales funnel.
What do I mean by that?
Well, a website doesn’t just jump straight from the page they enter your site on, to the checkout or contact us page.
They need to be handheld and walked through the buying process.
On Canny’s website, when people land on the homepage, we try to signpost them to one of our three service pages.
Then when they get there, they’re met with a gentle “squeeze” or sales page.
We inform them again about our service offering and process. Then, show them some examples and testimonials (to build trust), and finally, end on a call to action.
If they decide to take action, they’re taken to our Start Your Project page, where we can collect enough relevant information to turn them into a lead.
We’re holding their hand and guiding them through the decision making process.
If you can crack that, your website will turn into a conversion machine!
Remember ITC (no, not information, technology, computers) – information, trust, conversion!
Our Top Web Design Tips and Tricks Explained
Now that you understand how users will use your website, let’s dive into making the most of those visits, with our top web design tips and tricks.
Map Out Your User’s Journey
The first thing to do when looking to improve your website, is to map out the user journey of your website.
At Canny, we do this at the start of every web design project, and we do it with pen and paper. We get out our A2 sheets of paper, our range of Sharpies, and get to work.
We work with pen and paper at this stage, because it allows you to move faster, and get ideas down quicker.
To map out your user journey:
- Draw out your primary marketing funnel on one sheet of paper
- Then, map the pages of your website to your funnel
- On a fresh sheet, sketch out each page in your funnel (in order)
So, two sheets of paper, one with your primary funnel, with your website’s pages mapped to it. One with each of those pages sketched out.
Your funnel should only be between three and five steps long.
Then, you need to keep in mind:
ITC (Information, Trust, Conversion)
Some people prefer to work using the AIDA (Attention, Interest, Desire, Action) marketing method, but we find ITC works just as well!
On each web page sketch, use a coloured pen to highlight the areas of your site responsible for Information, Trust, and Conversion.
Then highlight how you push people from page to page to page.
- On this page, is it clear what my visitor’s next step should be?
- Are we asking people to progress at the right stage?
- Do our action buttons contrast enough with the rest of our website design to make progression easy?
Do this for each page in your funnel, and you’re building up a logical website roadmap.
And that’s what you want.
It’s at this stage you might realise that your website doesn’t actually do a very good job of guiding your visitors towards a buying decision.
If that’s the case, you need to find a design agency that can help you put things right!
Create a Strong Visual Hierarchy
We’ve already touched on making your action buttons stand out, but your web design should have a strong visual hierarchy.
Think of your website like a newspaper’s front page. You have:
- The name of the paper itself
- The main headline
- The sub-headline
- The article
- A picture
- Some additional articles
- Contact information
On a newspaper’s front page, each of these items are immediately clear. And they should be clear on your website too.
You can use a mixture of font size, type, colour, and weight, to differentiate between different types of text.
A strong visual hierarchy should make it immediately clear what your visitors should look at, and in which order. Your visual hierarchy is the reason your visitor’s eyes will follow a certain pattern down your page.
When designed properly, you can guide your users visually towards your main call to action or logical next step in the funnel.
Outline Your Benefits, Not Your Offering
One key mistake that everyone makes when writing their website copy, is talking about themselves too much.
Consider this web design copywriting tip:
Outline the benefits of working with you, rather than the services you offer.
Which sounds better? (In this scenario, you’re a criminal lawyer)
- Law advice for criminals
- Keeping criminals off the hook and out of prison
An extreme example, sure.
But, I’m sure you’ll agree, the benefits are more compelling than the service offering.
Mind The Fold (yes it’s still a thing!)
Be mindful of the page fold. Yes, believe it or not, the page fold is still a very real thing.
By page fold, I mean the first visible piece of your website that loads, before you have to scroll. It’s the bit of your site that a visitor will see first.
You want to make sure that you have your main call to action above the fold.
What is that one primary action you want your users to take?
That’s your main call to action, get it right above the fold. If it’s not visible, people aren’t going to take the action.
You also want to make sure you give enough information above the fold. Information is the first part of the ITC structure, so don’t lose people by failing to engage them.
One thing we like to do when designing a website, is to hang a design element off the screen so it goes below the fold. This way, people know there’s more further down the page and are encouraged to scroll.
Beware of “False Bottoms”
What we just described above, is called a false bottom. Where people think the website content has ended, but it hasn’t.
These days, a lot of websites tend to run in bands. And that makes it easy to think you’re at the end of a website.
To counter this;
Use only slight variations in background colour. So if white is your primary background, maybe only switch to light greys and light blues for alternating sections.
Another thing you can do to counter the false bottom, is to hang elements between sections. Just like we did with the fold.
Start an element of your website in one section, and bleed it into the other. Then, people realise the website isn’t finished, because there’s a bit missing.
Your footer is the true bottom of your website, and you can signal that by a drastic colour change and including the legal bits and pieces.
Have Multiple Calls to Action, and Make Sure They Stand Out
Here’s the thing:
Not everyone is going to take action the first time you ask. And people forget to ask for the sale more than once!
It’s no good just having your call to action in the hero area of your website. If someone scrolls away from there, they’re not going to go back when they want to reach out.
They want that option right in front of them.
You need to make sure you scatter multiple call to actions through pages at important decision points.
Remember when you outlined your user journey? It’s time to put that to use.
You want to make sure each call to action isn’t just “buy now” or “contact us” though!
Think about where the user is on their journey through your website, and make sure the action you ask them to take is relevant.
If they’re at an FAQ section, they might have more questions. So you have two options:
- “View More FAQs”
- “Ask Us a Question”
Two relevant actions that give the user what they want.
You also need to make sure your action buttons stand out against the rest of your website design.
Again, cast your mind back to creating you visual hierarchy. Your buttons should be immediately apparent within your website design.
Make them missable, and you’re missing a conversion opportunity.
Longer Pages Convert Better
People always say, “try and give the most information you can in the least amount of space and time.”
But when it comes to web design, that’s not right at all. Especially if you’re selling high ticket items or services!
That’s because they give you a chance to get into the nitty gritty and share more details of the offering.
You can also answer more objections, share more case studies, and other social proof, that helps put your visitor at ease.
Your conversion focused pages should answer as many objections as possible, and give your visitors a clear understanding of what to expect if they buy from you or contact you.
If I was considering a high end purchase, I’d want to know every single thing I could before I reached out.
Don’t be stingy with the details! Nobody died from information overload.
Avoid Sliders, Avoid Tabs, Avoid Accordions
Website sliders are a hotly contested topic here at Canny Creative.
Clients always want us to use them, and we’re always advising against them.
Here’s why we recommend avoiding the use of sliders, tabs, and accordions:
- They hide information away from your website visitors, and that information could’ve been highly relevant to them
- Most website visitors are scanning, and will miss important points about you products and service offering
- It’s a sure fire way to make sure your visitors don’t see everything.
And why would you want that?
You want your visitors to see what you have to offer, and make a decision based on that.
You certainly don’t want missing important information.
On top of that, sliders suck for SEO.
So what should you do instead?
Stack the information vertically, so visitors can see simply by scrolling down the page.
This will improve the visibility of the previously hidden content, and give your visitors more context about your business.
Real Photos vs Stock Photos
Let’s just say it from the get go:
Stock photography has a tendency to absolutely suck.
They’re generic, overused, and really don’t say enough about your business and it’s individuality.
However, we do have a list of good stock photo websites that break from convention, and actually provide decent imagery for your website.
If you’re going to use stock photos, use uncommon images.
We’ve all seen the city scape and the business handshake before! The world doesn’t need more websites using those pictures.
With photography having a lower barrier to entry than ever before, you can easily shoot your own photos.
Our web hosting partner Flywheel have a great post on their blog about taking professional photos using your mobile phone.
Photography doesn’t need to add cost to your project if you get creative with the shots you take!
Use Faces, Shapes, and Colour as Visual Cues
If you are going to use stock photography, try and get photos of people.
People respond best to other people. And, you can use faces within your photography to give visual clues and hint at where people might need to go next.
If you opt for a purely graphical approach, then consider using shapes such as arrows and icons to guide people through your website.
Another approach you can take to signposting visitors, is to use colour as a cue.
Highlight the background of areas that require attention, while dulling the background of areas that don’t.
Guiding people through your website subtly, will help ensure your user’s stay on course and finish their journey as intended.
Make Your Navigation Easy to Use
Your website’s navigation design is one of the most important features on your site.
There are a few things to keep in mind when it comes to your site navigation.
- You want it to be easy to use, with no surprising actions, or crazy effects (it’s not a Powerpoint presentation, so get rid of the star wipe!)
- Label things properly (sure, “Send a Raven” might look cute to other Game of Thrones fans, but it’ll confuse others!)
- People should know what they’re getting when they click (no surprise popups or crazy sound effects!)
Navigation is not to be messed with. It’s serious business.
Bad navigation labels and unexpected surprises will have your website visitors reaching for the back button instantly.
Remember to Link Internally
Internal links in your own website can play a huge role in your SEO success.
Linking in general, is one of the biggest ranking factors in SEO land.
So don’t forget to link to relevant parts of your site.
Here’s a quick guide:
Blog Posts to Service Pages = Yes
A lot of the time, your blog posts are responsible for most of your traffic. People land on them because they’ve searched for a long tail keyword that you rank for.
They’ll read the post, and then zip off to either another page on your site (which is what you want), or more likely, away and back to Google.
To give you a better chance of the first outcome, remember to link your blog posts to your service pages.
That way, visitors can dip in and find out more about your service offering, than your thoughts on the latest industry trends.
Blog Posts to Other Blog Posts = Yes
Another thing to do, is to cross-link between your blog posts.
Some visitors won’t be ready to buy or engage after reading one post, so build up a spider web of interconnected posts and service pages.
That way, you’re giving them the option to either read more blog articles, or take a step down your conversion funnel and onto a service page.
Service Pages to Blog Posts = No
This is a big no-no.
Once a visitor has landed on your service page or “squeeze” page. You want to keep them there until you ask them to take action.
And the action they should be taking, is buying your product or contacting you about your services.
They should not be heading over to your blog. Your blog is an early brand touchpoint.
Service pages should not link to blog posts. Repeat. Service pages should not link to blog posts.
Careful with Social Media Icons
One of the biggest web design mistakes is putting your social media icons in your header.
Because you want to keep people on your site, not send them back to the distraction and noise of social media.
People also used to integrate janky looking Twitter and Facebook feeds. Don’t do that either. They look terrible, can’t be styled very well, and do nothing but add to the noise.
The right place for your social media icons, is in your website’s footer.
Following on from internal linking above, this is how it should work for social media.
- Social media to your website = yes, that’s the right way to direct traffic
- Your website to social media = no.
You want people on your site to give you a higher chance of converting them into a lead or customer.
Keep Your Writing Short and Snappy
Nobody wants to read huge chunks of text!
Beware of your:
- Paragraph length (we tend to write in two or three sentence paragraphs)
- Line length (break it up as often as you can)
- List length (three to five points in a list is more than enough.)
Shorter writing makes scanning easier, and gets your message across quicker.
I know earlier I said “nobody died from information overload.”
But, make sure the delivery of your information is short and snappy and you have more chance of it being remembered!
So many people use jargon and technical language when writing about their product.
I’ve been on numerous websites and came away thinking “Well, I don’t know what they sell or offer.”
And that’s bad. Really bad!
Technical terms, insider terms, and jargon will force your user to tune out.
When we talk about websites at Canny, we use simple language and make it as easy to understand as possible.
If we started talking about DOM elements, loops, and listener events, we’d lose them in a heartbeat!
Interest is the first element of ITC. Keep visitors interested, and you’ve got more chance of converting them.
Answer Visitor Questions
Following on from talking jargon, and the length of your pages, you need to answer visitor questions and objections.
By doing that, you’re reducing admin time, and giving people an easier route to buy.
To make sure you’re answering questions and objections, you’re going to have to put in the leg work.
You could do it in person with your best clients, and ask them to evaluate your website and content.
You could run a focus session online.
Wes McDowell from The Deep End, recommends having an FAQ page on your website.
This lets you answer any questions and fend off objections before they become an issue.
Something we’ve found particularly useful at Canny, is to…
Install Live Chat
Our live chat has upped our level of warm leads tenfold.
First of all, it lets us answer any user questions and objections straight away.
It also lets us have no-obligation conversations with our site visitors. They only have to enter their email address if they want to, which reduces friction.
We use Drift to provide our live chat feature and couldn’t be happier with the software. They provide a free option too, to help you get started!
Larger scale businesses might want to consider Intercom as an alternative.
We’ve won several key clients because of our live chat feature, and we’re currently exploring how to utilise it further.
Make collecting an email address optional, as some visitors won’t be happy to part with it straight away (for fear of being spammed.)
Also, make sure your live chat box doesn’t dominate your website design. It’s a handy feature, but it’s (probably) not your main call to action.
Use Evidence and Social Proof
The second part of the ITC triangle, is trust.
When someone visits your website, they’re first looking for information. Then, deciding whether they can trust your company.
As a design agency, we show the results we’ve had for other clients.
We also show a carousel of client testimonials that backup the statements on our website.
Other things you could try are:
- Displaying a range of high profile client logos that you’ve worked with
- Posting about award nominations and wins
- Creating in-depth case studies about how you helped someone.
We’re currently in the process of collecting video testimonials from our clients, which will then be used as social proof on our website.
We also blog regularly to position ourselves as thought leaders. Blogging has also helped us grow a six figure business.
Social proof and evidence are huge trust builders, make sure you make the most of them.
Optimise and Declutter Your Forms
Forms can be an absolute nightmare. People have a tendency to collect War and Peace when asking users to submit data.
If you’re collecting emails, ask for two things:
- A name (to allow you to personalise messages)
- Their email address.
You don’t need any more information than that.
For general contact forms and lead generation forms, you’ll want to keep it as simple as possible:
- Telephone (optional)
- Company Name (optional)
- A space for a message
By reducing the number of fields you require users to fill out, you’ll help skyrocket your conversions.
You can always collect additional information at a later date!
Make sure your form fields are very obvious. Subtlety will kill your conversions.
Design Isn’t Everything
Design isn’t everything when it comes to your website.
But it does help.
A professional web design helps keep users engaged, makes you look more professional, in turn, building trust with your website visitors.
A good website design will be based around your brand identity, which helps build brand awareness and recognition.
A good web design agency will be able to help you identify your marketing funnels. They’ll also be able to create a visual hierarchy that directs traffic to the right places.
Speak to us today about creating a great looking website that converts visitors into leads and customers.
Conclusion: Top Web Design Tips and Tricks to Help Grow Your Business
The idea of your website, isn’t just to look pretty, or to send the odd visitor too.
Your website should:
- Build Trust
It’s a fully functional marketing platform and should be treated as such.
Therefore, it’s no good “setting and forgetting” or your website will join the website graveyard. A haunted place where old forgotten websites go to die!
You want your website to be optimised to deliver business results, not just to look pretty.
By following the web design tips and tricks above, you should be able to make some significant improvements to your website.
Let us know if you need a web design agency to help!
How does your website perform for you? Let us know in the comments below.