Blindfolded Design

As we transition into CSS, I can’t help but feel like we’re learning to design blindfolded.

This coding method is so unlike other graphic design mediums I’ve encountered, and at the same time (thankfully) similar.

It’s different in that unlike laying out a print piece in a layout editor such as InDesign, Quark or (shudder) Word, CSS coding is just type. You don’t select a photo’s box and drag it across the page to position it; you have to use the proper selector, property and value to align the photo where you want it. Then, you load the page in a browser to see if it moved to the correct location. If not, you make changes and check again. It seems like a lot of trial and error just to move one element! Even then, some browsers may display it differently. I won’t take the relative ease of print design for granted again!

However, it is my print design background that has helped me translate CSS coding to some extent. There are a lot of similarities in the vocabulary and ideas that surround what makes a “good” design flow well. It’s just figuring it all out that will take time!

Visit CSS Zen Garden.

One wonderful thing about CSS design is the simplicity of making changes to a whole site. Instead of the arduous task of manually changing text color, backgrounds, etc., designers can simply change the code to make global changes across a site that uses the same CSS file. One great example of this is the website CSS Zen Garden. It uses the same HTML and shows it with several different CSS options created by graphic designers from all over the world. So far there are more than 200 designs for the CSS Zen Garden and each page is completely different. The variety of submissions really shows the “the beauty of CSS-based designs.” 

Now to learn it blindfolded…