Вдохнуть жизнь в цифровой дизайн – непростая задача. А плоские поверхности всегда привлекают меньше внимания, чем те, которые имеют 3D-эффект. Но и эту проблему можно решить, если знать, как сделать ощущение глубины на плоских изображениях. Реалистичный дизайн вызывает у посетителей больший интерес, а эффект объёмности позволяет выделить определённые элементы дизайна, такие как заголовки и интерфейс.
Но давайте перейдём к главному и рассмотрим примеры дизайна сайтов, которые выглядят реалистично, без использования реалистично, без использования 3D.
Вот так можно создать эффект реальности на примере мультяшного веб-дизайна.
Интерфейсы и элементы, имеющие реальный вид делают дизайн более интерактивным и располагающим к действию. Это видно на двух примерах, приведённых ниже.
Расслаивание элементов и игра с прозрачностью также хороший способ создания глубины. Данные манипуляции отлично просматриваются на примерах ниже.
Эффект «обхвата вокруг» также хороший метод достижения нашей цели. Посмотрите на красную ленту и красную нить на примерах ниже, они расширяют реальное пространство страницы и создают иллюзию того, что она продолжается за их пределами. Это также хорошая возможность акцентировать внимание на определённых элементах сайта. Использовать ленты и нити можно для чего угодно: для дат, заголовков, логотипов и т.д.
Чтобы создать ощущение глубины, необходимо следовать нескольким простым правилам рисования: соблюдать углы, сохранять линию горизонта, следить за пропорциональностью объектов относительно горизонта.
Если разбить сетку макета, то можно мгновенно добиться глубины. Просто, элементы на странице перекрывают друг друга, и за счёт этого создаётся необходимый эффект.
Несмотря на то, что все элементы этого дизайна являются плоскими, лента сверху придаёт ему ощущение текстуры и глубины.
Вот ещё один пример «глубокого» дизайна, в котором используются плоские элементы и секции. Глубина достигается путём перекрытия элементами фона по всему периметру дизайна. Не используя технику послойного нанесения, им удаётся хорошо поставить акцент на контрасте.
Техника «вырезанных» фотографий, также часто используется в данном случае. Применение тени 3D качества повышает ощущение реалистичности, как видно ниже, используете ли вы реальные или плоские элементы.
По материалам speckyboy.com
Добавить комментарий