10 essential web tools for building better websites
Posted by: absolute
Getting designers and clients communicating effectively can sometimes be a challenge. Both of you are working towards the same goal but its 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:
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 youre all on the same page:
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. Its 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 youre 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.
The popular blogging website Pinterest is ideal for bringing all your design ideas and inspirations together into one shared resource. Its 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.
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:
This is a very simple browser plugin that lets you select a colour on a webpage with an eye dropper tool and itll tell you the hex colour value of that particular shade. Its great for picking colours you like while youre browsing the web.
When youre 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.
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 worlds leading image libraries, iStock, which enables us to supply all stock images at a flat rate.
Once your website is built and populated and ready to go live you need to check its 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:
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 youre looking at in one go. Once you have the image you can annotate it with any amendments before emailing it.
Yet another plugin, this time one that lets you resize your browser to represent common screen resolutions. Its 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.