Some time ago I wrote tutorial on how to create a business website mockup using Adobe Fireworks based on 960 grid system. I have spiced it up a bit and made it more eye pleasing and converted it to pure HTML5. On other occasion I will do explaining on how to port design to HTML but now I present you fully working template ready to use. You can use this template as you wish. I have used some free icons from the web and awesome jQuery slideshow called FlexSlider from madebymuffin.com.

Last time I showed you how to use 960 grid system with Adobe Fireworks and now we go straight to action. This time I have prepared an easy tutorial with Fireworks png source file included. Before I proceed, if you haven’t installed 960 grid extension for Fireworks go to previous post and check it out and add it to your Fireworks. I will show you how to make simple corporate looking website mockup you see below.

960 grid system is a great way to design websites. I don’t use it always but I would sure recommend it. First thing first, what the heck is a 960 grid system? Well go to 960.gs and get your copy. It is a tool (or bunch of tools) that will help you out in making your web site look professional and clean. Grid system is awesome for fast website prototyping. It will make your website layout bulletproof, with just the right gutter and spacing of elements.