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
May 20, 2010
Nice collection… However, the link to the NASCAR sketch takes me to a wedding invitation design at Flickr.
May 20, 2010
Thanks for pointing that out. It’s been fixed.
May 20, 2010
Great collections to share…thanks
Give me some inspirations.
May 20, 2010
Awesome
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.
May 20, 2010
Brilliant mate, a lot of great ideas here. Thanks for sharing!
May 20, 2010
awesome! thanks for sharing this amazing collection.
May 20, 2010
Truly great developers can express their ideas on paper in a manner which is concise and easy to understand.
May 20, 2010
Nice inspiration.
I love sketching things.
May 20, 2010
Love 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.
May 20, 2010
From paper to awesomeness!
May 20, 2010
See, my issue isn’t that I don’t want to wireframe. It’s that I can’t draw. These look like masterpieces themselves!
May 20, 2010
Nice
, construct the website without Mockup and Information Architecture Diagram at paper is just like you start building a Plaza with a proper Map.
May 20, 2010
These 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?
May 24, 2010
Agreed. 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.
May 20, 2010
Great 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. !!
May 20, 2010
Even 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.
May 21, 2010
Great 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.
May 21, 2010
Links, 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!
May 21, 2010
GEOINT2009 and NewLocal looks really neat and detailed. Excellent post.
May 22, 2010
Paper 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.
May 23, 2010
Great works. I love these sketch works for any design. I must start all new web project and show to design team.
Jun 2, 2010
Thanks 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/
[...] = '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 [...]
Jun 4, 2010
Cool examples. I didn’t used to sketch, because I didn’t think it was important, but now I do
Thanks for sharing
18 Great Examples of Sketched UI Wireframes and Mockups…
Thank you for submitting this cool story – Trackback from YOUR-TITLE…
Jul 13, 2010
Interesting 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.
Aug 2, 2010
thank you.
Very nice.
Aug 17, 2010
thanks. very cool examples for prototyping.