Крафтовые шрифты: Декоративные шрифты
07.08.1971
Разное
как их использовать к месту и не бесить пользователей
Все сталкивались с ситуацией, когда попадали на сайт с модным, красивым, но категорически неудобным интерфейсом. Алексей Нибо, наш арт-директор, комментирует UI/UX-тренды 2020 и рассказывает, как им следовать, чтобы не испортить дизайн.
В основе статьи — перевод видео из блога Envato.
1. Сдержанная анимация
Небольшие анимированные элементы используют, чтобы поощрять целевые действия пользователей, а более явные — для привлечения внимания всего к одному или двум призывам к действию.
«В 2019 году интерфейсы были довольно перегружены анимацией. Надеюсь, в 2020 году дизайнеры будут использовать этот инструмент с умом и менее навязчиво», — пишет в блоге специалист Envato.
Такой прием использовали на своем сайте SEEK career — группа компаний, которые помогают людям найти работу. Анимированный элемент в шапке сайта привлекает внимание пользователей к разделу SEEK’s career advice.
Инструмент стал популярен, потому что с его помощью легко добавить изюминку на сайт скучной или типично серьезной тематики. Например, для финансовых, медицинских, консалтинговых или рекрутинговых услуг.
Этот прием отлично подошел для главной страницы сайта детской многопрофильной больницы. Анимированные иконки в разделе услуг откликаются на наведение курсора, а иллюстрации привлекают внимание к профильным направлениям больницы.
2. Неоморфизм
Этот тренд получил широкое распространение в первые месяцы 2020 и все еще набирает популярность. Название тренда происходит от игры слов «нео», «новый», и «скеоморфизм».
Скеоморфизм — прием в дизайне интерфейсов, когда элементы выглядят как привычные вещи в жизни. Например, калькулятор на экране компьютера выглядит также, как его физический аналог.
Моду на скеоморфизм ввели Apple и Стив Джобс. Правда, после 2013 года они отказались от этого тренда и упростили дизайн интерфейсов на своих мобильных устройствах. Неоморфизм — эволюция и перерождение скеоморфизма.
Вот как об этом тренде пишет Джим МакКоли в Creative Bloq:
Неоморфизм сочетает в себе лучшее из плоского дизайна и скеоморфизма.
Интерфейсы получаются более чистыми и реалистичными благодаря искусному сочетанию света и тени.
Благодаря искусному сочетанию света и тени дизайн получается более чистыми. Использование мягких теней делает такой дизайн одновременно футуристичным и реалистичным, а также привносит новый чувственный опыт в привычные интерфейсы.
Пример этого стиля — интерфейс приложения Luminarious. Иконки в приложении имитируют нажатие на кнопки, чтобы придать глубину и реалистичность дизайну.
Вызов для дизайнеров, которые используют этот стиль, – сделать его более практически применимым и комфортным для пользователей.
Дизайн в таком стиле может путать пользователей. Поскольку Неоморфизм построен на игре объема, света и тени, пользователю сложно понять, что кликабельно, а что нет. Дизайнеру нужно не просто нарисовать элементы в этом стиле, но еще и продумать дополнительные состояния элементов, чтобы сделать интерфейс понятным. Другой вариант — использовать этот прием либо только в статичных элементах, либо только для интерактивных.
![]()
Алексей Нибо, арт-директор digital-агентства «Атвинта»
Например, в этой стилистике мы сделали 3D-иконки на сайте родильного дома. Это декоративный элемент. Все кликабельные кнопки и инпуты оставили привычными для пользователей.
3. Полноэкранные изображения
В 2020 году большие изображения или видео — больше чем просто тренд. И чем больше, тем лучше. Ведь именно изображение в первую очередь привлекает внимание пользователей.
Полноэкранные изображения используют в качестве фона сайта или как яркие акценты.
Например, креативное агентство Playful на главной странице своего сайта-портфолио использует полноэкранное видео, которое при скролле демонстрирует проекты команды.
Такие решения круто смотрятся на сайтах промышленных компаний. Огромные изображения на фоне передают масштабность производства и позволяют продемонстрировать продукцию. Например, этот прием мы использовали на сайте компании «Спецмонтаж».
Алексей Нибо, арт-директор digital-агентства «Атвинта»
Leave a Comment