Pen and Paper – The Forgotten Web Design Tools

As web designers and developers, we tend to use digital tools to start a web project from requirements to design. We often forget how useful and cost effective our analog tools actually are.

You Will Need…

In this article, I am going to run through the steps I take with pen and paper before I even go near Photoshop or Fireworks. So, if you want to follow along grab a thick marker, an inky pen, some Post-It notes and a lot of paper!

Post-It Sitemaps

A sitemap is always a good starting point to design and build from. I always write page titles on Post-It notes meaning I can create a visual sitemap quickly and cheaply by arranging the Post-It’s in a tree-like fashion starting at the homepage and working through the levels of the site. I find they are most useful when they are stuck on a wall in your office and you can take a step back and gain an overview of what you are looking to build.

This method is a good way of getting the client involved from the early stages of a project. It helps to involve them in arranging the site’s architecture using Post-It’s and it builds a realistic picture of what they can expect from the completed site.


Paper Wireframing

The best use for pen and paper in web design is in the wireframing stages of a web project. If done digitally, wireframes can be time-consuming and costly to your business, on paper however it allows for rapid production.

I usually start wireframing a page with a large marker and scribble down all the elements that will exist on the page including logo, navigation, strapline, content items and footer links. Then I arrange the items into a logical layout based on the priority of the content to the end user, if I don’t like it, I tear up the page and 20 seconds later I have a new wireframe!

Once I’m happy with the layout, I move to an inky pen and create more detailed wireframes featuring real content so I have a very good idea of how the end product is going to look like. This set of wireframes would be shown to the client for approval before continuing with the project. If the client wants a change now, it’s quick and cheap, if we didn’t take this approach and the client asks for a layout change near to the launch, it’s expensive.

Take a look at how UK web designer Mark Boulton uses paper wireframes to detail every page in the requirements phase in his redesign of Drupal.


More Fun

Apart from sticking to your workmate’s back, there are other uses for Post-It’s, take a look at this innovative calendar!



There is always room for pen and paper in web design, they are often forgotten about as a medium we have left behind to gather dust. Pen and paper exist to help us put our ideas across quickly and can help us get past the daunting designers block of staring at a blank “untitled-1.psd”.


If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote