Тренды в дизайне интерфейсов 2020 года: как их использовать к месту и не бесить пользователей

Все сталкивались с ситуацией когда попадали на сайт с модным, красивым, но категорически неудобным интерфейсом. Алексей Нибо, арт-директор digital-агентства «Атвинта», комментирует UI/UX-тренды 2020 года и рассказывает, как им следовать, чтобы не испортить дизайн.

В основе статьи — перевод видео о трендах из блога Envato.

1. Сдержанная анимация

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

«В 2019 году интерфейсы были довольно перегружены анимацией. Надеюсь, в 2020 году дизайнеры будут использовать этот инструмент с умом и менее навязчиво», — пишет в блоге специалист Envato.

Такой прием использовали на своем сайте Seek Career — группа компаний, которые помогают людям найти работу. Анимированный элемент в шапке сайта привлекает внимание пользователей к разделу Seek’s career advice.

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

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

2. Неоморфизм

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

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

Моду на скеоморфизм ввели Apple и Стив Джобс. Правда, после 2013 года они отказались от этого тренда и упростили дизайн интерфейсов на своих мобильных устройствах. Неоморфизм — эволюция и перерождение скеоморфизма.

Неоморфизм сочетает в себе лучшее из плоского дизайна и скеоморфизма. Интерфейсы получаются более чистыми и реалистичными благодаря искусному сочетанию света и тени.

Джим МакКоли для Creative Bloq

Использование мягких теней делает такой дизайн одновременно футуристичным и реалистичным, а также привносит новый чувственный опыт в привычные интерфейсы.

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

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

Дизайн в таком стиле может путать пользователей. Поскольку неоморфизм построен на игре объема, света и тени, пользователю сложно понять, что кликабельно, а что нет.

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

Например, в этой стилистике мы сделали 3D-иконки на сайте родильного дома. Это декоративный элемент. Все кликабельные кнопки и инпуты оставили привычными для пользователей.

Алексей Нибо, арт-директор digital-агентства «Атвинта»

3. Полноэкранные изображения

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

Полноэкранные изображения используют в качестве фона сайта или как яркие акценты.

Например, креативное агентство Playful на главной странице своего сайта-портфолио использует полноэкранное видео, которое при скролле демонстрирует проекты команды.

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

Алексей Нибо, арт-директор digital-агентства «Атвинта»

4. Беспринципное нарушение правил

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

«Вам не нравятся ровные сетки? Сделайте верстку асимметричной! Или используйте сумасшедшие шрифты, кричащие сочетания цветов, добавляйте рисованные элементы, помещайте одни элементы поверх других, даже если они перекрывают друг-друга», — предлагают специалисты Envato.

Правда, тут же оговариваются: все это возможно только там, где не мешает пользователю и не раздражает его.

Пример такого сумасшедшего дизайна — промосайт Meccaland, фестиваля бьюти-индустрии.

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

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

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

Алексей Нибо, арт-директор digital-агентства «Атвинта»

5. Вариативные шрифты

Никогда не стоит недооценивать правильный шрифт в UX-дизайне. В этом году типографика выходит на новый уровень.

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

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

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

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

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

Алексей Нибо, арт-директор digital-агентства «Атвинта»

6. Крафтовые элементы

Этот тренд цикличен и сейчас он снова возвращается: в 2020 году в моде иллюстрации, иконки и другие элементы, нарисованные дизайнерами вручную.

Рисованная иллюстрация для главной страницы «Мой бизнес. Кузбасс»

Веб-дизайн отказывается от аккуратности и цифровой «прилизанности» в стилистике. Теперь бренды хотят видеть на своих сайтах крафтовые элементы: рисованные вручную иллюстрации и шрифты, текстуры и зернистые эффекты.

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

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

Один из последних наших проектов с рисованными иллюстрациями — промосайт детского онлайн-лагеря «Good Лето».

Еще один пример — акварельная иллюстрация для промосайта конкурса по благоустройству города. Иллюстрация не статичная, пользователи могут сами ее раскрасить, двигая курсор. Получилось решение, которое транслирует заботу и вовлекает пользователей.

Алексей Нибо, арт-директор digital-агентства «Атвинта»

