My Style

7 November 2007

Inspired by a couple of posts by Khoi and Shaun (you say rip off from I say inspired by) today I’m going to run through the basic devices and elements I commonly fall back on when it comes to designing a web site. It’s a very interesting exercise – at least form my point of view – as I think it’s always a good idea to be aware of how you work; that awareness can help both when you’re trying to do something different (and deliberately go against your ‘style’) and also when you’re completely up against it and need to turn something around quickly.

So, without further ado:

Helvetica

Well, I’ve got to start with the basics, haven’t I? Helvetica – I think – is by far and away the best web font out there. As web developers we don’t really get much choice in fonts, and when looking at sans-serif fonts it’s pretty much between Helvetica and Verdana – I’m not sure if I’ve ever chosen Verdana, except for body text on occasion.

Of course here I’ve put myself out on a limb and used the lovely Gill Sans all over the place, but most people don’t have it (at least most windows users). I think I can get away with it here, though.

Stretchy-ness

I’m a bit evangelistic about fluid width sites – in the vast majority of circumstances they are the way to go. The only legitimate concern with fluid width sites is that they tend to produce long line lengths at wider sizes, but this can be worked around by judicious use of max-width and side columns.

It’s not to say that I don’t use fixed width sometimes – some designs just work better that way (or at least can be built to deadline that way).

Special Effects

This leads on nicely from that last point; I’m a big fan of using Javascript to spice up a page design and lead to compositions that wouldn’t normally be possible. This site is a prime example with the stretchy post images – in fact, stretchy images (which result from the point before about preferring fluid width sites) are most definitely a design tick that I keep coming back to.

The ability to use images sized to fit the full browser window without using Flash is one I’m a big fan of (and can happily fall back to using a background image if JS isn’t available) – the impact large images can have shouldn’t be under estimated.

Photos

Also leading on nicely from the last point – I try and use photos everywhere. That whole ‘picture is a thousand words’ thing is very true, and the whole position I come from when designing is to promote the content in the best way possible – photos make this happen very quickly. And they look pretty awesome as well.

Dividers

Simple, but good – 1px borders can be incredibly useful to divide up a page, especially one with lots of content that you don’t have enough space to use white space as the divider. That and the fact that with CSS they’re incredibly easy to make (no messing around in Photoshop making images) lead them to be an ever present tool in my toolbox.

Drop Shadows, Reflections and General Apple-ness

This one is here for me: I have a tendency to revert to using drop shadows, reflections and generally rip of Apple’s (very strong) style and it’s very much a bad thing. It’s easy to do, and sort of looks good, but it really is the essence of bad taste.

It can totally work when creating a UI, or web application (as their style works well for user interfaces) but should be left well alone when making normal sites.

From: Articles

7 November 2007