Sketching Techniques: From Idea to Final Design

Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design. When to use one and when the other? When do we apply exact measurements and colors, and when do we not?

Sketching On Paper

The reason for using hand-drawn sketches is to find a better way to quickly lay out multiple possibilities. In this phase, we can try radically different ideas and unusual concepts as well. Most commonly, these sketches are intended to bring focus to the introduction of an idea and hence they are made up from lines and contain only rough text.

What’s in it:

  • visual hierarchy (which elements are more emphasized?)
  • layout
  • main processes

What’s not in it:

  • exact ratios, measurements
  • branding
  • colors
  • colored surfaces (only lines)
  • intervals
  • exact text

Examples

sketching techniques on paper

Sketches on paper for the Buzzdrive highway radar mobile interface

01-paper_sketch

Sketches for the Utinform route planner mobile interface

Low-Fidelity Wireframe

This kind of sketching technique is digital, made with a wireframing tool. Its primary purpose is to make the concept testable, even functioning as a clickable prototype. On this level, it is useful to come up with some alternative sketches: by testing, we can decide how viable our ideas are.

The use of this tool needs better planning regarding processes: a navigation structure has to be worked out, and the functioning of the screens needs better forethought. The concepts only need elaboration to an extent where they can be tested, no more. This means we only need to think in lines and a few shades of grey. There is no point in using colors yet, only if it is absolutely necessary for conveying meaning. Texts, i.e. labels of buttons and tags on the page are useful, because they can influence the tester during testing.

What’s in it:

  • exact ratios (but not exact measurements)
  • maximum 2-3 shades of grey (still, the best is to only use lines)
  • copywriting
  • basic functions are clickable

What’s not in it:

  • exact intervals, pixel accuracy
  • profile, branding colors
  • grid

Examples

Low-fidelity wireframe

02-low_fidelity_wf

Low-fidelity wireframe for the of Utinform route planner

High-Fidelity Wireframe

A more elaborated version of the previous technique, both in function and layout. This is usually a clickable prototype, in which most of the screens are fully developed. It aims at showing closer resemblance to the final design, yet still not showing complete resemblance. Measurements are accurate, and more shades of grey are allowed. We should only use other colors if it is really necessary (e.g. provided they have considerable significance), because unfounded use of extra colors can mislead the testers during testing. Greater refinement leads to a more vivid imagination regarding future layout; besides, we can receive a more reliable feedback.

What’s in it:

  • grid
  • exact measurements
  • shades of grey
  • basic color concept

What’s not in it:

  • pixel accuracy
  • fonts
  • final icons

Examples

High-fidelity wireframe

High-fidelity wireframe for the interface of Utinform route planner

Detailed Design

Detailed design is not a sketching technique, yet it is an important phase for clarifying the difference between a high-fidelity wireframe and a detailed design.

In this phase, functioning is worked out and tested as well, and layout is thoroughly elaborated; i.e. measurements, colors, fonts, icons and every other detail.

Examples

04-detailed_design

Detailed design for the main page of Utinform

hibridlevel_vp_v9

Detailed design for one of the pages of Hibridlevel virtual printer

Sketching techniques step-by-step

Ideally, in each and every case we go through all techniques from the beginning to the end, constantly testing and cross-checking with the participants of the project. We only proceed if all the critical issues of the preceding phase have been resolved. The more we proceed forward the less possibility we have for radical changes, as a result of more accurate interfaces. In the beginning it is easy to change the plans, whereas in later phases it takes a lot of time to change something.

You can find more about design techniques on our Facebook page.