7. Гибкие дизайн-системы

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

Безусловно, UI/UX-дизайнеры умеют мастерски объединять отдельные элементы вроде изображений, текста, цветов, взаимодействий в интерфейсе в целостные системы, чтобы бренд стал ближе к пользователю. И теперь все чаще мастерство выходит за рамки типичных решений из диджитал-сферы.

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

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

Эмили Бланк в той же статье рассказала: «Во время одного из наших дизайн-спринтов мы отправились в музей Уолта Диснея в Сан-Франциско. И я подумала: как это захватывающе, что благодаря множеству визуальных и стилистических решений вы всегда можете отличить фильм Диснея от другого мультфильма».

Главная мысль такая: когда дело доходит до UX- и UI-дизайна, важно соблюдать единство, выделяться среди других и непрерывно развивать визульные решения.

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

Так, в «Атвинте» мы создали систему иллюстраций для нашего блога, которую может дополнять любой из наших дизайнеров, сохраняя узнаваемость стилистики. Например, добавлять элементы или персонажей. Более того, даже сотрудники, далекие от дизайна, могут собрать иллюстрацию для блога или соцсетей, просто комбинируя элементы.

Алексей Нибо, арт-директор digital-агентства «Атвинта»

Суммируем

Еще раз перечислим все тренды и где их уместно использовать:

  1. Ненавязчивая анимация поможет разбавить сайт скучной тематики и привлечь внимание пользователя к целевому действию.
  2. Неоморфизм придает сайту стильный и футуристичный вид, но использовать его стоит осторожно, чтобы не запутать пользователей.
  3. Огромные изображения во весь экран идеальны для корпоративных сайтов, на которых важно показать размах компании. А также для сайтов бьюти или фэшн-индустрии и всех тех направлений бизнеса, где важно эффектно презентовать продукт бренда.
  4. Анти-дизайн подходит для молодежной аудитории и арт-тематики.
  5. Вариативные шрифты крутое решение, но все еще есть техническое ограничение на их использование: старые версии браузеров могут их не поддерживать. Так что перед применением этого решения, выясните, что использует целевая аудитория сайта.
  6. Крафтовая стилистика лучше всего зайдет для компаний, которым важно транслировать ценности душевности и заботы о людях.
  7. Гибкие и самобытные дизайн системы позволят стилю бренда развиваться, одновременно отвечая на тренды и при этом не изменяя себе.
0
36 комментариев
Написать комментарий...
Ol Ka

Я вот что понял за 20 с лишним лет своих наблюдений за UI и не поспевающим за ним UX: сделай один раз красиво и удобно, и... всё.

Примерно раз в N лет ты будешь попадать в современные тренды, ничего не меняя. Ну, или оптимизируя по минимуму.

Просто потому, что всё циклично. В том числе и дизайн.

Ответить
Развернуть ветку
Aleksandr Konovalov

Заказчикам нужен тренд сегодняшний, он не будет ждать когда цикл замкнется и предложенное решение станет "модным". Да и вообще, как то не очень попадать в тренд раз в N-лет. Интереснее ж все время выдавать результат, который будет востребован "здесь и сейчас".

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Светослав Димитров

Кажется, что такое могут себе позволить только гиганты вроде Apple и Google. Пока эти компании придерживаются флэта или материала за ними будут следовать и остальные.
Может я ошибаюсь. Было бы интересно посмотреть примеры других средних/крупных компаний, которые идут по своему пути, но при этом выглядят современно.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

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

Ответить
Развернуть ветку
Uzabila

Не ответ, а вода сплошная. Святослав же написал - "Было бы интересно посмотреть примеры". Всё остальное - демагогия. Можно как угодно в тусовках выпендриваться друг перед другом и раздувать своё эго, думая, что создаешь какие-то мнимые тренды... Но потом приходит Гугл и говорит "Material Design" и все делают его.

Ответить
Развернуть ветку
Antony Divnich

К черту неоморфизм

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Когда нужен нормальный UX - точно 

Ответить
Развернуть ветку
Vadim Zlygastev

