Sava's Place

Gradients

The gradient has become a lynchpin of modern web design – and in some ways, deservedly so.

As a way to spruce up flat colour, the gradient is unparalleled in terms of versatility when designing for the screen. Where flat colour on the printed page takes on the quality of the medium – glossy paper yields glossy colour, matte paper yields matte colour, etc. – flat colour on the screen has no discernable texture, no variance in lighting. And so, solid colours on the screen can be lifeless and dull. Thus, the gradient has come to the fore to give a gloss to websites everywhere.

Don’t get me wrong – I think, if used correctly, the gradient tool can be a wonderful tool to add a touch of interest to a design, and to compensate for the lack of a reflective rather than an emissive medium – but unfortunately, the gradient has become a crutch to many web designers.

Example: Blinksale (nice site, but a bit too gradient-y)

Odd names and misplaced dots

With the shortage of good domain names, it would seem that the latest names for websites are getting weirder and weirder… Dropped vowels and misspellings are the order of the day, even amongst popular sites such as Flickr, Digg and Reddit. Seemingly random punctuation is another common way of getting a memorable name in the crowded .com marketplace – Ma.gnolia.com and del.icio.us are good examples.

Although a growing trend, at least we’re seeing some originality here – it’s certainly better than the trend towards ever-longer-domain-names-stuffed-with-keywords.com.

Example: del.icio.us

Diagonal Backgrounds

Diagonal backgrounds, for some reason or another, have surged in popularity amongst designers over the course of the last year or so. Perhaps for the same reasons as the humble gradient, this particular style of background is being used to lend texture and variance to what could have been an otherwise dull flat colour.

The diagonal background is usually spotted at an angle of exactly 45 degrees, to facilitate easy tiling, and will usually be only a shade lighter or darker than the background colour. And, I must confess – I’ve used this trick a fair few times, and I think it looks rather good.

Example: StumbleUpon

Big Fonts

The era of tiny, tiny 7-8pt Verdana is gone – monitor resolutions have increased, and CSS now gives us finer control over the appearance of text at larger sizes. Now we can adjust letter spacing, line heights and the variant of a typeface in a compatible and cross-browser friendly way.

The problem with the overly small fonts was largely due to Verdana being slightly larger than equivalent web fonts – 8pt Verdana is about the same as 9 or 10pt in other fonts, meaning that designers were using much, much smaller point sizes when Verdana was chosen for a site design. Body copy at 7.5pt or 8pt was the norm – even on big sites, such as Microsoft.com, the tiny scourge that was Verdana was to be seen everywhere.

However, with a shift towards design and typography, led by CSS sites, we’re seeing a trend towards larger fonts – much larger. The largest headings are no longer limited to 24pt – the sky’s the limit with some designs, and even body copy is seeing a size increase to 14pt and beyond.

Clarity of message and simplicity have become more important. With the design tools needed to exert the required style in typography on the web, we can now distill a message into a clearer and more concise package, optimized for modern browsers on larger resolution screens. It looks like large (and perhaps more importantly, scalable) fonts are here to stay.

Example: Blogger

White Backgrounds

Despite the multitude of colours available to a designer, the background for any given site will usually be white. It may be a lack of imagination, or it may be to maximize the contrast of the body text, but the black-on-white arrangement of text is near universal.

Perhaps it was the ultra-clean style of Google that kicked this off into the web 2.0 trend, but it would seem white is right – Flickr, Digg, Reddit, and pretty much every other modern site on the internet will have swathes of whitespace in the background.

So what’s wrong with white on black, or even a coloured background? Well, there are of course exceptions – there are plenty of black backgrounds out there, and even a few sites with a bolder coloured background for the text, but it’s perhaps the cleanness of design associated with white background, or just plain old habit, that leads us to choose plain white.

Off-white backgrounds can be very successful, however – neutrals such as beige or gray can be employed in the same way as whites, but lend warmth and more depth to the design. Examples include Blogger and Ma.gnolia, both of which employ neutral colours to good effect.

Example: Google

Wet Floor Effect

Thankfully, I think this particular trend has died down somewhat, but for a while at least, you couldn’t move for the so-called ‘wet floor’ effect. Essentially an inverted reflection underneath your shiny logo, image, or photo with a gradient mask applied – giving the appearance that the image is perpendicular to a shiny surface.

I think Apple used this effect in one of their products, causing a surge in usage – similar to the ‘glass sphere’ button effect abused by Mac applications – although thankfully, most people realized that ‘wet floor’ is a nice gimmick, but not something to be overused.

Example: neondragon.net tutorial

Pixel Fonts

After the popularity of 7.5pt Verdana, it seemed like designers took things one step further with pixel fonts – managing to cram a full typeface into a tiny 5×5 bitmaps in some cases. For some reason, these proved popular amongst some web designers – and even today, you can see pixel fonts cropping up everywhere!

Thankfully, there aren’t that many sites that use them for body copy – although I’m sure I’ve seen some flash sites that have had reams of 6pt text. There may be some call for ultra-tiny text (for fixed-size banners they can be a godsend), but making your users squint is never a good idea.

Example: Collection of pixel fonts

Tags & Folksonomy

If you aren’t tagging, then you aren’t part of an important new trend in social categorization. They call it ‘folksonomy’, but it’s essentially a way of accurately categorizing information without relying on one central source.

Sites such as Technorati now divide blog posts up into broad ‘tags’, allowing blog readers to carve up the blogosphere to their liking. Flickr does the same for photos, also offering ‘clusters’ of commonly paired tags, giving a human-led insight to the way this sort of thing works.

Whilst broader, more structured sites may be more suited to self-designated categories, sites such as these with a large quantity of user-generated content suits the folksonomy system perfectly.

Example: Flickr