Тренды в UX/UI: чем запомнился 2022-й
Акцидентные шрифты, кастомизация деталей и крафтовые иллюстрации.
![](https://248006.selcdn.ru/main/iblock/614/614512b8b8304d3b098e8e7ae13dff3b/308747fbdbd7679879d2c89763101cb3.jpg)
![](https://248006.selcdn.ru/main/iblock/614/614512b8b8304d3b098e8e7ae13dff3b/308747fbdbd7679879d2c89763101cb3.jpg)
Иллюстрация: Kampong Gelamorous / Museum of Online Artifacts Almanac / Colowgee для Skillbox Media
Поговорили с экспертами о том, какие тенденции в дизайне интерфейсов нам принёс 2022-й, как применять их в своих проектах и какие скиллы развивать, чтобы выделяться в следующем году.
В материале иллюстраторы рассказывают:
- как нейросети упрощают привычную работу;
- чем выделят работу акцидентные шрифты;
- о новых цветовых гаммах в интерфейсах;
- как микровзаимодействия помогают дизайнеру погрузить пользователя в продукт;
- как иллюстрации стирают границу между реальным и диджитал-миром;
- о смешении противоположных дизайн-школ;
- как no-code захватывает рынок;
- как 3D проникает в веб;
- о чём ещё стоит помнить дизайнерам при работе с трендовыми приёмами.
Нейросети
![](/upload/setka_images/16333222122022_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg)
Ольга Лопатина
Продуктовый дизайнер в «Альфа-Банке»
— Ясно можно выделить тренд на использование нейросетей. Мы привыкли, что можно сгенерировать палитру с помощью AI, получить иллюстрацию или обработать изображение. Датасеты будут расширяться, алгоритмы совершенствоваться — очень надеюсь, что в ближайшем будущем у дизайнеров не останется рутинной работы.
![](/upload/setka_images/16333222122022_08fda0244b5397e030ee401fd2bea5b24f78a72b.jpg)
Артём Кожевников
Дизайнер-директор диджитал-агентства beta
— В 2023-м дизайнеры попробуют нейронки — и как инструмент для вдохновения, и как быстрый, и, следовательно, дешёвый генератор альтернативных вариантов для своих макетов. Задача погенерить вариантики перестанет быть оверкиллом для большинства дизайнеров. А сервисы, которые предоставляют доступ к мощностям рабочих моделей, станут ещё мощнее и проще.
Можно сказать, что мы на пороге открытия нового профессионального направления — prompt engineer или prompt designer. Единственное, в чём я не уверен, так это в том, что prompt останется единственным интерфейсом к нейронкам.
![](/upload/setka_images/16333422122022_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
Изображение: MidJourney / i3sN / DTF
Крупная типографика и акцидентные шрифты
![](/upload/setka_images/16333322122022_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
Дарья Прокуда
Дизайн-лид в Osome, практикующий волшебник
— Так как я состою в жюри международного конкурса, то по воле судьбы просматриваю и оцениваю тысячи работ.
Типографика в 2022-м надёжно закрепила место за отдельным UI-приёмом, который может не только передать нужный характер и вайб, но и верно расставить акценты. Советую поизучать Readymag Websites of the Year 2022 — там есть много хороших работ, где дизайнеры используют акцидентные шрифты.
![](/upload/setka_images/16333222122022_0ed1686442ac630326a48ddcef43684fa02b904b.jpg)
Изображение: Ksenia Kovsharova / Readymag
![](/upload/setka_images/16333522122022_b30ff17d14b759c017197570526ff51b33cc83c5.jpg)
Изображение: Daniil Golubev / Readymag
Мягкие оттенки
![](/upload/setka_images/11381023122022_178ae943fb180dbd85da113c997e71d410f43eb6.jpg)
Денис Пушкарь
Продакт-оунер дизайн-системы «Ростелекома»
— В этом году мне особенно нравится использование естественных, более материальных цветов в оформлении веб-сайтов и интерфейсов. Кислотные, диджитальные синие цвета надоели бесконечно.
Посмотрите на linktr.ee с приятной гаммой. В самом начале сайта нас встречает приятная глазу зелёная заливка. Обратите внимание на простую, но яркую анимацию с эффектом параллакса. Эту натуральность интерфейса поддерживают скруглённые шейпы и устойчивая типографика.
![](/upload/setka_images/11365823122022_62bf1942effdabf0107c530d35221fdf53489254.jpg)
«Студия Луч» делает диджитал, но на своём сайте использует спокойные пастельные цвета и большие скруглённые шейпы.
Ещё сильно цепляют приятные анимации микровзаимодействий и интерактив.
![](/upload/setka_images/11365823122022_ea2b2f998665356b094cbc9e4d99ecdc646b93d5.jpg)
Ещё мне нравится Potion. Обратите внимание на анимацию появления текста в первом блоке, а также физику падающих тегов, которые можно крутить/вертеть/кидать по экрану.
![](/upload/setka_images/11365823122022_b200d8bc76303a5287d3954213dd40d331052ae4.jpg)
Микровзаимодействия
Дарья Прокуда:
— Кастомные курсоры, микроанимации при наведении и саунд-эффекты, добавление музыки в проекты — это всё то, что может передать клиенту полный спектр эмоций, захватить его внимание надолго и произвести впечатление. Это легко отследить на сайте проекта «Мир коренных народов» Джимми Нельсона. Пространство сайта и интерфейса имеет глубину и перестаёт быть плоским, что даёт огромную вариативность в сторителлинге и навигации.
![](/upload/setka_images/16333322122022_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
![](/upload/setka_images/16333222122022_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
Скриншот: сайт Jimmy Nelson / Skillbox Media
Иллюстрации
Дарья Прокуда:
— Да, это тоже про эмоции, как и микровзаимодействия, но иллюстрации буквально захватили внимание всех крупных сервисов и компаний. Они добавляют ту необходимую крафтовость, наивность и рукотворность, что позволяет стереть границу между диджиталом и реальным миром. Как никогда становятся актуальными японский стиль и графика.
![](/upload/setka_images/16333322122022_cece785eb92cd643f5e788e5f37e3d933a76f56c.jpg)
![](/upload/setka_images/16333322122022_c0c954a3a268bfc515e88839a41a25de5bd1b194.jpg)
Изображение: finders-tokyo.co.jp
Лаконичность и яркость
Дарья Прокуда:
— Я бы хотела подсветить две вещи: это швейцарская графичность и чистота, она сейчас соперничает с яркостью и эмоциональностью новой волны любви к хиппи и ретро. Но эта оппозиция как будто не только разграничивает использование визуальных приёмов относительно готовности клиентов воспринимать тот или иной стиль, но и делит на прогрессивных новаторов и тех, кто отдаёт долг традициям.
![](/upload/setka_images/16333222122022_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg)
Скриншот: сайт Janice Feryn / Skillbox Media
![](/upload/setka_images/16333422122022_2229e417950c39bd1ac90259b6c781a232a40430.jpg)
Я могу предсказать, что противостояние точно закончится в 2023-м, так как уже видно взаимное проникновение двух оппозитных графических приёмов:
![](/upload/setka_images/16333222122022_b96f49b701f581862428f9c58e1a46c731d0aa89.jpg)
Артём Кожевников:
— В индустрии продолжаются неутихающие разборки двух школ. По одну сторону остаётся богатая, умудрённая опытом типографская школа, по другую — молодая школа веба с целой кучей всякого экспериментального дизайна. Сталкиваясь, они обогащают друг друга, штуки из книг, журналов и плакатов встраиваются в веб, а приёмы из интерактивного пространства органично заезжают в печать. Просто следите за этим.
Веб всё больше будет стараться быть похожим на мобильный App, и в UI, и в UX. Это не будет Mobile First, скорее — своеобразная симуляция мобилки.
![](/upload/setka_images/16333222122022_d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d.jpg)
Изображение: HOLOGRAPHIK® / Hrvoje Grubisic / Dribbble
Коллаборации брендов
Дарья Прокуда:
— Глобальным трендом также стали коллаборации брендов для усиления метафор. Так, например, вы можете относительно вашего стиля подобрать себе плейлист:
![](/upload/setka_images/16333222122022_b76bc71fa80c20942ed01e19c21ead7b69ad6b89.jpg)
No-code
Артём Кожевников:
— No-code в 2023-м снова попробует отъесть огромную долю рынка. К Tilda, Readymag и Webflow, который сейчас просто на диком хайпе из-за новой маркетинговой стратегии, активно подтягивается Framer Sites. Ждём, когда же Figma выпустит свой паблишер и научится выводить макеты в веб одной кнопкой.
Кстати, Figma, если ты это читаешь, знай — мы тут, если честно, уже заждались =)
![](/upload/setka_images/16333322122022_1c076733da30d01108464d85a8ffad1517acec59.jpg)
Изображение: Allen Z / Webflow
3D
Артём Кожевников:
— Всё проще становится 3D. Многие достойные рабочие инструменты сразу ориентированы на работу в вебе. Эти факторы также открывает доступ к этой технологии для широкой аудитории. Я бы назвал этот тренд Easy-Cheap-Web-3D. Ещё в 3D в тренде генеративная графика, ноды в Blender, TouchDesigner, Houdini, Unreal Engine 5, быстрый дизайн тридэшек из ассетов.
![](/upload/setka_images/16333322122022_1cc7c7aaff1472b38801633d33e2f9e6221a290f.jpg)
Изображение: Orizon / Angel Villanueva / Dribbble
Дизайн-наблюдения
Ольга Лопатина:
— Есть набор трендов, который не меняется уже года три: крупная экспериментальная типографика (желательно кинетическая), микроанимации, темизация, минимализм, брутализм (или необрутализм), использование 3D, иммерсивный скролл. В плане UI работу 2021-го и 2022-го почти невозможно отличить.
Все очень ждут, когда произойдёт революция AR и VR — но в этом году долгожданного прорыва не случилось. Web 3.0, о котором все говорят, пока в зачаточном состоянии.
Самое главное — делать то, что тебе нравится. Любишь классные 3D — учись Blender, нравится минимализм и брутализм — смотри больше референсов, анализируй и пробуй повторить. Practice makes perfect.
Дарья Прокуда:
— Я верю, что 2023-й год будет временем эмоций, сила их сейчас велика, поэтому точно в палитре стоит обращать внимание на то, как вы можете усилить эффект от взаимодействия с интерфейсом, дополнить его и расширить своё влияние на клиента. Не зря последние годы все говорят про фиджитал и стирание границ для пространства интерфейса, а также о мультисенсорном опыте.
Артём Кожевников:
— Успешный дизайнер в 2023-й, в какой бы организации он ни работал, будет использовать всё, о чём я говорил выше. А это я ещё не сказал об After Effects и обязательных базовых знаниях маркетинга, бизнеса, копирайтинга и редактуры, продаж и переговоров. Это обусловлено тем, что порог в профессию продолжает неукоснительно снижаться, а значит, конкурентное преимущество будут иметь специалисты, которые освоили больше навыков, чем другие коллеги по цеху. В общем, в новом году снова важно быть T-shaped. Загвоздка лишь в том, что в нашей профессии эта верхняя перекладина всё растёт и растёт. С другой стороны, в этом и есть вся прелесть профессии =)
Денис Пушкарь:
— Из года в год я повторяю одно и то же — дизайнеру нужно использовать голову. Тренды — это хорошо, но надо понимать, какие из них хорошие, какие бесполезные, и с умом использовать только те, которые помогают решить задачу.
Добавлю, что всё больше дизайнерам надо мыслить не только дизайном, но ещё и разработкой, если мы говорим об интерфейсах. Знание основ фронтенда очень сильно помогает в работе: в выборе технологий и в общении с командой. А ещё это хорошее ограничение: сделать дизайн так, чтобы было круто, но и на проде устройство не превращалось в раскалённую печку от обилия анимаций, 3D и прочего.
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!