18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 1 of 29
advertise here advertise here
Home
Inspiration
Freebies
Tips
Tools
Resources
News
Tutorials
Search…
18 Great Examples of Sketched UI Wireframes
and Mockups
By Henry Jones / May 20, 2010 / Inspiration
1333 shares
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.
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 2 of 29
NationWide / NASCAR
5 Years of Firefox
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 3 of 29
Links
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 4 of 29
GEOINT2009 (Microsite)
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 5 of 29
Coastal Capital Partners
New Local
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 6 of 29
Vimeo Profile Page Idea
Layout for BPgraphics
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 7 of 29
Vimeo Clip Page Top Nav
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 8 of 29
Cartoonity.com UI Sketch
CommLogix Wireframe
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 9 of 29
Early Ember Sketches
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 10 of 29
Wirethumbs
More Ember Sketches
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 11 of 29
iPad App Sketch
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 12 of 29
Web Layout Sketches
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 13 of 29
Librespeak interface sketch
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 14 of 29
Original Twitter Concept
About the Author
Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the
founder of WDL and ThemeTrust.
Related Posts
1024 shares
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 15 of 29
11 UI Kits for iPhone and iPad Development
By Henry Jones / Jun 8, 2010 / Freebies
Last week we posted a collection of printable wireframing templates which included some for iPhone and
iPad app design. These are great for communicating early mockups and ideas, but when it’s time for those
ideas to make the jump from paper to the computer screen, it’s helpful to have a library of UI elements
at…
Read More
836 shares
10 Free Printable Web Design Wireframing Templates
By Henry Jones / Jun 4, 2010 / Freebies
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 allows you to quickly mockup ideas and get
the creative juices flowing. When creating these sketches, it’s good to have a guide or starting…
Read More
41 Comments
1.
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 16 of 29
Peter Steen Høgenhaug
May 20, 2010
Nice collection… However, the link to the NASCAR sketch takes me to a wedding invitation
design at Flickr.
Reply
Henry
May 20, 2010
Thanks for pointing that out. It’s been fixed.
Reply
2.
Eko Setiawan
May 20, 2010
Great collections to share…thanks
Give me some inspirations.
Reply
3.
Tobin Harris
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:
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 17 of 29
http://deeplinking.net/paper-web/
And http://yUML.me is good for developers/analysts to “sketch” UML.
Reply
4.
Web Design
May 20, 2010
Brilliant mate, a lot of great ideas here. Thanks for sharing!
Reply
5.
Vini
May 20, 2010
awesome! thanks for sharing this amazing collection.
Reply
6.
Jordan Walker
May 20, 2010
Truly great developers can express their ideas on paper in a manner which is concise and easy to
understand.
Reply
7.
Marco Barbosa
May 20, 2010
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 18 of 29
May 20, 2010
Nice inspiration.
I love sketching things.
Reply
8.
Monique
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.
Reply
9.
Chris Jamero
May 20, 2010
From paper to awesomeness!
Reply
10.
Scott Corgan
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!
Reply
11.
Mr.shafique
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 19 of 29
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.
Reply
12.
Arthur Klepchukov
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?
Reply
Brett
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.
Reply
13.
Nick Burd
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. !!
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 20 of 29
Thanks again for the post. !!
Reply
14.
Marc
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.
Reply
15.
HowToPlaza
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.
Reply
16.
Wion
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!
Reply
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 21 of 29
Reply
17.
Johnson Koh
May 21, 2010
GEOINT2009 and NewLocal looks really neat and detailed. Excellent post.
Reply
18.
Rakesh Menon
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.
Reply
19.
Murat Esenli
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.
Reply
20.
Martin Kulakowski
June 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/
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 22 of 29
http://www.flickr.com/photos/martin-kulakowski/tags/sketches/
Reply
21. 10 Free Printable Web Design Wireframing Templates | Freebies
June 4, 2010
[…] = ‘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 […]
Reply
22.
Vincent
June 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
Reply
23. YOUR-TITLE
July 7, 2010
18 Great Examples of Sketched UI Wireframes and Mockups…
Thank you for submitting this cool story – Trackback from YOUR-TITLE…
24.
John Moore
July 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
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 23 of 29
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.
Reply
25.
renee
August 2, 2010
thank you.
Very nice.
Reply
26.
Heynoon
August 17, 2010
thanks. very cool examples for prototyping.
Reply
27.
Fransgaard
September 28, 2010
Good to see the pen(cil) is still mighty (^_^)
Reply
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 24 of 29
28.
Jamie Jones
October 24, 2010
Great article. Thanks
Reply
29.
richtaur
January 15, 2011
Really inspiring! I’ve been using my tablet for everything lately but sometimes you just can’t beat
pen & paper.
Reply
30.
DJ Ben
January 16, 2011
I 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!
Reply
31.
James
January 18, 2011
These are some great sketches. I to make mockups and they are very useful for clients to see
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 25 of 29
These are some great sketches. I to make mockups and they are very useful for clients to see
something visual.
Reply
32.
Patrick Ashamalla
May 10, 2011
I 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!
Reply
33.
Eunice
December 14, 2011
Just need to get over the fact I can’t draw
Reply
34.
sylhet directory
May 20, 2012
1000 thanks for your showcase.
waiting for next post.
Reply
35.
Jian Adornado
September 27, 2012
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 26 of 29
Cool list! Take a look at my sketches at http://www.jianart.com/blog/
Let me know your thoughts.
Reply
36.
Tomas
November 11, 2012
I 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?
Reply
37.
Unaiz
May 22, 2013
These are really great..! Thank you for the inspiration!
Reply
38.
Howard Steele
July 9, 2013
Great sketches especially the one with watercolors.
Inspiring!
Reply
39.
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 27 of 29
giorgio
July 15, 2013
Awesome collection!
For sketching software systems, drawing tools are not alone anymore. For software architects and
developers, cloud-based modelers are emerging. See http://www.genmymodel.com, it’s about
editing UML online with fast code generators.
Giorgio
Reply
Leave a Reply
Name (required)
Email (required)
Website
Submit Comment
WDL Newsletter
Subscribe to our email newsletter to get resources, tips, and freebies sent directly to your inbox.
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 28 of 29
Advertise Here
Popular Posts
13 Super Inspiring About Pages
11 Inspiring Single Page Websites
Why a Responsive Web Design Will Help You Get More Visitors
The Seven Principles of Conversion-Centered Design
10 Best New Free Fonts
9 Free & Useful Fonts for your Designs
Your email address
Subscribe
18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration 23/03/14 3:02 PM
http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups Page 29 of 29
Categories
Inspiration
Freebies
Tips
Tools
Resources
News
Tutorials
Recent Tweets
1 year ago: The Benefits of Working on Freelance Projects http://t.co/zddkL0Cwsd
March 21 7:33 am
Why a Responsive Web Design Will Help You Get More Visitors http://t.co/PMhWE0GPU8
March 21 2:31 am
1 year ago: Beautiful and Inspiring Visual Identity Projects http://t.co/koqlcuh3G2
March 20 7:48 am
© 2014 Web Design Ledger All Rights Reserved.
About | Contact | Privacy Policy
The post Wireframes and Mockups appeared first on My Assignment Online.