Published:

Over the years web design has evolved in notable stages, from the advent of the web with it's text only content to the flat designs of today. Let's take a look at the timeline of web design and the parallels it shares with greater cultural trends.

A quick look backwards

A good place to start is with where we have come from and looking back it's easy to see a lot has changed since those early days of basic text pages where there was little more than a couple of basic graphics. In this article I run through some of the milestones in design that have marked out what has actually been less than 30 years of the internet before drawing some comparisons with other cultural systems.

The early days

When the very first few web pages were released in the last years of the 80s they were little more than basic online directories housing plain text articles. Designed to be read on line-mode browsers there was no inclusion of any graphics, media or in fact even the ability to choose colours or fonts. Typography was not designed but rather relied on the system being used. From these earliest of days however a whole ecosystem sprung up. You can still view and use the first ever website here at CERN.

The first ever website on a line-based browser simulator.
The first ever website displayed on a line-mode browser simulator.

Tables, Flash and CSS

Towards the end of 1992 after three years of text-based websites, the Mosaic Browser finally allowed for things such as inline images. It was another 3 years before the emergence of table-based layouts, which finally allowed for a variation in the flow of the document, went on to become a popular method of creating layout. The following year Macromedia purchased FutureWave and rebranded their animation software to the name of Macromedia Flash. This was also the year that CSS 1 was released. Finally these two formats provided a richer landscape of video, animations and a variety of typefaces became available. With just 1% of the world's population online, the first few websites were made which began to bear a basic resemblance to today's online design.

The first ever MSN homepage, 1996
The first ever MSN homepage, 1996

Web 2.0

The first part of the new millennium saw a progression towards a more focused page layout and a fuller use of bright colours and graphics. Animated GIFs littered some of the more garish sites and a small list of web safe fonts was formed. CSS 2 including the box model became more standardised, opening up a whole new variety of styling techniques. This first decade gave birth to more complicated design patterns as a wider support for more complex techniques emerged. Large presentational graphics became more standardised as both bandwidth and browser support improved. Things like rounded corners and even some shadow effects were used, however support was minimal and often images were used in place of CSS. It wasn't until around 2010 that these became more commonplace and glossy Web 2.0 sites became the next big trend.

With the movement towards CSS 3, browsers such as Google Chrome, Firefox and Internet Explorer 8 began to get better coverage, which supported an even larger variety of visual effects. Websites became bolder and richer, with gradients, rounded corners and box-shadows all part of the web designer's toolbox. Typography was now an integral part of a good design, with ease of use at the heart of the Web 2.0 movement which relied on a clear and concise experience. Javascript libraries made it easier than ever to make interactive sites, it seemed as though nearly every website had a slideshow somewhere in the mix with an accordion not far behind. 

The Blogger website in 2008, an example of Web 2.0 design
The Blogger website in 2008, an early example of Web 2.0 design trends

Skeuomorphism

Following on from the media-rich sites of Web 2.0, skeuomorphic designs took the use of two-dimensional visual effects to their maximum possible application. Having long been a part of many designs from aspects of desktop software to textured backgrounds in earlier websites, it wasn't until now that high-fidelity imagery and textures created a convincing effect on the ever sharper high-resolution displays. All of the stock applications on the iPhone right up until iOS 7 in 2013 were made to look like the real-life counterparts they were replacing. Although this trend was only really popular for a few short years it still has a lasting impact today with many sites still using bits of 'realistic' looking media. It also served as a base for its countermovement - Flat design.

An example of skeuomorphic design
An example of skeuomorphic design

Flat Design

With devices making up more and more of digital audiences, a movement away from complex and image-heavy designs became the latest trend. Engaging with users through what was potentially a limited 3G connection was now of vital importance and if a website took more than 10 seconds to load then chances were that the user simply would not stick around. This was partly the reason for the rise in flat design which limited the UI to only the most vital of elements.

The Windows Metro design language actually began to be seen as far back in 2002 with aspects of the Windows Media Centre UI being very bold and colourful, however it wasn't until the first Windows phone and then with the release of Windows 8 that it was fully implemented. It was this Metro design language that really popularised the flat design movement with its fully saturated colour palette and minimalistic user interface. From its implementation in the 2010 Windows phone it was only a year until this visual style was everywhere, especially important in emerging responsive sites and apps. It is characterised with what is actually a very distinct colour palette, very little if any use of realistic shadowing (with 'long shadows' replacing them), thin and large high definition typography and also as minimal a UI as possible. 

Flat design is still ever present, although many of the original characteristics already seem very outdated such as the use of long shadows. Despite its ongoing popularity, there has been an urge to move on from many of these overused patterns and from the base of flat design trends such as material design have now come about. 

