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

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

Фоны на главных страницах

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

Простые видеофоны (2017 год)

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

Видеофоны со смыслом (2018 год)

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

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

Анимационные фоны с 3D (2018 год)

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

Многослойный дизайн и стоп-моушн (2020 год)

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

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

Полноэкранные видео (2021 год)

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

Анимации

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

Эффект параллакс (2017 год)

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

Микровзаимодействия (2018 год)

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

Гифки (2019 год)

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

Анимированные иллюстрации (2020 год)

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

Синемаграфы (2021 год)

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

Цветовые гаммы

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

Винтажные или пастельные оттенки (2017 год)

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

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

Яркие цвета и градиенты (2018 год)

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

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

Яркий футуризм (2020 год)

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

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

Спокойные цвета (2021 год)

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

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

Графические элементы

Иконки, заполненные цветом (2018 год)

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

Больше визуализации (2019 год)

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

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

Больше геометрии (2020 год)

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

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

Простые иконки в одном стиле (2021 год)

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

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

Другие тренды

Сплит-экраны (2017 год)

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

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

Pop-out меню (2017 год)

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

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

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

Асимметрия, ломаная сетка (2018 год)

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

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

Весь сайт на одной странице (2019 год)

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

Темный дизайн (2020 год)

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

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

Полупрозрачные кнопки (2021 год)

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

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

Тренды 2022 года

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

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

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

77
Начать дискуссию