18 Great Examples of Sketched UI Wireframes and Mockups

By / May 20, 2010 / Inspiration
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.

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.

41 Comments

  1. 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:

    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

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

    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
  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/

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

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