2008-2023: Эволюция веб-интерфейсов за 15 лет

Недавно прочитала новость, что мультику про кота Саймона в этом году исполнилось 15 лет. Вспомнился 2008 год: из соцсетей только ВКонтакте и Одноклассники, Apple анонсировали iPhone 3G, Россия победила в чемпионате мира по хоккею, а я собираю свой первый в жизни сайт на Joomla: )

Стало интересно вспомнить, как менялись веб-интерфейсы на протяжении этого времени. Какие были идеи, тренды, открытия, и как мы пришли к тому, что видим в цифровой среде в 2023.

В 2008 интернет был очень ламповым. Все эти стилизации под ретро, рукописные и гранжевые шрифты, карамельные глянцевые градиенты, стикеры, приколотые кнопочками, обилие текстур и теней. Еще далеко до дизайн-систем, нет никаких гайдов для дизайна приложений, да и самих приложений раз-два и обчёлся. iPhone был большой редкостью и вызывал огромный интерес, а самые популярные телефоны того времени – это кнопочные Nokia, Siemens или Samsung.

Сайты сначала рисовали в Adobe Photoshop (а иногда даже в Illustrator! Мне кажется, что идею с единым рабочим пространством с артбордами позаимствовали как раз оттуда).

Когда макет был утвержден, приступали к сборке на движке вроде Wordpress, Drupal или Joomla, или писали с нуля в редакторе html-кода (привет, Dreamweaver). Выглядело это весьма примитивно, но с появлением безлимитного скоростного интернета всё стало быстро меняться.

2009 год принёс в веб-дизайн трёхмерность. На волне популярности скевоморфизм: выпуклые кнопки с оттиснутым на них текстом, меняющие свой вид при наведении и в нажатом состоянии, объемные плашки, тени. Особенно круто сделать интерфейс, имитирующий реальный мир. Все эти текстуры под дерево, под камень, под бумагу. А ещё модный тренд — фигурно обрезанный зубчиками бумажный край и ленточка, зацепленная за край листа.

Дизайнеры выжимают из растровой графики все возможности, превращая экраны в продолжение реального мира. Интерфейсы максимально привлекают внимание пользователя: неважно, что написано на кнопке и под ней, главное, что она так и манит нажать на неё.

В 2010 году скевоморфизм продолжает быть популярным: глазированные элементы, объёмные кнопки с бликами, максимально прорисованные детализированные иконки. Достаточно вспомнить дизайн Windows 7 или MacOS Sierra.

В 2010 я впервые услышала о мобильной версии веб-сайта, в то время, открывая сайт с телефона, мы просто увеличивали масштаб, чтобы что-то прочитать. А многие сайты делали мобильную версию на отдельном поддомене. Для неё требовалась отдельная верстка, так как не весь контент можно было рассмотреть на маленьком экране мобильного телефона. Кроме того, трафик распределялся на две страницы.

Весной 2010 дизайнер Итан Маркотт публикует статью, в которой вводит понятие адаптивного дизайна. Это была настоящая революция: новый подход сохранял весь контент на странице и сайт корректно отображался на устройствах с любым размером экрана. В этот период актуальным становится mobile first подход. Это значит, что первым делом дизайнеры проектируют сервис под мобильные устройства, а затем разворачивают его до десктопных версий.

Затем в середине 2011 на рынок выходит Bootstrap от ребят из Twitter. Марк Отто и Джейкоб Торнтон разработали этот CSS-фреймворк на базе внутренней библиотеки Twitter Bluepirnt. Созданный изначально для упрощения жизни разработчиков, фреймворк набрал огромную популярность среди веб-дизайнеров.

В январе 2012 года, Bootstap выпускает обновление с поддержкой 12-колоночной сетки и адаптивности, это становится еще более востребованным и популярным. А делать адаптивные элементы, сохраняя скевоморфизм, со всеми его сложными тенями и градиентами достаточно трудоёмко: детальные иконки и прочий контент перегружают интерфейс и плохо смотрятся на смартфонах.

