After some weeks planning, designing and developing, the Zee's new website is online. Much more than simply a redesign, we have changed everything, mainly because we needed to use a good and scalable CMS and create a blog for the company.

Zee's old site screens
Zee's old site

With all these requirements, Drupal became our only choice. Firstly because we've been using it for a while so it wouldn't take us too much time learning and developing for it, giving us more time to spend on the design matters.

Our goal for the site was basically create a very simple interface using few images and put all of our efforts on typography, colors and CSS.

Listed below some sites and blogs inspired us.

References of sites

We also followed some ideas we learned from some excellent podcasts such as the @media presentations: How to be a Creative Sponge, Diabolical Design: The Devil is in the Details, Five Simple Steps to Better Typography and Interface Design Juggling.

Among all of those lessons, we were able to apply on this project the very useful Jason Santa Maria's tip of creating a sort of wireframe, but with the real content, where we could play with the typography elements without worrying about colors and images.

With the site well structured we started applying some colors and testing different combinations.

Wireframe and first color scheme
Wireframe and first color scheme

Although our first idea was to use a light background, we chose to keep it dark. That decision is explained because we have always used dark backgrounds, and wouldn't be a wise move to change our identity so drastically. Visit the site at http://zee.com.br

Screens of the final version of the layout
Final Version

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.