Глубина в веб-дизайне очень красивый эффект, который способен придать сайту одновременно и уникальность, и привлекательность, и даже порадовать не только владельца, но и создателя. Тем более что эффект глубины придает реалистичности, несмотря даже на тот факт, что посетитель хорошо себе представляет, что смотрит на частичку виртуального мира.
Но помимо красоты, глубина способна решить и более серьезные задачи в веб-дизайне. Например, акцентировать внимание пользователя на каких-то элементах, информации, организовать рабочее пространство и создать даже структуру видимого интерфейса на странице. Вспомните некоторые ваши проекты, странички в Интернете и сравните их между собой. Все ли они совершенно плоские по дизайну? Может, на них используется эффект глубины, поэтому они вам приглянулись, хотя сами вы еще тогда и не задумались почему именно, кроме того, что на них есть нужная информация?
Но что самое интересное для нас сегодня, так это то, что сделать такой эффект не сложно. Ниже мы расскажем о нескольких способах придания «глубины» дизайну сайта, которые может использовать и новичок в веб-дизайне и даже мастер. И это при том, что нынче в моде плоский дизайн.
Перспектива
Пожалуй, самый яркий и наглядный способ реализации эффекта глубины в веб-дизайне. Он одинаково хорошо служит и восприятию и привлекательности. Несмотря на моду, стиль, тренды – заказчикам хочется уникального дизайна, а частенько и «интересного». Именно в таком случае может пригодиться вариант перспективы, хотя использоваться она может только на главной странице, а не на всем сайте.
Примеров использования и комбинирования с плоским дизайном невероятно много. Основными правилами для создания перспективы является не только художественный «дух» веб-дизайнера, но и хорошее знание школьной программы – правильные одинаковые углы (с единым градусом), выравнивание по горизонтали, соблюдение пропорций и размеров и главное, правильное отображение изменение углов в зависимости от удаленности по горизонтали. Все это есть в учебниках по геометрии и изобразительному искусству.
На примерах ниже представлены яркие образцы использования перспективы в сочетании и с параллаксом (outdoorbergen.no), и меню сайта, и даже проект realclear.com.tw с вертикальным скроллингом, где каждая часть – отдельный интерьер, в котором можно покликать по некоторым предметам.
Оберточные ленты
В западных странах использование оберточных лент пользуется популярностью, ибо они могут без труда придать трехмерность и объём в дизайн сайта. На скриншоте странички сайта cabedge.com вы можете как раз увидеть небольшую ленту в центре с яблоком в качестве логотипа. Этот пример для нас особенно интересен, ибо и объемная кнопочка в углу есть, и плоский модный дизайн, и в целом множество разных интересных моментов.
Другие примеры показывают использование объемной ленты в качестве украшения для портфолио или верхней части страницы.
Веб-дизайнеры применяют ленты для заголовков, оформления даты в блогах, отличительных черт предметов. То есть тогда, когда необходимо выделить какой-то элемент интерфейса, побудить посетителя уделить этому внимание. Просто внимательнее посмотрите на свой дизайн сайта и задумайтесь, что самое главное во всей существующей у вас информации и какая её часть теряется на фоне остальной.
Интерфейс
Как правило, эффект глубины создается объёмными кнопочками (скриншот проекта cabedge.com выше), надписями с тенью, различными градиентами элементов. Но особенно важно, чтобы все это не перегружало страницу в визуальном плане, не бросалось в глаза и не раздражало своим обилием. Тогда появится возможность использовать глубину для акцентирования внимания на главном.
Посмотрите на пример проекта atibamobile.com ниже. Веб-дизайнер использовал и большие круглые кнопочки, которые оформлены в виде утопленных иконок, и градиентную заливку на прямоугольной кнопочке в скроллинге выше, придавая ей, тем самым, объем. В целом же, весь дизайн выполнен в современном и модном стиле.
Но есть негативная сторона реалистичного интерфейса. Веб-дизайнеры очень «перемудряют» с тенями и градиентами и вместо реалистичности и ненавязчивости получается аляповатость и безобразие. Если добиваться эффекта реальности, то тени должны быть совсем небольшие, совсем немного оттенять границу кнопки.
Наложение изображений
Иногда использование кнопок, лент и перспективы неприемлемо для веб-дизайнера. Тогда существует вариант использования наложения изображений с небольшим добавлением тени и в результате создаётся реалистичный эффект объемности. Такой дизайн вполне можно создать и адаптивным, и в сочетании с плоским стилем.
Для посетителя же он интересен и приятен тем, что после загрузки странички в браузере, глаза почти сразу смотрят на самое важное. Например, ленты новостей, событий, афиши и прочее. На примере проекта humcreative.com используется наложение изображений с тенью, если какой-то элемент активен. На другом примере – глубина создана с помощью фотографии и наложенного текстового блока. Но оба сайта имеют плоский и быстро загружаемый дизайн.
Теневые эффекты
Использование тени тоже не менее популярно в нынешнее время. Практически во всех примерах данного материала они использовались. Но если выше мы представили варианты утонченного применения теней, то теперь обратим внимание на более явный вариант их использования.
Создать реалистичность в данном случае тоже достаточно легко. Необходимо заготовить изображение (человечка или планшета) и в Photoshop для слоя с ним установить параметр наложения Тень. Затем придется поколдовать над установками тени, выбора угла тени, отдаленности от объекта и прочее. Таким образом, можно имитировать зеркальное отображение и отбрасывание тени. Только нужно помнить, что в случае проекта dascolabarbers.com тени от человечков и стульев должны совпадать, а не быть направлены в разные стороны (влево-вправо, хаотично).
Применение комбинированной тени в сочетании с плоским дизайном хорошо видно по проекту funrock.com. Тени у инфоблока видны только по центру и у картинки сторожевой вышки, которая накладывается на данный блок и фон страницы, создавая эффект глубины и объемности.
Выводы
Применение эффекта глубины в веб-дизайне не всегда используется для придания привлекательности сайта. Иногда тени или ленты попросту не вписываются в общий стиль. Так или иначе, но при нынешних тенденциях плоского дизайна, упрощенных элементов интерфейса, минимуме эффектов, перспектива или легкие тени, наложение друг на друга объектов не воспринимаются как нечто неподобающее и чужеродное. Если веб-дизайнер стремится к высокой скорости загрузки его сайта, то применение описанных нами выше вариантов не перегрузит страницу. Более того, позволит создавать адаптивный дизайн для доступности на мобильных устройствах.