Тренды в UX/UI: подводим итоги полугодия 2023-го
Эксперты комментируют популярные решения в дизайне интерфейсов первой половины года.
![](https://248006.selcdn.ru/main/iblock/aab/aab5580d7bdbdc5fdeab2098b5d73e34/5bb2e199f6d86e1f7983f1fbd9816c7a.png)
![](https://248006.selcdn.ru/main/iblock/aab/aab5580d7bdbdc5fdeab2098b5d73e34/5bb2e199f6d86e1f7983f1fbd9816c7a.png)
Иллюстрация: Полина Честнова для Skillbox Media
Поговорили с дизайнерами интерфейсов о том, как грамотно применять тренды в своей работе, какими примерами стоит вдохновиться и какие функции можно внедрить в продукт, чтобы выделиться среди конкурентов.
О трендах расскажут:
- Павел Лукоянов — об отходе от стандартной вёрстки к контрастной типографике;
- Ольга Лопатина — об AI, абстрактном 3D, ризопечати и VR;
- Елена Бобина — о сайтах-играх, пиксель-арте и экспериментальном 3D;
- Артём Кожевников — о победе гравитации и навигации в сайдбаре.
Отход от стандартного взгляда
Один из главных трендов, который я отмечаю уже на протяжении второго или третьего года, — веб-приложения, онлайн-сервисы и даже обычные лендосы стараются быть максимально похожими на приложения или презентации.
Дизайнеры отходят от привычного представления о сайте как о длинной колбасе из блоков, которую обязательно нужно прокрутить до конца. Страницы вписываются в высоту экрана, визуал заполняет очень много пространства. Скролл больше не главное действие: весь контент сразу перед глазами либо скрыт за элементами навигации и интерактива.
![](/upload/setka_images/14135822082023_08fda0244b5397e030ee401fd2bea5b24f78a72b.jpg)
![](/upload/setka_images/14135822082023_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
Контрастная типографика
Всё чаще встречаю сайты, в основном промолендинги или лонгриды, в которых сочетают увеличенный донельзя кегль в заголовке с текстовыми блоками нормального размера. Такой высокий контраст цепляет взгляд, однозначно выстраивает иерархию и даёт простор для применения микроанимаций, чтобы разбавить статичные блоки. Так верстать сайт — задача совсем не простая, и это возможность для дизайнера проявить себя и показать свои скиллы.
![](/upload/setka_images/14135722082023_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
![](/upload/setka_images/14135822082023_0ed1686442ac630326a48ddcef43684fa02b904b.jpg)
![](/upload/setka_images/14135822082023_b30ff17d14b759c017197570526ff51b33cc83c5.jpg)
![](/upload/setka_images/15565622082023_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
Ольга Лопатина
Продуктовый дизайнер в Mercedes-Benz.io.
AI
Технологии и искусственный интеллект проникают во все сферы нашей жизни, включая дизайн. Дизайнеры меняют подход работы над проектами, и AI смещает границы возможностей и вдохновляет на новые творческие решения.
В нашей компании появилась политика, которая регулирует работу с AI: для чего можно использовать, для чего нельзя (любая работа с персональными данными, к примеру). Я в своей работе использую ChatGPT для генерации шаблонного текста (когда мы не получили контент от редактора) или генерации идей (после брейншторма с командой мы спрашиваем ChatGPT, какие могут быть ещё идеи).
Очень крутую штуку сделал Framer — можно расписать техническое задание на вёрстку сайта и получить вполне неплохой результат. Конечно, его всё равно придётся доработать, но это вполне можно считать неплохой первой итерацией.
Абстрактное 3D
Мой любимый тренд, абстрактные и экспериментальные 3D — отличная замена для иллюстраций. Жду дальнейшего взаимодействия этого тренда с VR и современным искусством (для инсталляций, к примеру). Сюда бы я ещё добавила тренд на голографические узоры и переливающиеся цвета, напоминающие научную фантастику.
![](/upload/setka_images/14151222082023_67577da4d8977ebae7bbc26fe09eaca85147b425.gif)
Ризопечать
Вернулась мода на ризографию — это вид шаблонного копирования. Дизайн в стиле ризопечати обычно в ярких цветах и с шероховатыми текстурами. Вижу много хороших примеров как в полиграфии, так и в цифровом дизайне.
![](/upload/setka_images/14151122082023_c0c954a3a268bfc515e88839a41a25de5bd1b194.jpg)
![](/upload/setka_images/14150122082023_d0e289e355555cb39f9d7f499b6888c389473c54.png)
Читайте также:
VR
Главное событие этого года — Apple представила Vision Pro. Ждём, как изменится индустрия с выходом очков в следующем году. Но я бы рекомендовала как минимум посмотреть на гайды Vision, там много интересного.
![](/upload/setka_images/14151122082023_cece785eb92cd643f5e788e5f37e3d933a76f56c.jpg)
![](/upload/setka_images/14124222082023_2229e417950c39bd1ac90259b6c781a232a40430.jpg)
Елена Бобина
Основатель и арт-директор агентства «е—б», жюри премии Awwwards, автор телеграм-канала про дизайн.
Сайты-игры / сайты с нестандартными сценариями взаимодействия
На премиях вижу всё меньше классических сайтов со скроллом сверху вниз: вместо стандартных блоков и последовательной структуры — необычные сценарии взаимодействия. Такие сайты мне больше напоминают игры: в самом начале пользователю предлагается вместо скролла куда-то нажать или перейти и затем изучать информацию через активное взаимодействие с ней.
Особенности проектов: много действий, короткие страницы, обилие иллюстраций, хорошая стилизация. Подходит для промо и спецпроектов!
![](/upload/setka_images/14170222082023_ea2b2f998665356b094cbc9e4d99ecdc646b93d5.jpg)
![](/upload/setka_images/14170122082023_b200d8bc76303a5287d3954213dd40d331052ae4.jpg)
![](/upload/setka_images/14170222082023_178ae943fb180dbd85da113c997e71d410f43eb6.jpg)
Пиксель-арт и ностальгия по 1990-м
Мой любимый тренд! Я случайно его предугадала, когда в феврале сделала сайт-игру про себя, а последние полгода вижу много таких решений в сайтах самых разных ниш. Это можно внедрять везде: взять пиксельный шрифт, положить на фон пиксельную сетку, сделать вместо прямоугольных плашек пиксельные формы или вообще на всём сайте подыграть в стилистике 16-битных игр с «Сеги» — дизайнеры ограничены только своей фантазией.
![](/upload/setka_images/14170122082023_acb3891951eada938d821fe8c18ea10c2884033f.jpg)
![](/upload/setka_images/14170122082023_00ef4ecbef33723c9293d85ddb5e396ecc049496.jpg)
![](/upload/setka_images/14170122082023_6ed0b04ccb1af0573cd045b2bd21a60938919582.jpg)
![](/upload/setka_images/14170122082023_d879e3a09b3d33248cfb9e16b5b5b31c5891b3f5.jpg)
Экспериментальные 3D
Примерно в 2021 году 3D-иллюстрации так заполонили сайты, что я прогнозировала этому тренду забвение, но он трансформировался и стал по-настоящему интересным. Дизайнеры внедряют в сайты сложные 3D-абстракции, дополняют графику сложными текстурами и анимациями, за счёт чего сайты даже с очень простой типографикой и сеткой начинают играть по-новому.
![](/upload/setka_images/14170122082023_5d2552f3c147808bd3c9149b748f69964400c85d.jpg)
![](/upload/setka_images/14170222082023_1b9538555bc8b6bb16a0625a682661edb953ea1c.jpg)
![](/upload/setka_images/14124122082023_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg)
Артём Кожевников
Дизайн-директор диджитал-агентства beta.
Победа гравитации
Основные элементы управления в мобильных приложениях переехали вниз. То же самое сделали и современные веб-приложения, сайты и сервисы со своей навигацией, главными заголовками и уведомлениями.
Дизайнеры умело размещают снизу важную информацию и главные элементы управления, которые раньше преимущественно располагались в силовых центрах верхних углов или держались за края формата.
Интересно наблюдать, как опыт мобильных устройств перетекает в десктопный веб и всё становится более консистентным. Смотрится очень эффектно, местами — очень уместно не только смотрится, но и работает, к тому же это решение прекрасно разгружает верх страницы, который зачастую уже занят панелями инструментов браузера.
![](/upload/setka_images/14191622082023_d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d.jpg)
![](/upload/setka_images/14185822082023_b96f49b701f581862428f9c58e1a46c731d0aa89.jpg)
![](/upload/setka_images/14191622082023_b76bc71fa80c20942ed01e19c21ead7b69ad6b89.jpg)
Навигацию — в сайдбар
Это второй не менее яркий тренд, который прекрасно представлен не только в вебе, но и в продукте — например, в новом браузере ARC.
Новый экспериментальный лэйаут для навигации также освобождает верх и низ страницы и даёт так много воздуха и свободы, что порой даже теряешься от такого огромного количества свободного для изучения пространства. Сама идея, безусловно, не нова, но интересно, что дизайнеры начали снова смело экспериментировать с ней в попытках найти новый, лучший пользовательский опыт.
Архитектурные перемены, создание новых архитектурных форм в UI/UX — это чистейший кайф. Я надеюсь, дизайнеры будут экспериментировать с этой тонкой материей всё больше и больше, создавая всё больше и больше новых, смелых идиоматических интерфейсов.
![](/upload/setka_images/14191622082023_1c076733da30d01108464d85a8ffad1517acec59.jpg)
![](/upload/setka_images/14191622082023_1cc7c7aaff1472b38801633d33e2f9e6221a290f.jpg)
![](/upload/setka_images/14191622082023_62bf1942effdabf0107c530d35221fdf53489254.jpg)
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!
Другие материалы о дизайне интерфейсов