This site is designed to work with IE7 or greater. Please consider upgrading your browser.

Graph Paper

About

This 8.5 x 11 inch graph paper is made for visual designers, interaction designers, and information architects. You'll find styles for wireframing user interfaces, story boarding interaction, and plotting values on a two by two grid. Plus you'll get a basic grid for drafting sitemaps or anything else that might come up.

Scanning

These pages are great for sketching, but also work well when producing high fidelity drawings. The title bar and grid lines are non-photo blue, so you can easily remove them when scanned. The thick black lines for boxes will show in scans and are 2px wide to match the weight of Pentel Sign Pens.

Download

Download all of the PDF files.
You can also buy notepads from the store!

This template is free to use, but may not be distributed without permission. If you like it, a donation is appreciated.

Wireframe with Notes

This is a wireframe grid divided into 24 columns with gutters between each column. The grid is especially useful to designers who are working within a CSS framework such as Blueprint, which also divides its grid into 24 units, so setting up common divisions is easy (1/4 + 3/4, 1/3 x 3, 1/3 + 2/3, 1/2 x 2, etc.). The column units are numbered along the top of the grid. To the right of the grid is a ruled column for adding labels and annotations.

Download wireframe and notes paper

Wireframe (Landscape)

The grid in this graph paper is identical to the wireframe with notes, but the notes section is removed to make room for a wider page schematic.

Download wireframe paper

Wireframe (Portrait)

The grid in this graph paper is identical to the wireframe with notes, but the notes section is removed to make room for a wider page schematic.

Download wireframe paper

Storyboard

This is a storyboard with 4 cells. Each cell provides a simple grid.

Download storyboard paper

Storyboard with Notes

This is a storyboard with 4 cells. Each cell provides a simple grid. The area beneath each cell is ruled for notes.

Download storyboard paper

Two-by-Two

This is a two by two grid with 4 cells divided by an x-y axis.

Download two-by-two paper

Basic

This is a basic grid box. Use it for concept diagrams, sitemaps, spectrums, tables, and whatever else you might sketch.

Download basic paper

More Grid Tools

To make the most of this system, a designer can complete their process by using other templates and tools that utilize the same grid system, such as grid notepads, an OmniGraffle wireframe template, Adobe Photoshop template, and Adobe Illustrator template.

Comments

juanjo's picture
juanjo
06/29/08 09:07

This is excellent, thank you!

Advertisement
Anonymous's picture
Cameron Senior
07/03/08 05:27

Great - thanks for this!

Anonymous's picture
Anonymous
07/03/08 05:28

Brilliant! These are great!

Anonymous's picture
Vocescuola - Graph Paper
07/03/08 08:21

[...] Per chi progetta interfacce utente per siti web o cd-rom, sviluppa contenuti per il web o in generale necessita di una base di partenza per la realizzazione di storyboard potrebbe essere utile l’utilizzo dei paper realizzati da Konigi. [...]

[...] Graph Paper [konigi] EXCERPT: “This graph paper is made for visual designers, interaction designers, and information architects. You’ll find styles for wireframing user interfaces, story boarding interaction, and plotting values on a two by two grid. Plus you’ll get a basic grid for drafting sitemaps or anything else that might come up.” [...]

Anonymous's picture
gaston monescu
07/04/08 23:47

reminds me of how thomas pynchon wrote gravitys rainbow on graph paper with a mechanical pencil

[...] Graph Paper | Made for web designers This graph paper is made for visual designers, interaction designers, and information architects. (tags: layout paper pdf print webdesign) [...]

Advertisement

[...] Graph Paper | Konigi Carta millimetrata… si sa mai… (tags: layout webdesign webmaster) [...]

Anonymous's picture
Wireframes | Isopixel
07/05/08 13:31

[...] Graph Paper (Plantillas para descargar) - Konigi [...]

Anonymous's picture
links for 2008-07-06
07/06/08 00:31

[...] Graph Paper | Konigi (tags: download resource templates ui design pdf) [...]

[...] come i geometri e gli architetti la usano, ecco delle griglie preparate da Konigi e che a mio parere sono molto utili.  Tutto questo per suggerire, a chi non lo [...]

[...] Carta millimetrata per webdesigner [...]

