Smashing Magazine Web Design Challenge

23.9.2011

Keeping ourselves up to date with the latest news and developments regarding the web is a priority at Zheta International, we access several magazines and online media on a daily basis. Smashing Magazine, a highly regarded online entity focusing on web-related developments, has just launched a challenge which we have accepted and produced a documentation for our corporate web site:

Concept & Research
Before working on the preliminary concepts for our new company website, we held various internal meetings and exchanged ideas on what approach should be taken on our new concept. Not only did we explore new ideas, but we also got to know what the company meant to each and every employee in the studio. We concluded that Excellence in design was Zheta International’s philosophy, whilst keeping in mind that the website layout should be designed to cater for additional content which could be added dynamically as we published more data, such as client work in our portfolio.

Styling
Branding is key. Be it in the business or commercial sector, a company’s brand is the primary image a company should be identified from. Therefore, we began conceptualising our new web presence by deriving elements from the company logo. This was used as our point of reference when coming up with mock up concepts. The Zheta International logo is monochromatic and is very angular; these properties had to be translated into the website to keep consistency between the identity, web concept and our branding.

Colour
Since our corporate colours are Black and White we opted to keep the site’s background white, with black and varying grey shades used for the typography and other design elements within the site. We found that this restricted colour palette helped us put forward the clean and corporate look we want our company to portray. The Client Showcase slideshow in our homepage and our Branding Showcase gave us ample space to include subtle colour images which complement our choice of colour for the website layout.

Typography
The Zheta International logo uses the typeface Estrangelo Edessa so we opted to stick to this font family for the Main Titles in the pages; this kept our company image consistent. We then used Lucida Sans Unicode for the dynamic content within the site; this typeface is both web-friendly and compliments the clean look we were going for. These elements strengthened the professional and corporate look that is tied to the Zheta International brand.

Grid
The site is built over the 960 Grid System, with roughly 60% of the horizontal footprint dedicated to the site content on the left are of the page, and 40% (with a 10% gap) dedicated to navigational elements. We kept in mind that the site would be viewed on different screen sizes so we made sure that the maximum width would look good on small monitors.

Layout
The pages are generally divided into four sections - the Header, Top Navigation, Content and the Site Map. The Content area is the only section that may be modified according to the content we would like to display in the different pages. For instance, the Zheta International homepage contains a large image slideshow that placed over three columns used for navigation. Here, we constructed the landing page to show the elements we felt would interest our clients and other designers alike. The content layout changes throughout the different sections, yet keeps consistent with the main design that allows a consistent experience from the user's end.

Imagery
As previously mentioned, the images in our website give subtleness and life to the general layout. We keep the images as conceptual as possible, sometimes experimenting with a new style which we may find fitting to the company or the article. Some of the styles used in these images are not directly related to Zheta International, but are part of the solution we offer our clients.