A Collection of Printable Sketch Templates and Sketch Books for Wireframing

Written by Ivana Jurčić @ January 3rd, 2010

At the beginning of a web (or application) development project I always create the sketches first. While sketching can be done on a blank paper, it’s much better to use a sketch template. For me that is the best and most productive way to work on and improve my ideas before application development begins (and things get more complicated :-)). This way I won’t pay too much attention to some details that should be taken care of later, but stay focused on general layout and functionality.

Below you will find more than 20 resources that you can use in sketching phase of application development. If you have some additional resources to share, please leave a comment so I can add them to the list.

And, of course, don’t forget to share your wireframes on I ♥ wireframes :-)

Printable sketch templates for websites

These are some pretty good, printable sketch templates for website design.

Browser Sketch Pad (PDF)


Browser Sketch Pad by Design Commission — see original source

960 grid template


960 grid template by Nathan Smith — see original source

Graph paper


Graph paper by Konigi — see original source

Paper browser


Paper browser by Rain Creative Lab — see original source

MBTI sketching paper for ideation


MBTI sketching paper for ideation by Concept7 — see original source

Sketching grid paper


Sketching grid paper by Concept7 — see original source

6 pages template


6 pages template by nunile — see original source

Paper wireframe templates


Paper wireframe templates by Jason Robb — see original source

Sketchboards


Sketchboards by adaptive path — see original source

Wireframe template


Wireframe template by Alfonso Bozzelli — see original source

Printable sketch templates for mobile applications

Due to raising popularity of iPhone and Google Android platforms, you might get a few mobile application design projects from time to time. So be prepared. Below you’ll find a few of them that I used and recommend.

iPhone UX Sketch Templates


iPhone UX Sketch Templates by Erik Loehfelm — see original source

iPhone Sketch Pad (PDF)


iPhone Sketch Pad by Design Commission — see original source

iPhone Application Sketch Template


iPhone Application Sketch Template by Oliver Waters — see original source

iPhone Wireframe Templates for Sketching


iPhone Wireframe Templates for Sketching by Evan K. Stone — see original source

iPhone App Wireframe Template


iPhone App Wireframe Template by full of design — see original source

Sketch Books

You may prefer to buy a finished product, a sketchbook. Or perhaps you’re just too lazy to print the ones that are downloadable :). Anyway, here’s the list of sketchbooks I recommend:

Browser Sketch Pad

Graph paper pad with browser chrome on top.


Browser Sketch Pad by Design Commission — see original source

  • 8.5 X 11 Inches
  • 50 Sheets in a pad
  • 70 lb Paper
  • Chip board back

Wireframe Graph Paper Notepad


Wireframe Graph Paper Notepad by Konigi — see original source

  • 50 sheets
  • 8 1/2 x 11 inches on white opaque vellum paper

Storyboard Notepad


Storyboard Notepad by Konigi — see original source

  • 50 sheets
  • 8 1/2 x 11 inches on white opaque vellum paper

Dot Grid Book


Dot Grid Book by Behance — see original source

  • Semi-Hard Suede-touch Cover
  • 9 x 10.5 Inches
  • 50 pages, 80lb Premium Blend Paper
  • Double spiral (black)

App Sketchbook

Quickly put your iPhone® app designs on paper.


App Sketchbook by Stephen Martin — see original source

  • 50 Double-sided pages
  • 3 real-size iPhone® templates per page
  • Pixel (20px) ruler and title bar markings
  • Ruled section for your development notes

iPhone Sketch Pad


iPhone Sketch Pad by Design Commission — see original source

Has one phone silhouette on the front side and three on the back. 200 possible screens per pad.

  • Printing on both sides
  • Grid lines
  • 8.5 X 11 Inches
  • Project name, Screen, and Date fields
  • 50 sheets, 70 lb paper
  • Cardboard back

Notepod


Notepod by Jacky Winter and Inventive Labs — see original source

  • Three 60 x 110mm
  • 100pp Notepods printed on both sides
  • 80gsm laser throughout with a stiff black strawboard back

Make your own sketch templates

Free Online Graph Paper / Grid Paper PDFs

Downloadable and very printable.


Free Online Graph Paper by Incompetech — see original source

