USEFUL WEBSITE DESIGN RESOURCES FOR BUILDING A GREAT SITE

This page contains a list of useful website design resources for small businesses and amateur designers. These are all things we have found useful - either to assess client websites or or in developing our own websites (including this one).

These resources are spread across a number of categories:

We have no official affiliation with any of these websites or products, but (in the interest of full disclosure) we do receive a small proportion of any book sales that come directly from our site. This is at no extra cost to you and is a great way to support the work we do.

BOOKS

 

Considered a must-read by many designers. Whilst it is clearly pitched at web professionals, the beauty of this book is in the simplicity of its core principles. This is best exemplified by its titular principle 'don't make me think', which promotes the idea of giving the visitor only very easy decisions to make, and warns of the dangers of adding to a visitor's cognitive load.

A personal bug-bear of ours is hearing how infrequently designers are planning their websites from the very start. This leads to wasted time and effort, and design compromises that impact on the visitor experience. This book will help you overcome that - helping you better understand and focus on your site's purpose and the needs of your visitors.

Visual design is difficult and many web designers, or those responsible for building or managing websites, are not trained in this area. This book looks to provide - offering an overview of design fundamentals in a simple and accessible way.

MOBILE AND BROWSER COMPATIBILITY TOOLS

 

This tool checks your website against some key criteria Google believes to be important for the mobile experience. It will let you know how mobile friendly it believes your site to be, and, if relevant, will give an idea of what you need to do to improve it. Given the importance of mobile to Google rankings, this is advice worth paying attention to.

A really handy tool; you simply enter your web address and it will provide you with a range of screenshots of what your page looks like when rendered by a range of different browsers. Manual testing is still advised, but given the huge number of browsers (and versions) available, this will help short-cut the process

Another mobile tester, but this one goes a bit further to communicate what you need to do to improve the mobile experience. Much of this advice is technical, but for those able to implement these changes it is incredibly valuable. 

PERFORMANCE TESTING TOOLS

 

A Google tool which checks your site's performance across four metrics - performance, accessibility, best practices and SEO. For each one, you'll receive a score out of 100 which will help you understand your website a bit better.

A pure speed testing tool. Speed testing isn't the perfect science it might appear to be - results depend on the time of day (how busy your servers are) and the location of the server performing the speed test. As a result, it's worth using a few different sources to get a rounded view of your performance. This is a decent tool and also breaks down your performance into micro detail to show you where, and on what, you should prioritise improvements.

One final tester - this one primarily designed as an SEO tool (but it also comes with speed testing on both desktop and mobile). SEO is incredibly important to a site's success, and so it's useful to know where you stand. As with other tools, this comes with recommendations on how to improve that are largely actionable for designers of all levels of technical competency.

ACCESSIBILITY RESOURCES

 

The Web Accessibility Initiative is the best-recognised authority on website accessibility. Their own site is a fantastic resource for all things on the subject - from information on what it is and its importance, along with some excellent tools to help assess your website's current accessibility performance.

Accessibility is often one of the last things considered when choosing a colour pallete and visual identity for your site. This tool helps you land on one that also meets WCAG guidelines - ensuring text and colours have a high enough contrast ratio to be fully visible to people with sight impendiments.

A general web accessility checker that gives focussed recommendations on which parts of your website require additional time or consideration.

One of the best ways to ensure your website offers a strong, accessible experience is to test it in the shoes of some of the groups that might have the most problems interacting with it. This tool shows how your site looks for visitors who are colour blind - allowing you to test how visible key elements (such as call-to-action buttons, or main navigation menus) are.

ANALYTICS TOOLS

 

Understanding how your visitors use your website is one of the best ways to understand what you need to focus on and improve. Google Analytics is the best-known analytics software available, and the chances are you're using it already. If not - you should have it implemented as soon as possible.

Most often used for SEO reasons, Google Search Console also shows you a variety of useful information about your website experience - such as its mobile compatibility and any critical errors that it has found. Identifying these, and making any necessary improvements is key to boosting your website's search ranking.

DESIGN RESOURCES

 

This fantastic colour picking tool helps you choose a palette of colours that work well together. Quick and easy to use, you can choose between a number of different palette styles such as monochromatic, adjacent and triad.

There are many websites we could have picked in its place, but Pixeden is a great resource of free icon sets. When used correctly, icons can speed up the visitor experience and allow them to navigate without having to read lots of text. Just make sure that any icons you use are fully known and understood by all your visitors.

As above, there are lots of different stock imagery sites on the internet. For us, Unsplash is a cut above - stock imagery done tastefully with plenty of images that come with a generous free-for-commercial-use license. Well worth checking out.

CONTENT RESOURCES

 

An incredibly handy Chrome add-in/document checker. More than a spell checker, it will also make suggestions on grammar and help you simplify your writing - an important exercise to make your content as accessible as possible.

Pyramid writing leads to more impactful, persuasive content that is quicker for your reader to consume. NN Group didn't invent it (that was McKinsey), nor are they the sole resource on it online. But they have managed to effectively distill the benefits and key ideas in a single web page. Take a look and start applying it to your writing today.

A multi-purpose tool that checks your content length and reading time (remember - for your visitor, the shorter the better). Where it becomes really useful is in giving an assessment of your content's complexity, and the reading level required to properly engage with it. Knowing this will let you understand which peices require the most simplification.

NAVIGATION RESOURCES

 

Google is pretty good at search, and luckily you can benefit from some of that by adding a Google-powered search box onto your own website. Not all sites need them (and in fact, simpler sites might work better without it), but it can benefit those with more complex websites.

You should test the links on all pages before publishing them, but websites get larger and evolve over time. This means links can sometimes break, which is where this tool can help. Enter your address and it'll crawl your site and look for 404 errors (missing pages). Note; this will not help in times where you have simply linked to the wrong (but valid) page - so manual testing and checks are still required.

Want to get in touch?

Contact us by email or Twitter.