As some of you know, I am working with InfraniX I.T. Solutions in Lucknow. I was given the task to redesign the homepage of my company. I looked at the current Web 2.0 trends which is full of Gradients etc but I wanted to go with something different. I decided to go with a Wood theme because wood does looks good if implemented properly & its all the rage these days.

After looking at Smashing Magazine’s articles, convincing my boss for a wood Design & many cups of Coffee , this is what I have made in the last 4 days.

Homepage

I showed to my friend Manan Kakkar, who gave me feedback that the design is tooo woody. I should reduce the amount of wood so I designed with the content area in a plane gradient. Here are 2 variations…

homepageblack

Homepagewhite

For the header, I made a wood board which is nailed to the primary board giving a 3D look, then for navigation bar again another small wood plank nailed to the Header Board. The textures were made in Photoshop. Its dark wood but overall with icons & all, it looks good.

The Infranix Logo is engraved in the header board like a carpenter engraves by Hammer & other tools. The navigation Icons are for going back to Homepage, or Contacting Infranix or Customer login. Clicking on the keys icon opens a tooltip made using JavaScript with user login fields

Login box

The news ticker is a simple white band. No frills where the news will come with a fade in & fade out effect.

The content boxes are wood boards inserted inside the main wood board by hammer. Content comes written on it as shown. I have used Tango Icons where applicable.

The second board is for company portfolio. There are 3 sections here created using JavaScript based vertical tabs, Software Portfolio denoted by the icon of a Monitor, Web Portfolio denoted by Globe & Downloads section where user can download demo brochure. Here I am demonstrating the Web Portfolio section showing thumbnails of the websites we have created. This is made using JavaScript & there is a slider which the user can move to right or left to see other websites’ thumbnails.

Hovering over the thumbnails will show an overlay on the thumbnail showing the name of the Website. Clicking on any of the thumbnail will open that website in a new Window.

product Tooltip

Below the portfolio section I created a bar showing all the technologies we use in our company & servers.

On the right hand side I have given sections for an Animation of 24X7 tech support, Logos of our clients slides in the Clients section & a user can Request for a Callback after filling the Quote Request form.

There is also a button which will open the page with Media & Events happening at Infranix.

Media

I am designing the content pages right now. As soon as they are complete, implementation will start. I am trying to keep the use of Flash to as low as required as everything can be done using JavaScript, AJAX  & CSS Animation (though less supported).

Now I hope my Boss won’t restricts me saying this website looks like that of a Furniture shop due to which the design might end up like something else which I don’t want.