Learning from web design trends through the years

Over the past eight years here at Cyber-Duck we’ve been keeping an archive of things on the web we felt were inspirational or noteworthy.  When we began a small project to share this collection online we noticed some interesting trends.

With 2013 fast approaching, armed with our Pinterest archive, we’re going to take a look back over the past eight years of web design, the trends that have come and gone and what we can learn from them to make ourselves better web designers. 

TYPOGRAPHY

Source: Cyber-Duck’s Pinterest page

Arild Danielsen Photography used Flash to achieve the typography they wanted in 2004

The tools for implementing typography on the web have come a long way in the past decade. Historically web designers, restricted to a handful of ‘web-safe’ fonts, bemoaned a lack of choice and support on the web. With workarounds based on Flash, Javascript or images, designers got the look intended but often sacrificed usability in a classic example of form over function.

In recent years new technologies and standards have given rise to a variety of services which enable web designers to achieve the typography they want without compromising usability, such as @font-face, Google Web fonts and Typekit.

The designs of 2004 were no less visually appealing than they are today, but these new technologies make even the most over-the-top typography more technically user-friendly.

However, just because text can now be selected, copied and resized by the end user, or work responsively on any device, doesn’t mean it is more readable by default. Any designer will tell you that good typography is more than simply picking a nice looking typeface and styling it – it has to be fit for purpose.  If your body text looks beautiful but is unreadable, then ultimately it is useless.

Many designers have a habit of looking at their text but not reading it. Think about it, when was the last time you stopped admiring your website and actually tried to read it as a user would? 

Faced with almost unlimited choice, web designers of today need to bear in mind readable text sizes, easy-to-navigate content hierarchy, clear contrast between characters and their background and column widths being optimised for easy reading.

GRIDS & LAYOUTS

Source: Cyber-Duck’s Pinterest page

Mail Chimp used a classic 12 column grid layout in this design from 2009

Trends in the use of grids and layouts on the web have also varied radically over the years, particularly given the recent rise of browsing on mobile.  

In the web design industry you could be forgiven for thinking that using grids to organise and lay out content is a new thing.  It’s not. Print designers have been using grids to ensure optimal proportions and consistency in their designs for hundreds of years, dating back to the use of grids like Villiards Diagram in medieval times, to arrange handwritten text.

A few years ago grid based frameworks such as 960.gs and Blueprint caused a minor revolution in the way we made websites.  Suddenly we were able to create consistent, well proportioned and quicker, easier to build web designs. 

There was a problem with these grid systems however.  They were inflexible and based on the common assumption that all users had a screen resolution of 1024×768.  While using these grids made sense at the time, it was short-sighted to ignore the relatively rapid divergence of screen sizes and technologies used to access the web.

At the root of this were the tools that we used to design. Photoshop lends itself brilliantly to media with fixed dimensions, but the web was beginning to move away from that trait of physical media. 

The recent explosion in popularity of web-enabled mobile devices has forced designers to consider how users of an array of devices and browsers would experience their designs. In 2007, Ethan Marcotte coined the phrase ‘responsive web design’ as part of an approach to web design where designers are encouraged to embrace the inherent fluidity and flexibility of the web.

Despite this, many web designers still haven’t got out of the fixed-width mind-set of years past, focusing on the width of devices, rather than accepting the responsive nature of the web and letting their content determine the fluid layouts it needs.

As an industry we need to accept that we simply cannot control how users interact with our designs and that as more screen types, ratios and sizes (not to mention input methods) enter the market responsive layouts will need to accommodate this unknown. We need to embrace tools for responsive grid design, like GridSetApp, that enable designers to build on centuries of grid theory to ensure layouts are flexible enough to cope with the ever-changing nature of the web. 

The days of churning out dozens of static comps are numbered. By designing style tiles and pattern libraries, before swiftly moving into the browser to prototype, we are able to communicate our design more accurately, making an iterative approach simpler and quicker.

DESIGN PATTERNS

Source: Cyber-Duck’s Pinterest page

Recycling Appeal’s website from 2007 has many hallmarks of the web 2.0 look

Over the past decade, numerous trends towards certain patterns in web design have emerged and passed.

Back in 2004, before Flash was considered a dirty word, many websites copied a certain aesthetic that became known as the ‘Web 2.0 look’. 

‘Web 2.0’ started life as marketing jargon used to describe social facets of community-centric websites. By 2004 it had taken on a new meaning altogether; to describe the look of websites which were vibrant and glossy, with bevelled edges, soft rounded corners and, perhaps worst of all, a reflected logo.

To highlight how this trend pervaded the consciousness of the general public, in 2007 I was actually asked by a prospective client if a website we would be designing for them would be ‘Web 2.0’!  After asking for them to elaborate, they said ‘y’know, rounded fonts and buttons, that kind of thing’.

By the time Elliot Jay Stocks so eloquently pleaded with web designers to stop with the shiny madness that was the ‘Web 2.0’ look, a new design trend was emerging.

Designs then had to look and feel more nostalgic or hand-made. With grungy textures, stitching, ribbons, letterpress text and questionable virtual metaphors, not to mention an unhealthy obsession with wood textures.  When appropriate, these design patterns can be used to great effect, however often they were used completely inappropriately and for pure aesthetic value.

For many web designers responsive web design has meant shifting their focus back to content.  Due to the rise of mobile, web designers are now considering the speed and performance implications of their designs, a marked shift back to the early days of web design where every kilobyte really counted.

This means questioning the decisions behind each element in the design, if we really need to use a lot of images to create style and atmosphere, or whether the same could be achieved through effective use of colour, typography and layout. 

THE MEDIUM IS THE MESSAGE

Source: Cyber-Duck’s Pinterest page

DConstruct’s website to promote their 2012 conference is a great example of responsive design

When we look back over the past eight years, it becomes clear how much designing for the web has evolved as we deepen our understanding of the web as a medium, and the medium itself evolves.

One thing we have learnt repeatedly is that we should accept that we don’t know how diverse or far-reaching the web will be in only a couple of years’ time, so the best way to future-proof your designs is to make them flexible and backwards-compatible.  If your design works on the lowest common denominator, be it the oldest browser or smallest screen size, then it will work on whatever platforms the future brings too. 

As web designers we must continue to search for inspiration both in and outside of our industry and to bear in mind the underlying principles of good design, however it is important to remember the web is a unique medium with its own strengths. We should be careful to find the most appropriate of these guiding principles and not be limited by ideas better suited to physical media. 

Flexibility is ingrained in the web – be sure your design process is flexible too.

Matt Gibson is production director at Cyber-Duck. See Cyber-Duck’s Pinterest archive of web design here.