CSS Biggest-Box, Five-Color Strategy
My latest approach to CSS is using this comment block to summarize intent:
/*
SonghaySystem.com, 2009
Bryan D. Wilhite
rasx@songhaysystem.com
Biggest Box: WSVGA (1024x600)
Black Color: Web-safe216 (#000)
White Color: Seashell (#fff5ee)
Warm Color: Web-safe216 (#ff9)
Cool Color: skyblue4 (#4a708b)
Neutral Color: honeydew2 (#e0eee0)
http://en.wikipedia.org/wiki/Web_colors
*/
My intent is to build within a layout that is confined within the ‘biggest box.’ The other intent is to use only five solid colors for the entire design. Since there are no sassy, slick, 60-dollar “Web design” books in my collection, these intentions are refreshing and very interesting to me. Much of my time has been spent with back-end work so having a moment to formerly approach the client is a ‘ready-state’ breakthrough for me.
Biggest Box: this represents a maximum horizontal limit and a defined vertical dimension for the entire layout. My current preference is WSVGA (1024×600) following my historical dedication to SVGA (800×600). The horizontal dimension is a “hard” limit for aesthetic reasons (and surely there’s research to back me up here). The vertical dimension is only ‘defined’ to have a 1.7 aspect ratio for boxes. Because of the vertical-scrolling nature of Web design, this vertical dimension cannot be an absolute hard limit. The design challenge is to ‘flow’ in and out of this vertical limit.
Black Color: the black color is the darkest color in the design strategy. For the time being, this will be #000. The use of CSS transparency really helps to ‘open up’ the black color—so black is not as “boring” as one would think.
White Color: an article like “10 Beautiful off-white websites” suggests that #fff is also “boring” for many designers.
Warm Color: this can be the highlight color or the background color (for the Black Color or the Cool Color). This is the color meant to make the design “colorful.”
Cool Color: this can be the background color or the prose color (juxtaposed with the White Color or the Warm color as a background). This is the color meant to make the design “colorful.”
Neutral Color: this is meant to be the non-white “gray” color—or the color that is not meant to clash with the “colorful” colors. This color is often used for buttons and other widgets to suggest the “mechanical” part of the layout—or the “meta” of the presentation.
The Gradient Bandwagon
Pathetically, I missed out on the whole Web 2.0 Web design fads which include the use of gradients (along with rounded corners and cute cartoonery). Most of these gradients are made manually as static images. There may be processor-intensive JavaScript tricks out there as well. I look forward to gradients being included in the browser in CSS—and this is coming as WebKit.org announces in 2008.
Gradients in my CSS strategy would take my five colors and open them up to millions of shades of variation. My conservative approach to this space would have me try gradients with only my cool color first.