139 Responses to “A Collection of Printable Sketch Templates and Sketch Books for Wireframing”

Piotr

January 3rd, 2010 at 23:21

amazing list,

thanx for posting

idcontent

January 4th, 2010 at 10:06

Lot of thanx. This templates are very useful in everyday work

Design That Rocks

January 4th, 2010 at 15:59

Very useful list of templates…thanks for the compilation!

raquel

January 4th, 2010 at 21:34

One of the best present I could imagine
Thanks a lot
xxxx

From Madrid_ Spain

links for 2010-01-04 | Svakodnevnica blog

January 4th, 2010 at 23:06

[...] A Collection of Printable Sketch Templates and Sketch Books for Wireframing Sjajan kolekcija printabilnuh šablona za UI web projektovanje (tags: design templates ui pdf prototyping wireframes) Podelite ovaj sadržaj sa drugima: [...]

Eric

January 5th, 2010 at 16:13

Very helpful. Thank you.

WebDesignExpert.Me

January 5th, 2010 at 16:18

Thanks for sharing this neat and useful collection of wireframing/prototyping resources! Linked in from my blog!

jQuery tabSlideOut | WebDesignExpert.Me

January 5th, 2010 at 16:20

[...] A collection of printable sketch templates and sketch books for wireframing – Link. [...]

Regine Lambrecht

January 5th, 2010 at 16:59

Very useful ! Is there somewhere a rule for basic shapes (same as the small one for IPhones, but for website design) ?

Ginger Jones

January 5th, 2010 at 23:23

Thank you! Thank you! Thank you! I’m always on the hunt for good wireframing tools!

Keep the resources coming!

sosmedia

January 6th, 2010 at 18:53

Nice resource of useful printouts. Beats my hand-drawn rectangles any day. Thanks!

Lars Daniel Forseth

January 6th, 2010 at 18:59

Very very useful, thanks a lot for Sharing! :)

dave vogler

January 6th, 2010 at 19:03

awesome! thank you for this list. Its so helpful to get away from the computer and noodle things out on paper. Very helpful tools here.

Shannon

January 6th, 2010 at 19:08

This is a fabulous aggregated resource for these templates. Many thanks for the post!

kerina

January 6th, 2010 at 19:15

Thank you! Fabulous resource – now I don’t have to keep searching :)

Frank

January 6th, 2010 at 19:51

Thank you very much! For me wireframing is an important step in my own design and development processes. With the resources you posted here the work will be even more fun as it was until now. Cheers, Frank.

Ricardo

January 6th, 2010 at 20:42

Great! Thnx for de list…
Grtz. Ricardo

Rebecca

January 6th, 2010 at 21:43

That is a helpful list. While inspiration should not be discounted planning and organizing are also critical.

[...] Shared A Collection of Printable Sketch Templates and Sketch Books for Wireframing. [...]

Abulafio

January 7th, 2010 at 01:08

Useful, thanks!

Ryan Price

January 7th, 2010 at 02:13

We released an iPhone sketch sheet that we use when working on app projects.

None of the other forms had quite what we needed when we went looking.

links for 2010-01-06 | Digital Rehab

January 7th, 2010 at 02:36

[...] geekchix.org – Ivana Jurčić – Lilit » Blog Archive » A Collection of Printable Sketch Te… (tags: templates wireframe design prototyping sketch wireframes tools) [...]

Angelo Beltran

January 7th, 2010 at 06:38

@angelobeltran

Bookmarked! Thank you for this awesome resource.

[...] geekchix.org – Ivana Jurčić – Lilit » Blog Archive » A Collection of Printable Sketch Te… At the beginning of a web (or application) development project I always create the sketches first. While sketching can be done on a blank paper, it’s much better to use a sketch template. Below you will find more than 20 resources that you can use in sketching phase of application development. (tags: wireframe templates sketch webdesign tools) [...]

[...] are some pretty good, printable sketch templates for website design. Share and [...]

[...] geekchix.org – Ivana Jurčić – Lilit » Blog Archive » A Collection of Print… – Below you will find more than 20 resources that you can use in sketching phase of application development. If you have some additional resources to share, please leave a comment so I can add them to the list. Share and Enjoy: [...]

