Tips and Benefits of Hand-drawn Wireframes

The rapid advancements in technology bring so many benefits to the world of website design and creation. It’s fairly easy to find a digital tool for just about any part of the design process, including the creation of wireframes. So, if these wireframe tools are supposed to make the design process easier, why do I still prefer to draw them out by hand?

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.

• 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.

• 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.