December 22, 2022

Обзор трендов в UI-дизайне на 2023 год

Развитие моушен-дизайна, параллакс, иммерсивные технологии, использование контрастирующих UI-стилей, имитация материалов из реальной жизни и многое другое

Всем привет! Представляю вам новейший обзор тенденций в UI-дизайне. Я рассказываю о новых трендах уже четвертый год, так что это стало для меня своего рода традицией. Несколько недель я тщательно собирала и анализировала наиболее примечательные примеры дизайна для того, чтобы сформировать тенденции на будущий год. Я всегда готовлю обзоры таким образом, и выпуск 2023 не стал исключением.

Важное замечание: 99% представленных примеров — реальные продукты!

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

Давайте начнем.

Моушен-дизайн

Слева направо, начиная сверху: Estee Lauder, Apple, Duolingo, Wishes In Words, The Virtual Economy, Wickret

Моушн-дизайн повсюду. От микровзаимодействий до сложных анимаций — интерфейс больше не может быть статичным, ведь пользователи ожидают, что он будет визуально «жить и дышать».

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

*Примечание переводчика. Организация Meta и её продукт Instagram, на который мы ссылаемся, признаны экстремистскими и запрещены на территории РФ

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

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

В последнем обновлении Duolingo приложение взаимодействует с пользователями практически на всех уровнях

Если говорить об анимации, нельзя не упомянуть эффект параллакса.

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

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

Компания Midwam использовала библиотеку GSAP* для создания сайта. Смотрите здесь: Midwam

*Примечание переводчика: GSAP (The GreenSock Animation Platform) — набор инструментов для реализации анимации любого уровня сложности с помощью JavaScript

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

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

Чистый дизайн

Слева направо, начиная сверху: Coinbase, Airbnb, Tran Mau Tri Tam, Squareblack, Foh&Boh, Revolut

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

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

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

Сайт Apple — воплощение проверенного временем, минималистичного, чистого дизайна, в котором акцент сделан на характеристиках продуктов. Знаменитая сетка Apple «Masonry grid» уже сама по себе является трендом. Вы увидите её на многих сайтах! Смотрите здесь: Apple

Многоцветные мягкие градиенты

Слева направо: Sketch, LS Graphics, Winamp, Cosmos, Until, Stripe

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

Красивый пример использования сияющих градиентов. Смотрите здесь: Clyde

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

Слева направо: Apple, Vercel, Memorisely

Высокий контраст / монохром

Начиная с верхнего левого изображения: Uber, Endel, Revolut Business, Homey, Klarna, Dropbox

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

Я думаю, что причина этой тенденции схожа с той, о которой я говорила выше — постоянное мелькание сильно контрастирующих элементов/поверхностей во время прокрутки интерфейса может улучшить концентрацию внимания на контенте.

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

Тёмный футуристический/космический интерфейс

Слева направо, начиная сверху: GitHub, Zenly, Railway, Linear, Notion AI, Create

Темный интерфейс превратился в нечто большее, чем просто возможность выбора «ночной/тёмной темы». Всё больше брендов переводят свои продукты и сайты в тёмную версию.

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

Сайт компании Linear — отличный пример тёмного интерфейса. Он также содержит множество элементов с эффектом матового стекла. Смотрите здесь: Linear

Имитация материалов из реальной жизни

Слева направо, начиная сверху: Solana, Letter, Thoughtlab, Youtube Music, Next.js, Mural

У нас уже есть глассморфизм, клейморфизм (или пластилиноморфизм), металломорфизм/хромоморфизм и другие стили. Я также заметила, что в дизайне можно встретить элементы, стилизованные под хрусталь или жемчуг. Мне кажется разумным объединить эти направления в одно, потому что все они имитируют реальные материалы. Этот стиль превратился в устойчивую тенденцию последних лет и не собирается уходить в ближайшее время.

(Помните, год назад я писала о том, что скевоморфизм постепенно возвращается?)

Важное наблюдение: глассморфизм, похоже, на подъёме. Сейчас на многих сайтах дизайнеры используют эффект матового стекла на панелях навигации, кнопках или декоративных элементах.

Дизайнеры Letter действительно любят кристаллы. Обратите внимание на выраженный эффект матового стекла на панели навигации. Смотрите здесь: Letter

Гигантская типографика

Слева направо, начиная сверху: Apple, Heart Aerospace, Stand With Ukraine, Increase, Gumroad, Instagram*

*Примечание переводчика. Организация Meta и её продукт Instagram, на который мы ссылаемся, признаны экстремистскими и запрещены на территории РФ

Гигантская типографика — сегодня это заметный и сильный тренд. В основном её используют на сайтах из-за больших разрешений экрана, чтобы создать минималистичное/брутальное/крутое настроение. Часто огромную типографику сочетают с полноэкранными фотографиями и заметными анимациями.

Выглядит потрясающе! Сайт: Heart Aerospace

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

Сейчас у нас так много замечательных источников шрифтов: от бесплатных, таких как Google Fonts и Font Share, до множества отличных шрифтов премиум-класса, таких как Gilroy, Circular Std, Mont, Axiforma, Nexa, Galano.

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

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

Сентиментальный дизайн

Слева направо, начиная сверху: Harbor, Beautiful, Vacation, Franky’s, How We Feel, Express VPN

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

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

В то же время иногда он выглядит свежим, оригинальным и неповторимым.

Возникает серьёзный вопрос — действительно ли такой стиль хорошо подходит для дизайна интерфейсов?

Пример? Многие бренды, которые решили сделать дизайн в брутальном стиле, столкнулись с негативными отзывами пользователей.

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

Последний редизайн The Verge яркий тому пример. После обновления дизайна сайта количество просмотров за месяц уменьшилось почти на 5,5 миллионов. Главной причиной массового оттока послужили хаотичная вёрстка и экстремальные контрасты.

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

PS. Интересно, как бы выглядело сочетание почти всех тенденций, о которых я рассказала в статье? Смотрите.

Зачем концентрироваться на одном тренде, когда можно использовать их все? Смотрите здесь: Cyd Stumpel

Спасибо, что дочитали статью до конца! А какие тенденции нравится вам больше всего? Знаете ли вы ещё какой-нибудь тренд, о котором стоит упомянуть? Пишите в комментариях!