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

Продовжимо висвітлення основних етапів розвитку дизайну від Sandijs Ruluks.

Попередню частину можна прочитати тут.

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

06-Grids-1

Перегляд Інтернету через мобільні пристрої було саме-собою викликом. Окрім відмінностей у лейауті для пристроїв, він породив ще й проблему тотожності: чи повинен дизайн бути таким же на маленькому екрані, або його треба зменшити? Куди розмістити всі чудові блимаючі реклами на маленькому екрані? Швидкість також стала проблемою, бо багато контенту спалював гроші на інтернет надто швидко. Перший кроком до покращення стала ідея сітки з колонок. Після декількох підходів сітка 960 перемогла і поділ на 12 колонок став звичним для повсякденного користування. Наступним кроком стала стандартизація постійно вживаних елементів: форм, навігації, кнопок, і пакування їх, для легкого повторного вживання. Власне, це досягалося створенням бібліотеки візуальних елементів, яка містить увесь код у собі. Переможцями стали Bootstrap і Foundation, що вказує на те, що грань між сайтом і апкою стала розмиватися. Головним недоліком стало те, що дизайни стали дуже подібними, а дизайнери досі не могли достукатися до них без знання, як працює коди.

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

07-Responsive-3

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

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

08-Flat-2

Створення більшої кількості мокапів забирало більше часу, тож за щасливим збігом обставин ми з цим почали боротися залишивши у минулому круті та модні ефекти тіні і повернулися до витоків дизайну де в голові всього був контент. Ми стали творити покладаючись на гарні фото, типографію, гострі ілюстрації та продуманий лейаут. Спрощення візуальних ефектів чи так званий Флет дизайн – це також частина процесу. Головний плюс тут в тому, що більшість думки покладалася в ієрархію повідомлення та контенту загалом. Глянцеві кнопки замінили іконками – це дозволило використовувати векторні малюнки і шрифти для іконок. Веб шрифти тепер передають чудову типографію. Кумедно, але веб був близький до цього з самого початку.

Світле майбутнє

09-Future-1

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

Технічно є деякі концепції, які рухаються саме в цьому напрямку. Нові одиниці в CSS, наприклад vh, vw (viewport height and width)  дають значно більше гнучкості для позиціонування елементів. Це дає вирішення проблемі, яка завжди ставила в глухий кут дизайнерів: чому відцентрувати щось по вертикалі так важко зробити за допомогою CSS. Flexbox – це інший інструмент того ж CSS. Він дозволяє створювати і модифікувати лейаут завдяки єдиній властивості, замість того, щоб писати багато коду. І нарешті веб-компоненти – це навіть більш дієво. Це набір елементів поєднаних разом, наприклад, галерея, форма підписки і тд. Такий підхід полегшує робочий процес, бо елементи стають окремими будівельними блоками, які можна використовувати повторно або змінювати незалежно від інших.

А які ваші думки щодо майбутнього дизайну?

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

Ваша e-mail адреса не оприлюднюватиметься.