[...] Graph Paper This entry was written by Mkl and posted on 6 juillet 2008 at 19:36 and filed under Url. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « Hoist the Colors [...]

Advertisement
Anonymous's picture
Chris Johnson
07/07/08 16:02

Great layout tool! Much appreciated!

Anonymous's picture
giuseppe
07/07/08 18:05

Very useful.Thansk!

[...] Graph Paper | Konigi (tags: templates design paper webdesign wireframes pdf blueprint) [...]

[...] Grids for printing - pdf - Konigi [...]

Anonymous's picture
Napolux
07/08/08 20:57

Really useful, thank you!

[...] free to browse the archives, but what I liked best was these graph paper templates, because hey, you can never stop using pencil and paper in UI [...]

[...] Por si se saltean los comentarios, JDiick ha colaborado con un excelente enlace de grillas gráficas para bocetado. [...]

[...] Graph Paper | Konigi This graph paper is made for visual designers, interaction designers, and information architects. You’ll find styles for wireframing user interfaces, story boarding interaction, and plotting values on a two by two grid. (tags: design paper webdesign wireframes blueprint) Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

[...] Graph Paper | Konigi for grids based design (tags: css design paper templates webdesign) [...]

Anonymous's picture
A Graphic Designer
07/14/08 05:06

This is great, I'm sure to use it!

Anonymous's picture
Pittsburgh News
07/15/08 14:41

Awesome, thanks for the grids!! you rock!

Anonymous's picture
denise
07/16/08 12:42

Sehr nützlich - vielen Dank!

[...] Link: Graph Paper [...]

[...] collezione di fogli di carta millimetrata e suddivisa in griglie messa a disposizione sul sito di Konigi. Troverete diversi stili per la creazione delle interfacce utente, per gli storyboard [...]

Anonymous's picture
DagoGrenet
07/26/08 21:04

Esto es un superpost"!"!!

[...] Graph Paper | Konigi. Posted in Design | Leave a Comment [...]

[...] Printable Graph Paper: This is probably my favorite resource to date. The paper is made for visual designers, interaction designers, and information architects who do wire framing and design sketch ups. [...]

[...] Graph paper For someone with several online notes repositories and TiddlyWikis, I’m still a [...]

Anonymous's picture
Anonymous
08/09/08 15:31

A4 version please!!!!

[...] Graph Paper | Konigi [...]

[...] en anglais, mais très simple à comprendre, le site KONIGI propose aux designers 7 “graphiques” de mise en forme à imprimer (format PDF), afin de [...]

Anonymous's picture
Anonymous
08/15/08 21:11

210 mm x 297 mm - old DIN A4 would be nice, too.
Thank you anyway!

[...] en anglais, mais très simple à comprendre, le site KONIGI propose aux designers 7 “graphiques” de mise en forme à imprimer (format PDF), afin de [...]

[...] Graph Paper | Konigi Several graph paper designs suitble for your next storyboard or "on paper" design session. (tags: resources tools layout) SHARETHIS.addEntry({ title: "links for 2008-08-19", url: "http://michaelwender.com/2008/08/19/links-for-2008-08-19/" }); This entry was written by Michael, posted on August 19, 2008 at 2:58 pm, filed under Links. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « links for 2008-08-18 [...]

Anonymous's picture
Web Design
08/30/08 07:29

I never fail to be amazed by people like you that give so much back to the community. Thank you very much.

[...] Konigi - Specifically for web designers, information architects, and other visual designers, Konigi features high-quality graph papers in a variety of formats complete with title bars and non-photo blue so you can easily remove your guides when scanning. [...]

[...] Graph Paper | Konigi (tags: webdesign ui grid) [...]

Anonymous's picture
Quelques sites dignes ...
09/07/08 16:21

[...] en anglais, mais très simple à comprendre, le site KONIGI propose aux designers 7 “graphiques” de mise en forme à imprimer (format PDF), afin de [...]

Anonymous's picture
The Hip Zone
09/10/08 23:00

Those are amazing. I was looking for them to use in my newly coding template. I think we can do some amazing artwork with them.

Anonymous's picture
Ivan Nikolic
09/14/08 20:01

Nice, thanks!

Anonymous's picture
PeachGarden
09/16/08 20:13

