The task at hand with this project was first and foremost a clean, professional new look for their corporate website. The second requirement that they had was the site had to be easy to update and add new content. We found that using Wordpress as the platform for the site would work perfectly for TSI’s requirements.

The Design Process

TSI wanted the new site design to have a similar color scheme to their existing site. The existing site was flat and the colors were a bit too muted, so I took the colors and tweaked them a bit to come up with something a little more bold and striking. I decided to also add silver/gray to the color scheme to add something more to the design.

I put together a new background and header that added a little bit more to the design to make it stand out more. The old design used a drop-down menu, which I wasn’t a big fan of. I opted to make a sub menu that would only appear when sub-pages existed. The main body of the site was rearranged to make the sidebar part of the content area.

The Layout

I’ve been using the 960 Grid System framework for awhile now, and I’ve found out it takes a ton of time off developing and laying out the structure of a site. The framework allows for you to layout the site within a 960 pixel wide container, and within that container you can have either 12 or 16 columns with which to create your layout. This particular layout uses the 12-column styles and is broken into a standard two-column layout.

If you’d like more information on using the 960 Grid System, check out these tutorials:

• Prototyping with the Grid 960 CSS Framework
• A Detailed Look at the 960 CSS Framework (video)
• 960 Grid System Toolbox & Resources

Featured Content

The existing TSI website had a clunky Flash animation in the header and the client wanted to keep that same type of element in the new site. I decided to use a jQuery slideshow animation that allowed for easy editing as well as optimizing the content titles for search engines. The end result was very well received by the client and should help their search engine rankings.

The Final Result

Below are links to screen captures from both the old and new design. I’m pretty happy with the way the the site turned out. I would have liked to have made the featured slideshow more dynamic and use custom fields to populate the images. The client chose to make the titles different from the page titles, so in the end we decided a static solution would be best. I hope you like the final result…I’d love to hear your feedback.