{Carrer web log} ←

Sketchbook for web designers

Thursday, February 12, 2009 { 36 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:

• sketchbook(blank)
• sketchbook(lines)
• sketchbook(web 10px)
• sketchbook(grid 100px)

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

Enjoy!

36 Responses to “Sketchbook for web designers”

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

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

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

   awesome post, very useful! cheers!  

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

   ripped from 960.gs?
   
   anyway. nice tool.  

4. //  Anonymous // 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. //  Karis // 2/12/2009

   This is such great idea, thanks!  

6. //  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 // 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 // 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 // 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. //  Rich Bachman // 2/12/2009

    Great idea. Thanks a lot.  

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

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

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

    nice work. thanks!  

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

    Great idea, thanks so much for sharing!  

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

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

15. //  Anonymous // 2/13/2009

    Great stuff, thank you!  

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

    Thank you all for kind words!  

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

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

18. //  Anonymous // 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. //  Unknown // 2/15/2009

    nice idea! thanks for sharing :)  

20. //  Anonymous // 2/15/2009

    very useful!thanks!  

21. //  Unknown // 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. //  Anonymous // 2/17/2009

    Firefox version?  

23. //  Anonymous // 2/17/2009

    Interested in buying a webdesign sketchbook, just follow this link:
    
    http://www.inventis.be/blog/buy-your-webdesign-sketchbook-here  

24. //  Anonymous // 2/17/2009

    Thanks for these!  

25. //  Anonymous // 2/18/2009

    What a useful tool--thank you so much!  

26. //  Anonymous // 3/02/2009

    Thank you so much for a nice sketchbook  

27. //  pol // 5/23/2009

    arigato gozaimas :)  

28. //  pete // 5/24/2009

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

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

    great post
    
    thank you! That looks like a great resource  

30. //  yoxx // 8/12/2009

    nice tool.. :) i like it  

31. //  Mere Mortal web design // 8/30/2009

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

32. //  Anonymous // 10/08/2009

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

33. //  Nagisa // 5/28/2010

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

34. //  Marcus // 4/08/2011

    Thanks! I was looking for something like this!  

35. //  Anonymous // 12/14/2011

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

36. //  John // 1/10/2012

    Awsome post, thank you!  

Post a Comment

<< Home