Pen & paper wireframing in the digital age and why it is still relevant
Pen & paper is still the preferred tool for brainstorming and ideation. I started using pen & paper for designing my wireframes precisely at the same time as the market for wireframing app started booming. Sketch was ruling like a king, Adobe XD price was going back to free, Figma was launching their third major release and InVision was announcing the upcoming InVision Studio app.
Choosing pen & paper over a sexy app can seem like a strange choice. Especially in such exciting times, right? Well, not really. The company I was working for, didn’t allow us to use Mac machines on their network, was against using cloud-based solutions, and already had an Adobe license for each UX designer. So the choice of Adode XD was forced only natural.
Just to be clear, I enjoy working with XD. I’m only mentioning the choice limitation because it served as the major factor for me to try pen & paper wireframing. If I haven’t been so limited in my choice of tools, I would have probably been too busy giving Figma a try and signing up for Invision Studio alpha version, to even try pen & paper.
The other factor was the discovery of the magical association that is dot grid paper and alcohol-based markers (like the Copic Ciao or the Shinhanart Touch).
The dot grid makes it super easy to trace rectangle shapes of the same size without a ruler. And if you look at the paper from afar, you barely notice the dots, making it look like you draw your screens on white paper.
The markers turn a boring black and white wireframe into an exciting promise of an interface, in a matter of second. Those markers come with a choice of hundreds of colors and shades. Without going over the top, I still purchased way to much of them. I bought a 6 color-pack (1 green, 1 red, 1 blue, 1 yellow, 1 orange and 1 purple) plus one grey.
The thought behind that was: I’ll use green for validation and okay buttons, red for error and cancel buttons, orange for warnings… But then, what was supposed to make my wireframes more readable made them look like a child’s drawing, with no clear information hierarchy.
What started as a little experimentation, grew as an healthy obsession.
I gradually started using less and less colors, limiting myself to grey as the main color for areas of focus and for shadows, a little bit of blue for the main call to action on the page, and the occasional splash of red to highlight a very important error message. Nowadays I only have 2 markers with me at all times, one grey and one blue.
Now, using pen & paper, I spend more time focusing on researching new options. I don’t get attached to the way my wireframes look or about the pix-perfect alignment of the components on my screen. Too many times, in the past, did I spend much effort designing a new concept that would be discarded in the blink of an eye.
Another benefit of pen & paper: people can project themselves more easily in them. Some people have a hard time understanding the concept of a low-fidelity wireframe. Especially when made with a design software. They don’t understand why a newly designed screen doesn’t have the same level of information and details as the polished mockups you created last week, with the same software. You should not experience the same level of resistance with pen & paper wireframes.
You will see it working even better with an existing Design System or if your app is mature enough. People will be able to project existing concepts onto your drawings much more easily.
My suggestion: use XD or Sketch for your beautiful, fully detailed mockups. And reserve pen & paper for wireframing and ideation. You will have more time to research new concepts and will have fun in the process.
