What elements make up a good website? As the internet gets older every year, one thing is clear; the design and use of websites are changing rapidly. With almost 2 billion websites online today. How are you going to stand out in a busy digital world?
What Makes A Good Website?
The components of good website design are
- Visual design
- Technical setup
- Use of Web Tools
We might’ve broken them up into what seems 3 easy core categories, but there’s far more that goes into website design, and we’re going to cover all of them in this post. First things first, before you start designing any website, you need to know the purpose of the website (and every web page) and understand what you want to achieve from a website redesign.
Every one of your web pages should have a clear purpose, not just your website. Is it there to generate sales? Build your reputation? Provide customer service? If your pages don’t have a defining purpose they may actually be preventing users from effectively learning about your company or purchasing your products.
Understanding your audience is also an important part of creating a good website. Think about how your target audience will find you, what platforms they’ll come to your site from, and what they’ll be searching to bring up your site. Having this information can help you in all other aspects of your website design.
You can plan your landing pages, keywords, what kind of brand imagery you need to incorporate and even how to improve user experience by mapping the user journey through your site, all from understanding your audience and their online behaviours. Once the purpose and audience of your website has been nailed its time to focus on the other components.
Visual Web Design
The aesthetics of your website are the second thing noticed by users who land on your page – after the load speed – so you need to impress here with a beautiful eye catching design.
Got an existing Brand? Pull those designs through to your website too and align with your offline business. But branding your website doesn’t just mean adding your logo – no. Think about every colour choice you make and preferably make it a colour that’s in your brand’s guidelines.
When branding your website, you don’t want to shove a load of colours at your visitors, it should be obvious how much colour is too much colour, so leaving some whitespace on your web pages is absolutely fine – It actually makes your website appear less cluttered, and helps direct users to your main purpose, the content.
Our tip: As a general rule, between 2 and 3 main colours is the ideal selection for a good website, but never use any more than 5. It’s also important to think about complementary colour combinations to help you avoid any big design mistakes or clashes.
Choosing a few font typefaces to be used on your website is also a branding choice that you should be thinking about. Take a look at Google’s web safe fonts for ideas on fonts that would suit your brand. Quick tip: Keep your most legible font as your primary font for the content such as paragraphs, and use your more fancy font for your headings. You can see this is what we do with our text body and headings too. Using more than two fonts in your website design can result in it looking unprofessional and messy.
Now, if you haven’t got any branding to start with then this is completely a blank canvas for you to create what you want but keep in mind, every colour has an associated emotion, and every font has its personality. There are other branding devices you can use in your website design, check out our guidance on brand archetypes.
Imagery & Graphics
Every image added to a website is better with a purpose. If there isn’t a need for it or it doesn’t add any value to the web page then don’t add it.
Images are best placed next to the text they are relevant to, or where they aid in the user experience of the web page – like in these landing pages for Ad campaigns.
If you feel it would work on your website, we’re real fans of using images like the one below, of people that seem to direct users.
Using images should be proportionate to how much text you’re writing, as we said, images should support the content on the page. Good website design should incorporate a visual hierarchy, with the most important images and symbols at the forefront of your site to direct the users to the most important content first, and then everything else below.
It’s also important to optimise your images by using high quality videos and high resolution photos, especially on the best ecommerce websites where product images and videos are essential for encouraging a customer to purchase something online.
Aside from standard images and videos, good websites also incorporate items such as charts, graphs, screenshots, vector graphics and more, providing more engaging and reliable content to their viewers while still effectively conveying their message.Scaling your images to an appropriate size and compressing the files can also help with your load speeds; we’ll talk more on why this is important later.
Call To Action
I know we keep going on about each page having a purpose, but what’s the point in making pages that don’t do anything? Adding something called a ‘call to action’ on each page encourages your users to perform the desired action. For example, if I wanted them to contact me, not only would I make my contact details are easy to find, I’d make a big button that makes it clear I want people to contact me.
This also makes it important to include an easily accessible contact page on your website. Your company’s address, phone number, email address and even an online contact form can be compiled into one page and directed to with a call to action, encouraging potential customers to get in touch and interact with your business. Making the first steps with your business as simple as possible for the customer can make them more likely to purchase from you.
Wanna see some great examples of this? Check out these websites.
Using a different colour for your CTA is the best option as we’ve done with our website for The Tube & Bracket Company.
Drawing users to click on buttons and complete your desired action.
When we talk about personalisation, we mean both personalised for the user and adding personality to your website that sets it aside from the rest of your competitors.
Yes, part of the Website’s personality would come through in the branding of the site, but also think about the tone of the text, and how you’re phrasing things. Adding an about us page is essential and can be used to add personalisation. The about us page is where you can talk about yourselves as a business and forget about the customer for a second.
It can also help to add content relevant to your specific target audience, however personalising a website for users can be a lot harder as to some degree you’d need personal information to go off of. But we can make certain additions to a website like adding location pages to target customers in a specific location and using more of ‘you’ and ‘your’ when talking about your customer.
If you want to make a website more people-focused, then add images of people to your site and take quotes off of customers to use as testimonials. Adding genuine reviews increases the trust new visitors to your site have to your company and makes them more likely to complete a purchase with you. 98% of consumers feel that reviews are essential when making purchase decisions and are even more of a deciding factor than shipping fees and the product’s price!
You could also add your team photos. seeing the real people behind the website can add that human touch missing from most businesses online.
Consistent information is key to good website design throughout your Site. Keep a simple and clear message with limited amounts of detail, such as only a couple of phone numbers and a few email addresses. In addition to your contact details being consistent, your website content shouldn’t contradict itself either. If you have a service page that’s no longer a service you do – take it off the Site!
Technical Web Design
Responsive and Mobile Friendly
In 2021, approximately 54% of web traffic worldwide is generated from mobile devices. It’s really not unusual for us to see websites being accessed on mobiles, as users browsing the web on their phones find it easier and simpler than having to load up a desktop, especially when on the go.
Having a website that isn’t mobile friendly means you’re leaving out a huge proportion of internet users. Gain a competitive edge over your competitors by making your site responsive. Responsive means your website can be viewed on all desktop and portable devices easily, and the experience would be optimised for the User’s device. Adding responsiveness is a huge part of making a site mobile-friendly and will definitely help boost your Website’s favourability with users and search engines; so it’ll be much easier to capture potential customers whichever device they choose to use.
Test your website using Google’s Mobile Friendly Test and check if your website works well on mobile.
Fingers crossed you get a report that shows you page is mobile friendly:
Another great tool you can use (completely free) to check your website for mobile usability issues is Google Search Console. As Google searches websites it’s bots can detect mobile issues for your website.
Manage your website on Google here and check Mobile Usability under the Enhancements tab.
Fast Load Speeds
Your load time is the first encounter a user has with your website. As a user loads a web page, their patience wears thin real quick!
Google’s John Muller recommends a 2-3 second load time; anything more would put you at a disadvantage to your competitors.
This is because almost 50% of web visitors expect a site to load in 2 seconds or less and are more likely to leave if the page hasn’t loaded within 3 seconds.
This increases the bounce rate of your website, the percentage of visitors who have left your site without making an action. Search engines favour websites with lower bounce rates as they are appealing to viewers for longer periods of time, and a consistently high bounce rate can have a negative impact on your search engine rankings.
So what affects your load times? You may want to check your load speeds, and that’s fine, some tools you could use are Pingdom, GTmetrix, and Google’s PageSpeed Insights. As for what actually affects load times, some areas to look into are:
- Compressing Images
- Scaling Images to the optimum pixel size
- Reducing the number of HTTP requests made
- Reducing your page file size by consolidating multiple HTML, CSS, and JS files into one
- Minify your code
- Choose a cache plugin for your website
- Use cache on your server too
There’s some to get you thinking, running your website through the tests above will also give you areas to improve on.
Not really in the web design category, but security is definitely what makes a good website. Your website should be secured from hackers trying to steal yours and your User’s sensitive data.
There’s a number of ways to go about securing a website but to start with, the login and password to your content management system should be complex and guarded against being viewed by anyone, if you’re using WordPress or you’re using a standard username like ‘Admin’ then change this right away.
Part and parcel of securing a website is installing an SSL certificate onto your site. You can tell when a website is SSL encrypted by checking for the padlock symbol in the right-hand side of the search bar. A large proportion of internet users won’t complete a purchase on a website without the padlock as it can be unsafe and leave their private, personal data exposed online.
An SSL Certificate means that any data passed from your users to your database is protected via an encrypted system. You can learn more about insecure websites by clicking the ‘i’ icon or the padlock in a websites address bar
Alternatively, it’s easy to spot a secure website as the web address will read http:// (unsecure) or https:// (secure).
If you are using WordPress as your chosen CMS, then adding a security firewall plugin like Wordfence or Cloudflare is a must-do task to protect your website from DDoS attacks, malicious IP addresses and any other threats to your site you may encounter.
Finally, marrying your Website’s security with the security of a good hosting provider could also be considered. Cheap shared hosting providers place your site at risk on shared servers that hackers actively use to try and enter your website. Upgrading your site to a private server environment can give that added protection and speed your site maybe after.
Content Management System
I think there’s no doubt, that as a specialist WordPress agency, we’re gonna go with WordPress on this one. But there are other options open to you like Shopify, Magento, Opencart, Joomla, Drupal. There are loads of options, but why do we love WordPress? Around 34% of all websites are run on WordPress. This is because it’s the easiest to use and most versatile CMS on the market.
It’s not just for blogging. Installing Woocommerce will allow you to create eCommerce websites to sell your products, and there’s plenty of other adaptations that can be made to your site using WordPress too.
Since its introduction, GDPR has been a grey area online, and it’s not exactly clear how to be fully compliant online or if it’s even necessary. But we feel this will be changed soon to become the norm so it’s best practice to sort this out ASAP. Here are some GDPR ideas that could be implemented on website design (we use these for our clients too)
- Limit the amount of data you’re collecting to the absolute minimum
- Protect your site with the SSL certificate mentioned
These tips keep you and your users protected online, so this is the best practice to use in your website design.
Site Architecture & Navigation
Users don’t want to be searching around for web pages. Your navigation should be easy to navigate, flow well, and provide an effective user experience.
Have you not yet planned your site architecture? Use Slickplan. It’s a tool that helps map out site pages and content – Or you could use an old fashioned pen & paper combo. Your main navigation should join your main pages and be ordered logically. Then within these archives or sectors, you can link to further pages, creating a funnel almost.
When creating the sitemap for your website the three click rule is key: Every page on your site should be accessible within three clicks of any other page on your site. Mega menus are a good example of how larger websites follow this rule, however for smaller websites a simple navigation bar will work just as well.
If a customer can’t find something on your site they won’t go looking for it. Good websites create obvious, logical navigation divided into a clear hierarchy, as well as subtle visual cues, which are kept consistent across the site.
Links are what tie your website together so spread internal links throughout your content where appropriate, and this will help users navigate your site and significantly improve your page views per session.
A secondary reason for having good site architecture is to make your website search engine friendly. What we mean by this is helping search engine bots crawl and index your website.
The top errors bots encounter when crawling site architecture:
- 301 redirects
- 404 errors
- No sitemap
- No Robots.txt
Installing the Yoast SEO plugin into your WordPress site will create a robots.txt and generate an XML sitemap for your website, we’ll talk more about Yoast’s features in the next section. Another tool for crawling your website to find site architecture errors is Screaming Frog. This will reveal your status code errors like the 301 redirects and 404s we saw in the top errors list.
Adding buttons to your web pages throughout will help users also navigate, so be sure to add these sporadically throughout.
Search Engine Optimisation.
A good website gets visitors from Google, Bing, Yahoo, and others. If your plan is to implement the suggestions we’ve made so far, then you’ll already have an edge here as some of what we’ve covered are ranking factors.
What are Ranking Factors?
These are aspects of a website that will affect the ranking in a search engine. You can read Google’s document on their webmaster guidelines here. A good website will be easily crawlable by a range of search engines and show them what they can and can’t index, giving your web pages a higher chance at showing up in the search results.
Some key things to think about including if you want your website to show up in search engines include page titles and meta tags, as well as alt tags on every image which are relevant to the content and include keywords.
Keywords in relation to SEO are specific words or phrases added to your content aligned with what your real life audience will be searching for. By including words directly related to your audience’s search terms a search engine is more likely to show your website on the results page based on its relevance.
However, the content should still be readable, engaging and interesting, avoiding keyword stuffing to keep your pages precise and effective.There are many aspects to consider when optimising your web pages for search engines, including linking to internal and external web pages, Cascading Style Sheets, backlink building, domain authority, and even things we’ve already covered such as user experience, responsive design and loading speeds.
If you’re looking for a simpler way of optimising for search engines, then install Yoast on your Website. Here you can manage and implement things like Schema, Indexation, SEO analysis of your content, Sitemaps, Robots, and more.
Though Yoast helps you manage some aspects of the on-page and technical SEO, it sure as hell doesn’t cover half of the rest. The sphere of search engine optimisation is huge, but if I had to tell you about 3 things, it would be these:
- Focus on the User’s experience
- Build your Website’s authority and relevance
- Have a technically sound website
Use of Website Tools
Make your website do what you want it to do. Web tools give added functionality to websites, including adding booking systems, games, third party integrations, and lots more. Adding these integrations can increase engagement and help your users achieve what they want on your website.
If your users are dying to get in touch with someone, or you notice they’re consistently going to your contact page, or constantly emailing you questions, then chatbots may be the solution for you.
We’re sure you would’ve come across a chatbot at least once, and maybe even used one yourself. They’re convenient when users are in a rush for information to give the best customer service you can.
Social Media Sharing Buttons
Sharing buttons aren’t anything fancy; they are simple buttons, and they work. Of course, they’re not suitable for every page. You should probably use them on blog posts, or other shareable content only.
But even by adding the social media buttons you’re encouraging that extra engagement you wouldn’t otherwise have. (They can also look super cool if you brand them)
Installing Analytics on a website is a relatively painless process, it’s free, and it gives you lots of useful data about how your website is being used by visitors.
You can head over to the Google Analytics website to follow the setup process. It’s a simple setup procedure, but you will have to add a little bit of code to your Website’s codebase. Adding this will allow Analytics to verify you’re the webmaster for your Site and pull and monitor data.
If your company has a newsletter or is looking to incorporate one, WordPress plugins for tools like MailChimp and HubSpot can help you include a simple sign-up feature anywhere on your site, making it as easy as just entering your email and clicking subscribe!
Being able to track your subscribers, open rates and a whole range of analytics from your site’s dashboard make this the perfect tool for businesses with an email subscription to track and improve their email campaigns.
We’ve covered a range of web design factors that would make great additions to your Website, user friendly design, and web usability.
The components of what makes a good website can be explored further and we’ll update this post in future with more considerations, so check back in a few months for more tips.