3 Tips for Sketching Wireframes

Here at Brightfind we're always trying to make our web design and development process faster and better, which is why we’ve begun sketching wireframes before putting pixel to prototype. Conceptualizing wireframes before they’re put into software has several benefits that make a lot of sense for our clients.

Let’s talk about this in real terms: you come to me and say, “Mike, I want a News landing page.” I respond with a dozen questions: “How would you like it to look? What elements should be incorporated? What type of users are you targeting with this page, and what device(s) will they be accessing it from?” etc.

So where does sketching wireframes fit into this process? There are two ways:

1. I can sketch the News page wireframe for you. Or,
2. Instead of asking for a News landing page, you come to me with a brief sketch that serves as a starting point for a more in depth conversation.

The benefits of wireframe sketching are increased efficiency and the opportunity to fire off ideas and receive immediate feedback. Rather than fine tuning the wireframe in a prototyping software, which can admittedly be time consuming, we can more quickly and easily focus on what will delight your website visitors.

I always begin sketching with a persona in mind: what would they look for, and what information would help them? Then I research examples of interfaces that I think work well. It ultimately comes down to what works well for your users and organization. For example, sketching the New York Times homepage probably won’t make sense for a news landing page, but maybe certain elements will.

If you are afraid to sketch, don’t be. As Lennart Hennigs says in “Sketching for Better Mobile Experiences”: “Sketching has a low barrier to entry, allowing non-designers to participate.”

If sketching wireframes is new to you, here are three tips: 

1. Get messy and make mistakes

Have a purpose when sketching a wireframe, but don't fall victim to analysis paralysis. Set a time limit and review any user research analysis, analytics data, and think through the purpose of the template. When time runs out step up to the plate and put it down on paper. 

2. Keep it simple

For my first iterations of wireframes I set a timer for 5 minutes and put out as many low fidelity wireframes that came to mind. I kept it simple, used a pencil, and wasn't afraid to pull out the eraser. I came to terms with the fact that my first sketches will not be perfect and plan on defining shading, color, and line strength in future iterations.

3. Ask questions

I asked myself two questions: "What am I assuming?" and "what am I missing?" I took the perspective of a skeptical user. Look for inconsistency in your wireframes and pull out your sharpie to build out your next iteration with greater detail.

I can tell that I’m finished sketching a wireframe when the personas are accounted for, it matches the organizations goals, and I feel confident to present it and start an initial conversation. There are many methodologies for wireframe sketching, so find one that works for you.

“Ugly gets the job done just fine,” says Mike Rohde in “Sketching the Visual Thinking Power Tool.” For those of you who would feel more comfortable with recommended tools, he offers a comprehensive list of his favorite ones. Good luck and happy wireframing!