Made for web designers
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.
Made to scan
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 Free or Buy Notepads
These PDF documents are formatted for 8.5" x 11" paper. They are free to use, but may not be distributed for commercial purposes without permission.
Download all of the PDF files.
You can now buy notepads from the store!
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.
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.
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.
Storyboard
This is a storyboard with 4 cells. Each cell provides a simple grid.
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.
Basic
This is a basic grid box. Use it for concept diagrams, sitemaps, spectrums, tables, and whatever else you might sketch.
Comments
06/29/08 @ 09:07
This is excellent, thank you!
07/03/08 @ 05:27
Great - thanks for this!
07/03/08 @ 05:28
Brilliant! These are great!
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. [...]
07/04/08 @ 16:59
[...] 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.” [...]
07/04/08 @ 23:47
reminds me of how thomas pynchon wrote gravitys rainbow on graph paper with a mechanical pencil
07/05/08 @ 04:36
[...] 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) [...]
07/05/08 @ 08:46
[...] Graph Paper | Konigi Carta millimetrata… si sa mai… (tags: layout webdesign webmaster) [...]
07/05/08 @ 13:31
[...] Graph Paper (Plantillas para descargar) - Konigi [...]
07/06/08 @ 00:31
[...] Graph Paper | Konigi (tags: download resource templates ui design pdf) [...]
07/06/08 @ 05:50
[...] 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 [...]
07/06/08 @ 10:25
[...] Carta millimetrata per webdesigner [...]
07/06/08 @ 23:38
[...] 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 [...]
07/07/08 @ 16:02
Great layout tool! Much appreciated!
07/07/08 @ 18:05
Very useful.Thansk!
07/07/08 @ 18:40
[...] Graph Paper | Konigi (tags: templates design paper webdesign wireframes pdf blueprint) [...]
07/07/08 @ 20:51
[...] Grids for printing - pdf - Konigi [...]
07/08/08 @ 20:57
Really useful, thank you!
07/09/08 @ 21:08
[...] 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 [...]
07/10/08 @ 01:43
[...] Por si se saltean los comentarios, JDiick ha colaborado con un excelente enlace de grillas gráficas para bocetado. [...]
07/11/08 @ 00:31
[...] 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. [...]
07/12/08 @ 16:35
[...] Graph Paper | Konigi for grids based design (tags: css design paper templates webdesign) [...]
07/14/08 @ 05:06
This is great, I'm sure to use it!
07/15/08 @ 14:41
Awesome, thanks for the grids!! you rock!
07/16/08 @ 12:42
Sehr nützlich - vielen Dank!
07/17/08 @ 11:50
[...] Link: Graph Paper [...]
07/25/08 @ 07:33
[...] 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 [...]
07/26/08 @ 21:04
Esto es un superpost"!"!!
07/30/08 @ 20:25
[...] Graph Paper | Konigi. Posted in Design | Leave a Comment [...]
08/01/08 @ 17:19
[...] 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. [...]
08/07/08 @ 20:38
[...] Graph paper For someone with several online notes repositories and TiddlyWikis, I’m still a [...]
08/09/08 @ 15:31
A4 version please!!!!
08/11/08 @ 07:49
[...] Graph Paper | Konigi [...]
08/13/08 @ 08:28
[...] en anglais, mais très simple à comprendre, le site KONIGI propose aux designers 7 “graphiques” de mise en forme à imprimer (format PDF), afin de [...]
08/15/08 @ 21:11
210 mm x 297 mm - old DIN A4 would be nice, too.
Thank you anyway!
08/17/08 @ 15:39
[...] en anglais, mais très simple à comprendre, le site KONIGI propose aux designers 7 “graphiques” de mise en forme à imprimer (format PDF), afin de [...]
08/19/08 @ 19:00
[...] 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 [...]
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.
09/03/08 @ 14:15
[...] 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. [...]
09/06/08 @ 16:33
[...] Graph Paper | Konigi (tags: webdesign ui grid) [...]
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 [...]
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.
09/14/08 @ 20:01
Nice, thanks!
09/16/08 @ 20:13
[...] KONGIのGraph Paper使いようによってはいろいろな使い道が出来そうですね。 WEBデザインのデザイン案とか、フライヤーデザインのラフ絵を書いたりなど。 KONGI-Graph Paper [...]
09/17/08 @ 10:56
Really very nice.
09/17/08 @ 18:49
[...] 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 [...]
09/20/08 @ 23:37
[...] Free downloadable graph paper for wireframing and storyboarding. [...]
09/25/08 @ 18:29
[...] can find the free printable storyboard graph papers in the tools section. Notepads are on sale here. URL konigi.com/ [...]
09/26/08 @ 06:41
Thank you so much. its tremendous and cool.
09/29/08 @ 00:29
[...] 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]
09/29/08 @ 00:35
[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]
09/29/08 @ 00:47
[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]
09/29/08 @ 01:21
Great stuff! Would love to see logarithmic paper, if possible.
09/29/08 @ 07:57
[...] Download templates here: Graph Paper [...]
09/29/08 @ 09:32
[...] heve a wide selection of printable graph paper for webdesigners, visual developers or anyone who wants easy to produce graph [...]
09/29/08 @ 10:08
[...] Graph Paper | Konigi [...]
09/29/08 @ 12:19
Amazing work! This will become useful for my next projekt.
09/29/08 @ 13:55
Excellent work! Thank you and keep up the good work.
09/29/08 @ 15:35
Thank you very much. Great idea, well executed, super useful!
09/29/08 @ 17:17
[...] disponíveis aqui vários pdf’s, com variadas grelhas especialmente destinadas aos webdesigners e designers de [...]
09/29/08 @ 17:26
[...] Graph papers for wireframing user interfaces, story boarding interaction, and plotting values on a two by two grid. [...]
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.
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.
09/30/08 @ 00:34
[...] http://konigi.com/tools/graph-paper [...]
09/30/08 @ 00:34
[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]
09/30/08 @ 01:04
[...] Graph Paper | Konigi (tags: wireframe tools templates) [...]
09/30/08 @ 12:01
[...] Graph Paper | Konigi Knowledge management and competitive research community for user experience design on the web. (tags: wireframes webdev webdesign resources tools) [...]
09/30/08 @ 19:05
[...] disponíveis aqui vários pdf’s, com variadas grelhas especialmente destinadas aos webdesigners e designers de [...]
10/01/08 @ 10:02
[...] Graph Paper | Konigi (tags: tool template wireframe) « links for 2008-09-29 [...]
10/01/08 @ 14:00
[...] Printable wireframing Graph Paper Wireframe with Notes [...]
10/01/08 @ 14:40
[...] 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 [...]
10/01/08 @ 17:00
[...] Graph Paper | Konigi - Grid paper specifically for web design. Download pdfs or buy pads. [...]
10/03/08 @ 16:07
[...] 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 [...]
10/03/08 @ 19:03
[...] Graph Paper http://konigi.com/tools/graph-paper [...]
10/05/08 @ 19:34
[...] Graph Paper | Konigi [...]
10/05/08 @ 19:44
[...] Graph Paper | Konigi [...]
10/06/08 @ 15:58
[...] Graph Paper | Konigi (PDF,Free,GraphPaper,Print,Graphics,Design) [...]
10/08/08 @ 00:09
Really usefull.
Thank you.
10/09/08 @ 21:48
[...] http://konigi.com/tools/graph-paper [...]
10/10/08 @ 15:06
[...] a Torres Burriel llego a Graph Paper, una colecci
10/10/08 @ 16:09
[...] a Torres Burriel llego a Graph Paper, una colección de plantillas listas para imprimir para facilitar la tarea de hacer wireframes en [...]
10/11/08 @ 22:37
[...] Find them here. [...]
10/12/08 @ 09:17
[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]
10/13/08 @ 11:51
[...] 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 [...]
10/13/08 @ 12:57
:)thank u thank u this is awsome ;)
10/16/08 @ 11:07
Thanks,
It's a very nice site which is useful to us.......!
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!
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!
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
10/21/08 @ 23:16
[...] Look how clever this is! No comments [...]
10/24/08 @ 04:29
Graph papers made for web designers, sounds interesting.
11/01/08 @ 18:49
[...] see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]
11/05/08 @ 21:03
[...] 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 [...]
11/10/08 @ 21:08
thanks for the graph paper.
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
11/14/08 @ 17:56
[...] blue). For more ways to put your printer to good use, see our top 10 printable productivity tools. Graph Paper [Konigi via Evil Mad [...]
11/17/08 @ 18:04
[...] 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. [...]
11/27/08 @ 07:44
[...] konigi.comFormat: PDF VectorDownload and Preview Diese Icons verzweigen auf soziale Netzwerke bei denen [...]
12/09/08 @ 22:15
[...] 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. [...]
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. [...]
12/11/08 @ 08:32
[...] 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. [...]
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!
12/17/08 @ 02:35
[...] 详细的介绍，你可以到方格纸作者的网站去看看：http://konigi.com/tools/graph-paper，希望你能懂得利用好它，如果你有什么心得，希望能拿出来和大家分享。 [...]
12/18/08 @ 02:01
[...] 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) [...]
12/19/08 @ 15:17
This is really useful, I think that many people will benefit from this!
12/29/08 @ 09:57
[...] 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. [...]
01/01/09 @ 07:38
[...] Graph Paper 太棒了，这是真是不亚于米字簿的好东西啊，方格子现代版。 [...]
Post new comment