Швидкий екскурс в історію дизайну

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

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

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

Народження браузерів, які можуть відображати картинки – стало першим кроком до веб-дизайну, як ми його розуміємо зараз. Першою структурою, яка могла структурувати інформацію – стали таблиці, які вже існували в HTML.

Тож розміщення таблиць у таблиці, і хитромудрі шляхи поєднувати статичні та рухливі клітинки стали самим цимусом, який почав David Siegel книжкою Creating Killer Sites. Хоча з самого початку було відчуття, що тут щось не те, бо все-таки першопочатковою ціллю таблиць було структурування цифр, але підхід прижився і був тривалий час мейнстрімом.

Однак одразу виникла проблем у складності підтримки цих крихких структур. В цей час термін slicing designs набув популярності. Дизайнери робили гарний лейаут, але вже девелопери розбивали його на шматочки та фігури, щоб найкраще його реалізувати. З іншого боку, таблиці мали дуже класну особливість, типу вирівнювати елементи вертикально у пікселях чи процентах.

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

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

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

Нині ми намагаємося уникати JavaScript, якщо задачу можна виконати, використовуючи CSS. Хоч JavaScript і досі лишається потужним інструментом для фронт-енду (jQuery) і для бек-енду (Node.js).

Золоте століття свободи – Flash (1996)

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

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

CSS (1998)

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

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

Народження дизайну для мобільних – сітки та фреймворки (2007 рік)

Перегляд інтернету через мобільні пристрої був сам-по собі викликом. Окрім відмінностей у лейауті для пристроїв, він породив ще й проблему тотожності: чи повинен дизайн бути таким же на маленькому екрані, або його треба зменшити? Або, куди розмістити всі чудові блимаючі реклами на маленькому екрані?

Швидкість також стала проблемою, бо багато контенту спалювало гроші на інтернет надто швидко. Першим кроком до покращення стала ідея сітки з колонок. Після декількох “проб пера” сітка 960 перемогла і поділ на 12 колонок став звичним для повсякденного користування. Наступним кроком стала стандартизація часто вживаних елементів: форм, навігації, кнопок, для легкого повторного використання.

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

Респонсивний веб-дизайн (2010 рік)

Чудовий хлопець на ім’я Етан Маркотт (Ethan Marcotte) вирішив змінити підхід шляхом використання того ж контенту, але з різними лейаутами залежно від потреби, що трансформувалося у респонсивний веб-дизайн.

Технічно все одно використовувався той самий HTML і СSS. Але тут є різні розуміння щодо того, що це, власне, таке. З боку дизайнера доводиться створювати багато лейаутів. Для клієнта – це означає, що воно працює на смартфоні. Для розробника – це спосіб того, як подавати картинки, швидкість закачки, семантика, мобільний/десктопний… Найголовніший плюс у тому, що контент кругом однаковий, фактично це значить, що той же сайт працює будь на чому.

Часи Флету (2010 рік)

Створення більшої кількості мокапів забирало більше часу, тож з цим почали боротися залишивши у минулому круті та модні ефекти тіней і повернулися до витоків дизайну, де головним був контент.

Дизайнери почали працювати покладаючись на гарні фото, типографію, якісні ілюстрації та продуманий лейаут. Спрощення візуальних ефектів чи так званий “флет дизайн – це яскрава частина цього процесу.

Головний плюс тут був у тому, що з’явилася ієрархія сигналів та контенту загалом. Глянцеві кнопки замінили іконками – це дозволило використовувати векторні малюнки і шрифти для іконок, а веб шрифти стали передавати чудову типографіку.

Світле майбутнє веб-дизайну (2020+)

Святий Грааль веб-дизайну завжди був у тому, щоб зробити його візуальним і перенести в браузер. Уявіть, щоб дизайнери просто переміщували речі як їм зручно, а в підсумку виходив чистий код! Мова не про зміну порядку елементів, а про повний гнучкий контроль над усім зовнішнім виглядом! Чи можливо це у недалекому майбутньому?