[...] Há uns tempos atrás li dois artigos de blog Time Tracking on Paper e Designing Web Sites Using Pencil and Paper que me impressionaram quer pelo obvio, quer pela simplicidade, e logo no momento tive a percepção de que em volta de ferramentas deste tipo se poderia desenvolver alguma metodologia simples de abordagem em trabalhos de pequena dimensão. Sobre este assunto veja-se até este extraordinário conjunto de formulários para a execução de sketches e o projecto grafico de um website: A Collection of Printable Sketch Templates and Sketch Books for Wireframing [...]

Bas Mennink

January 11th, 2010 at 01:17

Very nice! Thank you. Makes me want to start using them right away. In times of the goldrush the guys that got really rich were the ones that provided the tools. ;)

[...] geekchix [...]

Weekly links | USiT

January 13th, 2010 at 04:27

[...] Jurčić shares A Collection of Printable Sketch Templates and Sketch Books for Wireframing and Todd Warfel has made available his templates used for his “rapid sketching and peer [...]

Paul Anthony Webb

January 13th, 2010 at 07:32

Well … all I can say is, wow. This is an impressive collection of resources, thank you for taking the time to put everything together.

[...] // Geekchix.org Vía // [...]

Donnie Bachan

January 14th, 2010 at 14:14

This is an excellent list, a lot of designers/developers choose to ignore this bit of the process and the project usually suffers because of it. There are online tools for prototyping (one of my favourites is Balsamiq Mockups) but call me old fashioned but there is something about hand drawn stuff that really appeals to most clients. Thanks for the list!

Partial Recall » Links for 2010-01-12

January 14th, 2010 at 15:19

[...] A Collection of Printable Sketch Templates and Sketch Books for Wireframing [geekchix.org - Jan 03, ... – Below you will find more than 20 resources that you can use in sketching phase of application development. If you have some additional resources to share, please leave a comment so I can add them to the list. [...]

Stjepan Tafra

January 14th, 2010 at 19:06

Izvrstan i nadasve koristan članak. Svaka čast i puno pozdrava! :)

Mark Pollard

January 15th, 2010 at 02:15

Fantastic list. Thank you!

[...] Plantillas imprimibles Compartir: [...]

[...] Jurčić a compilé sur son site Geekchix.org un superbe ensemble de ressources pour qui a besoin de maquetter des applications iphone et des [...]

[...] en Intenta una interesante recopilación de plantillas listas para imprimir y poder realizar nuestros bocetos tanto para páginas web, aplicaciones para [...]

Osvaldo Osorio

January 17th, 2010 at 22:37

Very usefull list. Thank you.

[...] GeekChix.org, han hecho una interesante recopilación de una serie de plantillas listas para imprimir y rellenar con nuestras ideas. Y sin darnos cuentas, habremos realizar fácilmente una serie de [...]

[...] Plantillas imprimibles para ilustrar nuestras ideas http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-s…  por CIB3R hace 3 segundos [...]

Plantillas para rascuños ás Tati Mancebo

January 18th, 2010 at 12:05

[...] geekchix.org – Ivana Jurčić – Lilit » Blog Archive » A Collection of Printable Sketch Template…. Publicado en Recollido | Sin Comentarios [...]

[...] a Geekchix para ver la recopilacción de plantillas. Etiquetas: Boceto, Cliente, iPhone, Navegador, [...]

[...] a Geekchix para ver a recopilacción de persoais. Descargar en PDFClic aquí para [...]

[...] resuelto y hay plantillas de grids 960, de ventanas de explorador, de dispositivos moviles, etc.Visitar Etiquetado con: diseño, herramientas, templates, wireframe Deja un comentario Comentarios (0) [...]

[...] chicos de geekchix.org hicieron una serie de plantillas bastante interesantes. Date una vuelta por aqui. Si te sirvio o simplemente te gusto lo que aqui escribimos invitanos un cafe. [...]

[...] a collection of printable sketch templates and sketch books for wireframing comparte este post con el resto del mundo y tus amigos También te [...]

David Daniel

January 18th, 2010 at 19:40

Useful templates! Thanks!

[...] GeekChix.org, han hecho una interesante recopilación de una serie de plantillas listas para imprimir y rellenar con nuestras ideas. Y sin darnos cuentas, habremos realizar fácilmente una serie de [...]

