Свет и тени в дизайне

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

Для начала нам важно разобраться с общими понятиями света и тени.

Свет

Свет — это источник освещения, подчеркивающий форму или текстуру объекта.

Естественный свет имитирует естественное солнечное освещение и создает реалистичные, четкие тени.

Искусственный свет имитирует искусственные источники света — лампы. Может быть как ярким, так и мягким, в зависимости от контекста.

Диффузный свет — рассеянный (нечеткий) свет, он не создает резких теней и обычно используется для достижения плоскости и мягкости.

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

Тени

Тени формируются, когда какой-либо объект становится препятствием на пути света, т. е. блокирует его. А еще тени создают визуальную глубину в интерфейсе.

Прямые тени падают напрямую от объекта. Появляются, если источник света находится сверху — над объектом.

Боковые тени проецируются сбоку от объекта. Они подчеркивают форму и текстуру.

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

Жесткие тени обладают четко очерченными границами. Для их создания необходим яркий источник света.

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

На самом деле у света и теней в дизайне есть большое количество функций, которые часто остаются незамеченными. Многие дизайнеры считают их побочными, делая акцент лишь на глубине и объеме. Сейчас мы с вами подробно разберем, как правильное использование света и тени делает дизайн более привлекательным и удобным для восприятия.

1. Высота или глубина

С помощью света и тени можно добавить визуальную глубину различным элементам на экране, сделать их реалистичнее и объемнее. Этот эффект помогает придать ощущение слоистости, подчеркнуть и разделить элементы, особенно если вы работаете над интерфейсом с плоским дизайном. Когда мы выдвигаем какой-либо объект на первый план, мы фокусируем внимание пользователей на нем в первую очередь.

2. Объем и форма

Проработанная светотень поможет пользователям лучше считать задуманные вами форму, объем и положение того или иного объекта  в пространстве. Такие предметы выглядят более выразительно и точно.

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

3. Стилизация и фактура

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

А здесь покажем вам парочку наших уроков по стилизации зависшего в пространстве куба. Простой, но очень эффектный элемент, который вы легко научитесь делать с помощью наших инструкций.

4. Выделение важных элементов

Свет и тени также служат средством визуального акцента: ярко выделенные элементы с заметными тенями привлекают внимание пользователя. Обычно такой акцент используют для важных элементов, например, для кнопок Call to Action или заголовков.

5. Динамика и взаимодействие

Вы можете сделать интерфейс более динамичным, если добавите тени к анимированным элементам, а еще это подчеркнет реальное взаимодействие пользователя с экраном.

6. Настроение и эмоции

Хотите передать ощущение спокойствия и умиротворения с экрана? Просто добавьте мягкие тени от рассеянного света. А если у вас дизайн более драматичный и напряженный, то используйте четкие и и жесткие тени.

7. Структурирование контента и улучшение читаемости

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

8. Единство и согласованность

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

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

1. Источник света

В веб-дизайне, как правило, используется 1 источник света: сбоку или сверху.

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

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

Далее вам важно помнить про удаленность элемента от света: чем дальше расположен элемент от источника света, тем темнее будут его тени.

2. Количество теней

Как вы уже увидели выше, свет напрямую влияет на направленность теней и на их цвет. Существует два типа теней, которые появляются при падении света на объект: отбрасываемая тень и тень фигуры.

Отбрасываемая тень

Отбрасываемая тень — появляется тогда, когда объект встает на пути у источника света, блокирует его.

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

Здесь важно пробовать и экспериментировать, так как некоторые оттенки могут дать вам грязные и визуально неприятные тени.

Тень фигуры

Тень фигуры — та сторона объекта, которая обращена от источника света.

Такая тень имеет нечеткие и мягкие края, отображает глубину и форму объекта.

Вид тени будет зависеть от интенсивности света и его направленности, от расстояния между объектом и поверхностью, на которую отбрасывается тень.

3. Объем или вдавленность

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

Еще отметим, что вдавленные элементы нарушают слоистость дизайна, они словно создают в нем дыры. Но это уместно в случае с формами ввода или чекбоксами.

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

Разграничение элементов по высоте

Работаете в стиле Material Design или хотите подчеркнуть составные части единого целого? Передайте высоту и слои объектов с помощью теней, так вы визуально еще и отделите элементы друг от друга.

Практически в каждом интерфейсе присутствуют свет и тени в том или ином объеме. Сейчас мы рассмотрим элементы дизайна, к которым тени применяются наиболее часто.

Кнопки

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

Карточки

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

Навигационные панели

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

Поля ввода и чекбоксы

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

Теперь вы знаете, что свет и тени — это не просто декоративные элементы, а мощные инструменты, с помощью которых можно повысить читаемость, выделить структуру, создать ощущение интерактивности, добавить иллюзии и даже вызвать конкретный эмоциональный отклик у пользователей.

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