Wednesday, September 8, 2010

2.1 The search is on

I have ventured into the world of free CSS templates and layouts this week. (CSS, for anyone not familiar with the tech shorthand, stands for cascading style sheets.) The main thing I adore about the Internet is how freely people share resources with one another. From tutorials and fonts to free graphics and web layouts, the world is awash with customizable designs and resources. Free CSS, for example, is a website that includes 120 pages of free CSS templates in all kinds of layouts and color schemes. Since these templates are customizable, it should be easy to benefit from the built-in navigation bars and page elements while still tailoring the look and feel of the page to my personal tastes. In the past I have created templates from scratch, but there is no doubt that a pre-made template will help streamline the process.

I have not found the right template yet, however I have ruled out certain overarching design choices. I like clean design and open—but purposeful—space on a web page. Purposeful space means it helps to create an airy feeling without looking like something belongs there; for an example of non-purposeful space look at the Free CSS website in the area beneath the social network buttons. The empty white box with a gray outline looks like it should have a graphic or some other content appear upon rollover. In fact, I wondered for a while if my browser was simply not displaying some content and I found myself annoyed at having to scroll down the page (on every page) past the empty block in order to see the menu of style sheets. This was a really bad design choice.

Speaking of clean design choices and appropriate use of space, any page with too many separate elements placed near one another usually looks like a jumble.  Most of the templates that utilize a three-column structure in the body of the page function this way. The long skinny columns and differing content jammed onto a single page usually creates visual clutter. I much prefer a top navigational structure, perhaps some sub-navigation buttons on the side, and one or two main areas in the body for content.

For example, a great template on Free CSS is Busy, by lhoylhoy:













I am also not a fan of an extremely busy background behind the page area. Most of the great web design I have seen uses either a solid color that relates to the page color scheme or a relatively simple background texture.

Check out Free CSS here:
www.free-css.com/

I have also been considering color choices for my web page and have been experimenting with Adobe's free Kuler website. This site allows users to browse public themes as well as create and share unique color schemes. The schemes can be downloaded for use in design work. What I love about this site is that you can upload an image and create a color scheme based on that image. An automatic generator will pick dark, medium, and light values from the image and compile them into a swatch. This swatch can be further customized by selecting a hue and clicking elsewhere in the picture to change that particular element. This provides a great way to create a color palette for a web page that ties into the background image in order to unify the design.

I am leaning towards a more subtle, earthy palette, as seen below, in Beachy and Prairie scribbles, but also tried out something bolder with Post it, just to keep my options open. I also made each color profile available for public download because I love that I can contribute to the spectrum of free resources out there.

Beachy:
















Prairie scribbles:










Post it:













So far Prairie scribbles is my favorite, but I intend to keep trying out other schemes until I find the best one to complement the contents of the site I am putting together, which might mean something a little more neutral (maybe the ever popular black, white, and charcoal).

Check out Kuler here:
www.kuler.adobe.com/#

No comments:

Post a Comment