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.
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.
Moleskine iPhone Stencil Guide
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!
Thanks for the article :)
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/
Ya know the Midland Interface really looks like a circuit board drawing more than a website.
Yes all are really inspirational
Thanks for the samples Hilde:)
Very cool! I love wireframe!
Thank you
very awesome inspiration!!!
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
Very inspirational. Do a wireframe/mockup/sketch first and then all else !
Thanks.
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
Very useful, doing a wireframe before hand saves so much time with a client in the long run :-)
Good collection, this shows you don’t have to be Michelangelo to communicate and illustrate your ideas on paper.
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
Great examples! Its easier to sketch your ideas on a paper 1st n make notes :) I shud start using grid papers from now on
Nice bunch of sketches ;) a bit of an inside look in who's doing what and how.
Encouraging one
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.
Wow nice find, really; nice find man! And Scott, you look like Eminem the rapper lol.
Those are really sick. Now, I just need to stop being lazy and build out my vision.
thanks for what you share here. ;)
These are some great mockups. Some are very useful.
Great stuff! Bookmarking this in case I need some wireframe inspiration :)