When we sit to design on a computer, we are somewhat constrained to propose a single, highly detailed, solution to a problem. It consumes a little bit more of time, and we are pushed to work on a more polished design.

With the new wave of Design Thinking, Agile and Sprint methodologies popping up, it’s recommended to start playing with rough sketches on paper in the beginning, to free yourself to explore several proposals in a more creative medium. As in brainstorming, all of these sketches don’t have to be the very best solution or the more feasible proposal… you might explore crazy ideas that are hard to implement, but this experimentation might lead you to a new route that could be the perfect fit.

You can start with very small sketches, to create high level ideas of how the page could look, proposing lot’s of ideas; and then start adding more and more detail, working with larger drawing areas.

I’m not very proficient in drawing or painting, so in the past I have skipped this step and jumped into the computer to wireframe right away. Definitely, there’s no single right way to work and everyone has their own process, but lately, I have been enjoying more and more the sketching phase, and it has led me to new and interesting proposals, before jumping into digital.

Trying out several mediums, I recently discovered Copic Markers, an alcohol based markers created for manga artists, that are ideal for all styles of art or design. Although, they are a little bit expensive compared to a regular Sharpies, they have replaceable nibs and are refillable, so you only need to buy each marker color once, and use it “for life”. The nib is shaped like a brush, so it has more of a painting feeling, than a regular marker.

They have their own color system, each with it’s own id, so you can choose the colors you like, or just buy a couple of the neutral gray ones, to help shading your wireframes. The initial letters in the name represent the color family name or hue; N for Neutral or BG for Blue Green, for example. The initial digit represents the saturation number, going from 0 as the most saturated color, to 9 as the less saturated. And lastly, the second digit represents the brightness of the color, going from 0 as the brightest, to 9 as the darkest.

I have tried Copic N0, N02, N04 and N06 and find N0 the perfect one for some subdued gray tones for things like photo placeholders or logos in my wireframes. Copic N02, on the other hand, is a big jump in darkness from N0, so it provides a little bit more of contrast that feels perfect for things like shadows or outlines. N04 and N06 in my opining are too dark, and at this point, you should probably just go with a regular Sharpie to draw the black outlines of your boxes.

So, what I have been doing is just touching up the wireframes a little bit with some shading. Not too much, I don’t want to paint the whole canvas, nor should you spend so much time on a quick sketch; the objective is to come up with these sketches quickly to test ideas, so spending 15 minutes painting all the boxes is the complete opposite. A little bit of shade goes a long way, and you might just go with adding some grey to the sides of each box.

A cool tip I found watching painting streams online is to start with the brighter shades first, painting a larger area and then touching up with a darker shade to highlight parts of the design.

The alcohol base tips gives you another benefit: being able to blend the shades, so you get a more natural gradient from one step to the next.

I leave you with a couple of painting videos from YouTube, so you get a better idea of how they work:

The initial stages of a project are a perfect time to exercise our creative muscles, and free ourselves from proposing the same design over and over by testing new ideas or design directions without investing too much time on the computer. It’s also the perfect opportunity to include your client’s input into your design, allowing them to express their ideas with boxes and arrows. Pen and paper, pencils, Sharpies, Copic Markers are just a tool; the important part is getting into a mindset that allows you to communicate and collaborate more creatively.