2007: More Web Design Trends & Cliches

Cartoons, textures, swirls, earty tones and richer colours

It's been well over a year since I compiled the original list of web 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 so en vogue as 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?

Cute cartoons & mascots

Odd one, this. Seems the current trend du jour is 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, and NetNova.

Swirls, drips & flourishes

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.

Broken borders

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.

Oversize RSS Icons

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, and the Daily Star.

High texture designs

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, and Dulles Dodgeball.

Rich colours with dark grey background

The neon hues of Web 2.0, such as Flickr 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?

Permalink to '2007: More Web Design Trends & Cliches'View comments [29]


2Dec

JavaScript LED Message Scrolling Display

Any resemblance to a <marquee> is purely coincidental

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, or download 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.

Permalink to 'JavaScript LED Message Scrolling Display'View comments [4]


1Dec

LED Icons

24-bit PNG and Windows Icons (.ico) formats

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

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

led icon set

Permalink to 'LED Icons'View comments [2]


27Nov

Screen Resolutions and Aspect Ratios Worldwide

Screen real estate availability across a selection of countries

Intended screen resolution is a deciding factor in terms of a site design and layout - catering for smaller resolutions is a key factor for accessibility and for ensuring as many readers as possible can read your content. But how does screen size vary with locale?

The general rule-of thumb is to go as low as possible - if your design works perfectly at 800x600, great - if it's operable at 640x480 or lower, even better. However, as technology progresses, screens are getting larger and the sizes less uniform - 4:3 is slowly losing favour to widescreen ratios, such as 16:9 and 16:10.

In certain circumstances, the market or demographic which you are aiming at can affect your intended viewing resolution - technical and design-oriented sites can benefit from a substantially larger than average resolution. Different regions also have slightly different profiles - widescreen monitors are more popular in some regions than others, for instance.

Below are statistics compiled from 18 months worth of log data from Modern Life - a sample size of well over a million visitors, from all over the world. I took the screen resolution data from the top 25 visiting countries and compiled them into two key metrics - the average screen resolution (in megapixels, calculated by multiplying the horizontal resolution be the vertical and dividing by 1,000,000), and the average screen ratio (average height divided by average width).

The results show some interesting trends.

Average screen resolution, worldwide

average screen resolution worldwide

Here, the green countries show a trend towards higher resolution displays, the red towards lower resolutions. India had the lowest average display size, at 0.872 megapixels - an average of slightly higher than 1024x768.

The highest resolutions were found in Scandinavia and Central Europe - with Switzerland boasting an average resolution of 1.306 megapixels - about the equivalent of 1280x1024.

Average screen ratio, worldwide

average screen ratio worldwide

Average screen ratio serves as an indicator for the prevalence of widescreen monitors - countries in green have wider resolutions, on average. Denmark, Belgium, the U.S. and Italy have the highest incidence on widescreen resolutions.

Russia, on the other hand, despite a higher average resolution, favours 4:3 and 5:4 resolution screens - and thus are likely to have more vertical resolution available.

Resolution vs. Ratio, per country

Graph showing screen resolution versus ratio, divided by country

This scatter graph illustrates groupings more clearly - Western Europe is concentrated on the right hand side, Asia and South America to the left. Russia is distinct in being the only country to have an average resolution taller than 4:3 - a feat accomplished by the popularity of 1280x1024 (which is in the ratio 5:4).

There would also appear to be weak positive correlation between screen size and ratio - larger screens are more likely to be widescreen (which makes sense, given the increased suitability of larger screens for presenting widescreen content).

Tablular Data

Country Avg. Megapixels Avg. Ratio
India 0.872 0.739
Brazil 0.913 0.748
Argentina 0.943 0.746
China 0.950 0.732
Mexico 0.999 0.722
Turkey 1.018 0.734
Singapore 1.035 0.720
United Kingdom 1.049 0.730
Spain 1.074 0.734
Poland 1.085 0.734
Romania 1.096 0.745
Italy 1.129 0.718
Japan 1.134 0.744
Canada 1.138 0.722
Russia 1.160 0.756
United States 1.167 0.720
Australia 1.179 0.727
France 1.184 0.723
Belgium 1.209 0.715
Netherlands 1.224 0.725
Germany 1.233 0.731
Finland 1.239 0.733
Denmark 1.264 0.717
Sweden 1.269 0.727
Switzerland 1.306 0.725

Methodology

