Тренды 2025 года: UX/UI дизайн, технологии и разработка
В январе 2025 года дизайн-директор Grids Ира Хафизова представила исследование актуальных трендов на вебинаре с креативным предпринимателем Максимом Юриным.
Рассказываем и показываем, чего нам ждать от сайтов и приложений в ближайшем будущем.
Дизайн
Ольга Гребенюк
UX/UI дизайн
1. Широкое применение AI-инструментов
Искусственный интеллект всё более активно используется для генерации иллюстраций, автоматизации рутинных процессов и ускорения прототипирования. Похоже, он останется на позиции тренда № 1 как минимум на несколько лет.
В Grids главным инструментом дизайнеров стала Midjourney. За 2 года она вышла на флагманские позиции, оставив позади конкурентов. Мы генерируем с её помощью изображения и имиджи для клиентских проектов, а также создаём персонажей, дорабатывая результаты вручную.
Примеры использования нейросетей
2. Пикселизация
Следующий тренд вдохновлён эстетикой технологий 90-х и 8-битных видеоигр, где изображение строится из пикселей. Это добавляет элемент ностальгии по временам, когда человек только начинал осваивать диджитал-пространство.
Интересный способ использования пикселей предложила шведская компания By Wind, образовавшаяся в результате слияния крупнейших типографий страны. Символ Y в логотипе анимируется, что отсылает к ветрогенераторам, подчёркивая мощь и амбициозность проекта.
В материалах бренда есть интересное решение — анимированное видео с коробками, часть из которых закрашена. С помощью таймлапс-перестановки «пикселей» воспроизводится движение символа Y. Просто, как всё гениальное.
Крупные дизайнерские студии внедряют пикселизацию очень эффектно и дозированно. К примеру, на сайте Locomotive при наведении курсора на меню появляются анимации с вкраплениями трендовых пиксельных мотивов.
Примеры использования пикселизации
3. Эстетика ретро
Плавно переходим к ретростилю: это уже не только 1980−90-е годы, но и 50-е, и 60-е. В неспокойные времена люди оглядываются на своё детство и пытаются найти опору в прошлом. Дизайн помогает найти точку, в которую можно вернуться, чтобы «заземлиться».
Это отлично иллюстрирует кейс «Бургер Кинга». В 1999 году бренд поменял позиционирование, сделав логотип более технологичным и обтекаемым. Но буквально пару лет назад вернулся к первоначальному варианту после небольшого тюнинга — с помощью агентства Jones Knowles Ritchie.
Как отмечает Лиза Смит, исполнительный креативный директор агентства, «Бургер Кингом» руководило желание выглядеть:
менее синтетическим, искусственным и дешёвым и более реальным, желанным и вкусным
Ретростиль находит применение в разных историях и на разных сайтах. Это всегда выглядит тепло, потому что комбинируются приятные некричащие цвета. Многие из них образуют отличные контрастные пары — к примеру, жёлтый и синий.
Сочетание винтажных деталей, цветовых схем и типографики, вдохновлённых прошлой эпохой, придаёт дизайну ностальгические ноты. В мебели, одежде, интерьере — везде происходит переосмысление ретроэстетики в цифровой век.
4. Макротипографика
Текст как основа для дизайна — так можно сформулировать этот тренд. Он идёт рука об руку с модой на минимализм.
Множество сайтов демонстрируют крупные текстовые логотипы, огромные буквы которых занимают всю ширину экрана. Акцент на текст усиливается, а остальные элементы на странице выглядят подчёркнуто лаконично.
Огромные надписи могут располагаться и наверху, и в подвале. Нередко буквы анимируются, что добавляет элемент действия и новую глубину пространства. Полноэкранные тексты и визуальные блоки мгновенно привлекают внимание и формируют первое впечатление о бренде.
Следующий сайт с работами иллюстратора довольно минималистичен: здесь ничего нет, кроме белого фона и анимаций. Но когда мы докручиваем колёсико мыши до подвала, во весь экран растягивается слово «CONTACT». Так художнице-фрилансеру удаётся обратить на себя внимание необычным и в то же время простым способом.
Работая с крупной типографикой, стоит помнить о разнице между латиницей и кириллицей. Средняя длина слова в английском меньше, чем в русском, и надписи на нём выглядят более лаконично. Играет роль и алфавит с особенностями начертания букв.
Поэтому начинающим дизайнерам советуем пробовать свои силы в создании надписей и на латинице, и на кириллице, и на языках со сложными начертаниями — к примеру, на иврите или китайском.
Примеры использования крупной типографики
5. Анимация логотипа
Растёт количество сайтов, на которых лого уже не ограничивается ролью простого идентификатора. Это полноценный элемент навигации, причём зачастую анимированный. Моушн-лого подчеркивают индивидуальность бренда и создают запоминающуюся динамику.
Уже знакомая нам компания By Wind подкрепляет свой анимированный логотип видеороликом с работающими ветрогенераторами, что усиливает впечатление. За время нахождения на сайте логотип врезается в память и поддерживает восприятие бренда.
Даже микроанимация может стать частью интерфейса и навигации. К примеру, простой ховер у Solarprank играет свою роль во взаимодействии пользователя с сайтом.
Примеры использования анимированных логотипов
6. Тактильность
Использование «шершавых» и других рельефных текстур обращается к осязанию пользователя и вызывает желание потрогать поверхность. Такие методы активно применяют в POS-материалах. Здесь можно вспомнить визитки на бумаге с необычными текстурами, а вместе с ними — уже упомянутую тенденцию к ретро.
Текстура создаёт эффект живого пространства и глубины. В диджитальном мире, переполненном интерфейсами, так и хочется прикоснуться к чему-то осязаемому и приятному на ощупь. В этом отношении тренд можно противопоставить нейронкам.
На сайте проекта xHuman, который мы недавно запустили в Grids, текстуры поддерживают человечность месседжа. Важно было подчеркнуть, что внешняя команда продаж — это не просто функция, а живые люди, которые присоединятся к бизнесу.
Мы вывели в интерфейс много лиц и добавили текстуру с глубоким градиентом. Такой стилистический выбор определяет эмоциональное наполнение дизайна.
Примеры использования тактильности
7. Аудиодизайн и микровзаимодействия
Раньше сайты с аудио в интерфейсе попадались очень редко, а сейчас — в огромном количестве. Звуковое сопровождение и фоновая музыка усиливают эмоции, помогая выстроить более глубокую связь с продуктом.
На сайте проекта Cosmos прокрутка заставляет бутон цветка на фоне эстетично распускаться (или закрываться, если мы возвращаемся наверх). Всё это сопровождается космическим эмбиентом и звуками шелестящих лепестков. Создаётся эффект полного погружения.
Зачастую звуковое сопровождение добавляется минимально — в формате микровзаимодействия. Как мы увидели выше на примере логотипов, этот тренд прослеживается и на уровне визуала. А в сочетании с аудио образуется гармония, которая всесторонне вовлекает пользователя на эмоциональном уровне.
На сайте Amaterasu диджитальность персонажа, нарисованного нейросетью, сглаживается за счёт звука, градиента и лаконичных моментов вроде появления текста из блюра. Это атмосфера, которая затягивает с головой.
Обратная связь становится важным компонентом эмоционального вовлечения. Небольшие анимации и реакции на поведение пользователя (наведение мыши, клик и прокрутку) оживляют интерфейс и упрощают его понимание.
Чек-лист Grids
Пример Telegram
Такой подход проникает во все сферы диджитал-жизни: тот же Telegram использует микроанимации для лайков и других действий, что повышает уровень вовлечённости.
Примеры аудиодизайна и микровзаимодействий
Тренды в UX
1. Mobile-first design
Это стремление к приоритетной оптимизации под мобильные устройства — с упрощённой навигацией и адаптивной вёрсткой для удобства на любом экране.
С каждым годом всё большую часть цифрового контента мы воспринимаем с экрана смартфона, поэтому тренд будет набирать обороты. Если раньше на этапе разработки в первую очередь думали о декстопной версии, то сейчас она отходит на второй план.
Примеры mobile-first design
2. Инклюзивность
Большое внимание уделяется доступным интерфейсам и визуальным решениям для широкой аудитории с разными возможностями. Это продуманные цветовые схемы, шрифты и не только. В целом происходит движение от эксклюзивности к инклюзивности.
К примеру, сайт цифровой платформы Гостех предлагает большой выбор настроек для людей с нарушениями зрения.
Полезные цифровые функции помогают преодолевать ограниченные возможности. VoiceOver в iOS — незрячим и слабовидящим пользователям, а Яндекс Разговор и программы синтезации LINKa — людям с нарушениями слуха, речи и ментальными нарушениями. С их помощью открываются новые возможности для общения.
Выберите тип
Настройте
Получите результат
Вот такое решение можно увидеть в кофейнях Starbucks: теперь терминалы самообслуживания принимают заказы на международном языке жестов.
Большую популярность приобретают хелперы и подсказки-тултипы. Это возможность проявить заботу: они помогут любому пользователю быстро и без ошибок выполнить нужное действие.
Примеры инклюзивных решений
3. Дополненная реальность (AR)
Технологии AR в вебе и мобильных приложениях позволяют совмещать реальный мир с виртуальными объектами. Это становится основой для интерактивных презентаций, позволяющих покупателю виртуально примерить товар. А магазинам — сократить процент возвратов.
IKEA использовала дополненную реальность, чтобы дать покупателям возможность виртуальной расстановки мебели в комнате.
Ещё один формат использования AR — развлекательный. Сеть пиццерий Pizza Hut добавила на свою упаковку «Пакмана», а бренд косметики Urban Decay объединился с Робином Айзенбергом, чтобы создать игру к праздникам.
Продуктовые тренды
1. Гиперперсонализация
Технологии обработки больших данных и искусственный интеллект позволяют брендам предлагать продукты и услуги, максимально соответствующие предпочтениям пользователей.
Маркетплейсы, соцсети, стриминговые сервисы, доставка — все подстраивается под наши интересы, используя рекомендательные алгоритмы. Такие продукты знают своего пользователя и стремятся предугадать его выбор.
Музыкальные сервисы используют персонализированные плейлисты, чтобы предлагать музыку, соответствующую не только вкусу, но и настроению.
Рекомендации и персонализированные подборки помогают Яндекс Еде предлагать блюда и товары, которые понравятся пользователю.
Пример гиперперсонализации в Spotify и Яндекс Музыке
Примеры гиперперсонализации
2. Биометрия
Биометрические технологии делают взаимодействие с продуктом более удобным и безопасным. К примеру, Сбер использует их для упрощения оплаты. Интерфейс реагирует на эмоциональное состояние пользователя, сканируя мимику с помощью фронтальных камер.
Пример биометрии в Сбер
Госуслуги используют биометрию для идентификации, упрощая и ускоряя доступ к важным сервисам.
Еще один шаг вперёд делает технология Eye Tracking, с помощью которой интерфейсы адаптируются под движение глаз пользователя. Она используется в Apple Vision Pro — гарнитуре смешанной реальности, позволяющей выбирать объекты взглядом.
Eye Tracking
Примеры использования биометрии
3. Суперприложения (Super-apps)
Становятся всё популярнее единые платформы с бесшовной навигацией и интерфейсом, сочетающие множество сервисов: платежи, мессенджер, покупки, такси и многое другое.
Такие приложения стремятся охватить разные сферы интересов пользователей и, разрастаясь, приобретают большое значение с экономической точки зрения.
Пример супераппа в Яндекс Go
4. AI-ассистенты и чат-боты
Технологии, направленные на понимание и решение задач пользователей, проникают в разные уголки цифровой жизни. ChatGPT, Gemini и другие генеративные модели используют персонализацию для адаптации ответов и выбора подходящего стиля взаимодействия.
Многофункциональные AI-помощники выполняют функцию второго пилота, давая пользователю возможность делегировать им разнообразные задачи. И предлагая удобные интерфейсы для навигации по разделам.
Примеры чат-ботов и AI-ассистентов
Тренды технологий и разработки
1. Headless CMS
Это гибкие системы, в которых разделены бэкенд (управление) и фронтенд (отображение). Контент предоставляется через API, что позволяет легко использовать его на разных платформах — от сайтов до приложений и чат-ботов.
Фронтенд-технологии можно менять без затрагивания ядра CMS. Их нужно просто «подключить» к готовому бэкенду — это ускоряет разработку, делая систему гибкой, масштабируемой и многоканальной.
Примеры Headless CMS
Directus: CMS с простой интеграцией через REST/GraphQL для работы с любыми базами данных.
Contentful: облачная платформа с удобным API и гибкими настройками.
«1С-Битрикс»: обычная CMS с возможностью использования в headless-режиме.
2. WebAssembly (Wasm)
Эта технология позволяет запускать тяжёлые ресурсоёмкие программы прямо в браузере, повышая скорость и производительность. Программы на Wasm работают быстрее, чем на чистом JavaScript, и приближены по скорости к нативным приложениям.
Код, написанный на C++ или Rust, работает в интернете без установки дополнительных плагинов. Это универсальное и безопасное решение: единый формат поддерживают все современные браузеры, а запуск в «песочнице» минимизирует риски.
Ещё один пример использования WebAssembly — AutoCAD Web. Облачное решение даёт возможность создавать и править чертежи без установки тяжёлых программ.
3. Экологичность
Создание производительных и энергоэффективных интерфейсов — один из устойчивых трендов, набирающих обороты. Такие решения помогают снизить потребление энергии и углеродный след цифровых продуктов.
Уменьшить нагрузку на серверы помогают такие меры, как использование SVG или сжатых форматов. Минималистичный дизайн с небольшим количеством визуальных элементов тоже играет свою роль. Загрузка страниц становится быстрее, а значит, расходуется меньше энергии.
Лёгкие системные шрифты, такие как Google Fonts, — ещё один способ экономить ресурсы. Работа с тяжёлыми шрифтами требует больше мощностей и энергии. То же можно сказать о тёмной и светлой теме: первая снижает не только нагрузку на зрение пользователей, но и энергопотребление.
Чтобы помочь пользователям экономить энергию, можно добавить тёмный режим или возможность снизить яркость монитора.
Подводя итоги разговора о трендах
Индустрия дизайна всё больше опирается на кажущиеся противоречия: технологии — против человеческого, минимализм — против максимализма, цифровое — против физического.
Мы в Grids уверены: успешными будут те, кто может ориентироваться в этих противоречиях и создавать работы, способные вызвать отклик как на эмоциональном, так и на практическом уровне. Если все мы сможем найти этот баланс, то креативную индустрию ждёт захватывающее будущее.
Посмотреть прошедший вебинар, где мы обсудили эти тренды, можно по ссылкам:
Спасибо за заявку!
Мы свяжемся с вами
как можно скорее.
А если не хотите ждать, напишите в Telegram
Хочу в команду
Нажимая на кнопку, вы соглашаетесь с нашими правилами обработки данных
Нажимая на кнопку, вы соглашаетесь с нашими правилами обработки данных
Этот сайт использует файлы cookie для корректной работы.
Принять