{Carrer web log}


Blog about web design & development

Sketchbook for web designers

Thursday, February 12, 2009 { 37 Comments }

Recently I saw one cool sketchbook for designing web site mockups. The problem was I couldn't find out how to order one copy. The idea of that sketchbook was to simulate web browser on paper.
So I decided to build one.

First problem that we encounter when we are building web browser on paper is - what size should it be? We have monitors with different size. And we also have different paper formats A4, A3... First thing I did is to compare the most common A4 format with my 15' laptop. And i realized that A4 (210x297mm) width is actually my laptop monitor height or 210mm. A4 is perfect for building our sketchbook because it fits perfectly on monitor and is most used paper format.

What web browser should we simulate? From the ergonomic point of view I prefer Chrome or Safari. My final decision is Safari, because it is gray and it is perfect for B/W printers.
Ok, we have Safari on A4 paper and we can print B/W. Little work in photoshop and the final result is:




In PSD file you will find everything you need Photoshop
Don't forget to set landscape when you print.

Enjoy!



37 Responses to “Sketchbook for web designers”

  1. // Anonymous pinkpetrol.com // 2/12/2009

    What a great idea! :D so simple but so effective! Nice one.  

  2. // Anonymous HRhV // 2/12/2009

    awesome post, very useful! cheers!  

  3. // Anonymous Thomas // 2/12/2009

    ripped from 960.gs?

    anyway. nice tool.  

  4. // Blogger winkieflash // 2/12/2009

    This is completely useless. Just use the 960 Grid system; much better printouts ánd it comes with pre-made PSD's with columns and everything. This is just a lame attempt, sorry.  

  5. // Blogger 06500642 // 2/12/2009

    This is such great idea, thanks!  

  6. // Blogger Vladimir // 2/12/2009

    @Thomas and @winkieflash: This is not a Web Grid System! This is to be printed on paper! Then you can use it like Sketchbook. If you want web grid system go to The Grid System there are a lot of PSD for various web grid system.  

  7. // Anonymous fluidByte // 2/12/2009

    I dig it, thanks. Some of us don't use the 960 grid system because we can efficiently write code without needing a framework. This fits my needs perfectly.  

  8. // Anonymous Stijn // 2/12/2009

    Hi there,

    For people who use the 960 gs: http://www.inventis.be/blog/het-webdesign-schetsboek/

    It's in dutch but I'm shure it can be very usefull!  

  9. // Anonymous JSTNJNS // 2/12/2009

    as @fluidbyte said, some of us can manage without 960, or frameworks in general.

    this is a great, simple tool for when i need not be burning my eyes out in front of a monitor.

    however, not as GREEN as one could be. ;)  

  10. // Blogger Rich Bachman // 2/12/2009

    Great idea. Thanks a lot.  

  11. // Blogger Shahways Romani // 2/12/2009

    Why don't you have a look at http://www.webdesignerstoolkit.com ?  

  12. // Anonymous Anonymous // 2/12/2009

    nice work. thanks!  

  13. // Anonymous Devlin // 2/13/2009

    Great idea, thanks so much for sharing!  

  14. // Anonymous Sebastian // 2/13/2009

    that's a good idea, thanks for sharing...  

  15. // Anonymous jennifer farley // 2/13/2009

    Great stuff, thank you!  

  16. // Blogger Vladimir // 2/13/2009

    Thank you all for kind words!  

  17. // Anonymous loswl // 2/13/2009

    That is a pretty neat idea, thanks for shring it :o)  

  18. // Anonymous webdesign // 2/14/2009

    Great post, great idea!
    Now I can even work on design in the train without having to worry for my MacBook when I'm taking a "break" ;-)  

  19. // Blogger Mark // 2/15/2009

    nice idea! thanks for sharing :)  

  20. // Anonymous so-sai // 2/15/2009

    very useful!thanks!  

  21. // Blogger Thomas // 2/16/2009

    I have some old ones left that i made back in the days 97 with Netscape window. I did not use the grid system back then.

    I made this because it was lot easier to show the client IRL.

    This is a great idea though!  

  22. // Blogger minischnauzerhaus // 2/17/2009

    Brilliant!  

  23. // Anonymous bradley.britton@gmail.com // 2/17/2009

    Firefox version?  

  24. // Anonymous Jan Raedschelders // 2/17/2009

    Interested in buying a webdesign sketchbook, just follow this link:

    http://www.inventis.be/blog/buy-your-webdesign-sketchbook-here  

  25. // Anonymous Jen Germann // 2/17/2009

    Thanks for these!  

  26. // Anonymous Paige Orloff // 2/18/2009

    What a useful tool--thank you so much!  

  27. // Anonymous TuNG // 3/02/2009

    Thank you so much for a nice sketchbook  

  28. // Blogger pol // 5/23/2009

    arigato gozaimas :)  

  29. // Anonymous pete // 5/24/2009

    Thanks for the info I am goign to have to try that keep up the great work pal  

  30. // Anonymous website design New York City // 6/30/2009

    great post

    thank you! That looks like a great resource  

  31. // Anonymous yoxx // 8/12/2009

    nice tool.. :) i like it  

  32. // Anonymous Mere Mortal web design // 8/30/2009

    I didnt know 960 gs had this web design sketchpad, anyway, thanks for the printouts!  

  33. // Blogger Eric // 10/08/2009

    hi! It's a simply super...... http://www.itemplatez.com  

  34. // Blogger nozomix // 5/28/2010

    what a awesome stuff!! I can design everywhere. Thanks a lot.  

  35. // Anonymous Marcus // 4/08/2011

    Thanks! I was looking for something like this!  

  36. // Anonymous Anonymous // 12/14/2011

    I get mine at www.layflatsketchbooks.com. Also available on Amazon!  

  37. // Anonymous John // 1/10/2012

    Awsome post, thank you!  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License