Tuesday, 25 May 2010

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