Шаблонов: 22,049     Фрилансеров: 2,647     Веб-студий: 199
Статьи Новости Реклама на сайте Форум
Помогаем продавать
и покупать готовый дизайн
Каталог шаблонов Каталог продавцов Продающие страницы Подписка на новые шаблоны

Ощущение глубины в веб-дизайне

19 марта 2013     Комментарии
Ощущение глубины в веб-дизайне

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

Но давайте перейдём к главному и рассмотрим примеры дизайна сайтов, которые выглядят реалистично, без использования реалистично, без использования 3D.

Вот так можно создать эффект реальности на примере мультяшного веб-дизайна.

 

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

 

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

 

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

 

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

 

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

 

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

 

Вот ещё один пример «глубокого» дизайна, в котором используются плоские элементы и секции. Глубина достигается путём перекрытия элементами фона по всему периметру дизайна. Не используя технику послойного нанесения, им удаётся хорошо поставить акцент на контрасте.

 

Техника «вырезанных» фотографий, также часто используется в данном случае. Применение тени 3D качества повышает ощущение реалистичности, как видно ниже, используете ли вы реальные или плоские элементы.

 

По материалам speckyboy.com

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

Комментариев пока нет. Вы будете первым!

Как продать дизайн?

Наши и другие рекомендации по разработке дизайна и дальнейшей публикации на сайте
Продаём фирменный стиль. Основные аспекты. Хочу продать логотип. Как это сделать? Как продать дизайн сайта
 
Место сдаётся
1$ за 1000 показов
20$ в неделю
1000x90
Advertising


Вход в кабинет