Modern Life - Details

It's been well over a year since I compiled the original list ofweb cliches, so I figured it was time to revisit some of the trends currently prevalent in web design now.

Things have definitely moved on since last year; Web 2.0 is not soen vogueas it was, instead being replaced with richer colours, rougher textures and (on average) fewer rounded corners.

So what trends have emerged? What's hot, inspiration wise?

Odd one, this. Seems the currenttrend du jouris to employ a cutesy vectoresque graphic character. This fits in with the tendency to use strong colour and graphical elements in the current crop of designs rather well.

The human element of the cartoon also serves as a fashionable replacement for the cliched stock imagery of yore - no longer do you need a photograph of a woman talking on a phone to convey what your business is about. These days, you can utilise a cartoon character to achieve the same effect.

Examples:Elitist Snob,Freelance Switch,sr28,Global Zoo,Wishlistr, andNetNova.

The world of web design has seen some sweeping changes since its inception years ago - many of the limiting factors that were once such a concern are no longer in place. With far more bandwidth to play with, and a limitless palette from the full 24-bit gamut (a far cry from 'Web Safe' colours!), the once humble background image has now become the underpinning feature of many designs.

Complex swirls, flourishes and rougher drips and sprays are a common choice these days, and they are a great way to add some spice to an otherwise plain backdrop.

Examples:Rawnet,taDesign,Hoy puls,imlousekStudio.

Creative use of backdrops has also meant a lot of designers opt to 'break out' of the conventional box model. Why bother rounding corners when you can ignore them completely?

With better CSS support in browsers comes more creative use of backgrounds, absolutely-positioned elements and full transparency - perfect for breaking down hard edges and enabling freer designs. The humble basic<div> boxout isn't going anywhere yet, but it's always nice to have options.

Examples:Cult-foo,Web Designer Wall,Airborne and dreaming,Belchatow.

Ah, yes. Oft a joke at Web 2.0's expense, the oversize RSS icon is very much alive and well. Perhaps not as ubiquitous as it was, the size of the RSS icons is still the prime concern of the webmaster looking to promote their feed.

Examples:ReviewMe,ShoeMoney, andthe Daily Star.

Whether it's wood, paper, stone or a combination of all kinds of texture, anything other than flat colours or basic gradients has been hot this year. I suspect it's a backlash of the gradient-led design that prevailed in 2006, but rougher backgrounds are in, and cleaner designs are out.

Ink spills, scrawls, scratches and other real world effects have played a strong role, as well - 'busy' is most certainly the look to aim for, it would seem.

Examples:Jesus Rodriguez Velasco,Cottonseed Oil, andDulles Dodgeball.

The neon hues of Web 2.0, such asFlickr Pink et al, have toned down a bit and found a more earthy set of hues in many current designs. Darker reds, burgundies and browns are a popular choice - and these pair well with the ubiquitous dark grey background, favoured by a lot of sites.

Examples:9rules,OnWired,ScoreReviews,SayHej!.

So there you have it - another six trends that seem to have bubbled to the top of the collective design community. Things have gone from Web 2.0's clean and simple to busier and less conventional designs. Colours have gone from electric neon to more muted rich reds, earthy tones and textures. What on earth will 2008 bring?

ByStuart Brown, posted inWeb Design,Design
Tags :web,cliche,design
View/add comments on this post

I guess this answers the question of what to do with the LED icons I posted yesterday - I've always wanted to do a dot-matrix dynamic display in JavaScript, and I suppose an LED message scroller is the perfect excuse.

There's a choice of 7 individual colours (or the nifty rainbow option, pictured below), motion blur, and a few tweakable options to play around with.It doesn't work in Internet Explorer(it's only designed as a proof-of-concept, not as production code), but anything that supports CSS opacity (Firefox, Safari and Opera on Windows) should work just fine - Safari's rendering engine seems particularly nippy.

See the scroller in action, ordownload the files here.

Extract the .ZIP archive somewhere and open the scroller.html file in your browser - everything should work fine there. You can edit the HTML file to tweak the various settings - if performance is an issue try setting blurLevel to 0.

ByStuart Brown, posted inJavaScript,Web Design
Tags :javascript,scroller,led,message
View/add comments on this post

Simple, versatile, great for status indicators or embellishment: 14 icons in 7 colours, representing the most common types of LED. Make your own virtualthrowies, use them on a webpage or an app, do what you like with them.

Available inmultiple PNG sizes(16, 32, 48, 64, 128 and 256 px square),Windows .ICO files(incorporating all the sizes of the PNGs) or inoriginal vector .EPS format.

ByStuart Brown, posted inIcons&Iconography,Design
Tags :icons,led,light,emitting,diode
View/add comments on this post