Web Designer's Toolkit

Every experienced designer has a “toolkit” to assist with day-to-day tasks, archive ideas for new designs and to organize tools that make life easier. A design toolkit can be as simple as a folder that houses templates, Photoshop brushes and screenshots of design ideas, or it can be more complex. I personally prefer to keep it simple and well organized so that I can find tools quickly when I need them. This article explains how my design toolkit is setup for ease of use.

My web designer toolkit consists of a folder > sub-folder structure. The master folder is labeled Toolkit and contains the following sub-folders.

Grid Templates:

Grids are an effort to streamline web development work flow by providing commonly used dimensions, based on a width of 960 pixels. There are several variants all based on standard grid systems that can be used for web and print design. My recommendation is to download the grids, work with them and then decide which systems you like best.

Sfaranda
960.gs
The Grid System

I personally work with the 960.gs files and find that those grids are more than sufficient for the designs I create.

Mood board Templates

Mood boards are a great way to quickly collect and display design ideas to clients before the concept design is completed. Using mood boards as an initial step not only saves time, but provides a much better direction for design.

LevelTen uses a template created by Kevin Flahaut which provides directions for color, patterns and textures, images, fonts, logos, page elements, etc. Be sure to keep a master template handy and it will save you several hours of design time.

Kevin's template can be downloaded at Website Mood boards. Be sure to read his article if you are unfamiliar with boarding.

Brushes and Patterns

Photoshop and Illustrator brushes are essential tools for designing professional websites with patterns and textures. And there are many great resources for both free and commercial brushes to add to your toolkit. I typically keep my brushes in a designated folder then add them to Photoshop when I need to use a set.

Similar to brushes, patterns are very useful tools for creating tiled backgrounds on websites and print collateral. Typically you can find patterns on the same websites you can find brushes.

Here are some useful resources for both:
http://www.brusheezy.com
http://www.brushking.eu
http://www.sparkplugthemes.com

Color Schemes

There are several tools and websites out there to help build and coordinate color schemes for web and print. I personally prefer using Color Wheel a Photoshop action that allows you to select a primary color then builds a color wheel for all associated colors. Websites that provide pre-designed and custom palettes include:

ColoRotate.org
Color Schemer
Color Explorer.com/

Actions

Whether you are creating actions or downloading them, actions can help save a tremendous amount of time throughout the design process. Especially when your design requires repetitive tasks such as cropping or creating a 3d magazine cover. I user several actions from color wheels to 3d books with client logos on them. What would take me an hour or more to recreate can be created within seconds using actions.

Photography

Photography can make or break a design and can also be a good reference for inspiration when researching for projects. Although there are several great stock photography resources available on the web, I also enjoy taking my own photos and sometimes use them in my design concepts. Although large photographs can take up a tremendous amount of disc space on your computer or server, I recommend creating a library and purchasing images in bulk rather than one-offs. You can save time and money by becoming familiar with your own photo library.

Istockphoto.com
Flickr (Creative Commons)
Getty Images

Pinterest.com is another great way to collect and organize images for inspiration. I’ve found that when I’m out and about or run across a photo I need to save quickly that Pinterest is a very simple way of retaining images.

Sites I like

Lastly, I keep a spreadsheet of website URLs and descriptions that I can reference when I need inspiration for layouts, color schemes, designs, functionality etc. Using a spreadsheet, I can organize content more easily and add better descriptions then by simply bookmarking the website.

All in all, keeping a toolkit available will save you time and money.