Visit Site ยป
This was a website update that I did for a client of mine that wanted to give their site a new and updated look. They wanted to use the existing framework, but simply make the content “pop” a little more to stand out from the page.
So my challenge was to figure out how to fit a new design into the existing (table-based!) page framework. Needless to say the table-based layout made my job more than challenging. I wanted to give the site a non-boxy look and this is exactly what a table based layout creates. However, all that aside, I think I was able to rise to the challenge.
From my initial assessment, I realized that the main reason that the old website appeared “flat” and uninteresting, was a HUGE lack of contrast. So, I separated the layout into a few main areas separated with negative space, surrounded the content and images with a white border, and added some drop shadows to content boxes to make them stand off the page. This took care of the contrast. Then I had the boxy layout problem – this was fixed by adding some extra divs inside the table layout and adding negative margins to break the divs out of the confined table layout. I added some interest to the page background by adding a subtle stripe pattern and a fading gradient. A jQuery slideshow on the homepage added some interest and a few style changes completed the updated look. Luckily the old website did use CSS styling so the style changes were relatively simple and quick.
What are your thoughts? Is the new design better or worse than the old one?