Site design previewSome of you might remember I put up a preview of a design I was working on for my business web site a few days ago. When I looked at it again this morning I thought to myself “that looks scarily like a Powerpoint theme from the Windows 3.1 era!!” I think it was the vector hills I used and the colour scheme. So here is something completely different (well, mostly), which I’m a little more pleased with. This sample is not 100% accurate to the final design, but it’s close enough for you to get a feel for it.
This too will be as flexible as possible, within certain degrees of flexibility at least. The main feature of this is the use of transparent PNG images, thanks to the JavaScript IE7 code I mentioned before, allowing IE6 and below to behave themselves (and means less time spent fixing problems caused when IE displays things incorrectly). For instance, the ‘m’ logo top left will float on top of the background, as will the ‘Matthew Dawkins’ text. The main body of the site (where the text will be) will have a very faint version of the image behind, fading out into just blue (this will be done just with a normal JPG background though), and the menu on the left will fade out top and bottom to show the background through. The popup menu (all done in CSS, btw) will use a transparent PNG for a background, giving a subtle transparency and a shadow underneath too. I also have plans for a ‘special offer’ box that will float on the right hand side, which will have some sort of logo with nice smooth edges (making use of the PNG alpha channel again).

Again, your comments are most welcome. It was nice to see an old friend leaving a message last time (thanks for that!), and I’d appreciate any feedback on this design too.

I have also been enjoying exploiting the power of PNG alpha channels with the Diocese of Chelmsford web site, which now sports a Christmas-themed icon in the top right corner, using a cunning fade to nothing so that it blends into the background nicely. Ah, I do love the power of CSS!

Categories: Technology


Phill · 13 December 2006 at 2:14 pm

Hi Matthew,

You might want to edit that blog post – you didn’t provide a witty and / or relevant title!

As for the design – it looks good. The only thing is, I would make the popout menu the same style as the fixed menu (as in, white background) — I think the different colours make it look a bit strange, given that people are used to menus pretty much having a consistent theme.

The fade in / fade out of the left hand menu also likes nice, but be wary of having too much of a good thing 😉 I think having a plain “side bar” style menu underneath the ‘creative web design’ bar would look just as good without any fading (or perhaps only having fading at the bottom) .

Anyway, just a few thoughts, probably best to ignore them given that I don’t have an artistic bone in my body!

Matthew · 13 December 2006 at 3:44 pm

Thanks Phill. The old problem of leaving the writing of the title till the end, then forgetting it in the course of writing the post!

As for the site design, I think I agree about the side panel. I wasn’t entirely convinced to begin with, but it was a start at least. I’ve been getting plenty of inspiration from Stopdesign and Zen Garden, and I’m thinking a more solid sidebar might indeed be more suitable. The popup menu is still in need of development, I was trying to recreate the sort of semi-transparent boxes used on the Mac so much, in things like iPhoto, Growl, Quicksilver and the default alt-tab switcher. Not quite there (by a long shot, unfortunately), but I might get it eventually! Would be quite a feat to recreate it on the web though…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.