Как менялся веб-дизайн за 5 лет: сравнение трендов с 2017 по 2022 года

Ежегодно в январе-феврале тематические дизайнерские медиа, порталы делятся информацией о том, как создать сайт с нуля (ну а что, никогда не поздно выходить в онлайн) и трендами текущего года, чтобы все знали, какие цвета, геометрические фигуры, графические элементы и фишки использовать в своих дизайн-проектах. Но что если рассмотреть, как эти тренды менялись последние 5 лет (с 2017 по 2021 года) и какие из них останутся с нами в 2022 году? Именно так решили сделать. Что из этого вышло — смотрите в материале.

Если раньше были популярны статичные фоны, где основой служили стоковые картинки с людьми, то с 2017 года ситуация постепенно начала меняться — появились видеофоны и анимированные короткие ролики.

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

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

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

2020 год в мире веб-дизайна был временем, когда дизайнеры экспериментировали с геометрическими фигурами — делали более мягкие тени, слои, соединяли футуристические элементы с 3D. Кто-то вовсе использовал стоп-моушн.

Да-да, снова вернулись в моду. После 2018 года этот тренд чуть затих из-за проблем, которые возникали с юзабилити при использовании видеофонов (сайты долго грузились). Но прогресс не стоит на месте, нашлись решения и видео снова оказались в моде. Только теперь не стоковые, а сделанные с помощью инструментов стоп-моушн и просто моушн.

С 2017 по 2021 год анимация активно развивалась. Началось все с популярности эффекта параллакс

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

Все началось с роста популярности параллакса в 2017 году и продолжилось в 2018. В чем суть микровзаимодействий? Пользователь реагирует на какие-то действия на сайте с помощью мыши, а в ответ на странице что-то меняется, активизируется какая-то анимация. Микровзаимодействия хорошо влияли на UX.

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

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

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

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

До этого были более популярные классические сочетания цветов, вроде черного и белого, серого и белого. А в 2017 году в моду вернулись пастельные оттенки.

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

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

От начала пандемии психика людей практически 24/7 была в стрессовом состоянии и кричащие цвета хоть и использовали, но в тренде оказались более спокойные, пастельные. Или вовсе простое сочетание белого и серого, белого и черного.

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

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

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

В 2021 году особое внимание уделяли иконками. В идеале они должны были быть из одного семейства, чтобы не отличаться толщиной линий, стилем, размером и т.д. Такой тренд развился в связи с ростом количества дизайн-библиотек и тем, что в открытом доступе появилось множество качественных и простых пакетов иконок. Обновлением этого элемента в конце 2020 — в начале 2021 года занялись даже Apple и Sketch.

Суть в том, чтобы разделить экран на условные несколько частей — 2,3,4,5 в среднем. Это делалось для того, чтобы наполнить страницу различным контентом. Например, в одной части оставить фото продукции, а в другой рассказать о ней. Еще это дополнительно создавало некую динамику и улучшало восприятие контента пользователем.

Это спрятанное меню, которое создавалось под мобильные версии сайтов. Отображается оно в виде кнопки, нажав на которую пользователь видит меню полностью, так как оно открывается фактически на весь экран. Зачем же его скрывать? Такое решение придумали, чтобы улучшить юзабилити и не отвлекать пользователей от более важных объектов на странице.

Позже этот тренд перекочевал и на ПК версии сайтов, а именно — лендингов. Нередко его можно встретить и сегодня.

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

Наверняка, вы видели сайты, которые якобы состоят из одного блока, контент на котором меняется после прокручивания, скролла. Так вот, именно такие были в тренде в 2019 году. Никаких длинных форм для контактов или обратной связи, никакого перегруза длинными текстами или километрами картинок. Но вообще такое оформление сайта стало популярным из-за стремительного роста mobile-first — подобную структуру и дизайн было легко адаптировать под разные устройства без потери юзабилити.

Вообще этот тренд сначала появился в дизайне мобильных приложений, но позже перебрался и в веб-дизайн. Кто-то делал часть блоков темными, часть — светлыми, кто-то — полностью темными, а кто-то две версии сайта (светлую и темную). Считалось, что такой дизайн снижает утомляемость глаз пользователей.

В 2021 году в принципе начал возрождаться тренд на минимализм, и ярким проявлением этого стало частое использование полупрозрачным или прозрачным кнопок. Да, при наведении курсора они могли становится цветными, что важно с точки зрения UX, но в статичном положении они были просто в виде очертания.

Вот тренды, которые останутся с нами с прошлых лет:

• ассиметричная сетка;
• минимализм;
• видеофон (но здесь важное уточнение — он должен быть в 4К);
• темная тема;
• анимация с 3D-элементами;
• идеальные простые иконки;
• пастельная цветовая гамма;
• параллакс и другие проявления микровзаимодействий.

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