Datahaven Consulting
Today I unleashed yet another new website onto the world. This time for my web design and consultancy business, Datahaven Consulting.
I’ve been working on this site for a little while now and it has taught me some interesting new things about developing a site. My approach this time was partly iterative but mainly boiled down to the following steps:
Initial rough design
For this step I used Macromedia’s Flash MX. I use this because I like the way I can resize everything without having to worry about the resolution. In particular I like this product for editing text and creating logos because it allows me to break text into pieces and edit the individual parts.
Some initial work with a pen and paper to get my thoughts down about the site also came in handy at this point.
Produce a bitmap image of how I wanted the site to look
I use The GIMP for most of my bitmap graphics editing work. It has the enormous competitive advantage of being Open Source and hence free. It is also a highly competent rival to Photoshop and it helps that I’ve had plenty of practice with it and know how to use it reasonably well. As a bonus, it has a handy screen-grab feature that I used several times in this project.
I imported the image produced by Flash into The GIMP and used the various tools to trace over the outline and fill in with textures and colours.
Cut the bitmap into pieces and lay them out in an HTML table.
I used another Macromedia product, DreamWeaver for creating the initial HTML pages. This isn’t my favourite tool but it does the job. WordPad, built into Windows XP is a close second choice for me. In fact I used it later on for tweaking the finished files. I used The GIMP’s crop feature to cut the bitmap up into pieces.
Add the text into the site
I continued to use DreamWeaver for this step. Hardest part was working out what I wanted to say.
Optimise the site
I used Wordpad to cut the pages produced by DreamWeaver into separate parts, so that the pages could share common header and footer include files.
I then did plenty of tweaking to ensure that all pages worked properly and that spacing came out neatly, etc.
Upload all the pieces to my hosting account
The easy bit!
And there you have it, an impromptu tutorial on website design and creation. If you have been following the steps closely, yours should look like this:
