Добро пожаловать!
Это второй выпуск "Дизайн-кладовки"!
Сегодня у меня для вас есть тема, которой почему-то уделяется мало внимания в интернете и поэтому я решил ее осветить чуть больше.
Не секрет, что дизайн - это совокупность всех мелочей, мельчайших деталей, которые и создают нужное нам восприятие проекта. И сегодня мы поговорим о тенях - важнейшем элементе, о котором часто забывают, даже пренебрегают.
Узнаем, как правильно располагать и создавать тени в наших работах.
Тени
Для чего нужны тени в веб-дизайне?
По аналогии с реальным миром тени позволяют нам определять положение объекта в пространстве, понимать, что главное, а что нет. Выделять визуально одни и скрывать другие элементы.
Тень - это вспомогательный элемент для восприятия нашим сознанием всего того, что находится в вебе.
Тени нужно использовать очень аккуратно, к примеру, сейчас на экране довольно правильный и приятный способ использовать тени.
Но тот же самый блок, немного модифицированный и параметры тени которого будут немного изменены, может испортить восприятие макета.
Это я вижу каждый день в работах моих учеников на бесплатном курсе "Веб-дизайнер. Взрывной старт".
Теперь давайте поговорим о том, как избежать ошибок в использовании тени.
Не секрет, что двумя законодателями моды в веб-дизайне являются такие интернет-гиганты как Google и Apple.
У каждого из них есть свой собственный подход к дизайну. К примеру, у Google этот подход называется Material Design. У Apple несколько сложнее, потому что название они до сих пор не придумали. Ну, об этом мы поговорим немного позже.
Material Design
Давайте разберем, что такое Material Design. Думаю, что многие из вас уже знакомы с этим понятием. Это философия дизайна, которая была анонсирована Google на одной из последних конференций - некий стандарт, который компания приняла, чтобы оформлять свои продукты, как для мобильных, так и десктопных приложений. Это очень важно, так как Material Design стал неким стандартом и если вы его не придерживаетесь, то будут большие проблемы. Сегодня мы будем много говорить о том, как делать тени для Material Design.
Недавно гайдлайны, точнее, наборы правил Material Design, собрались на одном домене, material.io. Это замечательный сайт с множеством инструментов и подсказок для веб-дизайнеров, перейдя на который вы увидите вот такую красивую картину.
Здесь можно найти гайдлайны, примеры, статьи, различные варианты использования Material Design как среды. Очень рекомендую посмотреть.
Думаю, что с Material Design более-менее понятно. Что же говорить об Apple?
Apple
Названия, как я уже упоминал, у стиля Apple нет, кроме как "стиль Apple". Но я придумал более лаконичное название Apple Approach, по-английски это "подход", проще говоря, подход к дизайну от Apple. Думаю, что это разумно.
Чем характеризуется Apple Approach? Если вы присмотритесь к дизайну мобильных приложений Apple и к десктопным версиям сайтов Apple, вы увидите, что тени здесь практически не используются. Поэтому, если вы делаете дизайн под стиль Apple, пожалуйста, не используйте тени в таком большом количестве, в отличие от Material Design, который построен по принципу карточек, а карточки надо как-то выделять визуально, либо с помощью границ (border), либо теней.
Яркий пример, пожалуй, где используются тени в продуктах Apple, это тени, которые появляются вокруг всплывающих карточек, здесь они наиболее явные.
Но, пожалуй, больше нигде в большинстве своем тени в Apple не используются.
Где можно применять тени?
Я выделил несколько наиболее характерных вариантов использования теней. Я не говорю, что это истина в последней инстанции или полный список, но это позволит вам сориентироваться:
1. Вокруг карточек и элементов. Здесь карточка формирует в себе набор элементов, поэтому их как-то надо сгруппировать, визуально отделить от других. Конечно, в этом помогут тени.
2. Переход между секциями. Очень часто это используется, чтобы выделять визуально не только цветом, но и с помощью теней показать некую глубину макета. Здесь мы видим, например, шапку и дальше идет вторая секция, а между ними имеется хорошая весомая тень, с ее помощью мы выделяем один элемент над другим, показываем, что есть некая глубина и трехмерность нашего макета.
3. Для изображений. Изображения могут быть выделены с помощью теней, а могут и не выделяться. И по секрету скажу, что сейчас, как правило, изображения не выделяются с помощью теней. Это уже не модно. Но есть варианты и примеры, где такой подход оправдан, и его можно использовать.
Я не говорю, что тени нужно использовать всегда и везде, но если уж вы используете их в своем дизайне, то используйте правильно.
Формат теней
1. Короткая тень, самая простая. Перед вами сейчас набор элементов и каждый из них должен быть отделен. Напомню, что это подход, характерный для Material Design, то есть подход организации контента с помощью карточек и тени должны быть небольшими, короткими.
В гайдлайнах Material очень много сказано о том, как делать такую тень. Если вы присмотритесь, то тени видно хорошо: они играют роль границ в данном случае.
2. Тени с большим радиусом. Перед нами сейчас элемент, у которого большой радиус.
Такой радиус используют, чаще всего, для всплывающих окон, форм обратной связи, которые помещены не во всплывающее окно, а, к примеру, на карту. Такая тень показывает, что элемент очень далеко, точнее ближе к глазам, чем все остальное. Это очень важно правильно использовать в дизайне. Главное, как и в любом другом варианте - не переборщить.
3. Длинная тень (long shadow), очень популярная, примерно, год-два назад штука, и хотя сейчас она имеет меньший вес, но, тем не менее, довольно часто используется. Long shadow создается обычно для иконок и того, что вы видите в нижнем правом углу под шестеренкой - это и есть long shadow.
4. Тень, смещенная под углом. Часто используется для картинок. Может выглядеть по-разному:
Тень несколько смещена, показывает также, что элемент находится чуть-чуть выше над макетом, она может быть без радиуса размытия, может быть с небольшим радиусом размытия, как вы видите на втором варианте справа.
5. Цветные тени. Этот вариант используется довольно редко, но если это делать уместно, со знанием дела, то смотрится очень здорово.
Довольно часто в сильных дизайнах, особенно в проектах на Behance, Dribble или же в каких-то экспериментальных и концептуальных идеях можно встретить такой момент, когда иконка, как в данном случае, сердце, и под ней некое красное свечение. Смотрится эффектно, стильно, и если вы используете яркие цвета в своем дизайне, то легкую тень можно давать.
Причем, прошу обратить внимание, что все, что я сейчас показываю и показывал до этого практически идеальные примеры использования теней. Чуть-чуть больше, чуть-чуть меньше - будет уже не то. Поэтому рекомендую обратить на это внимание.
Я подготовил для вас специальный файл, в котором вы можете посмотреть пример использования теней. Отчасти они взяты из гайдлайнов Material, отчасти из моего опыта, как, например, последние два варианта.
Это все то, что я показывал чуть выше - вариант короткой тени, большой тени с большим радиусом, большой тени со смещением вниз, короткая тень со смещением вправо и тень со смещением и размытием под углом 45 градусов в правый нижний угол.
Вариантов немного и все, что вам нужно запомнить, когда вы используете тень в своем дизайне - она должна подходить под какую-то из этих пяти категорий. Если она у вас не помещается, вы изобретаете что-то новое в самом начале пути, то вы рискуете создать что-то плохое, потому как оно не будет соответствовать стандартам. Поэтому вначале, как говорил Стив Джобс, да и наш здравый разум, нужно копировать, следовать стандартам, только после этого у вас выработается ваш собственный стиль и понимание.
Надеюсь, этот материал был вам полезен, и вы почерпнули много нового для себя. Воспользуйтесь ссылкой для скачивания.
Это поможет вам глубже изучить то, что мы рассмотрели в этом коротком занятии.
Обязательно посмотрите программу курса "Веб-дизайнер. Взрывной старт", который я веду лично. Курс совершенно бесплатный и позволит вам погрузиться во все основы веб-дизайна, создать свои первые макеты, научиться работать на фрилансе и, самое главное, развить тему работы с тенями более глубоко.
Увидимся в новом выпуске "Дизайн-кладовки"