Неоморфизм в фотошопе как сделать
Dribbble, платформа-портфолио, часто радует дизайнеров своими нововведениями и идеями. На этот раз шот (от англ. shot, снимок) пользователя alexplyuto набрал 3 000 лайков — и сразу же покорил дизайнерские сердца.
Новый тренд назвали “неоморфизмом” от смешения слов “новый” и “скевоморфизм”. Давайте разберем новый тренд и ответим на вопрос, стоит ли применять его при разработке своего сайта (спойлер: не стоит).
В чем особенность стиля?
Неоморфизм на первый взгляд выглядит достаточно знакомо. Минимализм форм, цветов, фона и элементов уже стал привычен для многих дизайнеров и разработчиков. Но стоит присмотреться к деталям, чтоб понять существенную и печальную разницу между новым стилем и уже знакомым минимализмом.
- Особенностью неоморфизма является “выпуклость”. Все карточки стали частью фона, в то время как в привычном нам дизайне элементы “парят” над фоном за счет контрастных теней;
- Отсутствие контраста. Даже минимального. Все кнопки и углы сделаны практически одним цветом, без выделения каких-либо элементов. Единственный контрастный элемент в неоморфизме — текст. Но, если вы обратите внимание, цветовая палитра сайта все равно остается единой;
- Плавные эффекты. Это касается кнопок и всех элементов, которые должны менять визуал при взаимодействии с ними. Неоморфизм предполагает максимально плавные переходы из одного состояния элемента в другое. Такое решение выглядит очень красиво, но крайне неудобно для пользователя.
- Достаточно просто в кодировании. Этот пункт касается всех, кого просят “добавить тень еще вот тут чуть-чуть”. Эффект выпуклой карточки с помощью кода добиться достаточно просто: левый верхний угол — это светлая тень (максимально при этом неконтрастная), а правый нижний угол — темная тень (с таким же показателем контраста).
В остальном новый стиль похож на еще более облегченный и незаметный минимализм. Нельзя не сказать про футуристичность, которая достигается за счет отсутствия привычных теней и парящих элементов.
Но, не будем думать только о красоте — перейдем к объективным причинам использовать или не использовать неоморфизм в своем дизайне.
Плюсы
Выделить плюсы неоморфизма, отклонившись от удобства пользователей — крайне сложная задача. Поэтому первая положительная характеристика нового стиля — визуальная свежесть. Тенденция к “дышащим” сайтам появилась в дизайне уже достаточно давно. Перегруженные интерфейсы пользователи обходят стороной. Неоморфизм гиперболизировал это течение — сайт буквально смотрится как сплошной серо-белый фон с выпуклыми элементами.
Второй плюс относится ко всем обладателям монохромных брендбуков. Использовать неоморфизм нужно только в белых и серых цветах. Даже черное оформление смотрится достаточно сложно и непонятно. При большом желании, можно отклониться от курса и добавить контраста в других цветовых сочетаниях — но об этом поговорим немного позже.
Дизайн, несмотря на тенденцию к пользовательскому удобству, это не только строгая инструкция. Отсюда вытекает следующая хорошая новость — использовать неоморфизм можно выборочно , отталкиваясь от своей концепции. Если вам понравился свежий дизайн, но объективность говорит, что целевой пользователь заблудится в вашем интерфейсе — берите только то, что будет хорошо вписываться в общий внешний вид вашей страницы. Например, можно оформить определенный вид карточек в неоморфизме — сделать их выпуклыми и с мягким контрастом.
Последний плюс, который нам удалось выявить — это возможность смешивать несколько современных стилей. Неоморфизм все-таки близок к обычном минимализму, поэтому взять идею с нового течения и смешать ее с тем, что уже привычно — хорошее решение. Например, возьмите за основу бестекстурность — это то, что объединяет неоморфизм с другими современными направлениями дизайна.
К сожалению, минусов неоморфизма оказалось больше, чем положительных моментов. И обусловлено это очень понятными вещами — основа UX и UI заключается как раз в понятном, интуитивном и удобном интерфейсе.
Во-первых, нельзя не сказать про людей со зрительными нарушениями . Это касается не только дальтоников и слабовидящих — разглядывать кнопки, на которые можно нажать или нельзя тяжело даже просто человеку, просидевшему пару часов перед экраном. Если ваш сайт требует дополнительного напряжения зрения, а после 10-минутного просмотра заставляет сделать зарядку для глаз — это плохой показатель.
Во-вторых, неоморфизм убивает интуитивность , с которой пользователь может понимать ваш сайт. Выпуклые формы, сглаженные углы и прочие элементы заставляют теряться в действиях. Нажал я кнопку или нет? Кнопка ли это вообще? Согласитесь, это плохие вопросы к CTA. Удобство пользователя должно быть на первом месте.
Неоморфизм диктует свои правила в пользовательском интерфейсе. Прежде чем вводить новую тенденцию в дизайн своего сайта, подумайте, готовы ли вы рисковать привычным сценарием пользовательского поведения. А еще лучше задать вопрос: “согласится ли пользователь следовать правилам моего дизайна?”. Ответ, скорее всего, будет нет. Высокая конкуренция понятных интерфейсов позволяет пользователю выбрать те правила, которые ему привычны.
Нельзя опустить вопрос цены. Несмотря на то, что неоморфизм не требует особенных навыков при разработке и кодировании, правильное попадание в новое течение, а также его воплощение в рамках вашего дизайна будет стоить дорого. В противном случае, вы получите сухой дизайн в монохромных цветах без футуристичных выпуклостей — дешево и сердито.
Основным же минусом неоморфизма является элементарное неудобство , о котором мы упоминали выше. Вряд ли пользователи захотят изучать ваш сайт вдоль и поперек, чтоб найти CTA, корзину или поля регистрации. Не заставляйте покупателя думать и совершать много лишних действий, особенно с помощью дизайна.
Вывод: использовать или нет?
Перехватывать тенденцию неоморфизма не стоит. Несмотря на свежесть, футуристичность и красивое исполнение, новый дизайн противоречит всем правилам UX и UI, лишает людей со зрительными проблемами возможности пользоваться вашим сайтом, а стоимость разработки такого дизайна совершенно не оправдывает результат.
Не заставляйте страдать своих пользователей из-за креатива — красивый визуал еще не является показателем удобства.
А вам понравился неоморфизм? Пишите в комментариях!
Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью? Задавайте вопросы и темы статей, которые Вас интересуют в блоге Convert Monster !
Что такое неомофризм? И Почему он стал новым трендом дизайна?
Неоморфизм в дизайне - это новый стиль, который вытекает из скевоморфизма.
Разница в них заключается в контрасте, а так же за основу принимаем – цветовую палитру. Этот подход к дизайну выделяется мягкой тенью, скруглёнными углами, размытостью. Парение в воздухе объектов в общем виде композиции, привлекает внимание пользователей.
Откуда возник же данный тренд? Бурное обсуждение началось с фото, которое за считанные минуты набрало более 3000 тысяч лайков на Dribbble. Затем похожие работы стали распространяться еще больше и в Instagram. Далее распространить данный стиль многим дизайнерам по соц.сетям не составило труда.
Джейсон Келли своим комментарием прозвал новый стиль скевоморфизма как «неоморфизм». Прозвали его так, от смешения слов “новый” и “скевоморфизм”. Суть этого тренда заключается в том, что внутренние и внешние тени объекта создают иллюзию более мягких форм и объект словно выпирает из фона. А не парит над ним как это было раньше.
Неоморфизм в дизайне
Неоморфизм в веб-дизайне выступает в роли интерфейса напоминающего десктоп приложение.
Отличие от обычных карточек
Чем же цепляет глаз неоморфизм? Ответ прост – карточками, которые создают объёмность и глубину. В обычных карточках присутствует однообразная тень, которая особо не выделяется и уже привычна нашему взгляду. Выделяется тем, что простые карточки приподняты над фоном, а неоморфизм карточки имеют свет и внутреннюю тень. За счёт этого создаётся иллюзия того, что карточка имеет световые стороны и не имеет границ.
Помните, что при создании сайта в стиле неоморфизм есть люди с ограниченными возможностями! Поэтому не всегда актуально использовать этот стиль.
Плюсы и минусы
Основные плюсы данного стиля:
- Современность
- Альтернативность
- Монохромность
К сожалению, минусов в неоморфизме больше, чем эффективных плюсов приведённых выше.
- Основные минусы данного стиля:
- Люди с ограниченными возможностями (зрительные проблемы)
- Отсутствие приоритетов у элементов
- Не хватает понятности для пользователей
- Основная задача как CTA (call to action) теряется
Доступность
Определенно, большого внимания требует уделить контрастности, даже без этого стиля у большинства дизайнеров с этим большие проблемы. Неоморфизм в руках новичка выглядит совсем иначе.
Неоморфизм — примеры в веб-дизайне
Разберем на примере несколько работ с неоморфизмом в дизайне.
Автор: ©Виктория Елисеева
Заметим, что в данной работе формы в виде нашего стиля, а вот кнопка конечно со стилем, но на неё применили цвет, который здесь смотрится дешево и не входит в общий концепт дизайна.
Автор: ©Max Ritz
В работе Макса всё выполнено красиво и аккуратно, опираясь на стиль. Единственное, для меня выделились кнопки в верхней панели меню: белая с розовым и без. Понятно, что дизайнер хотел привлечь наше внимание к этому, но я хотел бы попробовать сделать их стандартными. Это уже на вкус и цвет, также, важно понимать, какие цели преследует сайт.
Автор: ©Sell Pigeon
Третья работа меня просто вдохновила своей визуальной составляющей: кнопки, элементы с неоморфизмом выглядят как другая реальность. Обратите внимание на грамотные тени в объектах! Довольно качественная работа. Было бы интересно взглянуть на работу без яйца возле progressbara.
Неоморфизм в пользовательском интерфейсе
Сейчас множество мобильных приложений разрабатывают в этом стиле. Почему? Привлекает своей “новизной” и стильными карточками. И в мобильных приложениях неоморфизм в разы понятнее, чем в веб-дизайне сайтов.
Как совместить картинку и неоморфизм в дизайне
Используя фото в неоморфизме, необходимо чтобы подложка была большего размера, чем само фото.
Цвета в неоморфизме
В большинстве случаев используются цвета:
Используя ахроматические цвета (чёрный, белый и их оттенки), вы больше заострите внимание на самих элементах с фото, иконками. Из-за того, что будет выбран 1-2 цвета.
Градиенты придают яркость и сочность всему дизайну. Особенно в связке с тёмным фоном. Их можно использовать в различных местах, таких как фигуры, иконки, обводка или вовсе сам фон. Градиенты отлично воспринимаются как на больших экранах, так и на маленьких смартфонах. Новые градиенты отличаются своими сочетаниями и стилями, что придает огромный интерес пользователям.
Важной чертой неоморфизма в дизайне является оттенок белого и тёмного. Вы можете выбрать абсолютно любой фон, но главное, чтобы белые и темные тени были видны на нём. Поэтому его можно использовать в своих целях, задачах и готовых проектах.
Неоморфизм — примеры в пользовательском интерфейсе
Автор: Olya Stakhiv Автор: Ann Bogdanova Автор: Egor Gajduk
Неоморфизм в дизайне: как создать?
Как сделать неоморфизм в Фигме?
Всего за 5 шагов мы создадим неоморфизм в Figma!
Как создать неоморфизм в фотошопе (Adobe Photoshop)?
Как создать неоморфизм в CSS?
Сервис для генерации неоморфизма
Neumorphism.io — генерация неоморфных теней, форм и готовым css кодом. Поможет как разработчику, так и дизайнеру.
Данный сервис может настроить выбор цвета, тип выпуклости, размытие, направление света, изменение угла.
PSD шаблон неоморфизма
Как использовать шаблон?
- Открыть шаблон.
- Найти фигуру с нужным стилем.
- Нажать правой кнопкой по слою и выбрать “Скопировать стиль слоя”.
Как сохранить стили неоморфизма?
- На верхней панели открыть пункт “окно”, выбрать “стили”.
- Выбрать слой со стилем, который хотим сохранить.
- Сохраняем данный стиль в свои.
ЗАКЛЮЧЕНИЕ
Итак, в данной статье мы разобрали, что такое неоморфизм, какие его особенности в веб-дизайне и мобильных интерфейсах. Способы создания неоморфизма. А так же разработали готовый PSD шаблон.
Сейчас возникает самый главный вопрос, будет ли жить неоморфизм в дизайне? Однозначно – да! Но на 80% это будут всё же мобильные интерфейсы. В вебе мы будем встречать его реже из-за широких возможностей.
В мире дизайна, как и в IT технологиях, всё очень быстро меняется. Так что не стоит останавливаться на одном выбранном стиле. Сейчас он набирает популярность, и возможно через пару лет будет основным лидером, но может быть и иначе.
Развивайте в себе насмотренность, экспериментируйте и у вас всё получится! Мы надеемся, что наша статья помогла вам лучше узнать, что такое неоморфизм в дизайне и как его использовать в различных ситуациях :)
Неоморфизм — это новый тренд UI\UX дизайна в эстетике “реалистичного минимализма”, новый взгляд на скевоморфизм — отсюда и название, полученное им в декабре 2019 (пост UX Collective); с тех пор многие разработчики, дизайнеры и UX-специалисты заинтересовались его удобством, доступностью и практичностью.
Chris подшучивал над неоморфизмом, Adam Giebl создал онлайн-генератор.
Давайте окунемся в неоморфизм: мы опробуем неоморфные эффекты с помощью CSS и решим, как использовать неоморфизм в дизайне веб-интерфейсов.
Неоморфизм — это смесь минимализма и скевоморфизма.
Если представить скевоморфизм интерфейсов Apple стандартов 2007–2012 годов как первую крайность, а минимализм их современных UI — как вторую, то неоморфизм представляется “золотой серединой”.
Скриншот слева похож на журнал с яхты Стива Джобса. Справа — то же приложение, но сейчас: интерфейс почти не вдохновлен материалами, много “ощущения плоскости”
Неоморфные элементы словно прикреплены к фону, они вставляются или выдавливаются из него. Такие интерфейсы называют «мягкий UI», ведь основной эффект достигнут мягкими тенями:
Чтобы было легче сделать неоморфизм элементы — их можно сопоставить с элементами material design:
Карточка material design будто парит над фоном, в то время как неоморфный вариант словно был вытолкнут вверх: похоже на физический выступ. Также обратите внимание на фон и обрамление контента карточки.
Разберемся в различиях между material design и неоморфизмом на примере четырех CSS-свойств: box-shadow, background-color, border и border-radius.
Material design:
- box-shadow элементов только темная.
- background-color элемента может отличаться от элемента-родителя.
- border не имеет жестких правил. Его использование предотвращает появление “плывущих” за пределы экрана элементов.
- border-radius доступны значения от нуля до 50%.
Neumorphism:
- box-shadow не только оттеняет элемент, но и подсвечивает его с противоположной стороны.
- background-color элемента может лишь немного отличаться от элемента-родителя.
- border элемента максимально тонкий и незаметный, используется для улучшения контраста и увеличения резкости краев.
- border-radius больше нуля, так как скруглённые углы — определяющее свойство.
box-shadow
Многим поначалу кажется, что весь CSS неоморфизм — это применить box-shadow, но на практике нюансов куда больше.
- horizontal offset: положительное значение смещает тень вправо, а отрицательное значение смещает ее влево.
- vertical offset: положительное значение смещает тень вверх, а отрицательное значение смещает ее вниз.
- blur radius: длина тени, нет отрицательных значений.
- optional spread radius: это другое значение длины, где большие значения приводят к более крупным и длинным теням.
- color: определяет цвет тени так же, как мы это делаем для свойства цвета CSS.
- inset: значение по умолчанию (начальное) приводит к падающей тени. Использование значения inset перемещает тень внутри рамки элемента, что приводит к внутренней тени.
Так вот, особенность неоморфного UI — это несколько теней одновременно, ведь CSS позволяет указывать box-shadow через запятую, до четырех значений, по одному на сторону. Неоморфизм тени внешне должны быть плавными, со слабым контрастом:
Многие неоморфизм эффекты создаются с помощью двух теней, светлой и темной, для симуляции рефлекса (отсвета): так получается стильный «приподнятый» скевоморфный эффект с возможностью “передвигать источник освещения”, изменяя угол и смещение тени, то есть, для box-shadow необходимо задать по два положительных и отрицательных значения смещения для теней.
С помощью значения inset создаются дополнительные вариации оформления:
В отличии от внешних падающих теней, создающих эффект “выпирания” элемента из родительского фона, внутренняя тень — наоборот, создает иллюзию вдавленности элемента “вовнутрь” родителя.
background-color
Неоморфный дизайн подразумевает почти одинаковый фон у элемента и его родителя, исключая кнопки, беджи, остальные декоративные элементы. Реализовывает принцип как сплошной, так и градиентный фон: сплошной цвет фона, идентичный родительскому, создает видимость плоской поверхности, а вот прозрачные градиенты помогут визуально поверхность искривить.
Как и в случае со свойством box-shadow, свойству background-color задаются светлое и темное значения. Угол градиента соответствует расположению тени вокруг элемента. Активно используются два варианта градиентного фона:
- Выпуклая (convex) поверхность изгибается наружу, где светлая часть градиента совмещена со светлой частью тени, а темная, соответственно, — с темной.
- Вогнутая (concave) поверхность изгибается вовнутрь: светлая часть градиента — наоборот, совмещается с темной частью тени.
Неуморфный интерфейс характеризуется тем, что он, будучи окрашенным в цвет фона родителя (или похожий), сливается с фоном. В то же время цель многих кнопок, особенно для основного призыва к действию, — максимально выделиться, обычно с помощью яркого цветного фона. Такие кнопки принято визуально отделять от других элементов на странице. Ограничение цвета фона в неоморфизме лишает веб-дизайнеров этого удобства.
Если цвет фона кнопки совпадает с цветом фона родительского элемента, то теряется возможность выделить ее визуально.
Можно попробовать настроить цвет текста, добавить рамку под текстом, добавить значок или другие элементы, чтобы увеличить визуальный вес, чтобы выделить кнопку. В любом случае, сплошной цвет фона для неоморфной кнопки кажется лучшим вариантом, чем градиент.
Сплошной цветной фон можно сочетать со вставкой тени в активном состоянии для создания приятного эффекта «прижатия».
Несмотря на то, что сплошной цвет неоморфной кнопки привлекает больше внимания, чем градиентный фон, он все еще не превосходит то, как уникальный цвет выделяет кнопку среди других элементов на странице.
Хотя результаты выглядят уже несколько получше, но по-прежнему обычная кнопка обеспечивает лучший пользовательский опыт, у нее гораздо меньше ограничений, она более гибкая и простая в реализации, да и в целом лучше справляется со своей задачей.
Давайте рассмотрим еще несколько элементов HTML. Один из недостатков неоморфизма заключается в том, что его не следует применять к элементам с набором различных состояний, таким как формы ввода, элементы выбора, прогресс-бары и другие.
К таким изменениям состояниям относятся:
- Взаимодействия: наведение, активность, фокус, посещение.
- Валидация: ошибка, успех, предупреждение, отключение.
Правила UX и доступности требуют, чтобы элементы выглядели по-разному в каждом из их соответствующих состояний проверки и состояний взаимодействия с пользователем.
Сдерживающие факторы нейморфизма сильно ограничивают возможности настройки, необходимые для достижения различных стилей каждого возможного состояния. Вариации очень тонкие и, возможно, не смогут охватить все состояния.
Все выглядит как кнопка! Обратите внимание, как похожи форма ввода и кнопка, как индикатор выполнения похож на полосу прокрутки или очень широкий переключатель.
Трудно понять, какие элементы кликабельные!
Это самый простой пример, так что можно было бы добавить дополнительные элементы и стили, чтобы попытаться смягчить проблему.
Важно отметить, что неоморфные элементы также занимают больше места (внутреннее padding и внешнее margin ) из-за тени и закругленных углов. Неоморфный эффект не будет так хорошо смотреться на элементе небольшого размера просто потому, что эффекты визуально поглощают элемент.
Идеальным элементом для неоморфизма являются карточки или любые другие статичные элементы-контейнеры без состояний, основанных на взаимодействии с пользователем (например, hover , active и disabled ) или валидации (например, error , warning и success ).
В своей весьма критичной статье о неоморфизме Михал Малевич (который помог придумать термин “неоморфизм”) предлагает добавлять неоморфные эффекты к только картам, без этого выглядящим хорошо.
Единственный способ применить неоморфизм, это когда сама карта уже имеет правильную структуру, и вся экструзия не нужна для иерархии.
Неоморфизм работает хорошо, когда его можно удалить без каких-либо потерь для продукта.
Спасибо за внимание, похлопайте, если статья вам понравилась. В моем блоге есть еще много интересных статей про веб-разработку ;)
Неоморфизм — это новый тренд UI\UX дизайна в эстетике “реалистичного минимализма”, новый взгляд на скевоморфизм — отсюда и название, полученное им в декабре 2019 (пост UX Collective); с тех пор многие разработчики, дизайнеры и UX-специалисты заинтересовались его удобством, доступностью и практичностью.
Chris подшучивал над неоморфизмом, Adam Giebl создал онлайн-генератор.
Давайте окунемся в неоморфизм: мы опробуем неоморфные эффекты с помощью CSS и решим, как использовать неоморфизм в дизайне веб-интерфейсов.
Неоморфизм — это смесь минимализма и скевоморфизма.
Если представить скевоморфизм интерфейсов Apple стандартов 2007–2012 годов как первую крайность, а минимализм их современных UI — как вторую, то неоморфизм представляется “золотой серединой”.
Скриншот слева похож на журнал с яхты Стива Джобса. Справа — то же приложение, но сейчас: интерфейс почти не вдохновлен материалами, много “ощущения плоскости”
Неоморфные элементы словно прикреплены к фону, они вставляются или выдавливаются из него. Такие интерфейсы называют «мягкий UI», ведь основной эффект достигнут мягкими тенями:
Чтобы было легче сделать неоморфизм элементы — их можно сопоставить с элементами material design:
Карточка material design будто парит над фоном, в то время как неоморфный вариант словно был вытолкнут вверх: похоже на физический выступ. Также обратите внимание на фон и обрамление контента карточки.
Разберемся в различиях между material design и неоморфизмом на примере четырех CSS-свойств: box-shadow, background-color, border и border-radius.
Material design:
- box-shadow элементов только темная.
- background-color элемента может отличаться от элемента-родителя.
- border не имеет жестких правил. Его использование предотвращает появление “плывущих” за пределы экрана элементов.
- border-radius доступны значения от нуля до 50%.
Neumorphism:
- box-shadow не только оттеняет элемент, но и подсвечивает его с противоположной стороны.
- background-color элемента может лишь немного отличаться от элемента-родителя.
- border элемента максимально тонкий и незаметный, используется для улучшения контраста и увеличения резкости краев.
- border-radius больше нуля, так как скруглённые углы — определяющее свойство.
box-shadow
Многим поначалу кажется, что весь CSS неоморфизм — это применить box-shadow, но на практике нюансов куда больше.
- horizontal offset: положительное значение смещает тень вправо, а отрицательное значение смещает ее влево.
- vertical offset: положительное значение смещает тень вверх, а отрицательное значение смещает ее вниз.
- blur radius: длина тени, нет отрицательных значений.
- optional spread radius: это другое значение длины, где большие значения приводят к более крупным и длинным теням.
- color: определяет цвет тени так же, как мы это делаем для свойства цвета CSS.
- inset: значение по умолчанию (начальное) приводит к падающей тени. Использование значения inset перемещает тень внутри рамки элемента, что приводит к внутренней тени.
Так вот, особенность неоморфного UI — это несколько теней одновременно, ведь CSS позволяет указывать box-shadow через запятую, до четырех значений, по одному на сторону. Неоморфизм тени внешне должны быть плавными, со слабым контрастом:
Многие неоморфизм эффекты создаются с помощью двух теней, светлой и темной, для симуляции рефлекса (отсвета): так получается стильный «приподнятый» скевоморфный эффект с возможностью “передвигать источник освещения”, изменяя угол и смещение тени, то есть, для box-shadow необходимо задать по два положительных и отрицательных значения смещения для теней.
С помощью значения inset создаются дополнительные вариации оформления:
В отличии от внешних падающих теней, создающих эффект “выпирания” элемента из родительского фона, внутренняя тень — наоборот, создает иллюзию вдавленности элемента “вовнутрь” родителя.
background-color
Неоморфный дизайн подразумевает почти одинаковый фон у элемента и его родителя, исключая кнопки, беджи, остальные декоративные элементы. Реализовывает принцип как сплошной, так и градиентный фон: сплошной цвет фона, идентичный родительскому, создает видимость плоской поверхности, а вот прозрачные градиенты помогут визуально поверхность искривить.
Как и в случае со свойством box-shadow, свойству background-color задаются светлое и темное значения. Угол градиента соответствует расположению тени вокруг элемента. Активно используются два варианта градиентного фона:
- Выпуклая (convex) поверхность изгибается наружу, где светлая часть градиента совмещена со светлой частью тени, а темная, соответственно, — с темной.
- Вогнутая (concave) поверхность изгибается вовнутрь: светлая часть градиента — наоборот, совмещается с темной частью тени.
Неуморфный интерфейс характеризуется тем, что он, будучи окрашенным в цвет фона родителя (или похожий), сливается с фоном. В то же время цель многих кнопок, особенно для основного призыва к действию, — максимально выделиться, обычно с помощью яркого цветного фона. Такие кнопки принято визуально отделять от других элементов на странице. Ограничение цвета фона в неоморфизме лишает веб-дизайнеров этого удобства.
Если цвет фона кнопки совпадает с цветом фона родительского элемента, то теряется возможность выделить ее визуально.
Можно попробовать настроить цвет текста, добавить рамку под текстом, добавить значок или другие элементы, чтобы увеличить визуальный вес, чтобы выделить кнопку. В любом случае, сплошной цвет фона для неоморфной кнопки кажется лучшим вариантом, чем градиент.
Сплошной цветной фон можно сочетать со вставкой тени в активном состоянии для создания приятного эффекта «прижатия».
Несмотря на то, что сплошной цвет неоморфной кнопки привлекает больше внимания, чем градиентный фон, он все еще не превосходит то, как уникальный цвет выделяет кнопку среди других элементов на странице.
Хотя результаты выглядят уже несколько получше, но по-прежнему обычная кнопка обеспечивает лучший пользовательский опыт, у нее гораздо меньше ограничений, она более гибкая и простая в реализации, да и в целом лучше справляется со своей задачей.
Давайте рассмотрим еще несколько элементов HTML. Один из недостатков неоморфизма заключается в том, что его не следует применять к элементам с набором различных состояний, таким как формы ввода, элементы выбора, прогресс-бары и другие.
К таким изменениям состояниям относятся:
- Взаимодействия: наведение, активность, фокус, посещение.
- Валидация: ошибка, успех, предупреждение, отключение.
Правила UX и доступности требуют, чтобы элементы выглядели по-разному в каждом из их соответствующих состояний проверки и состояний взаимодействия с пользователем.
Сдерживающие факторы нейморфизма сильно ограничивают возможности настройки, необходимые для достижения различных стилей каждого возможного состояния. Вариации очень тонкие и, возможно, не смогут охватить все состояния.
Все выглядит как кнопка! Обратите внимание, как похожи форма ввода и кнопка, как индикатор выполнения похож на полосу прокрутки или очень широкий переключатель.
Трудно понять, какие элементы кликабельные!
Это самый простой пример, так что можно было бы добавить дополнительные элементы и стили, чтобы попытаться смягчить проблему.
Важно отметить, что неоморфные элементы также занимают больше места (внутреннее padding и внешнее margin ) из-за тени и закругленных углов. Неоморфный эффект не будет так хорошо смотреться на элементе небольшого размера просто потому, что эффекты визуально поглощают элемент.
Идеальным элементом для неоморфизма являются карточки или любые другие статичные элементы-контейнеры без состояний, основанных на взаимодействии с пользователем (например, hover , active и disabled ) или валидации (например, error , warning и success ).
В своей весьма критичной статье о неоморфизме Михал Малевич (который помог придумать термин “неоморфизм”) предлагает добавлять неоморфные эффекты к только картам, без этого выглядящим хорошо.
Единственный способ применить неоморфизм, это когда сама карта уже имеет правильную структуру, и вся экструзия не нужна для иерархии.
Неоморфизм работает хорошо, когда его можно удалить без каких-либо потерь для продукта.
Спасибо за внимание, похлопайте, если статья вам понравилась. В моем блоге есть еще много интересных статей про веб-разработку ;)
Как можно заметить, просматривая ресурсы вроде Dribbble и Behance, в начале 2020 года, все большую популярность набирает неоморфизм, реинкарнация скевоморфизма.
Причины данного явления просты, когда человек к чему-либо привыкает, ему хочется ощутить что-то новое. Плоский дизайн перестал впечатлять людей, и тот объем и глубина, которые может предоставить неоморфизм, насыщает желание новых ощущений.
Поэтому неоморфизм будет восприниматься пользователями, как что-то интересное и необычное.
Теперь скевоморфизм может не только исполнять роль проводника, знакомящего человека с электронными устройствами, посредством схожести дизайна приложения с дизайном привычных в жизни вещей, как было в начале 2000-х годов, а просто быть глотком “новизны”.
Для примера я беру элементы своих работ. Первый пример, выполнен в светлых тонах и это круглые кнопки как можно увидеть на рисунке ниже.
Я буду работать в Figma, но вы можете выполнить мои действия в любой другой программе.
2. Далее необходимо расположить элемент и сделать его одним цветом с фоном.
Теперь, выполним кнопку немного другим способом. И получим кнопку как на примере 2.
5. Теперь накладываем (Drop Shadow) две тени.
8. Объединяем наши 2 элемента и получаем готовую кнопку.
Поздравляю, вы прошли все пункты и теперь умеете работать с элементами используя неоморфизм.
Это мой первый опыт написания статьи. Пожалуйста не забывайте ставить ладошки, это очень мотивирует меня,если есть вопросы, пишите комментарии под статьей, с удовольствием отвечу.
Читайте также: