18 Great Examples of Sketched UI Wireframes and Mockups

By / May 20, 2010 / Inspiration

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

sketched wireframes

5 Years of Firefox

sketched wireframes

Links

sketched wireframes

GEOINT2009 (Microsite)

sketched wireframes

Coastal Capital Partners

sketched wireframes

New Local

sketched wireframes

Vimeo Profile Page Idea

sketched wireframes

Layout for BPgraphics

sketched wireframes

Vimeo Clip Page Top Nav

sketched wireframes

Cartoonity.com UI Sketch

sketched wireframes

CommLogix Wireframe

sketched wireframes

Early Ember Sketches

sketched wireframes

Wirethumbs

sketched wireframes

More Ember Sketches

sketched wireframes

iPad App Sketch

sketched wireframes

Web Layout Sketches

sketched wireframes

Librespeak interface sketch

sketched wireframes

Original Twitter Concept

sketched wireframes

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.

  • http://stiern.com Peter Steen Høgenhaug

    Nice collection… However, the link to the NASCAR sketch takes me to a wedding invitation design at Flickr.

    • http://henryjones.us Henry

      Thanks for pointing that out. It’s been fixed.

  • http://www.dynamicwp.net Eko Setiawan

    Great collections to share…thanks
    Give me some inspirations.

  • http://engineroomapps.com Tobin Harris

    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.

  • http://www.webcreationuk.com/ Web Design

    Brilliant mate, a lot of great ideas here. Thanks for sharing!

  • http://www.canvasofmine.blogspot.com/ Vini

    awesome! thanks for sharing this amazing collection.

  • http://www.jordanwalker.net Jordan Walker

    Truly great developers can express their ideas on paper in a manner which is concise and easy to understand.

  • http://marcobarbosa.com Marco Barbosa

    Nice inspiration.

    I love sketching things.

  • Monique

    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.

  • http://funcdesigns.blogspot.com Chris Jamero

    From paper to awesomeness!

  • http://www.scottcorgan.com Scott Corgan

    See, my issue isn’t that I don’t want to wireframe. It’s that I can’t draw. These look like masterpieces themselves!

  • http://www.designarcher.com Mr.shafique

    Nice :), construct the website without Mockup and Information Architecture Diagram at paper is just like you start building a Plaza with a proper Map.

  • http://artvankilmer.wordpress.com/ Arthur Klepchukov

    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?

    • Brett

      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.

  • http://nickburd.com Nick Burd

    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. !!

  • http://www.integradesigns.com Marc

    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.

  • http://www.howtoplaza.com HowToPlaza

    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.

  • http://wion.com Wion

    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!

  • http://10steps.sg Johnson Koh

    GEOINT2009 and NewLocal looks really neat and detailed. Excellent post.

  • http://www.code-pal.com Rakesh Menon

    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.

  • http://www.mindin.me Murat Esenli

    Great works. I love these sketch works for any design. I must start all new web project and show to design team.

  • http://www.martinkulakowski.com Martin Kulakowski

    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/

  • Pingback: 10 Free Printable Web Design Wireframing Templates | Freebies()

  • http://twitter.com/vincentveri Vincent

    Cool examples. I didn’t used to sketch, because I didn’t think it was important, but now I do :)

    Thanks for sharing

  • Pingback: YOUR-TITLE()

  • http://www.experience.net.nz John Moore

    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.

  • renee

    thank you.
    Very nice.

  • http://www.martinheyn.com Heynoon

    thanks. very cool examples for prototyping.

  • http://www.fransgaard.com Fransgaard

    Good to see the pen(cil) is still mighty (^_^)

  • http://www.mushroomdigital.co.uk Jamie Jones

    Great article. Thanks :)

  • http://blog.lostdecadegames.com/ richtaur

    Really inspiring! I’ve been using my tablet for everything lately but sometimes you just can’t beat pen & paper.

  • http://www.djmastercourse.com DJ Ben

    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!

  • http://wiredtogether.ca James

    These are some great sketches. I to make mockups and they are very useful for clients to see something visual.

  • http://unended.com Patrick Ashamalla

    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!

  • Eunice

    Just need to get over the fact I can’t draw

  • http://www.esylhet.com/directory sylhet directory

    1000 thanks for your showcase.

    waiting for next post.

  • http://www.jianart.com Jian Adornado

    Cool list! Take a look at my sketches at http://www.jianart.com/blog/
    Let me know your thoughts.

  • Tomas

    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?

  • http://designgrapher.com Unaiz

    These are really great..! Thank you for the inspiration!

  • http://superbwebsitebuilders.com/ Howard Steele

    Great sketches :) especially the one with watercolors.
    Inspiring!

  • http://www.genmymodel.com/ giorgio

    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