Total sample size: 1,110,495, based on data accrued via Google Analytics for modernlifeisrubbish.co.uk. Data from May 2006 through November 2007. Resolution data sample taken from the top 10 most commonly occurring resolutions taken (outliers excluded). Data collected for only the top 25 most commonly occurring countries.

You may download the raw data as an Excel spreadsheet here.

Permalink to 'Screen Resolutions and Aspect Ratios Worldwide'View comments [13]


21Nov

Good Practice in Implementing HTML Forms

Tips & tricks for optimum efficacy in data collection

Constructing a form

Forms are a critical but often misunderstood aspect of web design - most of the attention in tutorials and guides go to the presentational aspects, rather than the usability of forms.

There are countless times when I've been pained by over-zealous validation, postal code lookups which don't have my address, and data lost from a form I've just spent half an hour filling out. As it seems like I've spent the last couple of months working on nothing but forms, I figured I'd compile a handy set of general guidelines.

Single page forms...

In general, I'll avoid spanning a form over more than one page - it makes navigating backwards & forwards difficult for both the user and the developer, and turns the simple act of returning to the top of a form to correct a detail to a painful trawl through a series of pages.

...but paginate when necessary

If you're dealing with hundreds of fields worth of data (and have good reason to), then pagination may be the best way of dealing with it. Make sure you break the page at a logical point, and that full bi-directional travel is possible.

Most importantly, test thoroughly to make sure it's impossible to lose any data when traversing pages, or through server-side validation checks.

Minimise data collected where possible

Although a one-paged form is best, excessive scrolling is undesirable too. If you can compact or exclude some of the fields, do so.

This is particularly applicable to registration forms -you don't need to collect every last scrap of information about your user at the time of registration, just collect the basics. Just username, email, password, and perhaps a second password field to confirm. Anything more is superfluous - and you can allow the user to enter it at a later date.

AJAX in forms

Avoid AJAX controls in forms. If it breaks you'll have no route for graceful degradation without losing form data, and I'm yet to see such a control with any real use.

Form submission via AJAX is also less-than-sensible, unless you're dealing with a form in an environment that's already reliant on a steady page state. Don't use it unless you need to - the browser's in-built handling for forms via POST will be far more robust, and just as fast if done right.

Overly aggressive validation

Don't be too aggressive with your JavaScript validation. Consider it to be like a velvet rope, guiding users away from any obvious pitfalls but not in any way a major impedance. Remember - JavaScript can (and will) be turned off on the client.

Any unsafe data (i.e. SQL injection attempts) should be sanitised server-side - it shouldn't be a consideration client-side at all. You should be concerned about minor corrections, and even then - use a light touch.

Use <label> elements

I'm a fan of the implicit label in forms - that is, encapsulating the input element with a label to automatically associate them. It's simple, makes label / input pairs easy to style, and doesn't require too much extra markup.

The explicit (but more verbose) method is to use the <label> element's 'for' attribute - here you can specify the id to which the label belongs. This does allow slightly more flexibility as fas as styling goes, but it's down to your own requirements whether you use implicit or explicit labelling.

Labels provide usability hinting for the browser - for instance, in Firefox clicking the label associated with a checkbox will have the same effect as clicking the checkbox itself (effectively increasing the clickable area of the control) - a common convention in operating systems and a boon for usability.

Form uploads

The <input type="file"/> element is horribly broken as far as CSS is concerned. Styling via CSS is possible (such as this way or this one) but the backend code is messier than I would like and non-intuitive.

Also, if you're constructing a form that handles an upload don't forget to add the attribute enctype="multipart/form-data" to your form. Otherwise, it simply won't work - as I discover nearly every time I'm working with file uploads and forget all about the 'enctype' attribute.

Conclusion

Keep forms simple. Don't break anything. Consider usability at every step.

Permalink to 'Good Practice in Implementing HTML Forms'View comments [11]


7Aug

Retro MacOS Wordpress Theme

In full 1-bit glory

I thought I'd try my hands at WordPress tweakery, and so I thought I'd mark up my first custom theme. For whatever reason, I decided that a rendition of the monochrome MacOS from circa System 6 would be cool - with a few liberties taken for the sake of the web, of course.

It's my first real attempt at a theme, so goodness knows if it'll work on anything other than WP 2.1.2 (which is what it was developed under). Still, it's based on some of the structure behind the default Kubrick theme, so it should be relatively complete. Here's a screenshot:

retro wordpress macos theme

And you can preview it installed here:

http://retromactheme.modernlifeisrubbish.co.uk/

Or, just cut to the chase and download it here. Place it in your wordpress wp-content/themes directory and it should appear in your presentation config.


