7 ideas that influenced the evolution of web design
By: Monica Galvan
Tags: Visual Design, Technology, Web Design, UX, UI

The first-ever published website came to the Internet on August 6, 1991. Tim Berners-Lee created the site about the World Wide Web project, describing the Web and how to use it. Since then, web design has evolved with innovations in technology and design.

World Wide Web project, the first published website from 1991

Defining web design

First, let’s define what web design is. Web design is the process of designing the visual look and feel of a website. Web designers focus on planning the user experience of the website, wireframe layouts, organize content and images in a way that tells a story, and design the final UI.

Evolution of web design

Web design has morphed and changed with technological advances over time. Here are a few key ideas that greatly contributed to the evolution of web design as we know it.

1995–Introduction of JavaScript

There are limitations when it comes to designing a website with only HTML. With JavaScript, the web became more dynamic. Essentially it transformed a static web page into one a user can interact with. Examples of Javascript in use are a popup window, an auto-refresh feature on your favorite social feed, or when Google auto-suggests keywords as you’re typing a question into the search bar.

An example of Javascript: Google autosuggest (source: Kent C. Dodds)

1996–Flash debuts

Adobe Flash gave web designers the freedom to create more dynamic websites by adding video, audio, and animation. These multimedia elements were packaged into a file and sent to a browser to display. Unfortunately, the user had to have the correct flash version installed in order to see these animations. When Apple decided not to include flash in its first iPhone in 2007, Flash started to decline in popularity in web design.

Adobe Flash player (Source: Shutterstock)

1998–CSS joins HTML

Shortly after the introduction of flash, a better way of structuring design came in the form of Cascading Style Sheets (CSS). With CSS you can change font sizes and colors, add background colors, images, and more. Think of HTML as the content and CSS as the presentation. Together, they create a truly customizable experience on the web.

Example of CSS code (Photo by Pankaj Patel)

2000–Bringing businesses online

PayPal, the world’s leading online payment company, began to skyrocket in 2000. As more businesses started going online, there was a need for secure transactions. From Amazon to eBay and Etsy, slowly the idea of online shopping became more common.

PayPal website over the years (source)

2007 — The birth of mobile

With the launch of the first iPhone, designing for a web browsing experience on a mobile phone became its own challenge. Designers and developers had to adapt, design for a small screen, and think about things like load time. Remember life before unlimited data, when you had to pay for Internet access by the megabyte?

The biggest step to creating a better experience on mobile was the idea of column grids. 960-grid systems and the 12-column division spiked in popularity with designers. More on the importance of grids in web design later in this article.

Evolution of mobile phones (source)

2010–Responsive web design

Ethan Marcotte came up with the idea of responsive design as a challenge to the existing approach to web design. In his post, he writes “fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.” For a designer, this meant designing multiple layouts to address the various screen sizes for iOS, Android, and tablet devices.

Responsive design from desktop to tablet to mobile (Source: Hackernoon)

2012–Flat design

Before flat design started trending, web and app design used 3D design effects, skeuomorphism, and realism. Shadows, gradients, and highlights were aggressively used and often overdone.

The stark transition to flat design from iOS 6 to iOS 7 (provided by the author)

Over time, web design became more minimal. Flat design strips away the hyper-realistic representation of objects and instead focuses on clean lines and simple areas of color. The trend began to blow up around the time of Apple’s release of iOS 7 in 2013. The new interface was simple and a stark contrast from the skeuomorphism style made famous by Apple products.