- Статьи
- 9 мин на чтение
- 44457
Обзор трендов в UI-дизайне на 2023 год
Подборка трендов от UX Teddy – канал, где публикуют практические статьи, советы и гайдлайны по созданию качественных интерфейсов (а еще переводы из блога UX Movement).
Развитие моушен-дизайна, параллакс, иммерсивные технологии, использование контрастирующих UI-стилей, имитация материалов из реальной жизни и многое другое
Всем привет! Представляю вам новейший обзор тенденций в UI-дизайне. Я рассказываю о новых трендах уже четвертый год, так что это стало для меня своего рода традицией. Несколько недель я тщательно собирала и анализировала наиболее примечательные примеры дизайна для того, чтобы сформировать тенденции на будущий год. Я всегда готовлю обзоры таким образом, и выпуск 2023 не стал исключением.
Важное замечание: 99% представленных примеров — реальные продукты!
Некоторые тренды так и остались трендами, другие продолжили развиваться или перешли в более узкую нишу. Некоторые тенденции, надеюсь, ушли навсегда. В обзоре вы найдёте некоторые старые тенденции, которые снова возвращаются в индустрию.
Моушен-дизайн
Моушн-дизайн повсюду. От микровзаимодействий до сложных анимаций — интерфейс больше не может быть статичным, ведь пользователи ожидают, что он будет визуально «жить и дышать».
Из-за влияния TikTok, Instagram* и анимационного контента, который пользователи потребляют ежедневно, продолжительность концентрации внимания людей всё больше снижается. Некоторые считают, что сейчас мы воспринимаем информацию на уровне золотой рыбки или ещё хуже.
*Примечание переводчика. Организация Meta и её продукт Instagram, на который мы ссылаемся, признаны экстремистскими и запрещены на территории РФ
Чтобы удержать внимание людей, дизайнерам стоит использовать анимацию и пытаться вдохнуть жизнь в статичные экраны и изображения, чтобы они как можно больше погружали человека в виртуальную среду.
Если вы пользуетесь сервисом Duolingo, вы наверняка заметили, что после недавнего обновления на платформе появилось больше анимированных иллюстраций и анимационных переходов между экранами. Большинство компонентов интерфейса взаимодействуют с пользователем с помощью различных визуальных эффектов. Почти всё время, пока человек совершает какие-либо действия, на экране что-то происходит.
Если говорить об анимации, нельзя не упомянуть эффект параллакса.
Параллакс — это набор различных слоев графики, которые при прокрутке страницы движутся с разной скоростью. Это создает завораживающий, приятный визуальный эффект и добавляет контенту глубину, хотя все элементы находятся в одном измерении.
При использовании параллакса дизайнеры придерживаются простого правила: ближайшие элементы движутся быстрее, чем те, которые находятся дальше. Именно так происходит в реальной жизни, когда вы едете на машине и смотрите из окна автомобиля на далёкий горный хребет.
*Примечание переводчика: GSAP (The GreenSock Animation Platform) — набор инструментов для реализации анимации любого уровня сложности с помощью JavaScript
Анимации на сайте выглядят потрясающе, ведь большинство из них сделано в коде с использованием библиотек GSAP. Вы даже можете посетить пирамиды Мероэ, не покидая браузера. Тем не менее, каждую анимацию сначала проектируют, чтобы разработчик мог ее воссоздать. И здесь на помощь приходят дизайнеры.
Если вы хотите углубиться в моушен-дизайн, то вы думаете в правильном направлении. Я убеждена, что в ближайшем будущем моушен-дизайн станет обязательным навыком для любого дизайнера. Поэтому начните изучать его уже сейчас.
Чистый дизайн
С годами я улучшала свой стиль и постепенно переходила к более минималистичному и чистому дизайну. Возможно, это естественный путь каждого дизайнера, но я рада, что среди всех тенденций, которые либо остаются, либо уходят, чистый минималистичный дизайн — это всегда безошибочное решение. Осознание этого факта одновременно и удивляет, и успокаивает.
Каждый раз, когда я просматриваю сайты и приложения, то замечаю, что чистый и минималистичный дизайн выглядит приятно и профессионально. Чтобы создать высококлассный, современный цифровой продукт, необязательно следовать всем тенденциям.
Следить за некоторыми трендами для поиска вдохновения полезно, но при условии, что ваш дизайн по-прежнему будет стильным и актуальным. Потому что иногда тенденции кажутся слишком подавляющими, а минималистичный стиль — это спасение для любого дизайнера.
Многоцветные мягкие градиенты
Сияющие градиенты, абстрактные градиентные формы и фигуры, градиенты на кнопках, карточках, красочные и яркие всплески цветов, используемые в фонах с эффектом параллакса — эта тенденция, кажется, не теряет актуальности.
Вы также можете заметить тексты с градиентами, например, заголовки, чтобы выделить определенную фразу.
Высокий контраст / монохром
Обратите внимание на сильно контрастирующие элементы, а иногда даже целые разделы на многих сайтах и в приложениях, которые используют крупнейшие игроки отрасли.
Я думаю, что причина этой тенденции схожа с той, о которой я говорила выше — постоянное мелькание сильно контрастирующих элементов/поверхностей во время прокрутки интерфейса может улучшить концентрацию внимания на контенте.
Такой приём делает интерфейс доступным благодаря хорошей видимости элементов и текста. Только не делайте контраст слишком сильным. Это может вызвать перенапряжение глаз.
Тёмный футуристический/космический интерфейс
Темный интерфейс превратился в нечто большее, чем просто возможность выбора «ночной/тёмной темы». Всё больше брендов переводят свои продукты и сайты в тёмную версию.
Я считаю, что тёмный интерфейс лучше привлекает внимание пользователя, потому что выглядит более необычно и интригующе, чем привычный «контент на белом фоне». Он задаёт сайту или приложению футуристическое или даже «космическое» настроение.
Имитация материалов из реальной жизни
У нас уже есть глассморфизм, клейморфизм (или пластилиноморфизм), металломорфизм/хромоморфизм и другие стили. Я также заметила, что в дизайне можно встретить элементы, стилизованные под хрусталь или жемчуг. Мне кажется разумным объединить эти направления в одно, потому что все они имитируют реальные материалы. Этот стиль превратился в устойчивую тенденцию последних лет и не собирается уходить в ближайшее время.
(Помните, год назад я писала о том, что скевоморфизм постепенно возвращается?)
Важное наблюдение: глассморфизм, похоже, на подъёме. Сейчас на многих сайтах дизайнеры используют эффект матового стекла на панелях навигации, кнопках или декоративных элементах.
Гигантская типографика
*Примечание переводчика. Организация Meta и её продукт Instagram, на который мы ссылаемся, признаны экстремистскими и запрещены на территории РФ
Гигантская типографика — сегодня это заметный и сильный тренд. В основном её используют на сайтах из-за больших разрешений экрана, чтобы создать минималистичное/брутальное/крутое настроение. Часто огромную типографику сочетают с полноэкранными фотографиями и заметными анимациями.
Гротески с геометричными формами никуда не денутся и всегда будут надежным, функциональным решением в дизайне интерфейсов.
Сейчас у нас так много замечательных источников шрифтов: от бесплатных, таких как Google Fonts и Font Share, до множества отличных шрифтов премиум-класса, таких как Gilroy, Circular Std, Mont, Axiforma, Nexa, Galano.
Подумайте над тем, чтобы купить некоторые из вышеуказанных профессиональных семейств шрифтов, чтобы поднять проекты на новый уровень. Это ценная инвестиция.
В этой статье я собрала отборные платные и бесплатные современные шрифты, которые разработали лучшие шрифтовые студии.
Сентиментальный дизайн
Поскольку в обычной жизни я люблю порядок, давайте поместим все тенденции в стиле необрутализм, винтаж, ретровейв, «80-90-е годы» и журнальный/плакатный в одну категорию под названием «сентиментальный дизайн».
В зависимости от продукта или услуги, которую бизнес пытается продать, такой дизайн может стать отличным визуальным решением, но в нём форма часто преобладает над функцией.
В то же время иногда он выглядит свежим, оригинальным и неповторимым.
Возникает серьёзный вопрос — действительно ли такой стиль хорошо подходит для дизайна интерфейсов?
Пример? Многие бренды, которые решили сделать дизайн в брутальном стиле, столкнулись с негативными отзывами пользователей.
Figma и Gumroad — популярные исключения, но этот стиль подходит далеко не каждому продукту. Просто складывается впечатление, что в случае брутального дизайна больше всех результатом довольна команда дизайнеров, которая его сделала. Мне жаль говорить об этом, но такие направления, как брутализм, редко бывают функциональными и привлекательными для пользователей.
Последний редизайн The Verge яркий тому пример. После обновления дизайна сайта количество просмотров за месяц уменьшилось почти на 5,5 миллионов. Главной причиной массового оттока послужили хаотичная вёрстка и экстремальные контрасты.
Можно с уверенностью сказать, что когда речь идет о цифровых продуктах, в их основе лежит баланс между функциональностью и визуалом.
PS. Интересно, как бы выглядело сочетание почти всех тенденций, о которых я рассказала в статье? Смотрите.
Спасибо, что дочитали статью до конца! А какие тенденции нравится вам больше всего? Знаете ли вы ещё какой-нибудь тренд, о котором стоит упомянуть? Пишите в комментариях!