[...] KONGIのGraph Paper使いようによってはいろいろな使い道が出来そうですね。 WEBデザインのデザイン案とか、フライヤーデザインのラフ絵を書いたりなど。 KONGI-Graph Paper [...]

Anonymous's picture
stonematrix
09/17/08 10:56

Really very nice.

[...] por isso por disponível para download num único ficheiro, com todos os tipos de papel (360KB) ou individualmente consoante as suas necessidades. Não deixe de ir consultando regularmente a secção [...]

[...] Free downloadable graph paper for wireframing and storyboarding. [...]

[...] can find the free printable storyboard graph papers in the tools section. Notepads are on sale here. URL konigi.com/ [...]

Anonymous's picture
kanick
09/26/08 06:41

Thank you so much. its tremendous and cool.

[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]

[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]

Anonymous's picture
Jawad A. Bhatti
09/29/08 01:21

Great stuff! Would love to see logarithmic paper, if possible.

[...] Download templates here: Graph Paper [...]

[...] heve a wide selection of printable graph paper for webdesigners, visual developers or anyone who wants easy to produce graph [...]

[...] Graph Paper | Konigi [...]

Anonymous's picture
Erik Pettersson
09/29/08 12:19

Amazing work! This will become useful for my next projekt.

Anonymous's picture
Gio
09/29/08 13:55

Excellent work! Thank you and keep up the good work.

Anonymous's picture
Alex Morse
09/29/08 15:35

Thank you very much. Great idea, well executed, super useful!

Anonymous's picture
PDF Grids | We Design It
09/29/08 17:17

[...] disponíveis aqui vários pdf’s, com variadas grelhas especialmente destinadas aos webdesigners e designers de [...]

[...] Graph papers for wireframing user interfaces, story boarding interaction, and plotting values on a two by two grid.  [...]

Anonymous's picture
AnalogPanda
09/29/08 20:19

these are very similar to the sketch sheets provided in http://960.gs/ - very surprising to see no mention of 960.gs here. Although I like these a bit better than the 960.gs ones because these don't include browser chrome.

jibbajabba's picture
jibbajabba
09/29/08 21:09

@AnalogPanda: These graph papers were originally made for Blueprint CSS Framework users, and the original model for these was based on the Photoshop templates I made for Blueprint users in 2007 and later posted along with Illustrator versions to the Blueprint list. My UX Templates which have been available at that same URL for years were updated to use Blueprint grid/guides for the same unit numbers and gutters as well around the same time. I do want to point out that the wireframe graph paper DOES mention Blueprint.

I'm not a 960gs user so I didn't know about that sketch paper. Since the 960gs was inspired by the grid proposed by the same designers that lead to Blueprint, there wouldn't be much difference in the grid. I just downloaded to see what it looks like and there's nothing new there either. In the 13 years I've worked as an information architect and interaction designer, I've based my docs on the standard model I took from mentors over the years of putting wireframe notes in the right so there's nothing new in that either. I would guess that most of us have seen the same model over and over in web design schematics. Here's a screen from a wireframe I did around 2001 for example:

Conventional stuff. The graph paper is meant to provide a blank canvas to draw and annotate these kinds of schematics.

[...] http://konigi.com/tools/graph-paper [...]

[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]

[...] Graph Paper | Konigi (tags: wireframe tools templates) [...]

[...] Graph Paper | Konigi Knowledge management and competitive research community for user experience design on the web. (tags: wireframes webdev webdesign resources tools) [...]

Anonymous's picture
PDF Grids | We Design It
09/30/08 19:05

[...] disponíveis aqui vários pdf’s, com variadas grelhas especialmente destinadas aos webdesigners e designers de [...]

[...] Graph Paper | Konigi (tags: tool template wireframe) « links for 2008-09-29 [...]

[...] Printable wireframing Graph Paper Wireframe with Notes [...]

[...] right paper/journal to sketch your ideas on. So thought this was nice of Konigi to release these free printable graph papers. Made for visual designers, interaction designers, and information architects. You’ll find [...]

[...] Graph Paper | Konigi - Grid paper specifically for web design. Download pdfs or buy pads. [...]

[...] para muchos estudiantes les vendrá del cielo esta recomendación que recibimos de Graphics, ya que Konigi Graph Paper te regala diseños de papel cuadriculado para que los imprimas y los utilices. ¿No te ha sucedido [...]

