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
Sketches on paper for the Buzzdrive highway radar mobile interface
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
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
Detailed design for the main page of Utinform
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.