[...] “wireframes” o “grises”, aquí les dejo algunos que selecciones del sitio http://www.geekchix.org, pueden ser los que mas apliquen para el diseño [...]

[...] geekchix.org – Ivana Jurčić – Lilit » Blog Archive » A Collection of Print… – A Collection of Printable Sketch Templates and Sketch Books for Wireframing [...]

[...] http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-... En: Diseño Industrial, Diseño Web, Diseño editorial, Diseño gráfico, Ilustración, Imagen Corporativa, Packaging, Pre-impresión, Recursos Por: J Galaron – 19 Ene 2010 0 Comentarios [...]

[...] la colección de wireframes para diseño web que han publicado en geekchix.org [...]

Eric Haidara

January 21st, 2010 at 09:48

Thank you for the list. This will certainly help me out a lot when you I must sketch on a shoe string budget.

[...] nel vostro compito.Se siete interessati e volete saperne di più vi rilascio al post ufficiale A Collection of Printable Sketch Templates and Sketch Books for Wireframing Categorie: Varie Tags: disegno, grafici, mano libera, wireframe Commenta [...]

[...] gli amanti della carta ecco delle basi cartacee da stampare per creare i vostri wireframe, e ringrazio Markdvl per la [...]

[...] A Collection of Printable Sketch Templates and Sketch Books for Wireframing [...]

TheJoe

January 23rd, 2010 at 10:09

wow.. the “Browser Sketch Pad” doesn’t work..

Imran Younis

January 23rd, 2010 at 18:43

Thanks for sharing very useful.

Rolando Peralta

January 24th, 2010 at 07:02

Impressive list! thanks a lot for sharing all of them!

Phil

January 24th, 2010 at 07:38

These will work well in homemade notebooks designed to look similar to Moleskine notebooks, which are easy to make with a sewing machine in any size needed. Cool.

prasetyo benediktus

January 24th, 2010 at 10:59

thx a lot , u make my day. nice post,

[...] Jurcic собрала большую коллекцию готовых для печати шаблонов для создания wireframe’ов [...]

[...] Posted by Salman on Jan 24th, 2010 and filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0. You can leave a response or trackback to this entry via geekchix.org [...]

Elisabeth

January 24th, 2010 at 22:43

Increíble post

Gracias

We love to sketch

January 25th, 2010 at 06:22

[...] Ivana Jurcic posted a lovely collection of printable paper-based wireframe templates and sketch books. Perfect for printing and [...]

J0nH-Do3

January 25th, 2010 at 16:48

Great Job! Very useful :D

[...] Y para tener una base al iniciar un diseño se han hecho un buena cantidad de plantillas imprimibles: [...]

[...] via geekchix.org – Ivana Jurčić – Lilit » Blog Archive » A Collection of Printable Sketch Te…. [...]

W wie Wireframing « Markusels Blog

January 27th, 2010 at 21:36

[...] Wireframe Templates [...]

Plantillas imprimibles para el diseño web

January 28th, 2010 at 11:16

[...] Plantillas imprimibles para el diseño web [...]

Daniel Ameneiros

January 28th, 2010 at 14:21

Magnífico… mil gracias por compartirlo!!!

IhateDesign

January 28th, 2010 at 15:26

amazign article! im subscribe now!!

[...] Design-Vorlagen Eine schöne Sammlung von Design-Vorlagen findet sich auf geekchix.org [...]

Dawid

January 29th, 2010 at 13:08

hej guys,

when I click on the “Browser Sketch Pad (PDF, A4 Sized Template)” link, the pdf doesnt open. just the website with the shop.

how I can download the sketch browser sketch pad ?

Christian

January 29th, 2010 at 17:24

Great idea, Thank youuu!

Christian

[...] Geekchix.org realizaron una recopilación verdaderamente impresionante de plantillas listas para imprimir y usar [...]

[...] geekchix Me Gusta No me Gusta Etiquetas: gratis, Mac, plantillas, plantillas gratis, Temas, themes [...]

[...] Wenn euch die bereits zuvor empfohlenen Wireframing-Vorlagen nicht ausreichen, dann ist vielleicht diese Zusammenstellung von geekchix.org etwas für euch. Dort findet ihr viele druckbare Wireframing-Templates für die Entwicklung von [...]

