One of the most widely used design techniques in CSS is called grey boxes. Grey boxes are simple layout sketches created with Photoshop (or another similar program) where you simply draw the basic layout structure of your web site. In this phase it's not necessary to add graphics, text or other widgets. All you need is the underlying skeleton of your CSS project. Grey boxes are a must if you want to build a flexible, scalar and reusable layout from scratch. In fact, you can reuse your sketches in many other projects.
For example, here's an hypothetical sketch that makes use of grey boxes:
Numbers on each layout component can be associated with a particular CSS nomenclature. For example:
#header#branding#navigation#content#content-sub#footer#copyright#footer-nav
You can also associate dimensions with your components. For example, you can say that #1 has a width of 100% and #4 has a width of 62%. Further, you can also add more grey boxes within your already-defined components in order to better define all the layout details.
Grey boxes should always be the first stage of a layout design. Further stages involve the use of text and graphics. I recommend you to save your grey boxes templates to be used in other projects which show similar layout features.
It's probably a very good technique for visualizing a design layout if you start your projects in the browser (which I do). On top of that, I'd recommend using a grid-based CSS framework. I use Blueprint CSS.
http://www.google.com/search?q=css+grid
A lot of people start their design in a graphics editing program like The GIMP and this might not be as helpful to them. There's another graphics program that some web designers use, but it's not very good and I can't remember the name right now :P
I recently listened to an interview with Paul Boag on the Sitepoint podcast and he mentioned that he feels his creativity is limited when starting in a browser rather than in a graphics program.
What it comes down to is a matter of personal preference.
Why grey? I use #fee, #efe, and #eef... much less depressing :)
--
Ghodmode
http://www.ghodmode.com/blog
[Why grey? I use #fee, #efe, and #eef... much less depressing :)]
Yes, you`re right :D