10 Beautiful Sketches for Website Prototypes
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
Samsung Galaxy Nexus video review: il migliore smartphone Android di sempre
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.
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.
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)
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
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.
It’s a pleasure :)
Thank you for your work Jason!
The ‘thick cardboard’ is called “Finnpappe”, and it’s often used for building architectural scale models.
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.
Adaptive Path Sketch Example – looks like a piece of art!
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!
It is always inspiring on how sketches can peak our interests sometimes even more that the final product itself. Very nice stuff !!
Great post! Sometimes it is easier to put pen on paper and create a wireframe mockup than using wireframing and mockup visualization tools!
Awesome post, very inspiring!
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 :)
really nice. It gave me an idea how to sketch professionally.
great post. Something i use sketch to design my template too..
Thank you so much !! inspiring work.. by them.. and collection by you !! .. Keep it up !
Great article, I really like it. Thanks Antonio Lupetti.
Hi Very nice posting, Please post more like this
Thanks a lot! I’ve never done the sketches before designing a site.
This would make my work a lot easier. :)
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)
These are pretty cool, they’d look awesome blown up. Can’t wait to see any if they’re developed
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
Really beautiful sketches
Good ideas, thanks.
this post should initial all the web nerds to start scribbling before scratching up the project….thanks alot..
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!
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!
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
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.
Great post! @woork http://j.mp/5Wj2ym
Nice and Helpful!!! Great Post
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!
those are some nice sketches… i just have to start doing my own sketches before i get in front of a computer.
Audio/Video Manager Project- is by far the most creative in my opinion.
Useful Article….
Hmm, very cool. A colleague of mine and I were talking the other day about how it may be useful to do IA and wireframes on simple pen and paper media instead of an InDesign document. This sort of takes it one step further. Seems time intensive though.
i love r&b music becaue it sounds soothing to my ears.”`*
Cheers, I’m going to find all the marketing realted blogs I can for my uni projects at the moment :)
Is there a need to sketch web prototypes with pen and paper? Why not try using something like OpenOffice Draw to prototype your layout?
These sketches are so good they’re practically architectural ;) I really enjoyed them.
Great info and right to the point. I am not sure if this is in fact the best place to ask but do you people have any thoughts on where to hire some professional writers? Thanks in advance :)