Wireframing

Wireframing with pen and paper or on screen?


I find wireframes really useful to get the requirements of the site clear in my head and as a way to visually discuss layouts with clients before spending time on the design visuals.

Wireframes are a time saver. I’ve never needed to completely re-do a design since I made wireframes part of my process; me and the client are already on the same page.

Pen and paper wireframing

I found using pen and paper quick and simplistic, and there was something quite freeing about stepping away from the screen and letting your pen flow with your thoughts.

A selection of sketch wireframes I’ve produced over the last few years.

sketchwireframes-w800

My worry that creating wireframes with pen and paper is that they might come across to the client as being unprofessional. Lines weren’t always straight (although sometimes the ruler came out) and my side notes weren’t always that legible.

The biggest downside to wireframing this way has to be having to redraw them. Even if it’s just to add an image on the left of a block of text, you’re likely going to have to start over.

Switching to screen based wireframes

For my past few projects I’ve switched from creating pen and paper wireframes to using Sketch App (graphic and UI software). So far I have mixed feelings about this. I can make edits really quickly, but they initially take longer to do. They can look too polished compare to pen and paper wireframes and I’m finding myself stressing to clients that these aren’t set in stone layouts, so I’m not shooting myself in the foot if I need to adapt it at the design visual stage.

My other concern is they can look very ‘boxy’, portraying the layout as dull or too simple without any visual styling.

I’ve also found myself doing a super basic pen paper scribble before creating them on screen, just to get it clear in my head first.

Am I making more work for myself?

The more I do wireframes on screen the quicker I get. Thanks to re-using components and creating a library of symbols for common modules. I can also set up my grid in Sketch App making the transition to design visuals, then finally the websites build much easier. I’m less likely to get the layout wrong due to incorrect proportions. So in the long term, I may well save myself time.

wireframes-sketchapp-w800

There are other ways to wireframe such as using dedicated tools like Balsamiq and Axure, or going straight into code with the aid of a CSS framework. The big plus is you can make these interactive and responsive. But I think my creativity and thought process would be hindered going straight into code. Plus I need to use my time on projects carefully. I’m not working with 5 figure budgets, I need to get the best of out of my time to give the best value to my clients.

For the time being I will stick to the on screen method, using Sketch App for wireframes but pen and paper is still part of my process in a super rough scribble form, but they are just for me.

How do you prefer to wireframe? Let me know!