CX Insights

Pen & paper or screen: context switching in design

5 min read

Which approach to design works best for you? Design is a delicate matter. It is not only a question of taste, but just as much a question of approach. How designers go about their work is highly personal. Almost every approach will be different. At the same time, there is one thing I see all good designers do. They use pen & paper and digital media interchangeably, and they know when to switch between the two.

Yoeri is our head of design and a perfect example of this. He sketches like a madman and he is slowly taking over every wall in the office. In an interview I talked to him about his paper habits and his personal approach to design.

Interview with Yoeri Hokken, Web and UX designer at Usabilla:

When do you choose pen and paper over your mac?

During brainstorming sessions with the team, we come up with many fruitful ideas. I like to capture these ideas with pen and paper. This way I won’t forget anything and I can always go back and have another look. Besides, I can easily change or add something later on.

I always start a new design with pen and paper. If I could give fellow designers one piece of advice, this would be it. Hands on sketching offers so much more space for creativity than you will ever find on a screen. You can come up and catch many different ideas and variants in no time.

How do you sketch? Do you use anything else than a pen?

The way I sketch mainly depends on the kind of sketch. For example, if I sketch wireframes for a web page, I focus on the outlines and work with standard elements (such as a box with cross to represent a picture). When I sketch a button, I sketch in more detail or I add notes that later remind me of important features (like the ratio for rounded corners or the opacity for a gradient overlay).

I used to sketch with different colors, because I thought that makes it easier to add details, such as shadows. Now, I only use with a black fine liner and that works just fine for me.

Note: If you want to read some more about sketching techniques, check out The Messy Art of UX Sketching on Smashing Magazine.

When and how do you transfer your sketches back to the digital interface?

As soon as I’m happy with my sketches, or if I feel that I have sufficient sketch material, I start to work out a digital version. However, I never scan my sketches, but leave them next to my screen and use them as reference.

Do you only sketch once in a design process or do you go back and forth between paper and screen?

For me, both sketching and the digital design are a process of trial and error. I make a sketch, which I discuss with the UX team. Based on this feedback, I usually make some adjustments and develop a digital version. This digital version, I again discuss with our CEO. If there are minor adjustments, I adapt them in the digital version. For major ones, such as subsequent changes in the structure, I usually go back to pen and paper.

There are several tools available to e.g. digitally create wireframes and prototypes. Do you use any of them?

I used to work with a couple of these programs, but now I only work with Photoshop and Illustrator. My designs are then taken over by our front-end developer who creates both low and high fidelity prototypes in no time.

Where do you see the advantages of pen and paper?

I consider pen and paper essential tools for a designer. They force you to leave details, such as colors, gradients, and shadows for what they are and focus on the actual interface design. You come up with several versions in no time and you can go back to any of them later on. Besides, you can easily hang them up on a wall in order to compare and take in different versions.

When you design on your screen, you easily focus on one single, but detailed design, and you have limited possibilities to save different versions.

Do you also see disadvantages of pen and paper?

With paper scribbles, I sometimes get proportions wrong. I might be happy with my scribble and I see the perfect layout before my eyes. However, when I digitize it, there might just be too little or too much space, so it doesn’t turn out as perfect as I expected.

Digital layouts on the other hand are always precise. You can easily work it down to the pixel and implement all the details you want.

Have you always approached design the way you do now?

Actually, I have gone through quite some changes as a designer. For example, I have created my own style of sketching. This means I know how to read my sketches, while others might need some extra explanation.

My digital design process has also changed. I did not use to start every design with pen and paper, but I have learned that this turns a digital design into an endless process of trial and error. Besides, I now work with a lot of tools that make my life easier. For example, I create a color palette with Adobe Kuler and I use the info tab in Photoshop to position elements in my design. Besides, as a web designer, I have learned to I think more in terms of html code. For example, I already think what an h1, h2, a div or a link will be. This way, my work becomes more consistent.

Sabina Idler
Sabina was technical writer & UXer @Usabilla for 5 years before she started her own UX research and consultancy firm; UXkids. With UXkids, Sabina leverages her academic research expertise, know how in child development, and strategic vision to help companies build successful digital products for children. You can connect with Sabina on Linkedin or follow her on Twitter.