Permalink to 'Retro MacOS Wordpress Theme'View comments [36]


7Aug

Six of the best: Recommended Reads

Six sites to make your feedreader happy

Summer has always been somewhat of a quiet time on the blogging front, with folk jetting off on holiday and enjoying the sunshine - anything other than being cooped up indoors writing.

But whilst we're soaking up the sun and are being generally non-productive, the feed reader addiction doesn't go away so easily. Thankfully, there are a number of great blogs, web comics and sites out there to read - and here are some of them I've been enjoying over the summer lull.

Diesel Sweeties

diesel sweeties

Robots, girls and a dash of nerdy in-jokes. Described as a 'pixelated robot romance web comic', Diesel Sweeties pretty much delivers everything you'd expect on that promise.

Although it verges on the precipice between weird and cool, once you grok the general theme - and remove any inhibitions you may have over technosexuality - you'll love it. It's almost certainly my favourite web comic.

Diesel Sweeties / RSS Feed

Passive Aggressive Notes

passive-aggressive notes

A whole site dedicated to little notes left out of sheer frustration? You bet - in full, unadulterated glory.

Although not technically passive-aggressive, the notes in question are usually rather amusing - although the bile evident in some of the notes may indicate the subject in question might not share the joke. It's an all-too familiar brand of humour, and well worth a slot in your feed reader.

Passive-Aggressive Notes / RSS Feed

Typographica

typographica

Possibly the best (if not the only) blog about typography in existence. Shame it's not updated nearly as often as it should be - but Typographica is still a favourite.

Typographica / RSS Feed

What The Duck

what the duck

WTD appeals to the photographer in me - it's a webcomic about the travails of a ill-fated but well-intentioned duck, with aspirations of making it big as a photographer.

Updated every weekday, it's a somewhat humorous insight into the world of photography, photographers - and something familiar to all freelancers - the bad client. Well worth a subscription if you either a) are interested in photography, or b) like webcomics with ducks.

What The Duck / RSS Feed

Music Thing

music thing

I have a weakness for all things electrical, covering the gamut from analogue to digital - and music-related electronic gear is certainly no exception. From analogue synthesisers to vocoders, Music Thing runs the gamut of cool musical gear.

Music Thing / RSS Feed

Worse Than Failure

worse than failure

Formerly 'The Daily WTF', 'Worse Than Failure' is a unashamedly geeky look into the world of programming - from dodgy code to unhelpful error messages, to the worst interview candidates ever.

