Тренды 2023 в деле: что выстрелило в веб-дизайне, а что осталось только в конкурсных работах
В студии «Магвай» есть традиция — каждый год мы рассказываем о грядущих трендах в дизайне. Так было и накануне 2023-го. По прогнозам зарубежных коллег из 99designs by Vista нас ждали 9 трендов:
- Анимированная презентация продукта
- Иммерсивные 3D-миры
- Сверхстимуляция
- Зум-скролл с параллакс-эффектом
- Навигация в духе 90-х
- Альбомная эстетика или скрапбукинг
- Наложение текста
- Шрифтовые композиции
- Реабилитация 404-й
Что из этого действительно было актуальным? А что дизайнеры и бизнес не стали использовать? Рассказываем на своих примерах.
Тренды, которые прижились в 2023 году
Анимированная презентация продукта
Ховер-эффект — решение, которое часто можно встретить на современных сайтах. Этот тренд только укрепился в 2023 году. Например, анимация такого важного элемента интерфейса, как кнопка, стала едва ли не обязательным пунктом. С одной стороны это создает эффект интерактивности, с другой — подтверждает действие пользователя.
В целом современный веб-дизайн уже не мыслит себя без анимаций: как микро, на небольших лендингах, так и более масштабных, для крупных проектов и презентации продукта. Анимации помогают выгодно показать товар или услугу и сразу обратить на это внимание. А ещё таким образом можно упростить сложные структуры.
В этом году мы продолжили развивать этот тренд в своих работах. Наши анимации стали интереснее и сложнее. Например, компания Onduty.dev помогает стартапам подобрать формы разработки программного обеспечения. Чтобы показать это на сайте, мы создали и анимировали образ — куб, состоящий из более мелких кубов. На первом экране пользователь видит, как фигура получает недостающий элемент и начинает светиться. Это метафора эффективного механизма, которому для полноценной работы не хватает одной детали.
Сайт для IT-компании Onduty.dev
Реабилитация 404
Страница ошибки в классическом виде сохранилась разве что на сайтах госучреждений или на старых ресурсах. Современный подход — вести диалог с пользователем. И та самая страница, которая раньше вызывала разочарование, злость, напряжение, сегодня становится полем для игр и шуток. И в 2023 году этот тренд также остался с нами.
Несколько примеров, которые мы создали для разных компаний.
Варианты страницы 404 из наших проектов 2023 года
Шрифтовые композиции
Комбинация шрифтов может гипнотизировать. При умелом сочетании это выглядит стильно, отсылает нас к журнальной эстетике и помогает выделить продукт. Кстати, мы давно пользуемся этим приёмом. В некоторых проектах мы сосредоточились именно на шрифтах.
Кейс сайта для digital-агентства
"Мы видим, что тренд сочетания шрифтов активно используется и продолжает укореняться в этом году. Интересно наблюдать за этой тенденцией и видеть новые эксперименты дизайнеров. Также всё чаще и больше можно наблюдать уникальные решения в плане анимаций, параллакс и зум-эффектов. Это можно заметить по работам-победителям на известных конкурсных сайтах."
Дмитрий Бондарчук,Арт-директор студии «Магвай»
Зум-скролл с параллакс-эффектом
Иллюзия реальности — то, что пытается создать мир digital. И зум-скролл с параллакс-эффектом помогают это воплотить. Объекты на переднем плане движутся с большей скоростью, чем фон, создавая эффект глубины. Метод довольно популярен в веб-дизайне, начиная с 2010-х. В уходящем году дизайнеры также активно пользовались этим приёмом. Мы применяли его точечно, чтобы привлечь внимание к тому или иному блоку на сайте.
Иммерсивные 3D-миры
Вместо статичных фонов и заголовков на глазах пользователя и с его участием оживает картинка. Иммерсивность в веб-дизайне развивается уже несколько лет. И в 2023-м этот тренд в вебе также использовали, усложняя картинку деталями и эффектом движущейся камеры. Нередко дополняют картину аудиоэффекты.
"Развитие веб-технологий позволяет всё больше и всё проще создавать сайты с 3D-элементами. Поэтому прогнозируемо сайтов с такой технологией будет больше и больше."
Александр Ищенко,
Senior-дизайнер студии «Магвай»
Что ещё мы использовали в этом году
Веб-иллюстрации
Иллюстрации — удобный приём, который можно адаптировать для разных направлений и стилей. С помощью авторских рисунков мы рассказываем историю и вовлекаем пользователя в мир компании. Иллюстрации помогают объяснить сложное, задать настроение, добавить акцент.
У нас есть несколько статей о том, как бизнес с помощью иллюстраций может завладеть вниманием пользователей.
Иллюстрации на сайте: когда уместно
3 стиля, которые хорошо решают задачи клиентов
Мы используем иллюстрации не только для клиентских кейсов, но и в своих проектах. Второй год подряд мы создаём отдельный лендинг, на котором рассказываем об итогах года. 2023-й с нами встречали олень Олег, кролик Толик и тигр Игорь. Втроём они устроили небольшой переполох с елкой. Эта весёлая история привлекла многих пользователей.
Сайт «Итоги года 2022» и 3D-иллюстрации, которые мы придумали и разработали для данного проекта
В этом году мы снова создали новогоднюю сказку. Итоги студии «Магвай» будут представлять новые персонажи: Дед Мороз, котик, белый мишка и дизайнер. Эти образы мы вписали в треугольники, добавили деталей, интерактивных элементов, анимаций. Уже скоро самые яркие моменты этого года увидят клиенты, партнёры и поклонники нашей студии.
"В новом проекте «Итоги года» мы активно работаем с анимациями, в том числе с зум-скроллом и параллаксом. Также довольно большая часть отдана типографике как самостоятельному композиционному объекту."
Владимир Новиков,
Дизайнер студии «Магвай»
Сайт «Итоги года 2023» и векторные иллюстрации, которые мы разработали для этого проектаРетродизайн
Отсылки к стилям разных лет вызывают у пользователей интерес и ностальгию. Вкрапления, элементы ретродизайна, удачно соединённые с современным стилем, помогают расставить акценты.
Один из наших примеров — сайт для DST Agency, агентства по работе с инфлюенсерами. Блогеры любят креатив, так как сами стремятся привлечь публику. Поэтому строгий и формальный сайт не подходил. Требовалось что-то современное и молодёжное.
В основу дизайна легла смесь брутализма и современного ретро. Мы использовали простые и довольно грубые формы, акцентную типографику, яркие цвета, при этом добавили чёрно-белые фото, рваные рамки, декоративные элементы. Всё это помогло задать нужное настроение.
Сайт для DST AgencyПлашечный дизайн
Этот вариант отлично подходит проектам, которым нужна структурность. Мы используем этот стиль там, где есть информация, которую важно выделить и сразу представить пользователю. В этом помогают плашки, карточки, прямоугольные формы. Они задают тон, выгодно подчеркивают и разграничивают контент.
Некоторые проекты студии за 2023 год
Минимализм
Простые формы, нейтральные цвета — в минимализме главное не как, а что. Что в основе сайта? Чем он наполнен? Минимализм помогает создать визуальный интерес и стимулировать эмоции без использования декоративных элементов. Убираем всё лишнее, оставляя только главное.
Пользователь видит сотни рекламных сообщений в день. Визуальная чистота в такой ситуации помогает выделить проект. Это направление мы выбрали и для нового сайта студии «Магвай».
Новый сайт студии «Магвай»Какие приёмы не стали популярными
Сверхстимуляция
Всё и сразу — так можно описать этот тренд. Впрочем, по нашим наблюдениям сверхстимуляция трендом так и не стала. Анимированный фон, анимированный передний план, типографика, эффекты на ховере и на клике, мигающие изображения и цветные брызги одновременно. Не многие проекты готовы к таким визуально нагруженным решениям.
Навигация в духе 90-х
По прогнозам в 2023 году должно было появиться больше проектов, которые стилизуют меню на сайте под стиль 90-х. Например, используют компакт-диски, кассеты, пиксельные ярлыки. С одной стороны, как и в случае с ретродизайном, тренд может сыграть на чувстве ностальгии. С другой — сфера применения довольно узкая, поэтому если его и использовали, то лишь точечно в подходящих проектах.
Альбомная эстетика или скрапбукинг
Этот тренд связан с желанием развиртуализироваться, сделать digital-мир таким же осязаемым и понятным, как реальный. В этом помогают написанные словно от руки заголовки, стикеры, коллажи.
"Навигация в духе 90-х и скрапбукинг выглядят наименее выигрышно для веба. Возможно, это более актуально для графического дизайна или коммуникационки. Как мне кажется, обе эти темы надо было оставить отдыхать в 2020-2021 годах. Но даже с такими решениями можно сделать что-то хорошее. Главное — задача, исполнение, переосмысление уже существующих подобных решений и соблюдение баланса."
Владимир Новиков,
Дизайнер студии «Магвай»
Что ждёт веб-дизайн в 2024
Об этом мы ещё поговорим в большом материале. Уже готовим статью, где собраны тренды следующего года по версии зарубежных коллег. Но также спросили мнение дизайнеров внутри студии «Магвай».
"Почти все тренды из 2023 года перейдут дальше, как это было и раньше. Визуальный тренд — это инструмент дизайнера для решения задач. Быть актуальным — тоже задача. В своих работах мы используем разные тренды в разных исполнениях, потому что хотим быть разнообразными и донести идею через визуал."
Александр Ищенко,
Senior-дизайнер студии «Магвай»
"Скептически отношусь к прогнозам на тренды следующего года. Не совсем понятно, как это учитывает задачи бизнеса и откуда вообще берутся такие прогнозы. Вряд ли хоть один из этих трендов подойдёт для сайта банка или юридической компании. В дизайне определённо существуют тенденции, какие-то из них держатся несколько лет, какие-то — меньше полугода. Что-то будет развиваться дальше и становиться ещё сложнее, например, анимации и 3D-миры. Что-то постепенно станет неотъемлемой частью хорошего продукта. Я бы советовал следить за лидерами рынка, смотреть, как они переосмысливают уже существующее и как в ходе этого рождается что-то новое. Надо окружать себя хорошей дизайн-средой и перенимать лучшие практики."
Владимир Новиков,
Дизайнер студии «Магвай»
В комментариях предлагаем вам побыть digital-предсказателями и дать прогноз — что же будет актуально в 2024 году в веб-дизайне?