t3n.de/socialnews

February 1st, 2010 at 14:42

Große Zusammenstellung von Wireframing- und Sketching-Vorlagen…

Ivana Jurčić hat auf ihrem Blog eine große Auswahl kostenloser Wireframing- und Sketching-Vorlagen zusammengestellt, die kein Designer missen sollte….

iPhone Wireframes | KevFoo

February 2nd, 2010 at 06:11

[...] stumbled across a great collection of iPhone wireframe templates tonight while going through my feeds.  It got me thinking about the process I’ve been using [...]

Tools for thrashing early | Daily Sense

February 4th, 2010 at 07:35

[...] you’re more of a hardcopy person (I sometimes use both), Geek Chix has a super handy list of sketch templates you can print for [...]

Wireframes | GoPymes's Blog

February 4th, 2010 at 08:18

[...] por ahi encontré, una web que tiene bocetos del browser ya dibujado listo para imprimir y hacer tus wireframes más sencillo aun, personalemnte lo uso y lo [...]

[...] GEEKCHIX.ORG: A COLLECTION OF PRINTABLE SKETCH TEMPLATES AND SKETCH BOOKS FOR WIREFRAMING [...]

[...] GeekChix [...]

[...] GeekChix [...]

[...] Größenverhältnisse einzuhalten und sich das Zeichnen von Grids und Browserelementen zu ersparen. Ivana hat eine super Sammlung verschiedener Papiervorlagen für Wireframes und Skizzen zusammengetragen. [...]

Network Software Services, Inc.

February 7th, 2010 at 21:37

Here is an iPad Sketch Mockup tool that is just an outline. It does not use a ton of ink when printing. http://www.netsoftservices.com/tools/NSS-iPad_stencil_trace.pdf

Mike Sinkula

February 8th, 2010 at 23:57

I have posted this article for my students: http://www.sccc.premiumdw.com/web200/content-layout/

[...] Link: A Collection of Printable Sketch Templates and Sketch Books for Wireframing [...]

suntrack

February 10th, 2010 at 19:11

Wow, this is cool.

Thanks

Peter S

February 10th, 2010 at 19:20

Awesome Roundup of Wireframing and Prototyping resources. Love starting on Paper. We use the Grid 960 ones quite a bit. Also have used the Behance books but they are so nice feel guilty just sketching in them.

Great Post!

Dave Wooldridge

February 10th, 2010 at 22:00

Thanks for compiling all of those resources into such a great article!

And don’t forget The Developer Sketchbook for iPhone Apps for those developers who like to keep their designs organized in a printed book: http://www.developersketchbook.com/

printējamās sagataves | radikaalz blogs

February 10th, 2010 at 22:08

[...] Te būs pamatīga kolekcija ar printējamām sagatavēm mājaslapu vai Iphone aplikāciju radīšanai. [...]

Sbuster

February 11th, 2010 at 00:05

Exelente son muy utiles para cuando me inspiro para hacer bocetos…..Yeah!

Thanks!

Sbuster
Caracas, Venezuela

[...] Collection Of Printable Sketch Templates (0) Comentarios Tags: plantillas, sketch, [...]

Jure

February 12th, 2010 at 10:27

Very, veryyyy useful!!!! Thanks a lot!

[...] La ventaja es que ahora no tenemos por qué arrancar de un papel en blanco. Aquí tienes unas plantillas imprimibles para que después completes tus wireframes o maquetas a mano. [...]

Designen auf Papier

February 15th, 2010 at 13:41

[...] gern beim Kunden scribbelt oder prinzipiell lieber mit dem Stift arbeitet, findet unter http://www.geekchix.org interessante “Paper-templates”. Dieser Beitrag wurde veröffentlicht in Allgemein. [...]

Heti események | I build websites

February 16th, 2010 at 10:56

[...] Shared geekchix.org – Ivana Jurčić – Lilit » Blog Archive » A Collection of Printable Sketch Template…. [...]

Maurice

February 17th, 2010 at 13:35

I immediately bookmarked this page. Thanks for compiling these handy templates for everyone — it will save a lot of people a lot of time.