Some of the code snippets might be a little obscure (particularly if you're not a programmer, or if it's in a language you're not familiar with) - but the comments are generally rather insightful as to discovering what the true 'WTF' is. Recommended, and worth subscribing to for the regular 'Error'd' posts that never fail to lighten a droll Friday afternoon.

Worse Than Failure / RSS Feed


So there you have it - six of my favourite RSS feeds from the last few months. Now, over to you - what feeds have kept you entertained recently?

Permalink to 'Six of the best: Recommended Reads'View comments [8]


6Aug

Forget design 'inspiration' - just stick to the basics

A lot of design tutorials tend to focus on the aspect of 'inspiration' - without much emphasis on the design process itself. For all the showy gradients and web 2.0 gloss, truly good design comes from an altogether different approach.

Emulating a design you like is perfectly acceptable, but you can't create a great design by solely cannibalising other sites - a modicum of the design process is needed. Here's how to get started on the road to design nirvana.

Planning

Before you even think about writing HTML, or opening Photoshop, you should cement the foundations for your design on paper - or whatever sketching medium you're most comfortable with - first.

Planning is the first step on the road to a great design, and starting to sketch out what the final production will look like will help you gain a stronger overall concept.

Simplicity

The overwhelming trend for design recently has been a shift to run the gamut in regards to choices in colour, in tone, and in form. Gradients, multiple colours and swirly vector effects are very much 'en vogue'.

Effective design is never gimmicky. If you wish to design something that's easier to maintain, more legible, and more future-proof then simplicity is the key.

That doesn't mean you can't use vectors, gradients, and a large palette of colours - but the effects, forms and colours you do employ should be deliberate.

If an element or an effect has no net gain on the overall design, remove it. Take away the superfluous parts of a design and the core components will stand out stronger, making for a more cohesive identity.

Typography

Typography is critical in information design. If you don't know your Helvetica from your Arial, then you're in real trouble.

Thankfully, there are many, many books on the subject of type - Stop Stealing Sheep & Find Out How Type Works is a good overview, and a cursory search for 'typography' returns over 16,000 results. There is plenty of material out there.

Unfortunately, there's no overnight method to learn typography - you just have to immerse yourself in it, read the books, take a course if you're particularly serious - and with time you'll become a typophile like the rest of us.

I can also recommend Typographica. It's a superlative typography blog, although sadly not updated nearly frequently enough.

Usability

The sad thing about so many of these glitzy, overwrought designs so lauded these days is that usability is usually left abandoned on the wayside.

Usability is design. It's not just about how your site looks, it's about how it works. Both of these qualities interoperate, and the best designs couple visual attractiveness with an interface that just feels 'right'.

Google is a great example - Facebook, too. There's nothing outstanding, visually, but the functionally-led design makes both sites great.

Be aware of how your site works, and be aware that the design runs deeper than the look of a site.

Refinement

Good design takes time. Deliberate over your work every chance you get, ask yourself questions - how could this be better? Is it obvious how this works? What does this represent?

The entire design process is little more than the conception of an idea - your initial sketches - and the continued refinement of that idea into the finished design.

When you've written the last of the CSS, tidied up all the parts you intended, take a step back. Look at what you've created. Don't be afraid of making tweaks.

The final stages of a design are the most decisive - don't give up on good when you can achieve beyond.

Practice

Sadly, there are not often any shortcuts that pay dividends, and design is no exception.

Practice is an important part of any learning process, and with so many aspects to modern design - from the backend programming to mastering the software, and the core design aspects underneath - time is critical in understanding the art.

The good news is, at least, that there's no such thing as bad practice - as long as you keep self-critiquing, keeping up good design practices and always challenge yourself, then you'll continue to improve.

Permalink to 'Forget design 'inspiration' - just stick to the basics'View comments [11]


2Aug

The BBC iPlayer is officially Web 2.0 compliant

...and only a year or two behind the trend - good show!

Those of you fearing that the BBC is out of touch as far as the web is concerned need worry no more - the recently-opened-private-beta of the BBC iPlayer is at the cutting edge of interactive design. I mean, just look at the Beta application page:

There never was a more timely design - it checks all the right Web 2.0 boxes:

Gradients - check. Not as many as there could be, but the grey shadow at the top definitely counts.

Official Web 2.0 colours - check. It's not an exact match, but that pink isn't a million miles away from 'Flickr Pink'.

Beta status - check. Like all good Web 2.0 applications, you can't just go ahead and launch. A good long stint in Beta should put everyone's minds at ease.

Web 2.0 name - check. Not quite as good as 'iPlayr', but at least the lower case 'i' makes it sound trendy and cool.

Screenshots floating in mid-air - check. I would have preferred the wet floor effect, but the floating screen with drop shadow is a nice touch nonetheless.

Oodles of hype - check. I'm reserving judgement on the iPlayer until I've seen it, but it's certainly had it's fair share of hype - and criticism - already.

Result: Full Web 2.0 compliance.

Permalink to 'The BBC iPlayer is officially Web 2.0 compliant'View comments [15]


2Aug

There's a fine line between blogspam and self-submission

Nobody reading your crappy blog? Spam Digg and Reddit with it constantly!

Blogspam is bad. It must be; it has 'spam' in it. But what on earth is blogspam?

Let me give you some context. On the social media sites, such as Reddit and Digg, self-submission of your own work is generally seen as OK - implicitly on Digg, assuming it's worthwhile content, and explicitly on Reddit.

Daniel Miessler came out strongly in favour of self-submission - under the premise that more submissions from new writers, new content sources will allow the best of those to break through where they might not have done before.

Great. So I can submit anything I churn out then? And I can be rewarded with a metric boatload of traffic if folk think it's good?

Yes. Well, sort of. Submitting everything is probably a bit much. Not every blog post is worth reading. Some lack context. Some are just a links to other blog posts. Some are just badly written.

So if I submit everything I write, is that 'blogspam'?

I suppose it could be classed as that, particularly if the reason you're doing it is solely to get traffic. Submitting everything you write, regardless of quality or suitability, will reduce the signal to noise ratio, and thus make it harder to find good content.

Another thing to bear in mind is the thorny issue of original content. Whilst it's fine to quote other blog posts or news sources verbatim, if that's the whole of your post then you should consider submitting the original link, rather than your own insubstantial blog post.

But what about the ad revenue? The traffic? The glory!?

Spoken like a true blogspammer. But at least you're not posting pictures of cats.

Permalink to 'There's a fine line between blogspam and self-submission'View comments [5]



most recent posts