A brief history of Web Design in GIFs

The evolution of the web design explained in motion images

by David Ocampo | Quaxar´s Interactive Designer

An San Francisco-based web design studio Froont have developed a new set of GIFs that helpfully break down the history of web design.

From its monochrome pixel beginnings and the short-lived era of Flash, to the advent of CSS and the birth of flat design, find out how web design has evolved over the past 25 years.

With objective of finish the debating whether designers should learn code or developers should learn design, these GIFs sets some common ground on how design for the web evolved and how we could bridge the gap between code and design.

Check out the GIFs below…

The dark ages of web design (1989)

The beginning of web design was pretty dark, as screens were literally black and only few monochrome pixels lived therein.

Tables, The beginning (1995)

The birth of browsers that could display images was the first step into web design as we know it. The closest option available to structure information was the concept of tables and celds already existing in HTML.

JavaScript comes to the rescue (1995)

JavaScript was the answer to the limitations of HTML. For instance, need a popup window, want to dynamically modify the order of something? The answer was JavaScript.

Flash, The golden era of freedom (1996)

To break the limitations of existing web design, a technology was born that promised a freedom never seen before. The designer could design any shapes, layouts, animations, interactions, use any font and all this in one tool, Flash.

CSS, The styles (1998)

Around the same time as Flash, a better approach to structuring design from a technical standpoint was born: Cascading Style Sheets (CSS). The basic concept here is to separate content from the presentation. So the look and formatting are defined in CSS, but the content in HTML.

Mobile uprising  (2007)

Browsing the web on mobile phones was a whole challenge in itself. Besides all the different layouts for devices, it introduced content-parity problems, should the design be the same on the tiny screen or should it be stripped down? Where to put all the nice, blinking ads on that tiny screen? Speed was also an issue, as loading a lot of content burns your internet money pretty fast.

Responsive web design (2010)

For a designer, responsive means mocking up multiple layouts. For the client, it means it works on the phone. For a developer, it is the way how images are served, download speeds, semantics, mobile/desktop first and more. The main benefit here is the content parity, meaning that it’s the same website that works everywhere.

Flat Design, The trendy (2010)

Fine photography, typography, sharp illustrations and thoughtful layouts is how we design now. Simplifying visual elements or so called Flat design is also part of the process. The main benefit here is that much more thought is being put into copy, into hierarchy of the message and content in general. Glossy buttons are replaced by icons and that allows us to use vector images and icon fonts.

The future (2015)

The holy grail of web design has been to actually make it visual and bring it into the browser. Imagine that designers simply move things around the screen and a clean code comes out! And I don’t mean changing the order of things, but having full flexibility and control! Imagine that developers don’t have to worry about browser compatibility and can focus on actual problem solving!. Say Hello to the future!.