3D в веб-дизайне

Иллюстрация к статье «3D в веб-дизайне»

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

Насколько удачны эти подходы к дизайну, судить вам. Я же хочу поделиться несколькими ссылками из закладок на довольно интересные примеры сайтов в 3D-стиле.

Для наглядности и некоторой классификации, сгруппирую их по общим признакам.

3D элементы

Этот пункт скорее нужен для полноты описания, чем для реальных примеров. Сейчас с псевдо 3D элементами можно столкнуться практически на каждом сайте: вебдванольные объёмные кнопки, иконки, стикеры (плюс блики, тени и отражения) всё ещё популярны и нескоро уступят место другим модным тенденциям. Здесь я даже обойдусь без ссылок на примеры, почти:

Чистый стиль Web 2.0 на сайтe apple.com

Подобные сайты вы без труда можете найти в любой из CSS-галерей.

Но все эти блики, тени и наложения лишь слегка имитируют трёхмерность на страницах, не особо влияя на наше представление о плоском пространстве в мониторе.

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

Банка с напитком с сайта citrus-seo.com

Иллюстрация к статье «3D в веб-дизайне »

На мой взгляд, современно и довольно интересно.

3D навигация

Особенно смелые экспериментаторы уходят гораздо дальше простой псевдотрёхмерности и объёмных рисунков. Достаточно вспомнить про плагин wp-cumulus или посмотреть меню Neumont University:

Внешний вид плагина wp-cumulus

Навигационное меню на сайте neumont.edu

Простое анимированное масштабирование элементов и изменение z-index, добавляет интересные эффекты и оживляет сайт.

3D дизайн

К 3D дизайну я отнесу сайты с интересными приёмами в макетах, нестандартными направлениями плоскостей, иллюзии трёхмерности... В общем, смотрите сами:

Скриншот сайта basilgloo.com

Нестандартный дизайн acko.net

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

3D madness

На что только не способно человеческое воображение и умелое использование flash-технологий. Несколько примеров совершенно нетипичных сайтов, которые используют трёхмерность в своём дизайне. Совершенно разные и в чём-то даже безумно красивые.

3D трансформации сайта bestiario.org

Весёлые зверушки на дереве ecodazoo.com.

Город будущего от plazmalab.com

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

На этом все. Надеюсь, примеры выше вдохновят вас на создание чего-то подобного, красивого и нестандартного.

* * *

Сканер блогов:

Плюсы в сокращении с работы. Как подтолкнуть посетителя к регистрации? Обзор CMS Made Simple. Антикризисное письмо :)

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 3

  1. d-neez, 11.11.2008 в 18:21

    У тебя ТриДэ тоже нормальное такое в шапке. Ничуть не хуже, чем многие из этих сайтов.

    Ответить

  2. Где искать постоянных клиентов | Работаем дома с удовольствием, 03.12.2008 в 23:58

    [...] пишет об использовании 3D в веб-дизайне. Стас Малкин сетует по поводу причин, почему многие не [...]

    Ответить

  3. Несколько красивых эффектов на JavaScript | rotorweb.ru | Проблемы и решения в Web-дизайне, 09.04.2009 в 0:57

    [...] популярны различные 3D-эффекты, поэтому, фотогалерея Сarousel.us может прийтись по вкусу [...]

    Ответить

Есть что сказать?