Найти тему

Как создать идеальную тень в Figma | UI-дизайн

Оглавление

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

Автор: Ирина Воронина
Автор: Ирина Воронина

Есть такое мнение, и оно весьма распространено, что чем больше будет использоваться эффектов к объекту, тем лучше. Речь идет о тенях, обводке, градиенте и прочее.

На деле это выглядит не так!

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

Поэтому, перед тем как применить тень, стоит задать 2 вопроса:

  • Точно ли тень тут нужна?
  • Что будет если ее не применять?

Если ответ нет – значит тень не обоснована, и не требуется ее применение в данном дизайне. А если ответ да, читайте ниже инструкцию, как сделать тень идеальной.

Идеальная тень от кнопки.

Старайтесь избегать черной тени. Такая тень смотрится грязно и неестественно.

Автор: Воронина Ирина
Автор: Воронина Ирина

Ориентир выбора цвета тени – сам объект и окружающие его предметы.

В примере с кнопкой лучше сделать следующим образом. Тень увести в более темный оттенок самой кнопки и сдвинуть ее немного вниз по оси Y, увеличить размытие и уменьшить в размере.

Идеальная тень от карточки

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

Автор: Воронина Ирина
Автор: Воронина Ирина

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

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

Ошибка при создании тени.

Тень не следует делать тем же цветом, что и сама карточка.

Автор: Воронина Ирина
Автор: Воронина Ирина

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

Надеюсь данная статья была вам полезна.

Искренне Ваша, Ирина.

#дизайн #веб-дизайн #UI_IX Дизайн #UI #UX #идеальная тень #figma #тень в фигма #тень в дизайне #тень для сайта