В 2012 году компания Microsoft выпускает Windows 8 в новом стиле Metro и запускает моду на flat дизайн. Наступает эпоха максимального упрощения и минимализма.

Интерфейс в виде карточек, контрастные, яркие цвета, адаптированная к вебу типографика, простые векторные иконки. Все это меньше отвлекает пользователя от контента и больше фокусирует на целевых действиях.

Борьба между скевоморфизмом и флэт-дизайном в цифровой среде была непростой и продолжительной. Первый не сдавал позиций, потому что красивые блики, текстуры и игра света по-прежнему привлекала пользователей, а второй набирал обороты вместе с развитием технологий.

Появление в 2014 году стандарта HTML 5, который вывел кроссбраузерность и адаптивность на новый уровень повысило популярность стиля флэт. Используя векторные изображения и формы гораздо проще поддерживать визуальный стиль и адаптировать его под любые размеры экранов десктопных и мобильных устройств, которыми рынок наполнялся с космической скоростью.

В 2014 году Google публикует свою дизайн-систему material design. Она становится определенным компромиссом между стилями, так как сохраняет реализм и тактильность интерфейса, но в то же время элементы системы выполнены в плоском стиле.

В качестве вдохновения разработчики Google Material Design использовали обычную бумагу и чернила. За счет использования знакомых тактильных характеристик и глубины была создана ассоциация с реальным миром. Концепция листов бумаги, разложенных по порядку была понятна и знакома пользователю. Это создавало визуальную иерархию в интерфейсе, а анимация помогала понять принципы работы приложения и легче ориентироваться между разделами.

Минимализм, но вместе с ним использование трехмерного пространства, тени, глубины сделали эту систему популярной среди дизайнеров. Google Material Design и сегодня активно используется дизайнерами в работе.

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

К 2018 году изменения коснулись также и рабочей среды веб-дизайнеров. На смену Adobe Photoshop пришли Sketch, AdobeXD и Figma. Все они представляли собой векторные графические редакторы для проектирования интерфейсов.

Sketch был крутой, но платный и только для MacOS, Adobe XD давал ограниченный функционал для бесплатной подписки и не поддерживал многостраничные документы, а Figma завоевала популярность за счет своей кроссбраузерности, легкости установки и абсолютной бесплатности*

* опустим грустный факт о том, что Figma теперь принадлежит корпорации Adobe и стала условно-бесплатной

Figma и сегодня остается наиболее популярным инструментом для веб-дизайнеров, несмотря на ряд появившихся ограничений. Но она по-прежнему развивается, выпускает новые функции и каждое обновление делает эту среду комфортнее для работы.

В 2018—2020 в веб-дизайне новые тренды: яркие цвета, mesh-градиенты, геометрические фигуры, крупная типографика:

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

Стиль неоморфизм также получил распространение среди современных дизайнеров. Мягкие тени, объем, текстурность элементов как будто возвращают нас к эпохе скевоморфизма в современной интерпретации.

Сегодня ведущими трендами остаются минимализм, анимация и микроанимация, 3D-иллюстрации, необычная типографика и сочные градиенты и цвета.

Цифровое пространство наполнено сайтами и приложениями, сделанными в разных стилях: нарочитая небрежность в стиле 90, брутализм, минимал, dark-color интерфейс, неоморфизм и футуризм. Везде встречается анимация и тексты, набранные крупным шрифтом. Мы находимся на пике развития веб-технологий, применяем в повседневной работе нейросети, голосовых помощников и еще массу всего, что здорово упрощает жизнь.

Но почему-то именно сейчас хочется найти в интернете немного той ламповости и уюта, которые были 15 лет назад. Как будто в погоне за техническим прогрессом мы упустили какую-то важную эмоциональную составляющую, которая делает интерфейс ориентированным на человека, понятным и индивидуальным.

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

В целом, интересно оглядываться назад, понимая как изменился веб-дизайн под влиянием развития технологий. Как изменили нашу жизнь смартфоны, новые ноутбуки, планшеты, и как часто в современном мире мы взаимодействуем с экранными интерфейсами. И не менее интересно, что будет дальше, какие еще открытия и эксперименты нас ждут.