[...] Enlase [...]

Praveen Verma

February 18th, 2010 at 18:54

This is super cool!

Frank

February 19th, 2010 at 10:03

Sensational. Thanks.

Mary Lou

February 21st, 2010 at 23:42

Wow, this is superb! Awesome collection, thank you so much!

[...] продуктивнее, чем на обычном листе бумаги. В подборке “A Collection of Printable Sketch Templates and Sketch Books for Wireframing” Ивана Юрчич, автор подборки I ♥ wireframes, собрала около 20 [...]

Montaglinks – 22.2.2010 - Pixel-Monster.de

February 22nd, 2010 at 13:39

[...] Geekchix finden sich einige Sketch Templates für Designer die gern erst auf dem Papier [...]

hackcorp

February 23rd, 2010 at 01:34

Wow! Great list. Thanks for sharing, bookmarked and printing out some, should help me a lot in early design stages!

corexman

February 23rd, 2010 at 05:33

very good!!!! thanks!~

Linkdump 79 | ettf.net

February 24th, 2010 at 21:57

[...] A sweet collection of printable sketch templates for wireframing [...]

Los recursos Web | el blog de Club Lugosi

February 25th, 2010 at 12:30

[...] veces sólo necesitamos la captura de un navegador para hacer un wireframe para un cliente como el que ilustra esta [...]

Vladimir Grichina

February 25th, 2010 at 20:54

We have designed own sketchbook specifically for iPad apps design. It is mostly similar in spirit with AppSketchbook.

You can check it at http://www.ipadsketchbook.com/en.

We will ship worldwide, pre-order is available as for now.

I think it would be nice if you add mention of it to your post.

plantillas « Redefinekeys

February 27th, 2010 at 12:58

[...] por Ivana Juric, esta colección de plantillas, que ofrece este link es una de las herramientas más potentes que existen, aparte de lápiz, papel y computadora. Con [...]

cssclassic

February 28th, 2010 at 04:29

Nice posting, Excellent one

H.F.Kais

March 2nd, 2010 at 11:33

Wow! I love that! thanks!

[...] geekchix.org – Ivana Jurčić – Lilit » Blog Archive » A Collection of Printable Sketch Te… (tags: templates webdesign design resources tools web ia ui wireframes layout grid sketch wireframe startup) This was written by sarvesh. Posted on Wednesday, March 3, 2010, at 8:03 pm. Filed under Uncategorized. Bookmark the permalink. Follow comments here with the RSS feed. Post a comment or leave a trackback. [...]

Toronto Photographer

March 6th, 2010 at 14:04

I will build some too … thanks for the idea!!!

Alex Grande

March 6th, 2010 at 16:02

Nice list! We have done something similar for mobile design – http://www.wearepharaoh.com/pdfs/mobile_wireframe.pdf

[...] GEEKCHIX.ORG – Una colección de plantillas y sketch books para hacer nuestros wireframes [...]

Little Lou

March 9th, 2010 at 17:05

Really excellent collection of resources. Thanks for sharing.

Jason Grant

March 10th, 2010 at 01:46

This is a real keeper of a link.
Have seen it once before, but on the second viewing it’s even more relevant! :-)
Being able to print off (many of) these templates is so useful, relevant and cool.
I specially like the iPhone (mobile) ones, which can be cut out and stuck or re-arranged on a desk.

Venkat Korasala

March 10th, 2010 at 05:13

This is an amazing, excellent and wonderful post in terms of content, ideas and resources. I really liked i-phone sketchpad idea. Instead of sketching the shell repeatedly, one can focus on the interaction details.

sumeet basak

March 10th, 2010 at 09:10

too cool for school!
awesome ideas

Dave Jones

March 10th, 2010 at 22:57

Great set of links – one to bookmark!

I’m currently using 960gs for sketching wireframes but will try out a few of these for sure.

David

March 15th, 2010 at 11:51

¡Muchas gracias por el post!

[...] collection of printable sketch templates for wireframing at Geekchix.org. Filed Under: Bookmarks Tags: design, tools, ui, [...]

[...] Visit the geekchic.org website to view the full post and download the templates. [...]

DTM

April 6th, 2010 at 03:14

Amazing! thank you very much for all you put together.