The 10 web design factors that make a kick arse website
When it comes to great website design, there’s a few elements that will always span across the different design trends we see, year in year out in our industry. At the time of writing (September 2017) the website design trend we’re seeing – and have seen all throughout the year – is large, full page slideshows with a funky background image or video and marketing message or a call to action button.
These look great and I really like these types of designs however, this is definitely a web design trend, and in a few years time websites that have been built this way will start to show their age.
What makes a good website design is always going to be somewhat of a personal choice however there are certain great design elements that stand the test of time (like Darth Vader’s outfit, blue jeans, a good suit, Kombie vans and chocolate souffles).
#1 – Web standards vs Web norms
I’ve put this as the first item on this list as I truly believe it’s the most important when it comes to making great websites. Let me extrapolate on this a little so we can get a really good understanding of these two very different design approaches.
Web standards are the formal technical specifications that many developers use to build websites, software and apps. These standards are upheld by the World Wide Web Consortium and are used to help developers use standardised best practices.
What I call web norms are a little looser to define and change over time. These are the things you see around the web on websites, apps or software that make up normal usage. For example the ‘contact us’ menu item is usually the last menu item on a website or when you hover over underlined / coloured text, this is usually a hyperlink. Web design elements like this cover a wide range of areas from design, user interface and user experience.
Web Design Tip:
Design your websites with the average Joe in mind – don’t make people think too much. If you start straying away from web norms in your website designs, it will force people to think about what they’re doing as opposed to intuitively finding their way around your website. Once people have to think too much, you’ve lost them and the chance at converting them to a customer will become that much harder.
#2 Use of colours and complementary colours in website design
This is one I see people get wrong all the time. Many times it’s because clients like to lead the design process from personal taste instead of listening to professional designers and their experienced opinions. Sometimes this can’t be helped and you will end up with horrible websites like this one (in our office we call these types of websites angry fruit salad) and chances are that clients will love them.
When designing a website it’s important to not only think about the use of colours in terms of colour psychology and its impact on sales and conversions, but also to ensure you choose a good colour palette and complementary colours to combine with your overall design.
To give you an example, we chose orange for the Marketeam website as we wanted the colour to communicate a warm, inclusive and energetic message through the colours and marketing messages on our site. This combined with the play on ‘Marketing’ and ‘Team’ for our business name and branding helped us to create a brand that helps our clients feel included and like we’re part of their team.
#3 Use high quality photos on your website
Yes smartphones are convenient and their cameras are getting better and better with every new version BUT, this doesn’t mean you should be taking photos for your website with one (unless you really know what you’re doing).
If you’re going to use images and photos on your website, don’t skimp. Get a professional photographer or use stock photos. If you don’t have a budget for photographers or stock images, there are plenty of places on the web where you can get decent photos royalty free like Flickr, Pixabay or Pexels.
One thing worth mentioning here, when we’re talking about high quality images we’re not talking about resolution, pixel size or file size. We’re talking about composition, subject matter and lighting, etc. Bad quality photos don’t get better with a higher resolution or file size.
Web Design Tip:
If you’d like to know more about using images on your website, check out our article The ultimate guide to using images for your website.
#4 Make it work across multiple platforms
In this day and age with multiple browsers, operating systems and mobile devices, people are accessing your website in so many different ways so it’s really important your responsive design works across the plethora of browsers and devices.
Sure, there’s going to be some minor differences between Mac and PC’s, Firefox, Chrome, Safari and Microsoft Edge but overall you will want to make sure that the experience is similar across all browsers and devices.
Web Design Tip:
We find one of the best ways to test across multiple environments is to run both a Mac and PC (to test browsers) and also use Device mode in Google Chrome’s developer tools for tablet and mobile device testing.
#5 Treat every page as though it’s your first interaction with a customer
This is a trap that EVERYONE falls into. The amount of clients I see putting in large amounts of thought and effort into their website’s homepage and completely forgetting their internal pages always amazes me.
Sure, it’s likely many people will get to your website from your homepage however, many potential customers will find you through Google or via other links around the web and land on an internal page. Don’t make the mistake of forgetting to treat every page as though it’s your customer's first interaction with you.
To give you an example, over a three month period, our homepage made up a total of 13% of our overall page views – this means that 87% of people visiting our website are getting to us via an internal page. This is a trend we see across multiple websites for many different clients. The homepage only accounts for between 10%-30% of overall traffic to the website.
Web Design Tip:
Make sure you add a phone number, contact forms, calls to action and sales-focused, well written copy on all your internal pages – not just the homepage.
#6 Be efficient with navigation structures
When customers have too much choice and a menu is not laid out logically, it’s likely they will suffer from analysis paralysis and possibly give up in frustration and click the back button.
If your website is likely to have a lot of menu items it’s a good idea to keep these to a maximum of seven main menu items with logical dropdown menu structures. If you have multiple items for drop downs it’s wise to cluster them into logical groups based on what your customers are looking for (can be by industry, product type, price, etc).
Each website is different in the way it’s laid out and how menu items are structured so you will need to use your judgement. The best advice I can give is keep it logical, keep it relevant and keep it efficient.
Web Design Tip:
Look at your analytics regularly to find out what navigation items aren’t being used and shuffle or organise your menus accordingly.
#7 Consistency, Consistency, Consistency
The quickest and easiest way to make a website really ordinary is to start using different fonts, font sizes, colours and imagery across the pages of your website. This is a big web design no-no. It doesn’t matter what type of website you’re building, consistency in the use of colours, fonts, images and language will help customers to move through your website easily without the jarring experience of too much change.
If you’re using a content management system like Joomla or Wordpress this is really easy to do as you will will have a dropdown in your editor that gives you Paragraph, Heading1, Heading2, Heading3, Heading4, Heading5 and Heading6 options (which are more than enough options!)
For most websites around two to four different heading types will be more than enough.
Web Design Tip:
Making something bold and bright red or blue does not make it stand out!
#8 Sell your customers solutions, not products
This is another trap I see clients fall into all the time. They write website copy about themselves, their company, how long they’ve been in business and how great they are.
Newsflash - Customers don’t care about this! They care about what your product does for them, the solution it gives, the benefit it creates, how much money it saves them or how it makes their life easier.
Customers don’t care that you’ve been in business since 1965 or that you have the widest range of widgets in the southern hemisphere – if you’re not solving their problems, it’s likely you won’t get the sale.
Talk about your product’s benefits – not the product attributes
Let’s look at an example:-
Attribute-focused copy: Our websites are built using Joomla/Wordpress – an open source content management system and are built using responsive design technologies.
Benefit-focused copy: When we build you a website there’s no ongoing fees or charges for software upgrades and your customers can easily browse your website on any device or computer.
Can you see the difference? The first piece of website copy talks all about the product and it’s attributes. This doesn’t mean anything to customers as they probably won’t know about open source software or responsive design.
The second paragraph of copy talks about what the customer will get from your product or service. There’s benefit to it and this type of copy is more likely to convert customers.
Web Design Tip:
Don’t talk about what your products can do, talk about what they can do for your customer.
#9 Wizzbangery and it’s cost/benefit ratio
There have been many times when clients have asked for what they perceive as a minor change to a website to make it look cool or unique. When clients ask for these types of changes (usually part of scope creep!) I always ask them to follow these four criteria to decide the outcome.
- Does it create a better user experience or improve the site in any way?
- Will it help you convert more customers?
- Are lots of other people doing it on the web – if not, why not?
- If it costs XXX to add or build, how many products would you have to sell to pay for it?
When I ask clients these four questions, 99% of them tend to re-think the gauge that explodes glitter across the screen, customised wait/buffer/load animation, lightning bolt mouse icon or popup that won’t turn off until you add your email (yes, these are real life examples!).
Web Design Tip:
It’s our job as website designers to guide clients through the web design process and tell them when their ideas are just plain stupid (even if they think they’re genius).
#10 Make it fast
This one is more a usability issue than a design issue but it’s still a very important factor when it comes to building websites. Not only does Google use website speed as a ranking factor but it also creates a better user experience for your customers.
One of the easiest ways to speed up your website is to optimise your images. All this really means is reducing the size of your images so they load faster. This can be done using Photoshop or an online tool like Tinyjpg.
The other thing you will want to make sure you’re NOT doing is serving scaled images – by this I mean reducing the size of images using CSS. Some Wordpress plugins or Joomla modules and particles can do this so you will want to run a report using some of the tools below to get see what images could do with some optimisation.
Caching is another way to speed up your website. If you’re running a Joomla website you can turn on caching and G-zip compression in Global Config and you can also turn on the ‘System Cache’ plugin. If you’re using Wordpress there’s a range of different caching plugins available to help speed up your website.
A word of warning – don’t be tempted to install or use lots of different caching options as this can sometimes have a negative effect on your website. Turn on, install and test your caching options incrementally to get to the best restuls.
Hopefully these website design hints and tips will always be relevant and useful. I’m sure there’s a few items on here that will change over the years but most of them are as relevant today as when I started building websites back in the early 2000’s.