Как сделать хорошие тени 🐝

Редкий современный дизайн обходится совсем без теней. Большинство популярных дизайн-систем типа Material или Fluent включают их в себя. Давайте посмотрим, что можно сделать, чтобы не облажаться при создании теней.

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

По умолчанию во всяких редакторах типа Figma, XD, Sketch при создании тень тупо чёрная (#000). Но тень такого цвета далеко не всегда выглядит хорошо. Добавьте тени лёгкий оттенок и она станет выглядеть намного органичнее — даже в реальной жизни тени не чёрные.

Не важно, используете вы Figma, Sketch, XD или ещё что-то, совет универсальный:

Даже если взять стандартную тень и всего лишь увеличить blur и соответственно ему задать смещение, вы получите тень, которая выглядит намного приятнее.

Пока меня профессионалы не закидали помидрами, хочу сделать ремарку: естественно, мягкие тени — не панацея, и они нужны далеко не везде. И большие значения blur подойдут тоже не во всякой ситуации. Даже в вышеупомянутых мной дизайн-системах есть тени для элементов с низким уровнем подъёма (elevation).

Ещё один лайфхак (*distant trigger sounds*) - использовать несколько теней, наслаивая их друг на друга. Настраивать их, конечно, тяжелее, чем одну, но человечество придумало всякие генераторы как раз для этой цели.

Тут, естественно, тоже есть ограничения. Хотя тень слева и выглядит красиво, она получается очень длинная и в интерфейс в приложение, например, её не впихнёшь. Максимум — на какой-нибудь лендинг. Выглядит она как-то так:

Понятное дело, что для интерфейсов лучше использовать что-то более подходящее. Например, если не ошибаюсь, в Material тени состоят из трёх слоёв, во Fluent — из двух.

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

Ну да не суть. Просто не используйте для теней большие значения. Максимум, что вы можете себе позволить — это 25%, больше обычно выглядит плохо. По крайней мере с тёмными тенями. О цветных поговорим чуть ниже.

Цветные тени — плюс-минус новое веяние дизайна, и использовать их можно далеко не везде. Отличаются они обычно более высокой opacity (в среднем раза в два выше) по сравнению с их тёмными собратьями и, очевидно, цветом.

Довольно важная вещь, и так далеко по списку. *разочарованно цыкает*

Хотя никто не отрицает, что тень может использоваться чисто для декоративного эффекта — выделить какой-то элемент, например, обычно с их помощью передают подъём элементов (elevation). Если хочется что-то почитать про это — можно глянуть в документацию Material, там всё подробно расписано и даже показано.

Но смысл простой: элементы на экране находятся в псевдо-3d пространстве и с помощью теней показывается изменение их высоты.

Вот и конец статьи. Время пришло. Я ни к чему не принуждаю. Просто дружеское напоминание, что донатить можно как через систему DTF, так и на Я.Деньги.

Если понравилось — не забывайте ставить классы и подписывайтесь на мой блог и мой канал в одноклассниках. Всем чмоки в этом чятике.

Если есть пожелания/предложения о чём написать или любой другой фидбек — прошу в комментарии!

#дизайн #ui #ux #тени

И ещё у меня есть пара каналов в телеге, вдруг вам будет интересно: