Use an alcohol-based gray marker to superpower your wireframes

One tool that will make your wireframing surprisingly better

Ashish Goel
Aug 23, 2017 · 5 min read

When I was moving back to India a few years back, I rediscovered a set of gray Copic markers as I was clearing out the house:

My old Copic markers

I had bought them for an industrial design class in graduate school and had not found much use for them since.

What I thought Copic markers were meant for — industrial design sketching. Source

I remembered how expensive they felt at the time as a graduate student— you see, I had grown up using Luxor sketch-pens for less than Rs. 5 apiece.

Now that they had resurfaced, I decided I might as well use them. So I tried them on an app wireframe I was working on, and to my surprise, the wireframes didn’t just feel a little bit better, they felt a lot better.

Don’t believe me? Here’s a quick wireframe for a search flow I have worked on in the past:

And here it is after treatment with a Copic:

What do I mean by “a lot” “better”?

Let me be more specific by what I mean by a lot better.

Better means their usefulness for me increased. Since wireframing is just a form of sketching, it is a way to see your own ideas more clearly. The Copic wireframes had more clarity for me than the ones without. I was also working with a visual designer remotely at the time and this improved our design communication.

A lot means that the usefulness improved with little additional effort. If I map the perceived effort in making a wireframe to its perceived usefulness, here’s what that chart would look like:

Each mark made with a pen is a unit of effort plotted on the x-axis and the perceived utility of the wireframe on the y-axis. As I flesh out the wireframe it becomes more useful.

However, using a Copic marker involved the same amount of effort, but resulted in a disproportionate increase in the perceived usefulness.

You have to experience the physical act of coloring the wireframes in and then stepping back to see how they feel better. Try it. I would love to hear if your experience varies.

Obviously this meant I went on a shopping spree…

Now that I was getting paid to do design, I figured this was the perfect excuse to indulge in my stationary habit. So, I got a whole set. And used a really dark gray for the phone, a really light gray for the background, a medium gray for buttons, like so:

Getting a bit carried away. 🤓

…except that it was a terrible idea.

Paper wireframing is meant to be generative and sacrificial. In this stage of my design workflow I want to generate multiple ideas, and yet be at peace with discarding those ideas.

Wireframing, in my design process, is still divergent-ish, so I need to generate multiple possiblities and be cool with discarding a bunch of them.

By getting a full set, I ran into the following issues:

  1. I had to carry more stuff

So I was back to my solo marker.

My wireframing stationary kit now has one felt-tip black pen, a W3 Copic gray marker and a colored pen to annotate or mark things up. That’s it.

The simplified toolkit. A black felt tip pen, a W3 Copic and a colored pen for annotations

Which one to get?

While you should exercise restraint when it comes to the number of markers, you can totally nerd out over which gray you like. You can choose between neutral, cool, toner or warm temperatures and 12 levels of darkness for each!

Source

Sidenote: On things getting better (or worse)

I also wondered what “design effect” was responsible for the improvement. Was it just the improved visual contrast? Was it a contrast in materials?

And it isn’t just this, I’ve often wondered when you apply “design” in some scenarios, (yes, I know that sounds idiotic), the outcomes don’t just a little bit better, but a lot better (or a lot worse).

You know, how sometimes just aligning all the elements and text in a poster make it feel a lot better. Or how just making the vertical rhythm or typographic rhythm harmonious make a huge difference to how a webpage reads. Or after the number of design errors in a product increase, the perceived product quality decreases, slowly at the beginning but then rapidly thereafter.

My current understanding comes from Nassem Taleb’s mind-expanding book Antifragile where he discusses the idea of non-linearity:

Consider his example of traffic:

Traffic is highly non-linear. When I take the day flight from New York to London, I leave my residence around five in the morning, it takes me around 26 minutes to reach JFK airport. At that time, New York is empty, eerily non-New York. When I leave my place at six o’clock for the later flight, there is almost no difference in travel time, although traffic is a bit denser. One can add more and more cars on the highway, with no or minimal impact on time spent in traffic.

Then, a mystery — increase the number of cars by 10 percent and watch the travel time jump by 50 percent (approx).

Here’s his (hypothetical) graph:

Taleb’s graph on how his travel time to JFK depends, beyond a certain point, non-linearly on the number of cars on the road.

A non-linear relationship between two entities is where one is impacted non-linearly with the increase or decrease in the intensity of the other. Or, as Taleb puts it:

“Nonlinear” means that the response is not straightforward and not a straight line, so if you double, say, the dose, you get a lot more or not less than double the effect

I think my Copic experience is one where the right amount of contrast makes the wireframe feels “superpowered”; and this kind of non-linearity may be true for other design-driven outcomes. Probably worth investigating in a separate essay.


)

Ashish Goel

Written by

Essais on digital product design, design thinking and personal growth.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade