Создаем эффект глубины: 5 дизайнерских приемов

эффект глубины

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

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

приемы дизайна

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

5 дизайнерских приемов

Реалистичные интерфейсы

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

кнопка

Создание реалистичных интерфейсов, однако, может сделать хуже. Мы все видели проекты, в которых применяется слишком много градиентов и отбрасываемых теней, и являются ничем иным, как хитрой уловкой. Ключ к созданию успешных элементов интерфейса с глубиной – представить, как они будут выглядеть в реальности – выглядит ли эта отбрасываемая тень на самом деле так, как будто она падает от кнопки (или другого элемента на ваш выбор), или просто смотрится как отбрасываемая тень, размещенная там без особых на то причин? Не просто делайте 3D-элементы интерфейса, делайте их реалистичными.

тень кнопка

Обертки и ленты

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

лента

Для нее имеется множество вариантов, от твердого загиба вверху до более закругленного и мягкого. Огромную выставку этих элементов можно найти на WebDesignFan: «Витрина 3D-элементов веб-дизайна».

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

лента футер

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

Перспектива

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

перспектива

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

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

перспектива

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

реализм перспектива

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

Разбиваем сетку

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

разбивание сетки

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

разбивание сетки

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

креатив

Игра с тенями

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

тени

Закругленная тень ниже элемента на странице дает ему возможность выглядеть так, как будто это 3D-пространство, неважно, является ли «как живой» плавающий элемент интерфейсом как на изображении выше или более плоской дизайнерской деталью.

реалистичные тени

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

тени

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

тени

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

Заключение

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

Автор: Kayla Knight

Источник: http://www.onextrapixel.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (17)

  1. soft-helper

    Да. Согласен. Статейка полезная. Обязательно возьму на заметку. Тем более, что подобные сайты я встречал.

  2. Тамара

    Супер!!!!
    Столько новинок! Я мечтаю о блоге

  3. ТАТЬЯНА

    красиво, мне понравилось, особенно где
    Marc’s Design предлагает реалистичные интерфейсы и эффект глубины, применяя некоторые из вышеприведенных способов, а также эффект перспективы для фокусирования внимания на основном элементе: компьютерном
    я сегодня заходила в гости на сайт и там такое видела,класно выглядит

  4. Алексей

    Отлично!! то что надо !!! мне понравилось, буду изучать глубже. Спасибо

  5. Игорь

    Полезная статья! Есть над чем поразмыслить!

  6. Владимир

    Классная статейка.Будем изучать.

  7. Сергей

    Спасибо за полезную статью. Есть над чем подумать.

  8. Александр

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

  9. naikom

    радуют такие статейки) впрочем, ничего нового не узнал)

    и… наконецто вы помеяли дизайн!!!

  10. Николай

    Спасибо! Познавательно!

  11. Эдуард

    Вроде просто, но красиво!
    Спасибо!

  12. Елена

    Спасибо за ваши курсы обучения, статьи полезные и интересные, обязательно попробую научиться этим приемам.

  13. Вадим

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

  14. Ирина

    Жаль, что ссылка на не русский сайт. С английским проблема. Все равно спасибо.

  15. Сергей

    Большое спасибо за статью.

  16. Евгений

    Благодарю!!)))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree