You’ve spent weeks, or even months perfecting your new website and you get to the end of the process and it just looks a bit ‘meh’. I mean, it probably has some of the features you envisioned, but somehow it doesn’t look nearly as good as the theme you agonised over choosing.
You’re asking yourself… “Why doesn’t my website have much impact?”
“Why does it feel a bit messy and unprofessional when it started out so well?”
Website disappointment is real and if you aren’t a professional graphic or web designer, it can be almost impossible to put your finger on exactly what isn’t working.
ARE YOU PANIC DESIGNING?
Most people do this. In fact nearly everyone does this, at least the first time that they build a website.
If you’re not confident about building a website (and let’s face it, it’s very daunting if you’re not a website designer) then most people simply stick to the theme’s home page layout and general design aesthetic. You add your logo, maybe throw in a couple of custom fonts to match. Basically, you’re free-styling it and letting your website template dictate how your brand looks and how your home page is laid out, instead of the other way around. I call this panic designing.
Panic designing happens when you’re designing any kind of marketing material and you don’t have a brand guide.
You might also find yourself doing a bit of brand shopping. We’ve all done it. We visit a website (maybe a competitor or someone we really admire) and just think “Wow! I want my website to be JUST like this”.
So we grab the colour reference, or we use the same font and we keep picking up ideas like a magpie. You’ll definitely end up with something nice enough, but you won’t really have a solid connection to it. You won’t love it. I want you to love your brand.
Instead, when you’re looking for inspiration, try to work out what it is that really speaks to you. Rather than using a font you see and like. For example, try to really examine why you like it. Learning to develop your critical eye and being able to work out what attracts you and why, will result in design projects which are unique but totally in tune with your personal aesthetic.
With those basic design principles in mind, let’s move onto my Seven Rules of Web Design.
1. YOUR HOME PAGE IS THE FOUNDATION FOR ALL THAT FOLLOWS
A good home page should set the stage for the other pages in your website. It should contain ALL of the fonts, colours and design elements that you intend to use throughout your website.
Why? Because there should be no design ‘surprises’ later on. Unexpected fonts, colours and design elements interrupt the visitor experience, causing them to lose focus on the content and get distracted by the design. Once a visitor is engaging with your content, you want to keep them reading.
This doesn’t mean that you can’t surprise and delight them with brilliant copy and images. In fact, making sure there is no ‘pattern interrupt’ will help them focus on the content even more.
Top tip: It’s also worth making sure that you get your home page ‘pixel perfect’ on all devices before moving onto your inner pages. You’ll find yourself using and reusing sections and features. Believe me, there is nothing worse than having to go through every page and correct the same error repeatedly.
My best advice here is spend the time creating a brand guide first. Branding matters. When I’m planning a new website, my visual research starts with compiling a mood board, over time, in Pinterest. I follow a specific set of guidelines every time, focusing on colours, fonts, and shape and pattern. From the Pinterest board, I then move into the brand design phase.
Even if I am creating a web design solely for sale, I still create brand guidelines to ensure that I have a clear road map to keep me on track when I’m designing every single page. I do this before I go anywhere near a web browser!
2. PAY ATTENTION TO DETAIL
The hard work doesn’t stop on the home page. You need to make sure that you continue to pay extreme attention to detail as you work your way through the rest of the pages. This will result in the polished look and feel that will create a cohesive viewing experience for your visitor.
This is also the issue that I see crop up most often. I can tell that a lot of time and effort has been but into the home pages of many websites, but then the standard drops quickly the deeper you explore. I often see fonts and design elements left over from the theme’s demo settings, which creates a jumble of styles that don’t work well together.
Working your way through your website methodically is boring, but it really pays off.
3. USE SECTIONS TO BREAK UP YOUR COPY AND CREATE A NARRATIVE
One of the biggest problems that people encounter when trying to DIY their website is that they have more content to add than is seen in the demo of the theme they buy.
The result is big, dense blocks of text, in a long white background section. Your visitor will not read long blocks of text, no matter how good your copy is. Harsh but true.
You need to make sure you are breaking up your copy into sections, with a single idea per section.
Think about varying the widths and styles of your sections. Break up copy with bullet points and call-out quote. Add images and design elements.
Do whatever it takes to create a bitesize narrative flow that you visitor can easily consume.
4. USE NEGATIVE SPACE
‘Negative’ or empty space is one of the easiest ways to make sure that the visual and copy elements of your website get to shine. I know that negative space makes a lot of people nervous. It’s tempting to reduce the space and throw in an extra design element or two, but that will just give a cluttered feel.
Negative space says ‘luxury’ and it allows your visitor to focus on each piece of content in turn, without distractions. In addition, studies have shown that websites with more negative space have lower bounce rates.
5. KEEP YOUR TYPOGRAPHY SIMPLE
Everyone loves fonts, right? In fact, it’s often the most enjoyable part of the branding process and most people love fonts so much that they end up using too many. Unless you are a professional designer, you should try to limit yourself to a maximum of 3 fonts, including your logo.
You’re looking for:
- A heading font
- A subheading font
- A body copy font
Your font choices need to be driven by a ‘top-down typography’ approach. This means that your logo (at the top) controls the fonts that follow.
All too often I see a complicated logo which involves two fonts PLUS an additional 2-3 fonts on the page.
Instead of adding more fonts, think about how you can vary the existing fonts you have, by using different weights (thin, bold, etc), different styles (italic) and different letter spacing.
In fact, I’ve designed several websites which only use one font throughout but remain visually interesting, purely through varying the weights and styles.
6. KNOW YOUR USER EXPERIENCE
Understanding how visitors experience your site (or UX as designers call it) is crucial. User experience is how a person feels when interfacing with a system, in your case, a website.
It’s all too easy to make assumptions about user behaviour. You might intend for your visitors to follow a certain path through your site, but are they really doing that?
You might be lacking navigational clarity or not enough calls to action. Maybe there are too many clicks to get to the key areas of your site.
The only way to find out is track behaviour. I recommend the following tools.
Google Analytics
This will show you your most visited pages, where people and landing and leaving from and how long they are spending on each page.
Mouseflow.com
Mouseflow is tracking software you can install on your website to show you, in real time, how people are using your site. You can watch them as they move through your site and you can access reports and generate heatmaps.
Usertesting.com
If you want a real insight into your website’s user experience, pay for a session with User Testing. A real person will be tasked with exploring your website and they will record themselves giving feedback as they use your site.
This service can be a bit hit or miss if you get a tester who doesn’t really understand what you do, but that can be a good lesson in itself on making sure your message is clear.
7. MAKE SURE EVERYTHING WORKS
The fancy name for making sure your website is fit for purpose is User Interface (UI). I come across despairing posts in Facebook groups all the time, from business owners who have just realised that their contact form hasn’t been working for example.
Take the time to give your website a thorough usabilty audity.
- Check font size and readability
- Make sure your navigation makes sense
- Check all of your buttons work
- Make sure all links and buttons have hover states to let people know that they work
- Test your contact form (regularly)
I can’t emphasise how important it is to check and check again and do this regularly. Updates break things, page links get changed and content gets updated. Small changes can affect usability throughout your site.
Now is the perfect time to sit down, audit your website and make sure that it’s the very best shop window that it can possibly be.
If you need a little handholding, my membership, The Marketing Fix, includes a step-by-step web design course. Visit https://themarketingfix.co for more details.
