Website Design Makeover for Layers Magazine

A short while ago I was featured in the Design Makeover section of Layers magazine. They had asked me to come up with a website re-design for the Community Arts Center, Danville, KY.

Before:

The first thing that came to mind when I viewed the CAC website was that it was white and very clinical looking. My objective was to ensure that the end-user quickly recognized that the Community Arts Center was a warm, fun and accessible local ‘community’ environment.

After:

I started with a small gallery of six expressive photos showcasing a variety of artistic activities enjoyed by all ages. As well, I added a secondary slideshow for a quick look at all the activities and events.  I designed this gallery slideshow with the jQuery coda-slider in mind.

For the CAC brand I chose to use the Adobe serif typeface Trajan Pro which is OpenType (a format for scalable computer fonts) very popular when designing movie posters, branding and for book covers. It is renown for its stability and subtle sense of excitement.

It was important to keep consistency throughout the site. In order to do this I first chose to use the humanist sans-serif typeface Trebuchet MS for its bold, classy strength and ease on the eyes. It’s great to have a love for typography and fonts, but you want to keep a limit to the number of differ to 2 (maybe 3) different types of font in your design, for the web and for print.  It’s also a standard for web browsers going back as far as IE 4.0. Secondly, I added a bright red title banner wrapped around the top left corner of each section.

With blue grass music in mind I used a soft wood grain paneling to span the background. I delineated each section using two shades of red to help organize and prioritize the content.  For a nice contrast, I used gold for gallery borders as well as for the navigational typeface. These choices result in simple and clear navigation, with the primary split across the top and bottom of the header and the secondary in the footer in a two-column stacked site-map.

Give me your feedback.  Let me know what you think. Leave a Comment.