Top tools for improved web design

Written by Jeremy Hickman

Aug 26 2014

Web Design Tools To Ask Your Agency About

How Can You Make Usability, Typography and Content Flow Design A Priority On My Site?

When designing or coding a site, there are a lot of considerations and requirements to account for.

Memorising snippets of code, making complex calculations - there is much to distract designers from focusing on important areas like design, UX, typography and content flow. To enhance the design and usability of your site, why not ask your web design agency about these tools and whether they could enhance your site.

Your Web Designer’s Toolkit And How it Helps You

There are numerous tools available that can form part of a designer’s everyday toolbox. In this list I’ve put together my current favourites: tools that I use often, together with new ones that I’ve recently discovered.

Ideal for improving sites, workflow, and providing clients with the best project results, there’s something for everyone here.

Coda 2

Coda 2 tool example web design tools

Having used the heavyweight Dreamweaver in the past, I moved across to the lightweight Coda (for MacOS) around 3 years ago and haven’t looked back since.

There are a multitude of HTML/CSS editors out there, but I find this one really easy to use with all the key tools that you need and none of the complexity, so designers can really focus on writing clean, compliant markup and CSS.

Useful features include autocompletion, auto-tag closure, colour-pickers and built-in FTP. Designers can also link directly to GIT and use a built in MySQL editor. Plus, for edits on-the-run, there’s a Diet Coda app for iPad if you want to sync your work using iCloud.

This tool is small, lightweight, powerful - and crucially if clients are aiming to manage budgets, it is not expensive.

CSS3 Generator/CSS3 Gradient Generator

css3 generator example web design tools

The CSS3 Generator is an essential as far as I’m concerned and I use it regularly. CSS3 effects can be designed using this online tool, then the generated code simply cut and pasted into a CSS document - job done!

For clients, another bonus if that this tool is a massive time saver, which helps when managing project budgets and timescales. Plus, because it is regularly updated designers can be sure you’re they're not needlessly using obsolete browser prefixes or syntax.

Interestingly the author of the CSS3 Generator hasn’t made a gradient generator because he rates the CSS3 Gradient Generator so highly - he simply links to this tool instead. It’s easy to use using the online interface, and it makes coding this complex area very simple.

Placehold it web design tools  example

When laying out a site, and before clients’ images arrive, it is useful to be able to insert placeholder images of the correct size and aspect ratio into your page.

This tool makes it simple. All designers have to do is insert an image and set the src attribute to point to the site, followed by the dimensions of the image you want. An appropriate placeholder is then served up - brilliantly simple, and another time/budget saver further down the development line.

Lorum Ipsum Generator

lorem ipsum web design tool example

This is such a simple tool but I use it all the time. I use it when preparing a visualisation of a new website or populating a new site with content before the arrival of the client’s copy. It’s easy to generate some placeholder text using this tool - with options to generate a number of paragraphs, words, or lists in various languages … before simply pressing cut and paste - again saving project time and budget.


sprite pad web design tool

Sprites are a useful way to keep all the images and logos associated with your site design in one file, to save download times for the end user. They can be tricky to use as all your images are set out in one larger composite image, and then carved up using the CSS background position property.

Spritepad is a new tool to me, but looks very useful. It allows designers to assemble a sprite image: the tool generates CSS code to identify all the various elements of the sprite.

Making a sprite and preparing the CSS can be fiddly, so this looks to be another time and money saver to me.

JPEGMini / TinyPNG

tiny pic jpeg mini photo compression tool web design

I’ve combined two similar image tools here, JPEGMini and TinyPNG, and both are very useful and easy to use.

These are very efficient image compression tools, and unlike some compression tools, leave minimal loss of quality.

The TinyPNG tool in particular will also maintain any transparency applied post-compression.

Adobe Kuler

Adobe kuler web design tool example

Need some colour inspiration? I love this tool. It helps designers pick out a colour palette based on a selected base colour. You can choose to pick complimentary colours, shades of the same colour, compound colours, or more.

The interface is neat and easy to use, and there’s a neat app available for your iPhone that can use the built in camera to capture your perfect base colour as a starting point! If your client is looking for a little more intrigue within their normal business colour pallets, this can offer a little complimentary excitement and inspiration, without breaking specifications.

Enhanced Web Design

From a design point of view, these tools are all a step towards the most economic use of time, with the best results possible. For clients, tools such as these can enable a more fluid, cost effective project.

If you would like information on how to improve your own site, or want ask about how these tools could benefit your site, please contact us or comment below.


B2B Marketing Zone