The Paper Version of the Web

People have been sketching user interfaces since the birth of the web but the sketches usually stay locked away in old notebooks and discarded bar napkins in Austin, Texas. Many of the websites we use started out as scrawlings, and with people like Jakob Nielsen and Bill Buxton spreading the gospel of faster, cheaper paper prototypes, “next year’s Twitter” may already exist on paper.

We don’t usually get to see this handmade stage of the web, but some folks have been thoughtful/narcissistic enough to upload photos of their UI sketches, and I find them fascinating.

Jack Dorsey’s original sketch for Twitter (“Stat.us”)

Dan Catt’s concept sketch for Flickr Places

Profile page idea for Vimeo by Sockyung ‘Sox’ Hong

Many UI designers sketch with Sharpies but Sox prefers Staedtler pens, which are from Germany and built for engineers. He has a vast portfolio of UI sketches on Flickr.

Initial concept sketch for Twitterverse by Emily Chang

Sketch for a version of the AbiWord word processing program for One Laptop Per Child by Erik Pukinskis

Editing interface sketch for a mySociety project by Tom Steinberg

Prototype of image-based search results for an unnamed museum collection by Danny Hope

Finally, some high-intensity paper-prototyping action via YouTube:

196 thoughts on “The Paper Version of the Web

  1. I’ve done some paper prototyping myself in the very early stages of projects, just to get an idea of what fits onto a page and how it could be aligned, so this is more about content.

    Once this is clearer and the content structure is clear, sketches can be used for a first version of the wireframes too.

    Third usage is in the actual design phase, not being a designer again in the kick-off meeting with the design team to discuss an idea. Later in the design phase if something does not work out to good and to quickly investigate a very different and perhaps unusual approach.

  2. This was a great post thanks. I always sketch for me omnigraffle for the boss. That way I can then move things around more quickly. But it always starts as sketches. It the same as sometimes writing helps you write. It helps you step through the creative process.

  3. We at Gloscon Use OpenOffice Drawing on Ubuntu Workstations. It is far superior to anything we have seen yet!

    The odg files are exported to PDFs and then given to designers.

  4. I’ve done some paper prototyping myself in the very early stages of projects, just to get an idea of what fits onto a page and how it could be aligned, so this is more about content.

    Once this is clearer and the content structure is clear, sketches can be used for a first version of the wireframes too.

    Third usage is in the actual design phase, not being a designer again in the kick-off meeting with the design team to discuss an idea. Later in the design phase if something does not work out to good and to quickly investigate a very different and perhaps unusual approach.

  5. A lot of boxes, arrows and scribbles that are amiss in the final versions; interesting to see where ideas have been. I found the Youtube movie especially cool, though I kept waiting for the user to frantically click the back button, ah well…

  6. i believe in any interface design skeching of the prototypes on the hard paper is much better to give chance for grouping of the appropriate information together,because the user sometime get frustarted when they are unable to locate particular information at appropriate section.

  7. Pingback: lagardere.fr
  8. Amazing post, Twitter sketch and others are really interesting, I think all websites and all designers should start with this step before design

  9. Useful article. Although I studied Pascal and C in school, I forgot much of it along the line. However, a decade of looking at great websites, and an interest in usability via the writings of Jacob Nielsen’s Useit.com helped me interested in web layouts. As a result, I laid out Bighow.com, a site to share local information, by myself. It is a complete CMS as well. I might have liked to improve upon it but I no longer have a web developer working with me.

    All in all, I vouch for the value for paper prototyping. It is a useful A/B testing tool as well.

  10. Even in this day and age when everything is high-tech, paper will still have purpose as we see here. It really is a lot easier to put thoughts on paper and then just convert them into a program/code or design when the concept has been polished and well thought of.

  11. Enjoyed this. Would be nice is more people gave a deeper care into the layout and design of pages and full sites before bombing the world with more terrible ones..

  12. Excellent blog here! Also your website loads up fast! What web host are you using?
    Can I get your affiliate link to your host? I wish my web site loaded
    up as fast as yours lol

  13. I am just wondering. Everything should be start on the blank of piece of paper. I mean I am going to start built my website. What I will need? Hand sketched icon, sketch wireframe, sketched visuals on web sites- sketched everything… so my question is. I havent go anything- I mean the equipment. Can you give me advice what is the best? Which kind of sketch pencils? Ink or what else? And where to buy it?

  14. Just found this site through my university course and it’s been very useful to help me see the merit of sketching out ideas, even in the IT world.

    I used to think software design was best envisaged on screen, but I find:
    a. There are too many distractions
    b. it takes longer to get a visual representation up, so you lose some spontaneity

    Thanks for this.

  15. What is great about sketching, is that everybody can do it. You don’t have to be an artist to sketch something. I’m a developer, my sketches are not beautiful, but they are a very effective communication tool between me and the designers in my team.

    I believe sketching should be a fast, iterative and fun process.

    We are working on a web app (www.sketchsim.com) for organizing UI sketches, link them together, simulate the UI flow and get feedback from your teammates, or client.

    We are launching it really soon, but you can subscribe now for early access at: sketchsim.com. We would really love to have you on the board when we launch.

  16. Pingback: MEI work Blog

Comments are closed.