The Paper Version of the Web

People have been sketching user interfaces since the birth of the web (possibly even before) 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:


100 Responses to “The Paper Version of the Web”

  1. 1 Armen

    Nice post. Found via Digg and dugg!

    It’s a real shame that many web ‘designers’ don’t even think of sketching these days.

  2. 2 kristen

    Sketching is my absolute favorite part of any project. This is great, thanks for sharing it.

  3. 3 Digital Revolutions

    Quite nice, sketching is great fun, no?

  4. 4 dorian

    When you work with paper, people see the hand-drawn lines and get the message that it’s a work in progress. If your lines are too crisp, e.g. with a wireframe, people often mistake it for the real thing and think you’re farther along than you actually are.

  5. 5 Joe | A New Band A Day

    Some of these drawings are really enjoyable just as drawings. It’s nice to be able to see the stream-of-consciousness fo thoughts being quickly translated into pictures.

  6. 6 Martin Sharper

    Unfortunately, if you live in the sticks, many yokels when they see a design sketch think you are crazy and that the design cannot be any good because it
    looks so un polished. Go far enough out to places like Tennesee and you will see what I mean.

  7. 7 Fubiz

    Nice examples !

  8. 8 Julia

    Sox’s stuff is great.

  9. 9 Jason

    I only sketch for functionality and information architecture - especially when it comes to database design. It makes it easier to set up tables and build relationships between the data in the tables, and to know what data gets pulled from what tables.

    I may sketch the basic grid, but when I do I use more of a drafting technique and I note dimensions in pixels which translates to faster CSS development. I have no desire to show any of my sketches to clients as they wouldn’t get the same value out of them that I do, or that they would get from a more polished look and feel.

    For user interfaces I prefer the mash up method in which you design several concepts at the same time via Photoshop, then you can quickly pull elements of one design into another where it may work better.

  10. 10 Brad

    I still sketch my designs whenever I do them, because I believe that sketching designs is one of the most fundamental things of design. Once you work it out on the computer, seemingly “saving time”, but you end up spending hours on changing your designs.

    Also, your YouTube video at the end of the post isn’t working any more. Just a FYI…

  11. 11 Tyler Ingram

    I normally sketch out layouts and such, or even when i am working with the backend (database etc) I’ll sketch it onto paper.

  12. 12 Alsymer

    I love to sketch using standard grid paper … lets me get more ideas roughed out faster, then translate those sketches into more polished Photoshop mocks or HTML prototypes.

    It’s fantastic to see these sketches and catch a glimpse of the design process for many of these web apps.

  13. 13 Peldi Guilizzoni

    Thanks for putting this collection together, you can just feel the author’s minds spinning and creative juices flowing. :) I love the prototyping phase of any project, and paper is where I always started, but then I built something that I like even better: http://www.balsamiq.com/products/mockups - I now use it for mocking up all of my software. I’d love to hear your feedback on it. I tried really hard to give it the same feeling one gets when sketching things on paper, as well as making it as fast and flexible. In case you are wondering, all of the controls in it where hand-drawn (by my lovely wife) and scanned in.

  14. 14 beth
  15. 15 Sig

    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.

  16. 16 Mike

    Someone should create a claymation style software application that emulates the paper prototype in the youtube video. It could be scrapped together with Flash pretty easily and would be highlarious. Maybe I am too easily entertained.

  17. 17 Danny Hope

    The ‘unnamed museum collection’ actually belongs to Bolton Museumss.

    U’ve updated the image with a couple of links:

    http://www.flickr.com/photos/yandle/886815195/

  18. 18 Ianus Keller

    Stretching the web thing a bit, but great as a sketch example, because there is also a physical mockup is the sketches of iPhone version of the GTD app Things (by culturedcode):
    http://culturedcode.com/things/blog/2008/06/a-phone-an-ipod-an-internet-communicator-and-a-full-featured-task-manager.html (all the way below or direct links to the images here)

    http://culturedcode.com/things/blog/wp-content/uploads/2008/06/thingstouch-interfacestilllife.jpg

    http://culturedcode.com/things/blog/wp-content/uploads/2008/06/thingstouch-papercollage.jpg

  19. 19 Ed

    Wow that’s cool - thanks!

    Hopefully not blowing my own trumpet too much, but while working on a new group ‘intervention’ for a forthcoming conference (I’m an on and offline facilitator), I found sketching to be a valuable design tool with my partner, and is now a handy communications tool for the conference attendees:

    http://tinyurl.com/5ozqrg

  20. 20 charles

    If people like this kind of sketches, here is another cool one, showing the design done for an iPhone app:

    http://culturedcode.com/things/blog/2008/06/a-phone-an-ipod-an-internet-communicator-and-a-full-featured-task-manager.html

  21. 21 dilip

    Good practice to scatch UI before final design, but now a days we can make wireframe/prototype on computer instead of scatching on paper. So its not must to scatch but if u do then its great :)

  22. 22 Ben
  23. 23 Eric00000007

    The trouble with sketching is that non professional could sketch. How many of you get very bad sketch by a client ? Do not accepte sketch from everybody. I would like to sare a ressource to help you on you sketch http://konigi.com/tools/graph-paper

  24. 24 Roshan Shah

    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.

    Roshan

  25. 25 ricardo penachi de camargo

    Great!! Good Work!

  26. 26 kOoLiNuS

    thanks !

  27. 27 Jeff K. Ward

    This is great. I really love this kind of stuff. I recently posted sketches, wireframes and mockups on one of our projects, Apricado. You can find it on my blog at http://jeff.io/posts/user-interface-wireframes

    Great post. Thanks!

  28. 28 Jeremy Horn

    Great post! From a UX design persepctive, it is always very useful and educational to see where ideas originated and how they evolved from their original hand sketches.
    It is definitely part of my weekend reading. To check out some more Weekend Reading from The Product Guy, take at look at…

    http://tpgblog.com/2008/07/04/the-product-guys-weekend-reading-july-4-2008/

    Jeremy Horn
    The Product Guy
    http://tpgblog.com

  29. 29 Not a Redneck

    @Martin Sharper
    Regarding your comment: “Unfortunately, if you live in the sticks, many yokels when they see a design sketch think you are crazy and that the design cannot be any good because it looks so un polished. Go far enough out to places like Tennesee and you will see what I mean.”

    Not everyone who lives in Tennessee is married to their first cousin, drinks beer while driving the 4-wheeler back to the trailer, grows weed among the corn out back, and chews tobacco…and that’s just the women!! Believe it or not, some of us are actually professionals with more than your 8th grade education (your grammar is horrible). Think about that if you’re ever in a bad accident in our neck of the woods and need one of us to save your sorry myopic @ss. I’d show you some of the sketches I do prior to surgery, but you wouldn’t understand them anyway.

  1. 1 The Paper Version of the Web | WhiteSandsDigital.com
  2. 2 The Paper Version of the Web at Deeplinking - mmb
  3. 3 Create paper prototypes for your web projects
  4. 4 Sazbean » Paper Prototyping
  5. 5 hiphopsideproject » Blog Archive » Early Versions
  6. 6 Alexey Rusakov on Sitecore development
  7. 7 r-echos » Blog Archive » The Paper Version of the Web
  8. 8 Where web sites come from: Paper mockups of Flickr, Twitter, etc. | Techno Portal
  9. 9 It All Begins with Paper -- bub.blicio.us
  10. 10 The Paper Version of the Web « Duff & Puff
  11. 11 rascunho » Blog Archive » links for 2008-06-26
  12. 12 buzz
  13. 13 links for 2008-06-27 | Funny Web Pages
  14. 14 Magnetbox - links for 2008-06-27
  15. 15 links for 2008-06-27 « Talkabout
  16. 16 links for 2008-06-27 at dpwolf/blog
  17. 17 Mobimeet - Put it on paper
  18. 18 Vocescuola - Versione cartacea del web
  19. 19 leemcivor.co.uk - Paper prototyping
  20. 20 Πίσω από κάθε καλή ιδέα… « Words Attack
  21. 21 links for 2008-06-27 « Breyten’s Dev Blog
  22. 22 | Curiosidades, Informática, Internet, Varios, en Gran Angular Blog
  23. 23 meneame.net
  24. 24 La Web 2.0 empezó con lápiz y papél | CiberPrensa
  25. 25 Bram.us » The Paper Version of the Web
  26. 26 [Artigo]: Web em versão papel « Julio Vedovatto
  27. 27 AntyWeb | Archiwum » Jak projektujemy serwisy internetowe?
  28. 28 Protótipo de papel « Guilherme Marques
  29. 29 Rich Internet Applications design and development, in Brussels, Belgium. Adobe Flex development, consulting and training, prototype development, RIA, Interaction design and developer, User Experience architect and consultant, User Interface, UI, Wireframe
  30. 30 Brent Fitzgerald / Life & Research Notes / Blog Archive » Links for June 22nd through June 27th
  31. 31 caitlin gannon » Hand-drawn UIs for the web
  32. 32 Techotic - Paper sketches of the web
  33. 33 links for 2008-06-27 « toonz
  34. 34 links for 2008-06-28 « Tim’s Zen Blog of Sparseness
  35. 35 The Paper Version of the Web | Konigi
  36. 36 Ugens links på del.icio.us (21.06.08 - 26.06.08) | Morten Gade
  37. 37 Paper Versions « Portable Content
  38. 38 The AB Remainders: Geek Love « The Curious Affairs Of Atherton Bartelby
  39. 39 stevendkrause.com » Internet sketches
  40. 40 anthillz » Blog Archive » links for 2008-06-28
  41. 41 Ultime segnalazioni di Monty | Shop-Tre.com
  42. 42 Ultime segnalazioni di Monty | Shop-Tre.com
  43. 43 مجله الکترونیکی روز اراک برای عاشقان خوش فکر اندیشه http://irannews.blogtak.com/
  44. 44 Бумажные прототипы успешных сервисов | Fresh: новости мира юзабилити
  45. 45 Bocetos de grandes proyectos web | Isopixel
  46. 46 Los bocetos de los sitios web | Café Bombón
  47. 47 Jason’s Blog » Blog Archive » Links
  48. 48 Nice video on Paper Prototyping : ITP AlumniBlender
  49. 49 » The Paper Version of the Web - Wireframing quinception.com: Links and jots of Quinn
  50. 50 Keep Me Posted! » Blog Archive » The Paper Version of the Web
  51. 51 Bloody Condom » Blog Archive » June 30, 2008
  52. 52 Pen and Paper Sketches of Web 2.0 Sites « Studiocom’s Inspiration Weblog
  53. 53 Memoria de Acceso Aleatorio » Enlaces: PDFKit para Firefox, La web en papel
  54. 54 Urls Sinistras » del.icio.us entre 16.06.2008 e 28.06.2008
  55. 55 Hamstaa! » Old Skool UI Design
  56. 56 Blog Clippings » eCuaderno
  57. 57 Johnsenclan » Blog Archive » links
  58. 58 Prototipado web sobre el papel
  59. 59 Frank-ly » Blog Archive » UID op papier
  60. 60 beersandtics.com » Tant fàcil és?
  61. 61 Paper Prototypes Rule « (dis)information architecture
  62. 62 Las grandes ideas empiezan en papel… | Aborregate
  63. 63 net@night 59 - July 2nd, 2008: Barbecue Anchor | Search:commandN
  64. 64 Bulgarian Experience » Blog Archive » links for 2008-07-03
  65. 65 Business Opportunities Weblog | Paper Version Of The Web
  66. 66 R.Seiji » links for 2008-07-03
  67. 67 piece 0 plastic - the revolution will be blogged » Blog Archive » ruff linkage . 200826
  68. 68 The Product Guy’s Weekend Reading (July 4, 2008) « The Product Guy
  69. 69 Paper prototyping | dosmilmastres
  70. 70 This Week on MA.GNOLIA « /home/kOoLiNuS
  71. 71 PocketNoodle » Blog Archive » Connected: Wall-E, Wireframes

Leave a comment.