The Paper Version of the Web at Deeplinking

The Paper Version of the Web

Published March 17th, 2008, 8:19am in Ideas, Lists.

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:

167 Responses to “The Paper Version of the Web”

Trackback Address

1 Armen Mar 17th, 2008 at 5:39 pm

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 kristen Mar 17th, 2008 at 7:28 pm

Sketching is my absolute favorite part of any project. This is great, thanks for sharing it.
3 Digital Revolutions Mar 17th, 2008 at 9:12 pm

Quite nice, sketching is great fun, no?
4 dorian Jun 25th, 2008 at 4:14 pm

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 Joe | A New Band A Day Jun 26th, 2008 at 4:43 am

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 Martin Sharper Jun 26th, 2008 at 8:46 am

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 Fubiz Jun 26th, 2008 at 10:12 am

Nice examples !
8 Julia Jun 26th, 2008 at 10:33 am

Sox’s stuff is great.
9 Jason Jun 26th, 2008 at 11:37 am

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 Brad Jun 26th, 2008 at 12:20 pm

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 Tyler Ingram Jun 26th, 2008 at 12:56 pm

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 Alsymer Jun 26th, 2008 at 2:09 pm

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 Peldi Guilizzoni Jun 26th, 2008 at 4:49 pm

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 beth Jun 26th, 2008 at 7:53 pm

more examples: http://home.comcast.net/~bethgoldman/ControlSpending.html
15 Sig Jun 26th, 2008 at 7:59 pm

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 Mike Jun 26th, 2008 at 9:30 pm

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 Danny Hope Jun 27th, 2008 at 3:19 am

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 Ianus Keller Jun 27th, 2008 at 5:08 am

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 Ed Jun 27th, 2008 at 7:16 am

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 charles Jun 27th, 2008 at 10:04 am

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 dilip Jun 28th, 2008 at 2:27 am

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 Ben Jun 28th, 2008 at 8:17 pm

Thats awesome

http://www.duivesteyn.com.au
23 Eric00000007 Jun 29th, 2008 at 3:52 am

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 Roshan Shah Jun 30th, 2008 at 5:51 am

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 ricardo penachi de camargo Jul 1st, 2008 at 11:22 am

Great!! Good Work!
26 kOoLiNuS Jul 3rd, 2008 at 10:40 am

thanks !
27 Jeff K. Ward Jul 4th, 2008 at 3:09 pm

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 Jeremy Horn Jul 4th, 2008 at 7:53 pm

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 Not a Redneck Jul 6th, 2008 at 6:15 am

@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.
30 Sanjiv Sirpal Jul 14th, 2008 at 10:32 pm

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!
31 Ukrnet Jul 17th, 2008 at 1:23 pm

Wow! Cool! Thanks!
32 Ruben Zevallos Jr. Jul 22nd, 2008 at 2:32 pm

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…
33 deepak srinivasan Jul 27th, 2008 at 7:29 pm

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!
34 ritesh agrawal Jul 27th, 2008 at 11:06 pm

hi
nice one
35 Andy Aug 8th, 2008 at 6:16 pm

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.
36 web link strategies Aug 15th, 2008 at 9:51 am

that was very interesting, i especially enjoyed the Youtube prototyping
37 andreas.wpv Mar 11th, 2009 at 10:54 am

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.
38 AndrewNim Mar 12th, 2009 at 10:29 pm

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.
39 Yes2Property Mar 13th, 2009 at 1:51 am

This is so awesome. Makes me feel a little better about how I design systems.
40 Barry Lynch Mar 17th, 2009 at 5:59 pm

Great post.

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

Barry
41 seo company buckinghamshire Apr 16th, 2009 at 4:08 am

very interesting…particularly the youtube stuff
42 Legioner May 26th, 2009 at 10:23 am

Весьма возможно. Иногда так случается.
43 пeлaгия Jun 1st, 2009 at 5:00 am

Действительно интересно. Некоторые моменты не знал.
44 Web developer Jun 9th, 2009 at 4:53 am

I start to build my webs exactly the same way. It helps me to prevent future mistakes
45 лякa Jul 1st, 2009 at 7:32 pm

Спасибо автору за полезную информацию