18 Great Examples of Sketched UI Wireframes and Mockups
Whether you’re designing a user interface for a website or an iPhone app, it’s always a good idea to start with a wireframe. It can be a big time saver if you’re able to nail down the placement of major layout elements early on in a project. There are a number of wireframing applications out there, but a lot of user interface designers like to start out on paper with sketches of what things might look like. With so many tools available to quickly create digital wireframes, some may argue that this is an unnecessary step in the design process. But I think the free flowing style of a sketched wireframe or mockup can be refreshing. Besides, there’s nothing like good ole pencil and paper to get the creative juices flowing.
For this post, I’ve collected 18 great examples of sketched UI wireframes and mockups. A lot of these look so good that you may be inspired to start your next project with a sketch.
NationWide / NASCAR
5 Years of Firefox
Links
GEOINT2009 (Microsite)
Coastal Capital Partners
New Local
Vimeo Profile Page Idea
Layout for BPgraphics
Vimeo Clip Page Top Nav
Cartoonity.com UI Sketch
CommLogix Wireframe
Early Ember Sketches
Wirethumbs
More Ember Sketches
iPad App Sketch
Web Layout Sketches
Librespeak interface sketch
Original Twitter Concept
Related Posts
Here's some other articles that you will definitely find useful.
11 UI Kits for iPhone and iPad Development
10 Free Printable Web Design Wireframing Templates
10 Excellent Tools for Creating Web Design Wireframes
A UI Design and Prototyping Treasure Chest
The Four Key Components of a Great Web Design
37 comments
Peter Steen Høgenhaug
May 20, 2010Nice collection… However, the link to the NASCAR sketch takes me to a wedding invitation design at Flickr.
Henry
May 20, 2010Thanks for pointing that out. It’s been fixed.
Eko Setiawan
May 20, 2010Great collections to share…thanks
Give me some inspirations.
Tobin Harris
May 20, 2010Awesome
Have you seen the Elite game original sketches?
http://www.iancgbell.clara.net/elite/design/index.htm
More sketches listed here:
http://deeplinking.net/paper-web/
And http://yUML.me is good for developers/analysts to “sketch” UML.
Web Design
May 20, 2010Brilliant mate, a lot of great ideas here. Thanks for sharing!
Vini
May 20, 2010awesome! thanks for sharing this amazing collection.
Jordan Walker
May 20, 2010Truly great developers can express their ideas on paper in a manner which is concise and easy to understand.
Marco Barbosa
May 20, 2010Nice inspiration.
I love sketching things.
Monique
May 20, 2010Love the sketches! I like seeing how ideas take shape.
I’ve never done a design without drawing it out on paper first, so it’s really cool to see how the professionals do it.
Chris Jamero
May 20, 2010From paper to awesomeness!
Scott Corgan
May 20, 2010See, my issue isn’t that I don’t want to wireframe. It’s that I can’t draw. These look like masterpieces themselves!
Mr.shafique
May 20, 2010Nice
, construct the website without Mockup and Information Architecture Diagram at paper is just like you start building a Plaza with a proper Map.
Arthur Klepchukov
May 20, 2010These look nice but that’s not the point of sketches and wireframes. Why are most of them so high fidelity? Why spend so much time on what’s supposed to be a quick concept sketch?
Brett
May 24, 2010Agreed. You should be able to wireframe a page in about 15 minutes and have a solid idea of the layout/functionality. Some of these examples would easily take hours. When you are on a time schedule and project budget, these types of wireframes simply aren’t practical.
Nick Burd
May 20, 2010Great post.
I sketch out my thoughts first normally, but they are not as indepth as this.
I also really want to start sketching non website related things again.. I should start taking some classes to get me back into the swing of things again.
Thanks again for the post. !!
Marc
May 20, 2010Even with the tools available for wire frames. All of our sites start with a sketch. A lot of the time these sketches are done in the presence of the client – usually during the design discovery meeting. It is a way of engaging our clients, giving them very quick visuals. Our clients love the brainstorming and we love the time that it saves with the back and forth of the design brief. A tablet or software just doesn’t compare at this stage of the process.
HowToPlaza
May 21, 2010Great examples of paper sketches. They give a good idea of what goes where but I’d still prefer digital wireframing tools so that things can be reorganized and redrawn without much time.
Wion
May 21, 2010Links, Cartoonity and maybe CommLogic are about the extent I would go with sketches. Definitely wirethumbs too.
Many of the others–all nice–look a little like design for the sake of it, which may not be realistic for every project. I think it also reflects one’s background; user-focused professionals (UCD, usability…) will probably keep it simple (pencil sketches) while more creative types throw in the art. Just depends on the project, I guess.
All great work, nonetheless!
Johnson Koh
May 21, 2010GEOINT2009 and NewLocal looks really neat and detailed. Excellent post.
Rakesh Menon
May 22, 2010Paper sketches are indeed an integral part that needs to be done before you plunge into designing the site, to save time in the workflow process.
Murat Esenli
May 23, 2010Great works. I love these sketch works for any design. I must start all new web project and show to design team.
Martin Kulakowski
June 2, 2010Thanks for including 2 of mine. I’m always trying to not lose dozens of them from my desk every day, so I can share with others. Here’s some more tagged on Flickr: http://www.flickr.com/photos/martin-kulakowski/tags/sketches/
Vincent
June 4, 2010Cool examples. I didn’t used to sketch, because I didn’t think it was important, but now I do
Thanks for sharing
John Moore
July 13, 2010Interesting discussion on the merits of low fidelity wireframes vs high fidelity wireframes – although in this case its quick sketching vs most of the lovingly crafted ‘high-fidelity’ artworks. I agree with some of the earlier comments – that the most important part of the sketching process should be getting ideas out of collective heads and onto paper as quickly as possible to evaluate their feasibility – in as little detail as needed for broader project team / client discussion.
The well documented process that Adaptive Path have socialised is a great example of this process in action
http://www.adaptivepath.com/ideas/essays/archives/000863.php
More recently Tyler Tate on UXBooth has explained his iterative design process through low fi to hi fi to prototyping which gives a great summary of the kind of design thinking we use at *experience.
http://www.uxbooth.com/blog/concerning-fidelity-and-design/
Do what you need to get ideas out early but dont overdo it – and as Tyler suggests – know which medium will get you to your next stage quickest.
renee
August 2, 2010thank you.
Very nice.
Heynoon
August 17, 2010thanks. very cool examples for prototyping.
Fransgaard
September 28, 2010Good to see the pen(cil) is still mighty (^_^)
Jamie Jones
October 24, 2010Great article. Thanks
richtaur
January 15, 2011Really inspiring! I’ve been using my tablet for everything lately but sometimes you just can’t beat pen & paper.
DJ Ben
January 16, 2011I definitely didn’t realize people where still using the old pencil and paper to sketch out web designs… Looking at the above examples makes me want to include this in my own process – I’m tipping my sketches won’t look as good as all the above. A great collection, very inspiring!
James
January 18, 2011These are some great sketches. I to make mockups and they are very useful for clients to see something visual.
Patrick Ashamalla
May 10, 2011I just stumbled across this post through another article and noticed one of my wireframes was on here. Just wanted to say thanks for the mention!
Eunice
December 14, 2011Just need to get over the fact I can’t draw
sylhet directory
May 20, 20121000 thanks for your showcase.
waiting for next post.
Jian Adornado
September 27, 2012Cool list! Take a look at my sketches at http://www.jianart.com/blog/
Let me know your thoughts.
Tomas
November 11, 2012I 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?
Unaiz
May 22, 2013These are really great..! Thank you for the inspiration!
2 Trackbacks
[...] = 'webdesignledger'; tweetmeme_service = 'bit.ly'; Share A couple of weeks ago we posted a showcase of sketched UI wireframes. It illustrated how starting out on paper can be an effective way to begin the design process. It [...]
18 Great Examples of Sketched UI Wireframes and Mockups…
Thank you for submitting this cool story – Trackback from YOUR-TITLE…