Короткий екскурс у історію веб-дизайну (Частина 1)

Основні етапи становлення веб-дизайну від американського дизайнера з латвійськими коренями Sandijs Ruluks.

Мій інтерес до кодування власного дизайну був втрачений у той момент, коли я зрозумів, скільки трюків треба робити, щоб втілити задум у життя. Здавалося б, прості запитання можуть бути вирішені дуже багатьма способами. Але вони все-одно можуть не працювати на різних браузерах.

Чому є поділ між дизайном і кодом – завжди було загадкою для мене. Чому складні речі стають простішими, зате прості речі ускладнюються?

Тому, замість того, щоб дебатувати, чи повинні дизайнери вчити код або розробники повинні вивчати дизайн, давайте встановимо спільну позицію про те, як дизайн для вебу розвивався і як ми могли б подолати розрив між кодом і дизайном.

Темні віки вебдизайну (1989)

01-Tab_keys-1

Початок веб-дизайну був доволі-таки темним, у прямому сенсі, бо монітори таки були чорними і лише деякі монохромні пікселі світилися зеленим. Дизайн створювали символами та табуляцією. Говорити тут, власне, як про дизайн нічого, тож йдемо далі.

Таблиці – початок (1995)

02-Tables-1

Народження браузерів, які можуть відборжати картинки – стало першим кроком до веб-дизайну, як ми його розуміємо зараз. Першою структурою, яка могла структурувати інформацію – стали таблиці, які вже існували в HTML. Тож розміщення таблиць у таблиці, і хитромудрі шляхи поєднувати статичні та рухливі клітинки стали самим цимусом, який почав David Siegel книжкою Creating Killer Sites. Хоча з самого початку було відчуття, що тут щось не те, бо таблиці все-таки першопочатковою ціллю таблиць було структурування цифр, але підхід прижився і був тривалий час мейнітрімом. Однак одразу виникла проблем у складності підтримки цих крихких структур. В цей час термін slicing designs набув популярності. Дизайнери робили крутий лейоут, але вже девелопери розбивали його на шматочки та фігури, щоб найкраще його реалізувати. З іншого боку, таблиці мали дуже класну особливість, типу вирівнювати елементи вертикально у пікселях чи процентах. Головна вигода була в тому, що це було найближчим до сітки, до якої потім можна було повернутися. Також це стало часом, коли дуже багато програмістів почали не любити фронт-енд розробку.

На допомогу приходить JavaScript (1995)

03-Javascript-1JavaScript – став відповіддю на обмеження HTML. На зразок, треба попап-вікон, порядок чогось треба динамічно змінити? Відповідь була – JavaScript. Проблема тільки в тому, що JavaScript – розсташований на вершині фабрики, яка примушує веб працювати мав завантажуватися окремо. Часто це використовувалося як легкий патч для ледачого девелопера. Нині ми намагаємося уникати JavaScript, якщо задачу можна виконати, використовуючи CSS. Хоч JavaScript і досі лишається потужним інструментом для фронт-енду (jQuery) і для бек-енду (Node.js).

Золотий вік свободи – Flash (1996)

04-Flash-1Злам усіх обмежень, які існували у вебдизайні, ця технологія обіцяла свободу небачену раніше. Дизайнер міг намалювати будь-які форми, розмітку, анімацію, переходи, використовувати будь-який шрифт і все завдяки одному інструменту – Flash. Бідсумковий результат пакувався, як окремий файл і засилався у браузер для відображення. Все працювало, як магія доки користувач мав останню версію флеша і вільний час, чекати доки він завантажиться. Це був золотий вік анімацій та будь-яких видів взаємодії. На жаль, він був не надто відкритим, чи приязним до пошуку і споживав надто багато потужності процесорів. Як тільки Apple вирішили відмовитися від Flash у своєму iPhone (2007), технологія почала занепадати. Зараз більшість браузерів її узагалі не підтримують.

CSS (1998)

05-CSS-2

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

Другу частину читайте тут.

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

3 Comments

Залишити відповідь