Короткий екскурс у історію веб-дизайну: “темні віки”, “золотий вік” + інше

DesignTalk.club розповість вам про основні етапи становлення веб-дизайну, за допомогою американського дизайнера з латвійськими коренями 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 – це власне не мова програмування, це декларативна мова. Чи треба знати дизайнерам, як нею кодувати? Можливо. А чи треба дизайнерам знати, як вона працює? Обов’язково!

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

Чому дизайнери Lego тепер працюють для AFOL – своїх дорослих шанувальників

Чому текстові кнопки на мобільних пристроях – не кращий вибір дизайнера

Як виправити дизайн продукту, що став надмірно складним: поради головного дизайнера Google (ЧАСТИНА 1)

3 Comments

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