Вставлю свои пять копеек по поводу неоморфизма)) Тренд трендом, выглядит красиво, возможно, даже свежо немного. Но если посмотреть все концепты на дрибле и бехансе, то видно четко следующее: все делают концепты приложений для дома и продуктивности. Что означает, что в таком стиле очень красиво смотрятся кнопки и карточки и все, что с ними связано. Даже в приведённом примере на бехансе получилось каша какая-то... Кнопки и карточки выглядят клёво , но на этом все. Календарь не получился (да и не выглядит как в физическом мире). Тоже самое касается тэгов,избранного, меню, навигации. Вот когда в таком стиле начнут делать полноценные концепты полезных сервисов, банков и порталов, то тогда можно будет уже о чем-нибудь говорить)) Все, выговорился)

Ответить
Развернуть ветку
Alexey Nibo

Все, в принципе, правильно написали. Продолжительность жизни тренда определяется тем, насколько гибко можно его применить в разных ситуациях. Посмотрим, как это будет развиваться)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

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

Ответить
Развернуть ветку
Руслан Фатихов

Скеоморфизм никогда не будет работать.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Для калькулятора на винде нормально работал.

Ответить
Развернуть ветку
Руслан Фатихов

Винда работает на METRO UI.

Ответить
Развернуть ветку
Vlad

Уже 5 лет как нет

Ответить
Развернуть ветку
Руслан Фатихов

Тогда на Fluent. Какая разница, если открыть панель управления, там будет интерфейс с Windows 98.

Ответить
Развернуть ветку
Vlad

Впрочем, да )

Ответить
Развернуть ветку
Alexey Nibo

Metro UI умерло в зародыше, а Fluent пока еще и не родился, хотя даже в нем прослеживаются общие черты с неоморфизмом)

Ответить
Развернуть ветку
Ilya Karbyshev

Я за дизайн без поправок

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Главное, что "за" :)

Ответить
Развернуть ветку
Татьяна Бублик

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

Ответить
Развернуть ветку
Alexey Nibo

Возможно стоит перестать читать "тех западных дизов"

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Татьяна Бублик

Алексей как-то отстал от жизни года на 2, судя по упоминанию в 2020м неоморфизма. Еще осталось в перечисленное брутализм добавить – такое же старье))

Ответить
Развернуть ветку
Alexey Nibo

То, что неоморфизм начали пробовать выкладывать на дрибле пару лет назад, вовсе не обозначает, что он был популярен и хоть как-то адекватно применим. Именно сейчас, благодаря Apple, он пойдет в массы (по прогнозам).

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
T K

Тренды, ага... натужно креативные дизайнерки и дизайнеры, пытающиеся родить что-то новое, творят уже вырвиглазную дичь (те же flat icon design) и  заполоняют своими новыми творениями ваши бехенсы и дриблы.

Другие видят, что вся эта дичь множится и находится в топе, повторяют на свой лад. -> Дичь множится на порядки.

Аналитик и креативные арт дирехтора возводят это в ранг трендов 20??, изобретают новые умные термины и пишут в свои дневнички и пытаются продать клиентам как "ВАУ НОВЬЕ!! БУДЬ В ТРЕДНДЕ"

Все довольны до новой волны новой дичи.

Все это лишь мода и попытка привлечь внимание.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Ого! Чем вас все это так раздосадовало? И за что попало аналитику?  :)

Ответить
Развернуть ветку
T K

Причем тут досада? Я реально смотрю на вещи, и смотрю со слабо скрываемым скепсисом, когда очередной хитроумный менеджер пытается продать мне тренд основываясь не пойми на чем )

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Часто заказываете дизайн? :)

Ответить
Развернуть ветку
Khabib96

"не только про дизайн, но и про технологии",но и про глумление над русским языком.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Это игра в "продолжим фразу, начиная с "но и.." ?

Ответить
Развернуть ветку
Khabib96

как угодно, лишь бы без "про"

Ответить
Развернуть ветку
Alex Ayer

Сейчас какой-нибудь заказчик вдохновится и включит в ТЗ все семь пунктов

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Тогда это получится тренд №4, анти-дизайн 

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Тогда это получится тренд №4, анти-дизайн 

Ответить
Развернуть ветку
33 комментария
Раскрывать всегда