40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups

40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups

Creating wireframes and mock-ups is quite easy to do digitally these days. Applications are available everywhere, and there’s one for every style. While many prefer to do that part of the work digitally during the process, there are still quite a few designers who actually choose to do it the old-fashioned way using a Moleskine or other ways of drawing by hand.

40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups

We all have our preferences and the important part is of course that we find a way to do things that will nourish our creativity and talent.

Sketched UI Wireframes and Mock-Ups

We’ve collected some great examples for you, showing how some designers have drawn their ongoing projects. It can be quite inspiring to have a look at, maybe this will give you some new ideas for yourself?

I’ve personally found that sometimes I get an idea easier on paper when taking a notebook and escaping from the computer for a while, as the distractions are always so many.

HBO – True Blood Site
HBO - True Blood Site

HBO SATC Site
HBO SATC Site

Contraptions
Contraptions

Dinosaurs
Dinosaurs

UI Sketch
UI Sketch

Sketched Wireframes 5
Sketched Wireframes 5

APG Website
APG Website

Design Strategy
Design Strategy

OnlyJames Wireframe Sketch
OnlyJames Wireframe Sketch

Vimeo Sketch
Vimeo Sketch

Early BusinessWeek Sketch
Early BusinessWeek Sketch

Taykt Wireframe
Taykt Wireframe

Early Ember Sketches
Early Ember Sketches

Early Ember Sketches in Color
Early Ember Sketches in Color

Hashlove Friends Invite
Hashlove Friends Invite

BGP UI Sketch 2
BGP UI Sketch 2

Vanilla Draft Wireframes
Vanilla Draft Wireframes

Jaws Article View Sketch
Jaws Article View Sketch

UI Elements Sketch
UI Elements Sketch

Final Notes
Final Notes

Wireframe Sketch Hosthead
Wireframe Sketch Hosthead

Left=Ouput, Right=Workarea
Left=Ouput, Right=Workarea

Sketching
Sketching

Midland Interface
Midland Interface

Librespeak Interface Sketch
Librespeak Interface Sketch

Very Rough Sketch
Very Rough Sketch

Settings of Toolbox
Settings of Toolbox

UHP Wireframes
UHP Wireframes

UI Flow Sketch
UI Flow Sketch

Aggregator
Aggregator

Color Chips
Color Chips

Game Interface Sketch
Game Interface Sketch

Moleskine iPhone Stencil Guide
Moleskine iPhone Stencil Guide

Harvest iPhone App Sketches
Harvest iPhone App Sketches

iPad Radio App Sketches 5
iPad Radio App Sketches 5

iPad Radio App Sketches 6
iPad Radio App Sketches 6

iPad App Sketch
iPad App Sketch

First Sketches Medical App
First Sketches Medical App

Scratch-off Concept
Scratch-off Concept

After Email Submit Render
After Email Submit Render

Did You Get Inspired or Amazed?

If these sketches inspired you to try out this yourself, we’d love to see your results, leave us a link to your own sketch! If you’re hungry for more and want to dive into tons and tons of content similar to this, we recommend you head over to communities like Flickr, Behance and deviantART and just search for the type of sketches you want.

There are many different styles and ideas out there and you have hours of inspiration ahead of you!

Hilde is a Norwegian girl with a great passion for everything related to design, freelancing, PhotoShop, photography, Illustrator and more. Running her own website and work with mainly Graphic Design and Business Consulting besides article writing.

Comments

  1. / Reply

    Thanks for the article :)

  2. / Reply

    Great article! y really like the Early Ember Sketches in Color, actually it is the same style that im using on my website redesign. Im using ZIG Kurecolors Twin markers (They came with Broad and Fine Tips), and the browserpaper from RainCreativeLab.com.

    You can get it for free here: http://www.raincreativelab.com/paperbrowser/

    • Jessica,
    • September 30, 2010
    / Reply

    Ya know the Midland Interface really looks like a circuit board drawing more than a website.

  3. / Reply

    Yes all are really inspirational

    Thanks for the samples Hilde:)

  4. / Reply

    Very cool! I love wireframe!

    Thank you

  5. / Reply

    very awesome inspiration!!!

  6. / Reply

    Interesting, I usually use sketches very early in the concept stage of a website for general shape and gestalt etc, but I move into photoshop pretty quickly and use that as my “sketchbook” I feel it gives me a bit more freedom to do additive revisions, moving things around without having to start over.

    Cody Rapley

    • Sidd,
    • September 30, 2010
    / Reply

    Very inspirational. Do a wireframe/mockup/sketch first and then all else !
    Thanks.

    • Minh Tri,
    • October 1, 2010
    / Reply

    This is awesome and so inspirational ! I still like doing this more than using tool in the computer. It makes me feel more comfortable to express my ideas

  7. / Reply

    Very useful, doing a wireframe before hand saves so much time with a client in the long run :-)

    • Scott,
    • October 11, 2010
    / Reply

    Good collection, this shows you don’t have to be Michelangelo to communicate and illustrate your ideas on paper.

    • Marius,
    • October 18, 2010
    / Reply

    Nice ones :)

    Sometimes I even mockup existing websites. helps a lot when you’re looking for some general layout-inspiration.
    http://img651.imageshack.us/img651/7362/sketches.jpg

  8. / Reply

    Great examples! Its easier to sketch your ideas on a paper 1st n make notes :) I shud start using grid papers from now on

  9. / Reply

    Nice bunch of sketches ;) a bit of an inside look in who’s doing what and how.

  10. / Reply

    Encouraging one

    • Troy,
    • October 30, 2010
    / Reply

    Inspired me to put up sketches and a wireframe from my last redesign. Now live at
    http://troy.yort.com/from-concept-sketches-to-live-web-page

    I included one decent-looking hand-drawn sketch, but also a couple of the really rough early ideas – sausage being made.

  11. / Reply

    Wow nice find, really; nice find man! And Scott, you look like Eminem the rapper lol.

  12. / Reply

    Those are really sick. Now, I just need to stop being lazy and build out my vision.

    • ison,
    • July 19, 2011
    / Reply

    thanks for what you share here. ;)

    • Arun,
    • August 24, 2011
    / Reply

    These are some great mockups. Some are very useful.

  13. / Reply

    Great stuff! Bookmarking this in case I need some wireframe inspiration :)

  14. / Reply

    It inspired me to sketch more! I’ve gotten way too used to designing with my mouse from scratch. I need to get back to my roots, and plan better with a pad n pencil. Thanks :)

    • sara,
    • May 18, 2012
    / Reply

    hmmm…this is what i want in my field tnx LOT:-?

  15. / Reply

    I believe the whole idea of wire frames is to just draw a doodle so we can brainstorm ideas on it and not to make it perfect with rulers and shading..etc

    Just doodle it, it doesn’t have to look fancy :) That’s the whole idea !

Leave a Reply

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

Deals