March 28, 2024

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

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

Share

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

2 Pings & Trackbacks

  1. Pingback: 10 Free Printable Web Design Wireframing Templates | Freebies

  2. Pingback: YOUR-TITLE

40 Comments

  1. Monique Reply

    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.

  2. Arthur Klepchukov Reply

    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?

    1. Brett Reply

      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.

  3. Nick Burd Reply

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

  4. Marc Reply

    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.

  5. HowToPlaza Reply

    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.

  6. Wion Reply

    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!

  7. John Moore Reply

    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.

  8. DJ Ben Reply

    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!

  9. Tomas Reply

    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?

Leave a Reply

Your email address will not be published. Required fields are marked *