The power of pen and paper sketch – Smashing Magazine

Do you need to design something? It can be tempting to start with a computer-based tool, e.g. Balsam, or design tools such as Photoshop or Figma. They have their place, but I would recommend going back and starting with the humble pen and paper.

Hand sketching can feel unfamiliar and uncomfortable to those who do not feel artistically inclined, but the flexibility of hand sketches combined with our imagination means that we work through more ideas and form a better design direction faster than we could than if we started with a more concrete, computer-based solution.

Admittedly, I sometimes struggle with it; While I always spent my childhood with a sketchbook in my hand and completed an art degree at university, the paper sketchbook was briefly forgotten when I started my web design career. It took years through uninspiring concepts and I felt like I was not pushing my limits, until I realized how powerful idea generation can be through quick physical sketches.

This process is recommended even if we do not design something big or in the capacity of a designer. Everyone should occasionally be a “designer”; from creating a quick custom homepage, a landing page for a new open source project, or creating beautiful slides for their next presentation.

Grab a piece of paper and a pen, and let’s get started!

Why start with paper

Since we are always on a computer (and I think most of us these days), sometimes it does not even occur to us to go away and try to design something off-screen.

Paper sketching can feel like something that is solely related to visual art or graphic design (e.g. the legendary logo designer Saul Bass is known for his proponents of drawing), but even the earliest ideas for computer interfaces started with paper. Susan Kare, designer of the Macintosh graphical user interface icons, used graph paper to design her initial ideas for the iconic early pixel art.

The power of paper sketching is the ephemerality of the sketch and how they feel less ‘real’ than anything we quickly create on a computer. Start moving words and buttons around on a computer screen, and it’s tempting to fall in a certain direction and never explore alternative paths. Paper sketches force our imagination to fill in the gaps – much faster than if we added the details to a computer model.

We want to try many different ideas as we work on a new design. Even if the first few ideas feel good enough, our fifth, seventh or tenth idea may be even better. Working quickly and loosely helps us to get through a lot of ideas quickly. Ideas flow faster, and we can surprise ourselves with what appears on the page if we work without restrictions.

If you are not yet familiar with design tools such as Photoshop, Sketch or FigmaIt can be overwhelming just to get started and get to know an instrument. Instead of working through a lot of ideas, we end up spending our time figuring out which button does what.

And wireframe tools like Balsamiq? They produce ideas that look like sketches – winding lines, imperfect boxes – but they still point us in the direction of working on a single idea and messing with it until it’s perfect, rather than trying out many different ideas first. It’s faster to start with pen and paper. Wireframing tools may be the next step in the process (rather than the first.)

‘Sketchy’ mockups also do a better job of expressing the kind of feedback we seek when we present it to judges. An overly pixel-perfect version will often lead to irrelevant details, but a rough sketch will lead to higher-level conversations about layout.

Repeat for yourself: Loose, fast, does not have to be perfect

We have all seen the ‘design’ sketches that look beautiful and detailed. It is not the standard to measure yourself. Ignore them. Our sketches should be fast without much detail.

We rather use very fast lines and boxes, and keep our sketches small and fast.

We can use these small sketches to try out different versions of a home page layout:

Sketches are useful for almost any type of design task: newsletters, logos, presentations, widgets – everything where you need work to quickly come up with many visual ideas. As an example, can we explore some ideas for a ne book cover?

A good way to start practicing this type of sketching technique is to take an existing website and design the sketch backwards. Not only does it help you to be comfortable with drawing, but you also get a sense of different design patterns.

Whatever approach you take, fill your page with ideas! Do not stop, even if you come up with an idea that really excites you that you want to continue. If you fill a page, go to the next page. Discover alternative ideas only if you find something you like more.

Once you have many options, take a breather to calm your mind, then return to your favorites, refine and then go for a mockup. You will have more confidence in the direction you are choosing as you know you have tried and thrown away many other ideas.

Use inspiration to promote your sketch and idea generation

Sketches should go hand in hand with inspiration, so bring the computer out again! Conduct your own design process by researching other designs and looking for details that you think would work on your own.

If you’m not sure where to start, seek inspiration in related areas you are working on. For a personalized homepage, it is great to start looking at the homepages of peers in your industry. If you are stuck or want more general inspiration, check out these resources:

• Dribble, which is particularly good for exploring design ideas for elements, such as a sign-up form.
• SiteInspire, to see what the current trends in modern design are.
• Landboek, for inspiration for designing landing pages.
• Trade room, for inspiration for designing e-commerce websites.
• Pttrns, for inspiration for designing mobile apps.

As you research, note which elements you want to draw in your own design (and remember not to copy exactly!). For example, a nice layout, a particular way the inspiration combines content with images, a contact form that seems particularly easy. It’s much faster to try several different navigation ideas on paper sketches than to make complete mockups or code them all.

While finding elements and ideas you would like to remember, sketch them out! Continue with ideas at your sketch page and fill your page with all your potential ideas. Remember, work on many different options and ideas to get started, and narrow down your favorite ideas thereafter.

Remember to practice!

Any new skill is going to feel uncomfortable the first few times. That’s normal. Do not let that discourage you. The more you practice your sketches and use this skill during design, the more natural it will feel.

Set aside your keyboard for your next design project and let your imagination and creativity flow by starting with pen and paper sketches.

Let’s look at what we covered:

• Paper sketches are the fastest way to explore design options.
  We can do so much more in less time by retiring from the mouse.
• Use inspiration when sketching to promote idea generation.
  Do not start with a blank page; let your ideas flow by looking at design work you want to emulate.
• Make more sketches and try more ideas than you think you should.
  Sometimes the fifth idea may feel like a good direction, but then you find that a later idea is even better.
• Exercise makes perfect.
  The more sketches you do, the faster it goes, the easier it will feel, and the better you will become.

Do you have other sources of inspiration? What do your sketches look like? Would love to hear from you in the comments!

Read more in Smashing magazine

(fb, vf, yk, hy)