[...] Graph Paper http://konigi.com/tools/graph-paper [...]

[...] Graph Paper | Konigi [...]

[...] Graph Paper | Konigi [...]

[...] Graph Paper | Konigi (PDF,Free,GraphPaper,Print,Graphics,Design) [...]

Anonymous's picture
Laurent B.
10/08/08 00:09

Really usefull.
Thank you.

[...] http://konigi.com/tools/graph-paper [...]

Anonymous's picture
Delirios de un Inform
10/10/08 15:06

[...] a Torres Burriel llego a Graph Paper, una colecci

[...] a Torres Burriel llego a Graph Paper, una colección de plantillas listas para imprimir para facilitar la tarea de hacer wireframes en [...]

[...] Find them here. [...]

[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]

[...] pour ceux d’entre-vous qui aime réfléchir par le papier, je vous propose les Graph Papers de Konigi : 7 planches papier dédiées à la réalisation de storyboards et [...]

Anonymous's picture
Anonymous
10/13/08 12:57
)thank u thank u this is awsome ;)
Anonymous's picture
Adding meta tags
10/16/08 11:07

Thanks,
It's a very nice site which is useful to us.......!

loren's picture
loren
10/20/08 13:44

I am glad I had the chance to clear this out once and for all, I used to make confusions about these papers and it's recommendable to make confusions at work. No more problems with scanners for me. Thanks!

Anonymous's picture
Michelle
10/21/08 01:16

Thank you. I realize most of your users are adults but this has been very useful for my fifth grader. He is working on wrtting an original folktale and has to turn in storyboards. This is perfect. Thanks for sharing!

jibbajabba's picture
jibbajabba
10/21/08 03:18

@Michelle: That's great! My son is doing stop motion animation and uses the paper notepads I sell from time to time as well. He was the inspiration for that format, although I have use them also myself. -Michael

[...] Look how clever this is! No comments [...]

Anonymous's picture
Tom schavo
10/24/08 04:29

Graph papers made for web designers, sounds interesting.

[...] see our­ top 10 pri­n­­table produ­c­ti­vi­ty­ tools. Gra­ph Pa­pe­r [Kon­­igi via Evil Mad­ [...]

[...] papírok, akkor hasznos lehet ez a gyűjtemény is, ahonnan különböző rácsozású lapokat lehet beszerezni. Vázlatkészítéshez, tervezéshez [...]

Anonymous's picture
Anonymous
11/10/08 21:08

thanks for the graph paper.

Anonymous's picture
Lena Steuern
11/12/08 15:55

Really clever idea for designers. My boyfriend is a graphics student and constantly has to use CAD etc for models on the computer. I´m not sure if he has anything as simple as this, just for drawing NORMAL, non hi-tech pictures. Good old pencil and paper, except with a mouse and a computer! :-)

Lena

[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]

[...] Print your own: You can actually download and print your own PDF graph papers that konigi sells. I guess if I really like this product I should get a printer. [...]

[...] konigi.comFormat: PDF VectorDownload and Preview Diese Icons verzweigen auf soziale Netzwerke bei denen [...]

[...] Graph PaperThis graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up. [...]

Anonymous's picture
Css Tools | ULTRABILISIM
12/10/08 15:55

[...] Graph Paper This graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up. [...]

[...] Graph PaperThis graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up. [...]

Anonymous's picture
Billee D.
12/16/08 19:35

Awesome. Thank you so much. I was waiting for you to replenish your supply of notepads (last time I checked you were SOLD OUT), but now I can use these for interim periods where the notepads are out-of-stock.


Thank you!

[...] 详细的介绍,你可以到方格纸作者的网站去看看:http://konigi.com/tools/graph-paper,希望你能懂得利用好它,如果你有什么心得,希望能拿出来和大家分享。 [...]

[...] Graph Paper | Konigi This graph paper is made for visual designers, interaction designers, and information architects. You'll find styles for wireframing user interfaces, story boarding interaction, and plotting values on a two by two grid. Plus you'll get a basic grid for drafting sitemaps or anything else that might come up. (tags: webdesign ui templates resources) [...]

Anonymous's picture
Web Design Bournemouth
12/19/08 15:17

This is really useful, I think that many people will benefit from this!

[...] Graph Paper This graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up. [...]

