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:

58 Comments

  1. Nice post. Found via Digg and dugg!

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

    Posted by Armen on 17 Mar 2008 at 5:39 pm
  2. Sketching is my absolute favorite part of any project. This is great, thanks for sharing it.

    Posted by kristen on 17 Mar 2008 at 7:28 pm
  3. Quite nice, sketching is great fun, no?

    Posted by Digital Revolutions on 17 Mar 2008 at 9:12 pm
  4. 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.

    Posted by dorian on 25 Jun 2008 at 4:14 pm
  5. 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.

    Posted by Joe | A New Band A Day on 26 Jun 2008 at 4:43 am
  6. 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.

    Posted by Martin Sharper on 26 Jun 2008 at 8:46 am
  7. Nice examples !

    Posted by Fubiz on 26 Jun 2008 at 10:12 am
  8. Sox’s stuff is great.

    Posted by Julia on 26 Jun 2008 at 10:33 am
  9. 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.

    Posted by Jason on 26 Jun 2008 at 11:37 am
  10. 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…

    Posted by Brad on 26 Jun 2008 at 12:20 pm
  11. I normally sketch out layouts and such, or even when i am working with the backend (database etc) I’ll sketch it onto paper.

    Posted by Tyler Ingram on 26 Jun 2008 at 12:56 pm
  12. 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.

    Posted by Alsymer on 26 Jun 2008 at 2:09 pm
  13. 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.

    Posted by Peldi Guilizzoni on 26 Jun 2008 at 4:49 pm
  14. more examples: http://home.comcast.net/~bethgoldman/ControlSpending.html

    Posted by beth on 26 Jun 2008 at 7:53 pm
  15. 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.

    Posted by Sig on 26 Jun 2008 at 7:59 pm
  16. 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.

    Posted by Mike on 26 Jun 2008 at 9:30 pm
  17. 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/

    Posted by Danny Hope on 27 Jun 2008 at 3:19 am
  18. 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

    Posted by Ianus Keller on 27 Jun 2008 at 5:08 am
  19. 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

    Posted by Ed on 27 Jun 2008 at 7:16 am
  20. 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

    Posted by charles on 27 Jun 2008 at 10:04 am
  21. 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 :)

    Posted by dilip on 28 Jun 2008 at 2:27 am
  22. Thats awesome

    http://www.duivesteyn.com.au

    Posted by Ben on 28 Jun 2008 at 8:17 pm
  23. 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

    Posted by Eric00000007 on 29 Jun 2008 at 3:52 am
  24. 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

    Posted by Roshan Shah on 30 Jun 2008 at 5:51 am
  25. Great!! Good Work!

    Posted by ricardo penachi de camargo on 01 Jul 2008 at 11:22 am
  26. thanks !

    Posted by kOoLiNuS on 03 Jul 2008 at 10:40 am
  27. 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!

    Posted by Jeff K. Ward on 04 Jul 2008 at 3:09 pm
  28. 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

    Posted by Jeremy Horn on 04 Jul 2008 at 7:53 pm
  29. @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.

    Posted by Not a Redneck on 06 Jul 2008 at 6:15 am
  30. Here’s something I did circa 1996:
    http://www.culturesculpture.com/projects/ux_corel/cad_sketch.jpg

    Which turned into this desktop product:
    http://www.culturesculpture.com/projects/ux_corel/corelcadv2.htm

    Coming from a background in Architecture, sketching was au natural. There’s something magical about a hand crafted line!

    Posted by Sanjiv Sirpal on 14 Jul 2008 at 10:32 pm
  31. Wow! Cool! Thanks!

    Posted by Ukrnet on 17 Jul 2008 at 1:23 pm
  32. I’m working with IT since 1981 in that time, we have only a paper to put and see our ideas… today, we have the computer to do our tests and I think we loose much time using the try and error way. So… I prefer to use paper… a sheet of paper accept everything and you can do any changes without to worry for the form or the design…

    Posted by Ruben Zevallos Jr. on 22 Jul 2008 at 2:32 pm
  33. Dude… simply amazing. wherdu find this stuff… MIT/Standford recycling bins? Are u like another good will hunting cleaning out classroms for genuis UI’s?

    Very very nice work!

    Posted by deepak srinivasan on 27 Jul 2008 at 7:29 pm
  34. hi
    nice one

    Posted by ritesh agrawal on 27 Jul 2008 at 11:06 pm
  35. Design FIRST! Then CODE! Every website I have ever designed from scratch has been done on paper FIRST and then coded. It saves no end of time in the long run.

    Posted by Andy on 08 Aug 2008 at 6:16 pm
  36. 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.

    Posted by andreas.wpv on 11 Mar 2009 at 10:54 am
  37. 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.

    Posted by AndrewNim on 12 Mar 2009 at 10:29 pm
  38. This is so awesome. Makes me feel a little better about how I design systems.

    Posted by Yes2Property on 13 Mar 2009 at 1:51 am
  39. Great post.

    I still get great satisfaction with scrawling and writing with a pencil!
    2B’s just about right :)

    Barry

    Posted by Barry Lynch on 17 Mar 2009 at 5:59 pm
  40. 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.

    Posted by medyum on 02 Nov 2009 at 7:03 pm
  41. 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.

    Posted by medyum on 02 Nov 2009 at 7:04 pm
  42. 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…

    Posted by ahmet maranki on 27 Dec 2009 at 12:49 pm
  43. Inspiring post.

    Posted by Faisal Asif on 07 Jan 2010 at 12:39 pm
  44. I love prototypes and the creative process. I documented the process behind developing one of my iPhone apps here http://www.romej.com/archives/668/building-eat-right-90

    I try to do as much design up front as possible, generally flicking my fingers at the paper, trying to imagine how it’d feel to use what I’ve drawn.

    Posted by Steven on 24 Jan 2010 at 12:07 pm
  45. 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.

    Posted by ABOYADE F. O on 10 Feb 2010 at 6:38 am
  46. Amazing post, Twitter sketch and others are really interesting, I think all websites and all designers should start with this step before design

    Posted by idagency on 17 Mar 2010 at 5:48 am
  47. Very useful information and examples, thank you very much!

    Posted by G13Media on 17 Mar 2010 at 2:10 pm
  48. 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.

    Posted by Pramit Singh on 12 Apr 2010 at 2:04 am
  49. 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.

    Posted by IT Courses on 22 Aug 2011 at 3:33 am
  50. 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..

    Posted by Andrew on 16 Dec 2011 at 10:23 am
  51. interesante

    Posted by Luis on 21 Feb 2012 at 12:21 am
  52. 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

    Posted by Website on 18 Jul 2012 at 7:33 pm
  53. 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?

    Posted by buck on 11 Nov 2012 at 1:39 am
  54. I like the video and I also like that twiter was called stat.us

    Posted by Anonymous on 31 Dec 2012 at 9:47 am
  55. 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.

    Posted by Software Guy on 28 Jan 2013 at 10:10 am
  56. 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.

    Posted by Pap Tamas on 29 Aug 2013 at 5:47 am
  57. Nice post. I learn something totally new and challenging
    on blogs I stumbleupon everyday. It will always be interesting to read through content from other writers
    and use a little something from their websites.

    Posted by google adwords on 31 Mar 2014 at 12:17 am
  58. I am now not positive the place you’re getting your information,
    but great topic. I must spend some time finding out much more or figuring out more.

    Thanks for magnificent information I was searching for this info for my mission.

    Posted by robot vacuum reviews on 20 Apr 2014 at 11:32 pm

140 Trackbacks

  1. buzz on 26 Jun 2008
  2. meneame.net on 27 Jun 2008
  3. Func. News on 09 Jul 2008
  4. lagardere.fr on 17 Mar 2010
  5. 20202 | MEI work Blog on 09 Oct 2013
  6. MEI work Blog on 10 Dec 2013

Add a Comment

Name

Email

Website