Windows 8 Metro design
Windows 8 Metro design, the first real use of flat design

Material Design

This is perhaps the most recent of major web design trends and it is a movement which shares much in common with flat design. Material design was implemented by Google as the next iteration in their design language guidelines. Android app designers are urged by Google to use this style of design and this has helped to promote this design system into being one of the most popular today. One of the notable ways in which material design has broken away is with the use of realistic shadows which is a visual cue to the layering and interactivity of elements. Instead of forcing flatness on the user, the UI is seen to be made up of paper-thin surfaces which can be manipulated and engaged with through the Z-axis. 

Material design used in an app
Material design as used in a mobile app.

Parallels with other cultural trends

The trends that have been witnessed within web design are not arbitrary, each visual movement is based upon the previous one and represents clear moments in time that related to the needs of the users and the capabilities of the technology. In many ways, the same evolution can be seen within parts of a greater cultural history, albeit over a much smaller period of time. Web design has been around for less than 30 years, but perhaps some parallels can be drawn up with trends going back a century and even further. 

The early, primitive years of web design 

As web design was first finding its feet back in the 90s, other formats such as print design were already creating work which even resembled some of the contemporary fashions of today. Why was there such a divide between the two graphic design worlds of web design and print design at the same moment in history? The answer is surely a technical one, we just didn't have the same capability to produce layouts and visual techniques on par with print design and then send them halfway around the world as a digital signal with a screen resolution to match the fidelity of print. The art world, and on a separate basis the graphic design world, have both had similar moments in their infancy when they were producing relatively primitive works. For example, if placed in terms of realism, Byzantine art could be argued to be lacking many of the mechanisms of the Realism movement which came much later. Similarly the early woodblock posters which are synonymous with the cowboy style wanted poster gave rise to better and more realistic printing techniques culminating with the high definition laser printers we have today. Despite being such a new phenomenon, web design was born in much the same way as all other major cultural movements. 

A painting from the Byzantine era
A painting from the Byzantine era

Skeuomorphism versus Realism

As web design techniques and technology improved alongside an increase in connectivity speeds and access, so did their use proliferate throughout many websites. It is of notable importance that digital design as a whole did not jump forwards to mirror contemporary real-world graphic design or art trends, but instead moved towards creating as realistic an impression as possible on a two-dimensional screen. Whilst realism in art is still practised and enjoyed today, as a global trend it was built over by early modernism over 200 years ago starting with painters such as Turner partly as a reaction to industrial advances. Given the availability of new technology, it seems that it is only natural to try to push the boundaries of what is possible to the fullest extent, despite what would be considered outdated ambitions in many other areas of culture.

A Realism painting by Gustave Courbet - Bonjour Monsieur Courbet
Gustave Courbet - Bonjour Monsieur Courbet

The minimalist ambitions of flat design

Given the previous popularity of skeuomorphism, the suddenness with which it was swiftly replaced with flat design came about seemingly due once again to the technical requirements of the mobile user. However this mirrors the exact same transition which took place within other cultural systems such as the art world, architecture and graphic design towards the end of modernism. Flat design has definitely drawn inspirations from trends such as Swiss Modern which in turn also reflects the purity of other minimalist and gridded art movements of the time such as De Stijl. Whilst it seems as though the main reason for flat design's inception was to create a better mobile experience, at the same time the visual break definitely gave the trend the attention it needed to really take off. It could definitely also be seen as a counter-movement to the fashion of creating realistic and effect heavy web designs and it's novelty surely helped to make it so popular. 

An example of Swiss Modern
A contemporary example of Swiss Modern style

The future of web design

The rate of change within web design trends seems to have slowed down slightly over the last couple of years in contrast to the rapid succession of the last few movements over a period of about 5 years. Today a whole range of styles are in use from a variety of trends and for the first time for many brands, print design and styling are reflections of their digital counterparts. Art is also more and more based within or produced by the digital. It seems technology and other areas of culture have all caught up with each other. Web design went from the primitive through to the realistic and then through to minimal in much the same way as other cultural systems, however it happened at a much faster rate presumably due to the rapid advances in computing, bandwidth and browser performance. 

One suggestion I hear quite often is that the next trend in web design is to have no UI at all. As repetitive tasks are automated and we interact with devices through new methods such as voice control, perhaps we will see even more of a minimal interface to many digital applications. At this stage it is hard to tell what is next, however it is undeniable that other cultural systems are now linked to the digital and will follow suit with whatever breakthroughs occur over the coming years.

Sources



Comments