“Святий Грааль” веб-дизайну або закінчення короткого екскурсу у історію веб-дизайну

DesignTalk.club закінчує висвітлення основних етапів розвитку веб-дизайну. Попередню частину його історії, зокрема про “темні віки” та “золотий вік” радимо прочитати ТУТ

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

06-Grids-1

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

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

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

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

07-Responsive-3

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

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

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

08-Flat-2

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

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

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

Думки про світле майбутнє

09-Future-1

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

РАДИМО ПОЧИТАТИ:

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

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

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

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