Use an alcohol-based gray marker to superpower your wireframes
One tool that will make your wireframing surprisingly better
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:

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

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:

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

By getting a full set, I ran into the following issues:
- I had to carry more stuff
- I had to decide which one to use (“Should I use the dark one here or the light one”)
- Spending more time on one set of wireframes made me more attached to them and I had less time to generate other possibilities.
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.

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!

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:

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.
