history of web design

Anyone who has used the internet for more than a few years will have noticed that there is a continual development in the way websites look, feel and respond to visitors. This is nothing new – it’s something that has occurred throughout the history of web design.

Websites are now so much more than a simple advertising tool for businesses – they’re an online adventure incorporating video, social media, imagery and great content. With the rise in tablet and mobile usage, website designs now have to work even harder to ensure visitors get a visual delight.

Yet, it hasn’t always been like this. It may be hard to believe, but when websites first appeared they were nothing more than lines of words on a page.

Let’s take a leap back through the history of web design with our timeline below.

How many of these phases do YOU remember?


MAKE HISTORY WITH BIG SAVINGS FROM TOP UK WEB AGENCIES


The history of web design: A timeline

1990

The first web browser (Nexus) was released in this year. It only supported plain text websites – no images or other multimedia. At this point, computer monitors were limited to showing a mere sixteen colours. Websites weren’t anything more than written text that was available to access over the internet.

1993

history of web design 1993-mosaic

A new internet browser called Mosaic was launched – this was a huge deal as it supported images – so goodbye boring plain text websites, hello text with images! However, with dial-up internet speeds so slow, images were still often negated in favour of a faster-loading plain text website.

1995

history of web design 1995-nyt

1995 was a big year for both the history of web design as the programming languages PHP, Ruby and JavaScript were all launched.

Table based web design started to become popular. This was the first year that the idea of “designing” a website really started to become the norm. Tables could be used to create “block” style websites with headers, content sections, navigation menus and footers.

1996

history of web design 1996-angelfire

The list of web-safe colours was expanded to 256, which many web designers used to… well, varying degrees of success by placing garish, flashing, popup advertisements across their websites. These popups were designed to get people’s attention – which they certainly did, but they also made the user experience pretty terrible and have wisely disappeared into the annals of the history of web design.

Large, brightly-coloured, bevel-effect buttons were a common way of adding links and navigation items to pages.

The programming languages CSS, ASP and Flash were launched. Web designers took to Flash instantly as it opened up a world of interactivity and movement.

1998 – 2002

history of web design 2002-daily-mail

“Welcome” screens designed using Flash were seen as an innovative and ‘fun’ way to introduce a website to the visitor. However in practice, all this really meant was a slow-to-load introduction screen that users often got bored with and closed before the main website had loaded.

If the user managed to get to the main website, they would have expected to see gradients, multiple pages of short content (rather than long, scrolling reams of text) and menu systems to allow them to navigate the website effectively.

During this time, our very own Moodia was born (d.o.b. = 2001). You can see what our original website looked like below – I think we can all agree that we’ve come a long way..!

history of web design 2001-moodia

2002 – 2006

history of web design 2004-myspace

Rapidly increasing internet connection speeds led to more intricate designs, which took advantage of more multimedia. When looking through the history of web design, it is during the 2002 – 2006 period that websites really started to explore imagery as a design feature, with photographs and graphics becoming commonplace.

Stock imagery became a firm favourite with website designers as a way to break up text and create a more aesthetically pleasing first impression. Thanks to developments in monitor technology, web-safe colour limitations started to become a thing of the past, opening up the full colour spectrum to designers.

Flash “welcome” screens were slowly phased out in favour of homepage designs not to dissimilar from what we might expect today.

The popular blogging platform and content management system WordPress arrived in 2003. This was a breakthrough for business owners who could build and update a website themselves without any technical or coding knowledge.

These were also the first years of social media. MySpace and Facebook launched in 2003 and YouTube was launched in 2005. YouTube allowed website owners to easily add fast-loading video to their sites.

2006 – 2010

history of web design 2007-guardian

These were the years of skeuomorphic design – i.e. making elements on the screen look like their real-world counterparts. For example, buttons would have drop shadows and subtle gradients to make them look 3D.

Table-based website designs were replaced by sites coded using divs and styled with CSS. This removed many of the constraints that table-based coding forced upon a developer. Websites became more extravagant and layouts became more complex as designers pushed the new coding standards to their limits.

One of the most significant technological shifts during this period was the release of the iPhone in 2007. It was the first smartphone to become a commercial success. Website designers quickly realised that this was going to be a game-changer as many sites were hard to use on phones and required lots of pinching and zooming in order to make text large enough to read.

From 2007 onwards, using Flash on websites became unpopular as it was not supported by iPhones.

2010 – 2015

history of web design 2012-apple

As design history goes, these were years of big change for the web. Almost overnight, website designers abandoned skeuomorphism in favour of flat, minimalist design. Part of this may have been due to optimising websites for mobile screens.

The ability to embed web fonts into a site contributed massively to design patterns of these years. Gone were the days of being limited to Arial, Times New Roman and Helvetica; hundreds of fonts suddenly became available for widespread use.

In 2010, Ethan Marcotte took on the challenge of creating mobile-friendly websites and introduced responsive design; by 2015 it was commonplace. HTML5 and CSS3 were released which led to the popular parallax style of design where all content is placed on a single page and scrolling/animations are used to make it seem more visually appealing.

Carousels, website sliders and image galleries started to appear on the majority of websites.

In more recent years, there has been a move towards designing websites with the user in mind rather than the company that the website is advertising. Planning the user experience (UX) through a website rather than designing something “pretty” helped make websites easier to use which often led to increased engagement and ROI.

2016 (and beyond?)

As with all of the other years, 2016 came with its own design trends. Hiding navigation menus under hamburger dropdowns seems to be on trend at the moment, however it’s generally considered that this makes a website harder to use.

In late 2015, Google changed their ranking algorithm to penalise websites that aren’t mobile friendly. Responsive design is therefore more important than ever, as is making content easy to read and fast to load on both desktop and mobile devices.

Content-rich, multi-page websites are once again becoming the norm as parallax sites are fading out of popularity.

2016 was perhaps the year of the template website. “Do-it-yourself” website builders such as SquareSpace and Wix are allowing non-technical people to create their own websites without any coding knowledge. This may seem like a positive, but it’s leading to a plethora of websites that all look the same as they are all based on similar templates with little customisation options.

Luckily, website designers are combating this by using their design and development skills to create bespoke, high-performing, beautiful websites that transform their client’s sites into income-generating masterpieces.

Next Steps

Is your website stuck in the past? Don’t let your business become an embarrassing footnote in the history of web design; jump into 2017 with a redesign that blows away the competition!

All images via the Wayback Machine.

Don’t get left in the past! Save up to 30% on web design costs nowI WANT TO SAVE