Показатель отказов: от чего он зависит?

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

Копия сайта и необходимость ее создания

Несмотря на то, что сайт – это не вещь, его тоже можно потерять. Серьезные проблемы с интернет-порталом могут быть результатом:Посягательств со стороны злоумышленников. П...

Грамматические ошибки на сайте: накажут ли за них поисковики?

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

5 простых способов добавить свет и тень в дизайн сайта

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

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

БЫСТРОЕ ВВЕДЕНИЕ В АНАТОМИЮ СВЕТА И ТЕНИ

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

Но вы спросите: «Какое отношение это имеет к веб-дизайну?»

Если вы разрабатываете высококачественные и «ощутимые» на взгляд поверхности или веб-сайты, то свет и тень – ваши друзья. Также как и великие художники заставляли свои картины оживать, так и вы можете использовать свет, чтобы придавать своим дизайнам глубину и визуальную привлекательность. Приступим же.

1. ИСПОЛЬЗОВАНИЕ ИСТОЧНИКА СВЕТА

Самое важное в работе со светом –понимать откуда этот свет исходит. Источник света, скорее всего, сразу покажет стороны его попадания, а также стороны, на которые приходятся тени (хотя в веб-дизайне эти правила можно иногда нарушать). Если вы работаете в Photoshop, вы можете использовать эффект под название «global light» с той целью, чтобы все ваши световые эффекты были подчинены одному и тому же световому направлению.

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

Примеры с сети

Campaign Monitor использует пучок солнечных лучей для создания эффекта восходящего солнца на фоне.

Icebrrg использует свет для того, что «погрузить» свой сайт глубоко под воду.

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

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

2. ГРАДИЕНТЫ.

В реальном мире у очень немногих вещей однотонные и «плоские» тона. Свет и тень присутствуют везде. Аккуратное использование градиентов – великолепный способ придать изображению глубины и оживить его на экране.

Самое важное насчет градиентов – это не переусердствовать. Если вы используете Photoshop, не забывайте использовать стили слоев для своих градиентов. Это дает вам возможность редактировать их в любой момент. Кроме того, если вы решите изменить размер элемента, то градиент автоматически также поменяет свой размер.

Примеры в сети

Ресурс nclud’s – великолепный пример аккуратного и очень эффективного использования градиентов с целью создать впечатляющий и гармонирующий фон страницы.

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

3. ВЫДЕЛЕНИЯ (ПРИДАЧА БЛЕСКА)

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

Для того чтобы полностью оценить выделение, нам нужно несколько увеличить изображение. Хороший способ для добавления выделений  - это увеличить рабочий материал на 200% или даже больше, так как на 100% будет сложно четко видеть с чем вы работаете.

Примеры в сети

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

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

4. ОСНОВНЫЕ ТЕНИ

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

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

Примеры в сети

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

LinkedIn добавило очень легкую тень внизу боковой панели для создания иллюзии глубины.

Google, с возможно своей самой загруженной страницей в Интернете, также использует падающую тень.

5. БОЛЕЕ СЛОЖНЫЕ ТЕНИ

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

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

Примеры в сети

Emotions by Mike очень разумно использует тень (и свет) для того чтобы превратить обычную страницу в… пол.

Superkix использует тень для расположения кроссовок «поверх» сайта. Кроме того, тень изменяется при изменении размера страницы, что создает впечатления изменения расположения светового источника.

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

Источник