10 essential web tools for building better websites

Getting designers and clients communicating effectively can sometimes be a challenge. Both of you are working towards the same goal but it's not always easy to clearly communicate all the technical and creative choices that go into a website.

So, here are a few of the best websites and tools to help you, the client, understand the web design process:

Planning tools

Getting things right at the planning stage can save you problems, and money, later on. These are just a few simple tools for making sure you're all on the same page:

Mockingbird

Mockingbird is a basic browser-based wireframing tool that lets you mock up the layout of webpages and create the bare bones of a website. It's a great way to produce a rough draft of how you see a website looking and can give our web designers a steer on what you're after. Our experienced team of user experience experts can then use sophisticated wireframing software to produce comprehensive website plans that allow us to plot the customer journey through the site.

Pinterest

The popular blogging website Pinterest is ideal for bringing all your design ideas and inspirations together into one shared resource. It’s free and simple to use as well as allowing others to view and contribute to it. Use it as a mood board and source of inspiration during a web project to help establish your creative goals.

Design tools

Putting your own web design ideas across can be difficult without having some way to illustrate them. The following tools will help you home in on your artistic vision:

ColorPick

This is a very simple browser plugin that lets you select a colour on a webpage with an eye dropper tool and it'll tell you the hex colour value of that particular shade. It's great for picking colours you like while you're browsing the web.

WhatFont

When you're searching for inspiration on the web this easy to use browser app is a great way of identifying any lovely looking fonts that you may stumble across. Simply hover your cursor over the text to see find out the name of the typography.

Wappalyzer

If you're envious of the neat functionality on another website Wappalyzer is a simple browser extension that will identify what CMS/Framework/plugins it is using. If you want to get something similar on your website this is a great place to start.

Free stock photography

Getting free or cheap Royalty Free images for your website can be a real headache. There are some sites available but these can be of limited resource and varying quality. They are a good resource for placeholder images and dummy content, but can be a false economy. For consistently better quality we would always recommend commercial photo libraries. We recently subscribed to one of the world's leading image libraries, iStock, which enables us to supply all stock images at a flat rate.

Reviewing tools

Once your website is built and populated and ready to go live you need to check it's working as you would expect. These tools will help you review your site and feedback to the designers to address issues both before and after launch:

Awesome Screenshot

This simple plugin lets you take a picture of a specific part of your screen, the open browser window or the entire web page that you're looking at in one go. Once you have the image you can annotate it with any amendments before emailing it.

Window Resizer

Yet another plugin, this time one that lets you resize your browser to represent common screen resolutions. It's an easy way to see how good your new website works at lower resolutions.

Open SEO stats

This plugin produces a quick report of SEO related data like information on backlinks, indexed pages, cached pages, socials, Whois, Geo IP location and more, for any website that you visit.

Pingdom Speed Test

Visit the Pingdom site and simply paste the URL of the website that you want to test into it to see the speed at which the website loads as experienced from different locations around the world.

NB All the plugins and extensions listed above are available for most of the leading web browsers.