Sketchbooks of a Web Developer

Mar 17, 10 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

UI Stencils Browser Template

960 Grid System Template by Nathan Smith

960 Grid System template

Grid paper by Konigi

Grid Paper template

Paper Browser by Rain Creative Lab

Paper Browser template

MBTI sketching paper for ideation by Concept7

MBTI sketching paper for ideation

Sketching grid paper by Concept7

Sketching grid paper

6 pages template by nunile

6 pages template

Paper wireframe templates by Jason Robb

Paper wireframe template

Sketchboards by adaptive path

Sketchboards template

Wireframe template by Alfonso Bozzelli

Wireframe template 2

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

UI Stencils browser sketchpad

Wireframe Graph Paper Notepad by Konigi

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

Wireframe Graph Paper Notepad

Storyboard Notepad by Konigi

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

Storyboard Notepad

Dot Grid Book by Behance

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

Dot Grid Book
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!

57 Comments

  1. Amazing stuff. Thanks. I’m FB Connect and Rt.

  2. Thanks for the templates..So useful!

  3. It seems that App Sketchbook should definitely be on this list: http://appsketchbook.com

  4. amazing….and nice stuff.

  5. 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

  6. 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.

  7. Just great resources for us..

    Nice

  8. Jay Kaushal /

    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 :)

  9. Wow- this is really interesting. I usually just use A3 graph paper, but I think that’s going to change!

  10. 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 :)

  11. Very useful ! Thanx ! Up to da time !

  12. brigitte /

    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

  13. Thanks for the templates, very useful.

  14. 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.

  15. Very useful templates. These will come in handy for sure. Thanks!

  16. Stijn Janssen /

    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?

  17. very nice, thanks….

  18. Yes, Thank you too much for these. My company will begin using them Today!

    Peace and Love,
    Michael D Mooring

  19. Extremely handy – beats the sticky note method!

  20. Great stuff. Im sure i will start using now.

  21. WOW – very usefull, especially for me THX :)

  22. Really good stuff.

  23. thanks a lot, this is very helpfull..

  24. Thanks you. I have been looking for this article for long. You save me a lot of time. Great article!

  25. 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.

  26. Hey, awesome site.I saw this on bing on a semi related term. Reguards from Africa

  27. I really like the style of this post! Keep it up!

Leave a Reply