[...] Graph Paper 太棒了,这是真是不亚于米字簿的好东西啊,方格子现代版。 [...]

Anonymous's picture
Wheelchair Ramp
01/13/09 17:33

That is really very cool graphic because I have been looking for it since a month. I am wondering to have them immediately by visiting this blog but I am wondering why don't y our blog is not search able in Google for these graphics. Anyways I am very grateful to you for the valuable gift(IO think it is not less than a gift for me)

[...] das ferramentas. O segundo site é um dos que está linkados no The Grid System. É o site da Konigi, área de Graph Papers, uma empresa que cria cadernos para design e que disponibiliza o download de suas páginas quando [...]

Anonymous's picture
Shannon Ribbons
02/07/09 01:49

A handy weapon in any designer's arsenal

[...] Graph Paper This graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up. [...]

[...] Graph Paper | Konigi This graph paper is made for visual designers, interaction designers, and information architects. You'll find styles for wireframing user interfaces, story boarding interaction, and plotting values on a two by two grid. Plus you'll get a basic grid for drafting sitemaps or anything else that might come up. (tags: interface:tools) [...]

Anonymous's picture
T. Mash
02/23/09 21:49

Great for mapping games!Thanks a lot.

[...] more graph paper? Konigi provides a number of awesome stencils aimed at IA’s and visual designers which can be downloaded. Of course writing about graph [...]

Anonymous's picture
Graph Paper from Konigi
02/25/09 20:56

[...] the paper lovers out there, here’s a nice resource for gridded paper. Free downloads [...]

[...] Graph Paper | Konigi Nice set of stencils for wireframing good aid for getting away from the computer (tags: wireframes ux IA scetching) [...]

[...] printable graph paper [...]

Anonymous's picture
promovare
03/15/09 15:22

This is great, I'm sure to use it!

Anonymous's picture
JadMosaic
03/16/09 10:04

A nice and informaive post on graph papers. Thankyou for the post.

[...] Graph Paper - Paper grid for wireframing user interfaces [...]

[...] free stuff! For the paper lovers out there, here’s a nice resource for gridded paper. Free downloads [...]

[...] Graph Paper | Konigi - [...]

[...] Printable Graph Paper: This is probably my favorite resource to date. The paper is made for visual designers, interaction designers, and information architects who do wire framing and design sketch ups. [...]

Anonymous's picture
DISEÑO WEB VALENCIA
03/27/09 13:00

thank you for sharing

Anonymous's picture
clipdepelicula
03/27/09 13:01

usefull thanks

[...] Storyboarding Graph Paper. [...]

[...] paper for wireframes and quick layouts, with non-photo blue gridlines: http://konigi.com/tools/graph-paper [...]

[...] Though Paper Prototypes are rapid, basic and rough in nature there are some tools available in market to make it more better. These sketches can be made attractive by following some simple tips. There are some screen layout with grid printed on it are also available which makes it easy to create good looking prototypes. You can download It at http://konigi.com/tools/graph-paper [...]

Anonymous's picture
Gull Nawaz
05/24/09 17:47

just one world i have to say

"THANKS"

Anonymous's picture
Wilson
07/21/09 23:53

Thanks for sharing this..
This is actually a big help for the artworks
I made..

Anonymous's picture
jason
08/24/09 00:45

This is a great tool. Thanks.

Anonymous's picture
Phaesed
08/30/09 03:43

Awesome, thanks!

Anonymous's picture
Anonymous
09/03/09 03:12

great :D

Anonymous's picture
Saibot
11/01/09 15:52

Very Helpul.. Thanks.

Anonymous's picture
Mitchigun
12/22/09 13:02

Nice post very informative and helpful for designers.Thanks.

Anonymous's picture
Danne
12/25/09 23:44

Great. Lots of options here.

Anonymous's picture
Tatil FM
02/10/10 09:29

Thank you for sharing useful. Really I need it. Waiting for more:)

Anonymous's picture
irf
02/10/10 11:43

It's a shame Amazon US does not ship to the UK... Any way of purchasing these for the UK?

jibbajabba's picture
jibbajabba
02/10/10 12:36

@IRF: I'm sorry, but presently there is not an option for purchasing outside the US, but I have been talking with a partner in the UK who may be selling the notepads through their online store. I'll announce if and when that happens.

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.