running words around
design education and visual communication
authored by chris m hughes

Dynamic Sketching

Saturday, 10 January 2015

Sketching transcends languages and cultures, and despite all of the apps and digital tools available these days, the humble pencil remains the most important tool a designer can call upon. The reasons are many. Sketching is fun, spontaneous and artistic. It lets you focus on simple choices rather than get bogged down in technology and process. It promotes open thinking, and allows you to take risks and visualise ideas no matter how off-the-wall they sound. You can alter, revise, bin or rework a sketch at little cost or loss of time,  plus you can do it on a train, a bus, in a cafe, and all without wi-fi, power cables or batteries. Sketches are easy to share with colleagues and peers. They are tangible, easily duplicated, and surprisingly effective at showing off your design ability and productivity.

As a designer, the more you do it, the faster you will solve design issues. For design educators, sketching also plays a key role in objectively assessing certain aspects of design thinking.

Sample preliminary sketches.

In a student sketchbook we should expect to see two different kinds of sketching activity - 'freeform' sketching, which evidences the genesis and development of ideas or concepts (these can include drawings, doodles, diagrams, thumbnails and so on) and 'preliminaries', which are representations or plans of the actual design applied to various formats.

Preliminaries can contribute a substantial proportion of the design work before the project is brought to the screen.  They are the key support material for the creation of wireframes, navigation maps, flowcharts and flatplans. The more detailed these sorts of sketches are, the more effectively problems get solved, the faster the execution, and the better the result. Good preliminary sketching uses design principles like consistency, accuracy and hierarchy.  Rather than purely lo-fi roughs, this kind of sketching produces detailed blueprints that show off organisation, interactions, transitions and functionality.

Tools And Techniques

The tools are simple and cheap, but its probably worth paying a bit extra and getting good quality pencils. You can get all of this at your local Hobbycraft for less than £10.

Graph Paper - A4 Squared grid pad, (green lines), 115 gsm
Pencils - three coloured pencils, including standard black
Accessories - rubber, sharpener, a decent ruler
Extras - square post-it notes, tracing paper, paper clips.

Work with Colour 

Use a combination of colours (black and two others) to represent different aspects of the design. These can be used to signify structure, functionality and style. The black pencil is for the basic drawing, to outline formats, draw or illustrate geometry, figures, content and type, and to annotate and label.

A bold colour (e.g. red) is used to signify structure, things like margins, alignment, proximity, hierarchy, measurements, anything that's fixed and supports the idea.

A third colour (e.g. green or blue) is used to highlight user experience or movements such as interaction, navigation, flow, choice, or animation. This might include sliding menus, directional cues, flow, call-to-actions, parallax scrolling, swipes, and so on.

This gives you a three-tiered diagram that is colour-coded and easily understood.

Work with Units

Whether its print or digital you are designing for, the units are crucial, so incorporating some sort of proportional scale in the sketches is desirable.

Use A4 squared graph paper.  If you've never sketched in graph paper before you'll find it a revelation.  The squared grid is very robust.  It allows you to draw consistent, scaled boxes and shapes. It helps you set up numbered columns, use proportional margins and guides, and generally align things accurately with a minimum of fuss. The results may not be to scale, but they will be a good approximation. Graph paper is normally a grid of 18X28 10mm squares. Each 10mm square is divided into 4 X 5mm squares, and divided again into 5 1mm divisions. One thing to note is the grid area (180mmX280mm) is smaller than A4 size (210mm X 297mm), because the pad includes generous margins.

The following three samples use the tools noted above, and cover an example in print, digital publishing and web design. Obviously groups of sketches and variations would be used in each case, as the work progressed; the colour-coded notation then becomes more powerful.

Sample 1

Here's a dynamic sketch for an A4 poster. The sketch is 60mm X 100mm, using 5mm margins (signified by the red pencil) and a rule-of-thirds grid. The green pencil highlights where the strap-line or call-to-action is going, and also illustrates the flow of the users' eye through the composition.

Sample 2

Here's a sketch for an iPad article that will be laid out in InDesign.  It uses six columns (60mm), with 10mm margins, and shows the h1, h2 and paragraph arrangement.  Share icons and touch navigation elements are in red. the eye flow is in green. 

Sample 3

This sketch is for a standard 1024X768 desktop design, with a twelve column grid (5mm each column).  The call-to-action and navigation elements are ringed in red, so are the flow arrows to the various aside content. Also included is a 1920X1080 responsive variation for comparison.

Working with colour, units and guides allows you to refer to a very detailed diagram once you are working on screen, allowing really fast file setup, and giving you a solid guide to what's going on inside of the format.  Whether it's a wireframe you are working on or a layout, a lot of the nitty-gritty has already been formulated.

Work with Layers

Dynamic sketching can be taken one stage further by including layers. A good method is to use tracing paper. Trace over a sketch,  use the colour code to alter functional aspects on the trace, then pin this on top of the original.  The sketches can then be used to test or demonstrate alternate layouts in digital publishing (i.e portrait to landscape), and responsive or parallax designs for web. A helpful addition here is to pre-prepare pages with sketched formats, then use these as a tracing templates. Post-its can also be brought into the mix to add as call-out notes.

The overall aim of this kind of technique is to reduce the amount of time you spend making alterations and design decision inside of the software.  This improves workflow, keeps the original idea intact, and it doesn't sap the creative energy that so often dissipates if you are trying to solve basic problems whilst you are assembling artwork or layout in digital tools.