A quick excursion into the history of design

The Dark Ages of Web Design (1989)

The beginning of web design was quite dark, in the literal sense, because monitors were still black and only some monochrome pixels glowed green. The design was created with symbols and tabulation. Actually, there is nothing to talk about design here, so let’s move on.

Tables - the beginning (1995)

The birth of browsers that can display images was the first step towards web design as we understand it today. Tables, which already existed in HTML, became the first structure that could structure information.

So the placement of tables within tables, and the ingenious ways of combining static and moving cells became the very cymus that started by David Siegel with the book Creating Killer Sites. Although from the very beginning there was a feeling that something was wrong here, because after all the original purpose of tables was to structure numbers, but the approach caught on and was mainstream for a long time.

However, problems immediately arose in the complexity of supporting these fragile structures. At this time, the term slicing designs gained popularity. The designers made a beautiful layout, but the developers already broke it into pieces and shapes in order to best implement it. On the other hand, tables had a very cool feature, like aligning elements vertically in pixels or percentages.

The main benefit was that it was the closest thing to a grid that you could then return to. It also became a time, when a lot of programmers started to dislike front-end development.

JavaScript comes to the rescue (1995)

JavaScript became the answer to the limitations of HTML. Do you need popups, or do you need to change something dynamically? Reply was JavaScript. The only problem is that JavaScript sits on top of the factory that makes the web work. Had to be downloaded separately. Often this was used as an easy patch for a lazy developer.

Nowadays, we try to avoid JavaScript if the task can be accomplished using CSS. Although JavaScript still remains a powerful tool for the front-end (jQuery) and for the back-end (Node.js).

The Golden Age of Freedom – Flash (1996)

Breaking all the restrictions that existed in web design, this technology promised freedom never seen before. The designer could draw any forms, markup, animation, transitions, use any font and all thanks to one tool - Flash. The final result was packaged as a separate file and sent to the browser for display. Everything worked like magic until now the user had the latest flash version and free time to wait for it to load.

It was the golden age of animations and all kinds of interaction. Unfortunately, he was not very open or friendly to search and consumed too much processor power. As soon as Apple decided to abandon Flash in their iPhone (2007), technology began to decline. Now many browsers do not support it at all.

CSS (1998)

Приблизно в той же час, що й флеш, народився кращий підхід до структури дизайну технічного з погляду – Cascading Style Sheets (CSS). Головний принцип тут – це відділення контенту від презентації. Таким чином вигляд і форматування визначалося CSS, а не в HTML. Найбільша проблема технології полягала в тому, що вона була далека від гнучкості, а також мала дуже обмежену підтримку браузерів.

Минуло декілька років доки браузери стали її нормально підтримувати і то з деякими дефектами. Цей дисбаланс у підтримці бразурів був суцільним жахом для програмістів. CSS – це власне не мова програмування, це декларативна мова. Чи треба знати дизайнерам, як нею кодувати? Можливо. А чи треба дизайнерам знати, як вона працює? Обов’язково!

The Birth of Mobile Design - Grids and Frameworks (2007)

Browsing the web through mobile devices was a challenge in itself. Apart from the differences in the layout for the devices, it also created an identity problem: should the design be the same on the small screen, or should it be scaled down? Or, where to put all the great flashing ads on the small screen?

Speed also became a problem, as a lot of content burned through money on the Internet too quickly. The first step to improvement became the idea of a grid of columns. After several “pen tests”, the 960 grid won and the division into 12 columns became common for everyday use. The next step was the standardization of frequently used elements: forms, navigation, buttons, for easy reuse.

Actually, this was achieved thanks to the creation of a library of visual elements, which contains all the code in itself. Winners in this Bootstrap and Foundation became the chase, as a result of which the line between the site and the mobile version began to blur. However, the main drawback was that the designs became very similar, and the designers could not get to them without knowing how the code works

Responsive web design (2010)

A great guy named Ethan Marcotte decided to change the approach by using the same content but with with different layouts depending on the need, which transformed into responsive web design.

Technically, the same HTML and CSS were still used. But here there are different understandings about what it actually is. From the side the designer has to create many layouts. For the client, this means that it works on a smartphone. For the developer - it’s the way to serve images, download speed, semantics, mobile/desktop… The most important plus is that the content is the same all around, in fact it means that the same site works on anything.

Times of Flet (2010)

Creating more mockups took more time, so they started to fight this by leaving cool and trendy in the past shadow effects and returned to the origins of design, where the main thing was content.

Designers began to work relying on beautiful photos, typography, high-quality illustrations and a well-thought-out layout. Simplification of visual effects or the so-called “flat design” is a bright part of this process.

The main plus here was that there was a hierarchy of signals and content in general. Glossy buttons were replaced with icons - it allowed the use of vector graphics and fonts for icons, and web fonts began to convey beautiful typography.

The Bright Future of Web Design (2020+)

The holy grail of web design has always been to make it visual and bring it to the browser. Imagine that designers just moved things around as they saw fit, and ended up with clean code! It is not about changing the order of elements, but about the complete one flexible control over the entire appearance! Is this possible in the near future?