7 web design sheets to improve your clients’ satisfaction

When you start designing, do you get to sit in front your PC right away, or open a notebook first?

Digital data can be modified and reused easily, but it will be a good idea to draw freehand before you start the work. Rough sketches will be important to make sure of clients’ requirements.

Here’s a summary of recommended PDF template files for designers who like paper and pencils. Print out your favorites for your web design.

You can go to the download page by clicking a thumbnail.

Web sketching template by Nunile

Using the 6 pages template

Using the 6 pages template

For the first item, let me introduce my strong recommendation to you. There two patterns: 6 page version (shown in the picture on the left) that lets you lay out multiple designs and pages, and 1 page version where you can freely draw bigger sketches.

The links above are image files at Flickr. You can download the PDF files from the links written in the summaries.

Wireframe template by alfonso_bozzelli

Wireframe template (C) alfonso_bozzelli

by alfonso_bozzelli

If you want the most simplest one, this is what you want.

This is also introduced at Flickr and the files for printing are available from the link.

The zip file contains Full version for one page and the Mini version for two pages laid out longwise.

Printable Web Page Design Template [Distractable]

webpage_wireframer

Printable Web Page Design Template

This template is best for graph paper lovers.

The graph paper field has border lines for different aspect ratios to let you know “above the fold”, which is parts of your website that visitors can view without scrolling down.

960 Grid System

960 Grid System Templates

960.gs

960 Grid System, who is trying to propagate the idea that the website width should be 960px, provides tools for website with 960px wide. You can download the zip file from the link at the upper left. The zip file contains assorted templates for various software such as Fireworks and Inkscape.

If you want only the sketch sheet, go to GitHub website and click “View Raw” for downloading.

The file includes a incredible set of 6 sheets: sheets with 12, 16, 24 column grids, each of which has the 1 page and 4 page versions.

Concept7 A3 sketching grid paper

Concept7 A3 sketching grid paper

Concept7 A3 sketching grid paper

While a common size of printed material is A4, this sketch sheet is formatted in A3, double the standard size. Compare the paper to the eraser in the image shown left to see how big it is. The browser field alone take up 2/3 of the whole paper and is surrounded by spacious memo fields where you can draw tiny sketches or write your clients’ requests.

The author made this sketching paper based on the above-mentioned sketch sheet by 960.gs, so the grid systems in these two are compatible.

Storyboard Templates

Storyboard Templates

Storyboard Templates

This is typically used to do a sketch for a series of movie scenes, but you can apply the simply format to web designing. The aspect ratio for movie is, of course, the same as PC display, and it makes this file useful for your job.

The templates are available in the 9 page version (without memo) and 3 page version (with memo). They will come in handy when you compare different designs or put our your ideas.

Wireframe Magnets (DIY Kit)

Wireframe Magnets

Wireframe Magnets

 

This is the best bet if you work on user interface design with your work fellows. These sheets are made to print on magnetic sheets. Cut out the buttons and forms and you can place them on a white board.

So, how was it?

If you could not find anything good, you could make one by yourself.

Using your favorite templates will enhance work efficiency and hopefully improve your clients’ satisfaction!

This post is also available in other languages.

Reaction on Twitter

  1. @samudio says:

    7 web design sheets to improve your clients’ satisfaction http://bit.ly/qGMwu9