These days I found an article about the »Early sketches from the web’s finest« on the LayerVault weblog. It is a blogpost promoting a nice compilation of sketches in a very early state of the design process to showing the beauty of imperfectness.

A sketch is more than just a drawing — it’s a representation of an idea that is shown with a specific amount of detail, for a specific purpose.
— via zurb.com, Sketching

Sketching within wireframes

Wireframe Details

Of course there is no right way on how to get started with prototyping an idea. The key to happiness is just to get started anyway. So for me sketching within wireframes is working quite well because it is a way to develop quick rough prototypes without loosing sight of the width-to-height ratio. I can concentrate on the layout of all the elements, keeping the container in subconsciousness.
In my mind it is a great way to initiate the design process with the intention for the final application (even for responsive layouts).

Design is thinking made visual.
— Saul Bass

 

On the one hand there is no need to having wireframes of the latest iPhone; all that counts is having a container for mobile devices respectively devices in general. But on the other hand it is important to knowing all the elements within the device e.g. the status bar, the browser bar, the navigation bar and of course the keyboard!

Wireframes

Therefore you can download these vector wireframe templates (with little marks for the status bar and keyboard) for your sketches:

» Download: Wireframes Bundle (Print PDF, DIN A4, ca. 15KB)
» Download: Mobile Wireframe, Landscape (Vector PDF, ca. 159KB)
» Download: Mobile Wireframe, Portrait (Vector PDF, ca. 166KB)
» Download: Tablet Wireframe, Landscape (Vector PDF, ca. 170KB)
» Download: Tablet Wireframe, Portrait (Vector PDF, ca. 163KB)
» Download: Mobile Wireframe, Landscape (Vector SVG, ZIP Archive ca. 61KB)
» Download: Mobile Wireframe, Portrait (Vector SVG, ZIP Archive ca. 69KB)
» Download: Tablet Wireframe, Landscape (Vector SVG, ZIP Archive ca. 69KB)
» Download: Tablet Wireframe, Portrait (Vector SVG, ZIP Archive ca. 62KB)
» Download: Mobile Wireframe, Landscape (Vector EPS, ZIP Archive ca. 102KB)
» Download: Mobile Wireframe, Portrait (Vector EPS, ZIP Archive ca. 110KB)
» Download: Tablet Wireframe, Landscape (Vector EPS, ZIP Archive ca. 110KB)
» Download: Tablet Wireframe, Portrait (Vector EPS, ZIP Archive ca. 102KB)
» Download: Mobile Wireframe, Landscape (Vector AI, ZIP Archive ca. 916KB)
» Download: Mobile Wireframe, Portrait (Vector AI, ZIP Archive ca. 924KB)
» Download: Tablet Wireframe, Landscape (Vector AI, ZIP Archive ca. 925KB)
» Download: Tablet Wireframe, Portrait (Vector AI, ZIP Archive ca. 917KB)

Wireframe Sketches Admin Panel

Wireframe Sketches User Panel

For continuing the design process keep in mind that there are various user interface guidelines for designers & developers, so go take a cup of coffee and study these important resources:

» Designing for Android (User Interface Guidelines)
» Designing for Apple (iOS Human Interface Guidelines)
» Designing for BlackBerry (User Interface Guidelines)
» Designing for Windows Phone (User Interface Guidelines)