Sketching can help designers quickly visualize design ideas in an efficient and low-cost way, so it is an essential skill for UI/UX designers. Sketching can be used in nearly any stage in the product design process: drawing out brainstormed ideas, recording every “aha” moment, or building prototypes. Prototyping is a way to give design ideas a presence so that we can test it out or put it in front of people to see if it has value. This blog provides a guidance to paper-prototype sketching. Let’s get started!
It is worth clarifying the two terms for today: paper-prototype and sketching. Let’s start with “Paper-prototype”.
In paper-prototyping, designers present paper sketches that represent interface screens and allow users to interact with it.
In Martin and Hanington(2012):
“Users are presented with pages representing interface screens. In completing a task or working toward a goal, the participant indicates what he or she would do on each screen page, while the researcher swaps the subsequent page to simulate the interface response.” (p.138)
Because it is inexpensive, time-saving and collaborative, it is widely used in the UI/UX field.
People often associate with the notion of sketching with a little bit of trepidation. You don’t need to be an artist in order to draw simple UI sketches. Sketching is a fundamental part of a design process; it can be as simple as drawing basic lines and shapes on a piece of paper. Remember that there is no right or wrong way to sketch out your ideas. The main purpose of sketching is to visually convey your design ideas and goals.
The toolset is very simple. Here is a list of the four tools you may use in the sketching process:
- Pen, Pencil or Sharpie
- Paper, Gird paper or Dotted paper: gird paper and dotted paper are very useful for beginners. The girds and dots allow you to control the composition and proportion.
- Highlighters
- Ruler (optional)
Common UI elements are symbols representing different components of your user interface. You don’t have to exactly follow the way I introduce here while sketching, these symbols are just what is commonly used in the industry. Feel free to create your own visual representations, but you need to be consistent with them so that your work is easier for users and developers to interpret.
A. Text lines: text lines usually start on the left-hand side with a squiggle and then becomes straight.
B. Body of text: by drawing a bunch of text lines together, you can create a body of text in your interface. You can be even more specific about what kind of style you want to create, for example: you can start the lines on the same vertical axis to create a left-aligned or right-aligned text.
C. Headings: headings are usually emphasized by bold lines so that it is distinguished from the texts. You can use other forms of representations as long as they can express hierarchy, for example making the headings a larger font, underlining, italicizing, etc.
D. Checklist: by adding small bullets on the left side of each text line, you will have a checklist.
E. Images: images are usually represented by a rectangle filled in with an “X”.
F. Video player: there are a lot of ways to draw a video player. The most common and recognizable way to represent it is to draw a rectangle and put a small right-facing triangle in the middle.
G. User profile/avatar: a user profile or avatar icon can be created by drawing a semicircle at the bottom of a larger circle (which represents the body), and adding a smaller circle on top of the semicircle (which represents the head).
H. Form field: a form field, AKA an input bar, is represented by a skinny horizontal rectangle.
I. Button: for a button, represent it as a rectangle. You might want it to be a little beveled which you can do by darkening the shadow of the bottom borders to make your button look more 3-dimensional and therefore clickable.
J. Search bar: if you put a magnifying glass on the left corner of a form field, you will get a search bar.
“Sketching is about communication, not aesthetics.” There is several important principles to keep in mind while sketching.
Start from the General Layout:
Sketch the outline of each component in your first interface, and then try to explore a variety of layouts and show basic app structure(what we commonly call a wireframe).
Start with the Largest Element:
When it comes to details, keep in mind that complex shapes are usually just combinations of basic shapes. The key is to start with the largest element, draw the outline of the shapes, before you adding details.
Use Colors Intensionally:
There are different ways to denote levels of hierarchy, which helps people to understand your sketch quicker and faster. Using colors is a good way to address hierarchy, and you can do this with highlighters. When the rest of the sketch is in black and white, colors becomes a great visual indication to users.
Maintain Good Consistency:
Try to maintain consistency throughout the entire prototype, for instance, the same interactive element should be highlighted in the same color in order to reduce cognitive load when the user is interacting with your prototype.
There is no right or wrong way to sketch out your ideas. Always remember that the quality of your sketch is secondary to the actual ideas you want to convey.
Although everything in the UI/UX field are digitalized, paper and pencil still remain the most useful tools for designers to build low-fidelity prototypes. Digital tools often have limitations. When you can’t achieve something in the tool, you might just give up trying. What you have thrown away could have been your best idea, but sketching allows you to explore different ideas without any limitations.
Paper-prototyping is a great way to validate and communicate your design ideas. When implemented correctly, paper-prototyping sketches can provide maximum benefits for designers and developers with minimal time and effort. I hope what I shared in this blog will inspire you to innovate and build prototypes that are clear and intuitive.
Hanington, B. M., & Martin, B. (2012). Universal methods of design: 100 ways to research complex problems, develop innovative ideas, and design effective solutions. Gloucester, MA: Rockport.
Liu, T. (2018, September 03). 19 Best Free Sketch Wireframe Kit Resources in 2018. Retrieved from https://blog.prototypr.io/19-best-free-sketch-wireframe-kit-resources-in-2018-a4f255cff30c
UX Planet. (2018, September 02). The Magic of Paper Prototyping — UX Planet. Retrieved from https://uxplanet.org/the-magic-of-paper-prototyping-51693eac6bc3
Norman, D. A. (2013). The design of everyday things. New York: Basic Books.
