Back
to home page| Zen Garden Design principles |
||
The CSS Zen Garden site (a piece of design history, that was recently reopened) run by Dave Shea of Mezzoblue. Minimal is tougher [e.g. your resume] [CSS Tip you can use background-color:transparent; for the effect on the top div] Design principle: Contrast in size [Proportion] in use of type. [RULE: Be sure that there are clear “sizes” e.g. small-medium-large in type (or images); better is ¼ - ½ - 1; OR 2:3:5:8] Use of icons: They have a shorthand meaning, should be clear [printed style "sheets" in this case] [CSS Tip: background-image: url(pic.gif) OR background: url([pic.gif) #ff0] Design elements: Contrast in use of Line [One list:
But don't use too many. Design principle: Alignment in center by using margin: 0 auto; [Think of this also as Contrast in space, or use of both positive and negative space.] Design principle: Unity in the symbols, old texture. [Note also the Unity/harmony in the colors; Zen calls this added Contrast in colors (as opposed to the all blue version). It's Harmony in the sense that there is a ___________ color scheme. A: complementary.] Design principle: Unity/harmony in size of shell photo and white circles. Use of placement, ground to represent the concept of Atlantis under the sea. Beware bevelled buttons and text Drop shadows still are professional Design Principle: Repetition/consistency in directions, depth (darkness) of shadows Design Element: Shape has meaning; circles tend to be more feminine, inclusive, whole; triangles are more masculine, dynamic; rectangles show containment, security. So, related Design Principle: Use contrast in shape [avoid “restangulitis'; here the flower/logo has circles and triangles, headers are rectangles] Design Principle: Proximity used well means not cramping space; use “white space” as print designers call it; essentially this is the same as what Zen calls “negative space” (the space not occupied by your design elements). Simple idea, but still often violated. Also Proximity means: Group related items. Design principle: Unity/harmony in Color. Note it's almost an analogous color scheme, from yellow-green through green to blue-green. Warm, rather than hot or cool = spring. Greens, blues, browns = nature as expected. Again Form follows function. Be aware of color blindness (1 in 12 people in North America ).[You can use CSS for this: serve alternate CSS with a link on the page. See http://www.alistapart.com/articles/alternate/ .] Note IE <=6 needs a script, Mozilla simply needs a rel attribute: <link type="text/css rel="alternate stylesheet" title="summer" href="summer.css">. Color, like shapes, is cultural. Standard example: Red in China is celebration [note the red dragons in parades]. All greens, e.g. are not the same emotion; gender also affects color perception. [ Zen says males prefer blues, women pinks and reds. True? ] Use Photoshop to set up palettes. This is a really good color tester (try the Color Wizard for color scheme Hex codes) http://www.colorsontheweb.com/ CSS color: words are OK, but unprofessional; rgb as values or % permitted but rare; CSS3 added hsl (180, 50%, 50%) Best is Hex codes. Often seen as shorthand: color: #ff4488; same as color: #f48; Viridity : Design Principle: Contrast in texture. Flat areas of color, not too busy, contrast with pattern/texture. Minimize overall contrast (here it's in the texture/patterns so keep color contrast low; however consider audience again, perhaps offer alternate CSS). Also, color blindness is an issue [again]. Design principle: Contrast in color value can substitute for contrast in colr. Generally value is not used enough. Here there's light green to dark green [could even be exact same hue] Culture again: try to make patterns have meaning (fabric, sand) Use of background: url(tile.gif); allows low bandwidth textured fills. Use no-repeat for single image, repeat-y to tile in the vertical only, etc. You can also position where the image is in the no-repeat case. [For all later reference on all CSS properties, see] http://www.blooberry.com/indexdot/css/propindex/all.htm Note the use of a background color as well as image. The following is a best practice that combines background-color: #639 and background-image: url(tile.gif): background: #639 url(tile.gif); Avoid strong color contrast in adjacent areas (might get shimmering). Be aware that context changes colors. Design Principle: Movement. Think of how the eye will follow through the page.[ Are there "reads" i.e. entry point, second point, etc.? Are there "leading lines"?] Design Principle: Proximity: Grouping is a key part of this principle; here she has grouped navigation and separated it from the main flowing content. White space allows rest. Tables in HTML: Tough to do; need lots of slices, spacer GIFs, more bandwidth [mainly because images are part of the CSS] ; too inflexible [key problem] [Assignment to come on this] As with Dmitri Glazkov, keep presentational graphics in the CSS, content graphics in the HTML. [Ask yourself: If the page was redesigned, would that image still have to be there? If not, it's presentational.] See Dave Shea on IR (image replacement). Use Firefox extension to view block-level elements [<div>]. Usual benefits accrue (quicker load, easier to change, more accessible to all. Design Principle: Contrast in color using value (dark and light/bright oranges) and in hue (orange and blue complements). Images can still be combined in one header, but then need to use JPEG for photographic elements. Better is to slice and load slices into elements e.g. <div id=pageHeader>, although code is more complex. Uses old IR here (more later). CSS lesson for now: Use parent-child relationships, and experiment with padding [and margins] for centering, alignment. CSS lesson for now: Margins collapse if they're on their own (e.g. 20px on top of 20px will equal 20px). Avoid this by adding a bit of padding. More complex transparency: Use PNG (has an 8-bit alpha channel). IE 7+ supports it. GIF has only one level, so complex shadows are lost/look dorky. Also CSS3 has color:rgba() and opacity: . |
||