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.
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.
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.
This is excellent, thank you!
Great - thanks for this!
Brilliant! These are great!
[...] 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.” [...]
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) [...]
[...] Graph Paper | Konigi Carta millimetrata… si sa mai… (tags: layout webdesign webmaster) [...]
[...] Graph Paper (Plantillas para descargar) - Konigi [...]
[...] 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 [...]
Great layout tool! Much appreciated!
Very useful.Thansk!
[...] Graph Paper | Konigi (tags: templates design paper webdesign wireframes pdf blueprint) [...]
[...] Grids for printing - pdf - Konigi [...]
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) [...]
This is great, I'm sure to use it!
Awesome, thanks for the grids!! you rock!
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 [...]
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 [...]
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 [...]
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 [...]
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) [...]
[...] en anglais, mais très simple à comprendre, le site KONIGI propose aux designers 7 “graphiques” de mise en forme à imprimer (format PDF), afin de [...]
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.
Nice, thanks!
[...] KONGIのGraph Paper使いようによってはいろいろな使い道が出来そうですね。 WEBデザインのデザイン案とか、フライヤーデザインのラフ絵を書いたりなど。 KONGI-Graph Paper [...]
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/ [...]
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 [...]
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 [...]
Amazing work! This will become useful for my next projekt.
Excellent work! Thank you and keep up the good work.
Thank you very much. Great idea, well executed, super useful!
[...] 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. [...]
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.
@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) [...]
[...] 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) [...]
Really usefull.
Thank you.
[...] http://konigi.com/tools/graph-paper [...]
[...] 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 [...]
- )thank u thank u this is awsome ;)
Thanks,
It's a very nice site which is useful to us.......!
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!
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!
@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 [...]
Graph papers made for web designers, sounds interesting.
[...] see our top 10 printable productivity tools. Graph Paper [Konigi 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 [...]
thanks for the graph paper.
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. [...]
[...] 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. [...]
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) [...]
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 太棒了，这是真是不亚于米字簿的好东西啊，方格子现代版。 [...]
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 [...]
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) [...]
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 [...]
[...] 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 [...]
This is great, I'm sure to use it!
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. [...]
thank you for sharing
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 [...]
just one world i have to say
"THANKS"
Thanks for sharing this..
This is actually a big help for the artworks
I made..
This is a great tool. Thanks.
Awesome, thanks!
great :D
Very Helpul.. Thanks.
Nice post very informative and helpful for designers.Thanks.
Great. Lots of options here.
Thank you for sharing useful. Really I need it. Waiting for more:)
It's a shame Amazon US does not ship to the UK... Any way of purchasing these for the UK?
@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.
Comments