In short, this preference is similar to how some people prefer to take notes in a notebook rather than typing on a laptop or tablet because they retain and understand the information better. I get a much better feeling for what I am creating when the only thing in front of me is some graph paper and markers. Every step is thorough, because simply clicking and deleting mistakes is not an option. I believe this thought process and focus allows me to create my best work, and I understand the reason behind every decision I make. As a result, presenting the wireframes to clients becomes natural and every piece of the wireframe can be explained thoroughly.
Tips for Creating Hand-drawn Wireframes
- Keep it greyscale - No need to go crazy. This is to hash out ideas and the workflow.
- Use graph paper & markers with different weight - Simple and inexpensive; may include a ruler too.
- Worry less on layout, focus more on workflow - This will need to be digital at some point, so focus on the whys rather than a perfect layout.
- If you happen to become lost - Resort to using the 12-grid system for websites and 3-5 column design for mobile-based applications (regarding the screen width).
- Use basic shapes - Try not to draw focus away from the app/website by using complex or detailed elements in your wireframes.
- Do not add any copy or images - Same reason as using basic shapes. You don’t want others focusing on what the copy says or what the images show.
- Utilize callouts - When showing clients these hand-drawn wireframes, this will make presenting your wireframes much easier.
- After you feel good about the workflow - You should put some effort into making these beautiful and aesthetically pleasing, so if they are shown to clients, they look professional.
- No drawing skills required - If you can color within the lines, you should be ready to go.
Benefits I Notice from Hand-drawing Wireframes
- It makes the task of creating a clickable prototype for client review (using third party software) much easier. Some of this software is free (Marvel).
- Most likely, this is the quickest and cheapest way to build a prototype.
- It allows me to focus on and build out ideas, especially when clients are present.
- It helps me clarify my ideas without the need to build hi-fi wireframes or use complex coding.
- It keeps things simple and allows me to laser-focus on the key tasks at hand.
- Hand-drawing gets everyone, including clients and other designers, to think about the real needs and functionality of the project.
- It creates unified attention on what matters most: Findability, functionality, value and discoverability instead of color, graphics, fonts, images, etc.
- It gives me the ability to run usability tests with paper prototypes so I can get the results that are needed to further my design.
Well, there you have it. That’s why I prefer hand-drawing wireframes in the initial stages of the design process. Of course, there are times when I have to jump right into the digital version. But, if I have time to do so, graph paper and markers is where I prefer to start.
Do you also prefer to draw out wireframes by hand and noticed that I missed a major tip or benefit? Please share! One thing about designing is that learning is essential to improving your process and final work.