by When you start designing a new website it’s very useful to sketch out a first idea of page layout using paper and stencil. This approach help you define easily a working draft of the final version of your website. In general this is a top-down process: you can start sketching first the main sections and then adding more details progressively. In this post I want to suggest you some interesting examples of beautiful sketches for website prototypes for your daily inspiration.
Ember
Early Ember
Ember is a Campfire client that allows you to use Campfire by 37signals anywhere you go.
Original photo here
by playingwithshapes
Vimeo Video Browser Module
Vimeo Video Browser Module
Vimeo Conversations Page Ideas
Vimeo Conversations Page Ideas
Mega-Drop Down Explorations
Mega-Drop Down Explorations
Original photo here
by jvbates
Visible Change History in Sketches
Visible Change History in Sketches
From an interesting article on Wireframe Magazine about how to highlight change history in sketches.
Original post here
Audio/Video Manager Project
Audio/Video Manager Project
The main app frame is created from a pasteboard, the notebook is used for single screen design.
Original photo here
by ondrejvalka
Video Detail Page
Video Detail Page
Original photo here
by jvbates
Adaptive Path Sketch Example
Adaptive Path Sketch Example
Original photo here
Original post here
Person Page
Person Page
Original photo here
by Jason Robb
Things touch
Things touch
Antonio Lupetti is an italian engineer, pro blogger, Mac user, founder of woorkup.com. He lives in Rome, Italy. Follow Antonio on 
December 28, 2009 at 9:01 am
Very interesting to see that they spent so much time in there sketches, while sketches will be only seen by yourself. My sketches are verry basic when it comes to web design, it helps me to devide the content on the website.
December 30, 2009 at 12:37 pm
To those who don’t show sketches to clients: think about giving it a shot. You can show more thinking for less money…clients like that in this economy.
December 28, 2009 at 9:34 am
You can’t go wrong with sketches. Sketches -> Wireframe PDF -> Client -> Web Design -> Testing.
Good process.
Actually in reality it’s: All of the above -> Client (not happy) -> Sketches -> (repeat)
December 28, 2009 at 9:43 am
Pen an paper eh? hard to edit or add items without a Martha Stweart degree.
try this, its a simple mockup tool that you can scribble your ideas and resize and rename and …
Balsamiq Mockups. http://www.balsamiq.com
December 28, 2009 at 10:24 am
Hey Antonio, thanks for including 2 of my sketches in this post (the change history sketch is mine, too). Much appreciated! =)
There are a few in here I haven’t seen. Things Touch sketches are amazing, they used a kind of thick cardboard to help them create crisp outlines of the application borders.
The Audio/Video manager project is neat too. I like how the consistent parts to the interface are removed from the area that should be critiqued.
Thanks again for posting these.
Cheers!
Jason R.
December 28, 2009 at 12:36 pm
It’s a pleasure :)
Thank you for your work Jason!
December 28, 2009 at 9:39 pm
The ‘thick cardboard’ is called “Finnpappe”, and it’s often used for building architectural scale models.
December 28, 2009 at 1:19 pm
I really enjoy seeing these sketches that lead up to a finished design. I often look back at my initial planning and ideation sketches only to be surprised how much is actually retained form the originals.
December 28, 2009 at 1:48 pm
Adaptive Path Sketch Example – looks like a piece of art!
December 28, 2009 at 3:45 pm
These are great! It is a good idea to do this. I have sketched all my websites out since I was in college. That is when I picked up the habit of doing that. I have been doing it ever since. Great Work!
December 28, 2009 at 7:23 pm
It is always inspiring on how sketches can peak our interests sometimes even more that the final product itself. Very nice stuff !!
December 28, 2009 at 10:27 pm
Great post! Sometimes it is easier to put pen on paper and create a wireframe mockup than using wireframing and mockup visualization tools!
December 29, 2009 at 3:06 am
Awesome post, very inspiring!
December 29, 2009 at 3:55 am
I like doing paper sketches too.. they’re not easily editable, but at least you’ve got an excuse for not staring at the screen :)
December 29, 2009 at 6:29 am
really nice. It gave me an idea how to sketch professionally.
December 29, 2009 at 6:40 am
great post. Something i use sketch to design my template too..
December 29, 2009 at 7:56 am
Thank you so much !! inspiring work.. by them.. and collection by you !! .. Keep it up !
December 29, 2009 at 7:57 am
Great article, I really like it. Thanks Antonio Lupetti.
December 29, 2009 at 9:11 am
Hi Very nice posting, Please post more like this
December 29, 2009 at 9:44 am
Thanks a lot! I’ve never done the sketches before designing a site.
This would make my work a lot easier. :)
December 29, 2009 at 10:52 am
Loved seeing this! Have you taken a look at SketchFlow? (http://bit.ly/4OIb05). It has kind of rocked my world for prototyping stuff lately. Not quite as fast as a pencil and paper, but close.
(disclaimer – I work for MS, although not anything to do with this product)
December 29, 2009 at 1:44 pm
These are pretty cool, they’d look awesome blown up. Can’t wait to see any if they’re developed
December 29, 2009 at 6:29 pm
I wouldnt mind this team working on my web projects. The adopt a really Thorough approach with the sketches and all. I am really impressed
December 30, 2009 at 12:54 am
Really beautiful sketches
December 30, 2009 at 1:12 am
Good ideas, thanks.
December 30, 2009 at 3:13 am
this post should initial all the web nerds to start scribbling before scratching up the project….thanks alot..
December 30, 2009 at 3:46 am
one of woorkup’s greatest post: really original topic!
the only regretet is the loss of time, in everyday work, to make so accurate sketches…
…my work is made by “overnight” deliveries…and I quote Stu Green: the reality is desperately the opposite!
December 30, 2009 at 7:24 am
I believe these are sketches done by talented artist and designer, otherwise it looks bad like mine. Okay at least I’m improving, thanks for the inspiration!
December 30, 2009 at 12:49 pm
My friend shared this article after I showed him about my small venture…. we are actually making the “Open Source UX Project” of course it is the idea I was dreaming, but the process will be open source!
check it out: http://naanmap.tumblr.com we have the sketches and wireframes for it too at our Flickr account: http://www.flickr.com/photos/naanmap
Ciao
Mudassir Azeemi
San Francisco Bay Area
December 30, 2009 at 5:44 pm
Great sketches! Inspires me to do more sketching website in more detail and do more interaction design work.
I heard that when you show a well drawn and perhaps even colored sketch to a client (of a website), it allows for more imagination… They won’t pick on a particular element of the design too quickly, whereas if you design _the mockup_ in too much detail, they may pick on a particular thing and focus less on the big picture. (Like “Can this bar be bigger? Can this color blue be lighter?)
I haven’t tried it myself yet, but maybe I will.
December 31, 2009 at 4:05 am
Great post! @woork http://j.mp/5Wj2ym
January 4, 2010 at 6:17 am
Nice and Helpful!!! Great Post
January 5, 2010 at 3:06 pm
Pen and paper still and always will be the best idea for making sketches. You go on the computer when you KNOW what you’ll be doing.
Really, who said sketches needed to be beautiful? That’s just a waist of time!
January 6, 2010 at 10:22 pm
those are some nice sketches… i just have to start doing my own sketches before i get in front of a computer.