10 design tools every designer should know

As a designer, there are now such a vast amount of tools out there at your disposal, designed to aid the design process – some of them incredibly useful, and some not so. The hardest task is distinguishing the great tools that will become indispensable to you, from those that are just a waste of time. Luckily for you, with over 10 years of experience as a designer, I’ve done a good amount of the legwork, trying out all kinds of apps and tools – some good, some bad and some really bloody awful. There have been some in that time that have managed to find their way into my bookmarks – tools that I have relied on time and time again to aid my design process.

Here are my top ten tools that I believe every designer should have at their disposal:

10 Designer Tools Gridulator

1. Gridulator.com

Any designer will know that your website design requires exact element alignment and equal spacing to ensure a clean look and feel. With Gridulator, you can input the size screen that you are working with, along with the number of columns you need within that frame. Gridulator then calculates the column and gutter sizes required, as well as providing you with a downloadable .png file that you can use within Photoshop, to help ensure your web design is pixel perfect every time.


10 Designer Tools 960 Grid System

2. 960.gs

Similar in some ways to Gridulator, 960.gs is a versatile, downloadable file, designed to provide you with the grid dimensions needed within a website design, and help you to streamline the design process. The grid file provided comes in a choice of 12, 16 and 24 columns, and can be opened within almost any design platform (Photoshop, InDesign etc.). It allows you to plan where content will sit, with a mapped out grid system that adds ease to designing for mobile and responsive, and helps you to ensure gutter width, columns and rows all sit in line.


10 Designer Tools Mock Ups

3. Wireframe Sketch Sheets

These free wireframe sketch sheets are perfect if you’re looking for a physical representation of mobile/tablet mockups for your client. In this free pack you get various templates for web designs, and iPhone and iPad app mockups, all proportional, and with options to have gridded and ungridded formats that you can either print out to sketch on, or put straight into Photoshop or Fireworks (or whatever design applicaiton you use) for you to work on top of.


10 Designer Tools LiveView

4. Live View

Want to be able to see how your design will work in Mobile? With LiveView, you can stream the contents of your desktop into a mobile or tablet format, allowing you to see how the mobile design functions, and distinguish any areas for improvement. Is your text size too big/small? Do you need a larger button? Does your map size mean users are unable to scroll the page? With this App, you can easily work out these functional elements before it’s too late.


10 Designer Tools Screen Sizes

5. Screensiz.es

If you find yourself designing for screen sizes that you’re not used to, then this website is great tool to have at your disposal. Screensiz.es features the screen sizes for nearly every tablet, mobile and desktop/laptop out there, along with their pixel density, aspect ratio and many other details you might need.


10 Designer Tools Colour Contrast

6. Color Contrast Checker

Sometimes, designing text in unusual colours, or with bright or more uncommonly used background colours, can mean that people – particularly those with eyesight problems – might find it difficult to read. This really simple resource, available from Snook, is designed to ensure your text colours are optimised for accessibility. Simply input your text and background colours and this checker will let you know whether your combination passes accessibility guidelines. The sliders will also let you adjust variations of the colours you are using, letting you know when your colours pass the guidelines, so that you can ensure that your combination is as user-friendly as possible. Definitely one to bookmark.


10 Designer Tools Wireframing Tools - Axure and Balsamiq

7. Balsamiq

We all know that changing functionality late on in a design project can wreak havoc – which is where wireframing comes in very handy. A great tool to have if you spend a lot of time wireframing is Balsamiq. This App allows you to design your website’s wireframe, with fully-functioning elements, from working buttons  to scrolling and dropdown elements. These elements can be designed exactly as they would work in the final site, meaning that you can show off the website’s proposed functionality, without any distracting visuals that your client might focus on instead of looking at the functional elements. For those of you who love a good visual, Balsamiq also allows you the option to design your elements in sketch style.

There are also other wireframing apps available – notably, Axure provides similar functionality and features to Balsamiq.


10 Designer Tools Image Banks

8. Image banks

You might think that image banks are ‘cheating’, or that you’ll end up with really boring, generic designs by using stock imagery. I’m here to tell you, you’re WRONG. On the one hand, yes, if you just use the most popular stock shots, with no editing at all, you might find other similar versions out there. But when compared to the price of hiring a photographer, models, studios etc, the price of imagery available from places like shutterstock.com or iStockphoto.com is just incomparable. Any decent designer out there will know that, by choosing good stock imagery, and editing it to your needs, you can end up with results that are far superior to photoshoot images that you might’ve paid thousands for. And if you’re after something really special and don’t mind spending a little more, places like Getty will provide you with shots that your client will be ecstatic with.


10 Designer Tools Lorem Ipsum

9. Lipsum

Any designer knows that mockups generally require filler text, so that you can know exactly how your site will look, and how much content is needed to make it look good. Now, I know there are tools for the industry-standard filler text, Lorem Ipsum, in programmes like Photoshop and InDesign, but I much prefer to go through Lipsum. The site allows you to specify exactly how many characters, words, paragraphs you need for your mockup. A great go-to site for your bookmarks bar.


10 Designer Tools Google Fonts

10. Googlefonts

Fonts can be a pain. Often, the ones you love in print may not replicate in web format, or they might be ridiculously expensive to purchase for website use. That’s where Googlefonts comes in. Google have designed their own, free-to-use versions of many of the most popular fonts out there (and lots more original fonts too!), all available from their website. Great for projects where you have a small budget, and just a general staple for many designers.

Leave a Reply