fbpx

Неоморфизм – новый тренд в дизайне пользовательских интерфейсов

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

Но все же в работе дизайнера Alexander Plyuto виден новый взгляд на привычные формы.

И все-таки: в чем отличие? Объясняют ребята из UX Collective.

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

В материальном дизайне (на рисунке ниже он справа) фигура как бы парит над фоном. Из-за этого она отбрасывает воображаемую тень – эта же тень очерчивает четкие границы фигуры.

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

Как этого добиться?

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

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

Вот основной рецепт – вы можете менять его под свою задачу.

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

Он создает проект в Adobe XD, но предполагает, что в Figma все будет еще проще. Разница в том, что в Figma можно добавлять несколько теней, а в XD для этого придется копировать слои. Тем не менее, получилось все равно здорово.

Читайте также:  Как правильно применять тултипы в UI дизайне

(Если не работает таймкод, то старт с 3:22 – до этого автор рассказывает то же, что и в тексте выше)

Плюсы и минусы

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

Правда, есть две серьезные проблемы, с которыми нужно разобраться:

  • Доступность;
  • Как эффективно кодировать весь процесс.

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

Кроме того, какой-то гениальный дизайнер создал генератор неоморфизма – и мы ему благодарны. Вот ссылка.

Доступность

Мы уже обсудили проблемы контрастности чуть выше: если ничего не напутать со значениями, то вы не потеряете свою карточку. Основная проблема с доступностью возникает, если мы решим использовать наши компоненты в качестве кнопок, а не карточек.

Конечно, можно сделать утопленную кнопку, развернув тени внутрь.

Пожалуйста, не надо.

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

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

Заключение

Стоил ли неоморфизм свеч? Нам кажется, что да! Даже если тренд умрет через месяц, представьте его с другой стороны: вы, как дизайнер, открыли что-то новое и теперь получаете удовольствие от новых знаний.

Так что экспериментируйте и пробуйте!

Читайте также:

52 инструмента для веб-дизайна, которые улучшат вашу работу в 2020 году

Читайте также:  Фриланс-платформа Fiverr создала нейросеть, которая делает 12 логотипов за минуту

Шпаргалки UI дизайнера: создание кнопок

О dark mode: так ли он полезен, как нам кажется?

Поделиться:

Про автора

Руслан Копылов

Автор «Сей-Хай»

comments powered by HyperComments

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: