Тренды 2023 в деле: что выстрелило в веб-дизайне, а что осталось только в конкурсных работах

Помните прогнозы на 2023-й год? Скрапбукинг, навигация в стиле 90-х, шрифтовые композиции… Что из этого действительно использовали дизайнеры? Подводим итоги на примере реальных проектов!

В студии «Магвай» есть традиция — каждый год мы рассказываем о грядущих трендах в дизайне. Так было и накануне 2023-го. По прогнозам зарубежных коллег из 99designs by Vista нас ждали 9 трендов:

Что из этого действительно было актуальным? А что дизайнеры и бизнес не стали использовать? Рассказываем на своих примерах.

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

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

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

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

Несколько примеров, которые мы создали для разных компаний.

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

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

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

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

У нас есть несколько статей о том, как бизнес с помощью иллюстраций может завладеть вниманием пользователей.

Иллюстрации на сайте: когда уместно

3 стиля, которые хорошо решают задачи клиентов

Мы используем иллюстрации не только для клиентских кейсов, но и в своих проектах. Второй год подряд мы создаём отдельный лендинг, на котором рассказываем об итогах года. 2023-й с нами встречали олень Олег, кролик Толик и тигр Игорь. Втроём они устроили небольшой переполох с елкой. Эта весёлая история привлекла многих пользователей.

В этом году мы снова создали новогоднюю сказку. Итоги студии «Магвай» будут представлять новые персонажи: Дед Мороз, котик, белый мишка и дизайнер. Эти образы мы вписали в треугольники, добавили деталей, интерактивных элементов, анимаций. Уже скоро самые яркие моменты этого года увидят клиенты, партнёры и поклонники нашей студии.

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

Один из наших примеров — сайт для DST Agency, агентства по работе с инфлюенсерами. Блогеры любят креатив, так как сами стремятся привлечь публику. Поэтому строгий и формальный сайт не подходил. Требовалось что-то современное и молодёжное.

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

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

Простые формы, нейтральные цвета — в минимализме главное не как, а что. Что в основе сайта? Чем он наполнен? Минимализм помогает создать визуальный интерес и стимулировать эмоции без использования декоративных элементов. Убираем всё лишнее, оставляя только главное.

Пользователь видит сотни рекламных сообщений в день. Визуальная чистота в такой ситуации помогает выделить проект. Это направление мы выбрали и для нового сайта студии «Магвай».

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

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

Этот тренд связан с желанием развиртуализироваться, сделать digital-мир таким же осязаемым и понятным, как реальный. В этом помогают написанные словно от руки заголовки, стикеры, коллажи.

Об этом мы ещё поговорим в большом материале. Уже готовим статью, где собраны тренды следующего года по версии зарубежных коллег. Но также спросили мнение дизайнеров внутри студии «Магвай».

В комментариях предлагаем вам побыть digital-предсказателями и дать прогноз — что же будет актуально в 2024 году в веб-дизайне?

* В цвете кнопки мы использовали главный визуальный тренд 2024 года по версии Pantone - "персиковый пушок".