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

Давайте посмотрим, что принесет нам 2024 год. Садитесь поудобнее, я, Полина Короткая, дизайнер команды dev.family, расскажу, какие стили, техники и эффекты будут в ходу и почему.

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

3D-иллюстрации продолжают оставаться в тренде. Это обусловлено увеличением производительности компьютеров и снижением себестоимости разработки графики такого рода.

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

3D-элементы часто применяются для иконок, кнопок, иллюстраций на веб-сайтах и в приложениях. Эти элементы привлекают своей нестандартностью.

Однако, если раньше объемных фигур хватало, чтобы быть «на стиле», то сегодня для вау-эффекта потребуются дополнительные фишечки, например, анимация.

Чаще всего объемную графику можно увидеть в проектах, посвящённых финтеху или Web3, и на сайтах диджитал компаний. Во-первых, она лучше всего иллюстрирует необходимую информацию, во-вторых, отсылает к технологичности проекта, в-третьих, выделяет проект на фоне остальных.

Популярность набирают и абстрактные 3D формы. Этот тренд охватывает сложные анимированные фигуры, такие как шипастые шары, и плавные поверхности из множества частиц.

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

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

Одним из способов взаимодействия с аудиторией является создание 3D-версии своих продуктов. Такой сайт становится максимально интерактивным, дарит пользователю новый опыт и первые впечатления от бренда.

В 2024 они сохранят свою актуальность наравне с 3D абстракциями. Можно сказать, что два тренда будут идти рука об руку, поскольку хорошо дополняют друг друга. Вместе они добавляют еще больше реалистичности в интерфейс.

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

Два тренда, которые зародились еще в 2020 году (а глассморфизм вообще в далёком 2013 с выходом iOS 7). Посверкали, а потом и угасли. Но в 2024 вернулись снова. Зачем?

Визуал с элементами неоморфизма и глассморфизма добавляет реалистичности интерфейсам. Подход пользуется популярностью у диджитал компаний, основная цель которых — продемонстрировать свои продукты. У пользователей должно возникнуть ощущение, что он словно рассматривает предмет вблизи, видит его фактуру, может «потрогать» глазами. Так создается устойчивая ассоциация: «я это держал в руках, значит оно существует и оно почти моё».

Глассморфизм — имитация стеклянных форм в интерфейса.
Неоморфизм — адаптированный под наши реалии тренд сквевоморфизма, который сохраняет качественную работу с тенями у объектов, объем и градиенты.

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

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

В 2024 продолжают своё существование линейные и как бы нарисованные от руки иллюстрации. Сегодня их выбирают крупные компании, которые хотят создать и поддерживать свой уникальный стиль. Ориентироваться можно на Google, Yandex, Dropbox, Mailchimp и Wetransfer.

Именно рисованные иллюстрации — наиболее частый инструмент сторителлинга, который позволяет рассказать и показать историю бренда пользователю. Это отсылка к детским книгам, приятным вечерам, личным историям. Бренд таким образом сближается с пользователем, показывает, что разговор будет на одном языке.

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

На этот раз внимание стоит уделить сайтам с блочной системой, большим объёмом негативного пространства и контрастными шрифтами.

Минималистичный дизайн особенно востребован в сложных интерфейсах, содержащих большой объём данных. Например, к таким проектам мы можем отнести дашборды, личные кабинеты, иногда и онлайн-магазины.

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

Поскольку сложные интерфейсы – наш конек, особо долго хочется рассказывать и показывать. Но вместо 1000 слов предлагаем посмотреть на кейс для крупнейшего в Восточной Европе производителя полимеров.

Им требовался личный кабинет, чтобы снизить загрузку менеджеров. Благодаря такому решению мелкий и средний бизнес (составляли 80% клиентов, но приносили всего 20% прибыли) теперь самостоятельно оформляет заказы, получает необходимые документы и следит за календарем поставок. А продавцы могут сосредоточиться на крупном бизнесе, чье количество составляет 20% от клиентов, но приносит аж 80% прибыли.

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

Такой дизайн без элементов, выделяющихся и отвлекающих внимание, создает ощущение «порядка». Вы словно думаете: «Ого, какой он аккуратный!» и начинаете доверять ему, возможно, даже испытывать уверенность в продукте.

Темный интерфейс перерос в нечто большее, чем простой выбор между «light mode» и «dark mode». Он привлекает внимание пользователя своей премиальностью, выгодно отличаясь от привычного контента на белом фоне.

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

Были. Есть. Будут! Но какие именно считаются актуальными?

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

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

Помимо микроанимаций, популярными становятся сайты, которые «переносят» пользователи в виртуальную реальность. Там можно познакомиться с жизнью, особенностями, — прямо целым миром бренда. Так люди перенимают ценности, миссию, становятся его «адвокатами».

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

Чтобы ещё больше зацепить пользователей, используйте уникальные персонажи-маскоты. Они следуют за пользователем во время пользования цифровым продуктом и вовлекают во взаимодействие. Такой подход помогает отстроиться от конкурентов, обеспечивает сквозную коммуникацию (пользователю проще освоится, если на каждой платформе бренда или компании он видит уже знакомого ему персонажа).

Иногда персонажи становятся настолько уникальными, что становятся героями мемасиков (как это произошло с совой из Duolingo).

Элементы ретро и винтажа — отличные триггеры, которые создают ностальгические настроения у пользователей. Они вовлекают в эмоциональное взаимодействие с продуктом и дарят увлекательный опыт, а также подсознательно укрепляют доверие посетителей. Они словно говорят: «У нас общее прошлое, общие воспоминания. Мы росли вместе».

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

Как это сделать? Добавить характерные элементы: каллиграфию и антикварные шрифты, старые фотографии, поп-арт. Гарнитуры могут быть рукописными и в стиле леттеринг. Приемы можно смешивать.

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

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

Насыщенная типографика, кислотные цвета, GIF-анимации, бегущие строки, а также яркие, но плоские коллажи, элементы из Mac OS 9, Windows 2000 и Windows ME — всё это используем, если хотим получить действительно «бешеный» и запоминающийся визуал.

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

Главная цель — впечатлить пользователя, остальное вторично. Поэтому использовать все эти смелые приемы стоит, если ваш проект, посвящен неформальным организациям и событиям.

В качестве бонуса, расскажу про любимый свой инструмент, который можно использовать как для простых, так и для сложных сайтов. Речь про Искусственный интеллект. Мы довольно плотно подсели на эту технологию, внедряем ее в рабочие процессы, предлагаем клиентам. Но главное, следим за трендами и показываем, как ее можно и нужно использовать «в быту». Писали о том, как AI помогает ресторанному бизнесу и HoReCa, а вот тут рассказывали про AI и ecomm.

Что же касается дизайнеров, то они уж точно ощутили сильное преимущество от внедрения искусственного интеллекта: работа над визуалом раньше измерялась зачастую днями работы, а теперь занимает пару часов. Как еще можно использовать AI?

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

Начиная еще с середины 2023, активно развиваются сервисы для создания анимированного контента.

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

Следуя трендам, не забывайте про меру и удобство — важнее всего помочь пользователю быстро получить всю важную для него информацию и совершить целевое действие. Поэтому всегда задавайте себе вопрос «А зачем я это рисую?»

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

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

Остались вопросы? Пишите нам сюда, или смотрите наше портфолио на dribbble.