The art of UX sketching and paper prototyping
When is your idea ready to be put in front of people?
This is probably the question every entrepreneur struggles with. As a product owner or an entrepreneur, we are always very skeptical about bringing out early ideas in front of people.
Being in the startup ecosystem for quite some time now, I have validated this statement with my experience — Your idea is ready to be put in front of people with the first few strokes of ink on paper! Paper sketches or whiteboard drawing are never looked down upon. Rather, it is often preached to show your design as early as possible so as to have ample scope of changes.
When are paper prototypes useful?
Paper prototypes are useful at almost every stage of the project. You might want to come back with a design modification during mid-development or even post launch. Most of the times you want to quickly visualize new ideas and so burst out with pen and paper even when you have high fidelity design ready! It’s faster to communicate and validate design changes on paper than on high fidelity Photoshop designs.
Designers use different type of Sketches depending on who they are working with and what they need to communicate. Paper sketches are great when —
- Designer/product manager is thinking through all the initial ideas running through his head,
- outline the steps in a user flow
- explore and validate variety of layouts
- and to show the basic app structure.
Stages of paper prototype
Designers choose between low fidelity paper sketches and high fidelity paper sketches based on who they are communicating with.
Low fidelity sketches
These are mostly the sketches you make for yourself while you are thinking! You could use these basic sketches for -
- For self brainstorming, and
- Internal team discussion
High fidelity sketches
High fidelity sketches are the next level of sketching when you want to put your designs in front of user and clients. It includes detailed sketches, shape of buttons, colors and images etc..
Most designers create a digital prototype at this stage(Though, you can also create a prototype with low fidelity sketches). High fidelity sketches can be used for —
- Discussions with clients
- Testing with real users
High fidelity sketches is a step you should not really skip. Why? The more you can iterate and flush out ideas on paper, the swifter you move with your digital designs!
Tips for kickass paper prototyping!
1. Explore different variety of elevations and shadows
Designers are very particular about shadows and realistic view. Also, it give a much better perspective when you are validating your designs with users or clients. I double sided tapes to elevate the layer or drop down so as to get the shadow and elevation.
2. Take images of paper sketches and create a digital prototype
Creating digital prototypes of your paper sketches ensures that your users/clients/teammates understand the user interaction on the app which is otherwise a mere guesswork!
Creating a prototype makes sure that the users can have a realistic representation of the app —
- Timers for splash screen and onboarding
- Use drop downs the way it would be in the app (Layers)
- Fixed headers and footer, etc..
3. Use thicker markers to show different sections
Usually when you have too many things to show on the sketches, it often becomes too clustered and the audience (user/client/teammate) faces great difficulty trying to understand which group of elements belong to one section. It is more of a collage! :P
The trick is to start with a light-gray marker (20 to 30% gray), and progressively add layers of detail with darker markers and pens. As the pages fill up with ideas, go back in with a darker marker (60% gray) or pen, and layer in additional details for the parts you like.
Caution : If you start drawing with a ballpoint pen and then go in later with a marker, the pen’s ink will likely smear from the alcohol in the marker.
4. If you have a theme color for the app, use coloured papers of that shade
I usually have differently colored papers in my stationery kit so that I can use it while creating these high fidelity prototypes. The advantages of this are-
- Helps maintains consistency throughout the paper prototype
- Reduces the load of manually coloring bigger sections
5. Take xerox copies of your low-fidelity (black and white sketches) and try color variations
It’s often a mystery why a particular shade of blue performs better than the other. Another fact is that you get to decode such mysteries only when you test! The earlier you validate this the better it is for the project in terms of cost, effort and time.
An easy way out is to take xerox copies of the black and white sketches and try different shades on it, instead of drawing the same set of screens again and again!
Final Words
A lot has been written over the internet and we also hear lots of people talking about the importance paper sketches but unfortunately it seems that very few people actually sketch. We recently had an online survey to understand the pain point of designers with paper prototyping. As it turned out, most designers refrain from it due to the extra effort and time involved in the process.
At CanvasFlip, our aim has always been to make life simpler for the design community. So we are launching the latest version of the CanvasFlip app in a week’s time for a private beta group. It has an in-built camera that allows you to take snaps of your napkin sketches and it’s automatically uploaded and synced to your CanvasFlip account — All set to be prototyped, collaborated and tested.
