Sketchbooks of a Web Developer
Before any tangible designs are made, any experienced designer should know that the first thing you do before any sort of web development project is map out a rough sketch first. Although most sketching is done on blank paper, many developers have now started using sketch templates for their web applications. This is definitely the most productive and organized way to start probably one of the most important phase of the application design process. Below are resources and templates to download or print off for designing your next great project! Enjoy reading and share this post!
Templates for Print
These are some good print-your-own sketch templates for web design.
Printable Sketch Templates for Web Design Browser (Chrome) Sketch Pad by UI Stencils
960 Grid System Template by Nathan Smith
Grid paper by Konigi
- All Konigi PDF templates
- Konigi PDF Wireframe with notes
- Konigi PDF Wireframe (Landscape)
- Konigi PDF Wireframe (Portrait)
- Konigi PDF Storyboard
- Konigi PDF Storyboard with notes
- Konigi PDF Two-by-two
- Konigi PDF Basic
Paper Browser by Rain Creative Lab
MBTI sketching paper for ideation by Concept7
- MBTI sketching paper (A4)
- MBTI sketching paper (A3)
- MBTI sketching paper (Letter)
- MBTI sketching paper (Legal)
Sketching grid paper by Concept7
6 pages template by nunile
Paper wireframe templates by Jason Robb
Sketchboards by adaptive path
Wireframe template by Alfonso Bozzelli
Sketchbooks
You can actually order some of these sketchbooks online if you prefer that. Check these ones out:
Browser Sketch Pad by UI Stencils
- 8.5 X 11 Inches
- 50 Sheets in a pad
- 70 lb Paper
- Chip board back
Wireframe Graph Paper Notepad by Konigi
- 50 sheets
- 8 1/2 x 11 inches on white opaque vellum paper
Storyboard Notepad by Konigi
- 50 sheets
- 8 1/2 x 11 inches on white opaque vellum paper
Dot Grid Book by Behance
- Semi-Hard Suede-touch Cover
- 9 x 10.5 Inches
- 50 pages, 80lb Premium Blend Paper
- Double spiral (black)
Via GEEKCHIX.ORG
Edit: Thanks Amanda for her suggestion App Sketchbook
App Sketchbook
- 3 real-size iPhone® templates per page
- Pixel (20px) ruler and title bar markings
- Ruled section for your development notes
- 50 Double-sided pages
I hope you find these templates useful to better your design and development process and if you have any additional resources you would like to share, please do leave a comment so I can add them to this list!
Did you like this article?
Amazing stuff. Thanks. I’m FB Connect and Rt.
Thanks for the templates..So useful!
It seems that App Sketchbook should definitely be on this list: http://appsketchbook.com
Thanks Amanda! I added it to the post (:
amazing….and nice stuff.
Nice list. I also did something similar and maybe can be useful to somebody.
Sketchbook for web designers http://www.vcarrer.com/2009/02/sketchbook-for-web-designers.html
This is a great post. So many posts today are just tired old retreads. This is actually something I found that was new and actually useful. Thanks.
Just great resources for us..
Nice
It is really a great collection and I was just looking out for this stuff. I am a freelancer and my idea was to start scribbling my new website design ideas before I hit my computer for finalizing the stuff.
Geat Collection :)
Wow- this is really interesting. I usually just use A3 graph paper, but I think that’s going to change!
Thank you SO MUCH! I’ve always made my own sheets for sketchs and storyboards, but there’s a couple here really great! For example, i’ve never used the grid system for my design and prototypes in paper :)
Very useful ! Thanx ! Up to da time !
The fist 2 Links are FAKE-LINKS, they go to a website where you can buy something …????
http://www.uistencils.com/downloads/website-stencil-template-letter.pdf
Thanks for the templates, very useful.
Awesome resources. I have some of these templates but I had no idea that you can actually buy sketchbooks with these templates. These templates are invaluable when I am trying to get my head around a design idea. Thanks again.
Very useful templates. These will come in handy for sure. Thanks!
Really useful list!
I recommend this one to, you can download the templates there: http://www.inventis.be/blog/buy-your-webdesign-sketchbook-here/
Maybe one to add to the list?
very nice, thanks….
Yes, Thank you too much for these. My company will begin using them Today!
Peace and Love,
Michael D Mooring
Extremely handy – beats the sticky note method!
Great stuff. Im sure i will start using now.
WOW – very usefull, especially for me THX :)
Really good stuff.
thanks a lot, this is very helpfull..
Complete with this!!
http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
Thank you, great article.
your new share!
Thanks you. I have been looking for this article for long. You save me a lot of time. Great article!
Cool list of resources in this way, web designers can quickly depict their vision in a more finalized fashion, and hopefully win some more clients in the process.
Hey, awesome site.I saw this on bing on a semi related term. Reguards from Africa
I really like the style of this post! Keep it up!