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

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

Идея

Логотип компании напомнил нам о знакомой многим с детства «змейке», её части можно было вращать друг относительно друга.

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

Реализация

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

На странице категории плиткой из кубиков представлен каталог брендов.
Каждый куб в развороте выглядит так:

Кнопка «посмотреть» также объемна и имеет грани, так что при наведении мыши видно вращение одного объемного элемента на одной из граней другого объемного элемента.

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

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

В разделе «Контакты» логотип в центре странице составляют фотографии магазина. Всю правую часть занимает интерактивная карта.

Техника

Эффект реалистичности при повороте куба достигается не только «искажаем» стороны в перспективе, но и накладыванием на «дальнюю» сторону куба затемнение.

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

Свернутое меню ведет себя точно также как и весь сайт — клик по иконке отворачивает другую грань, содержащую пункты меню.

Посмотреть и потрогать сайт можно по адресу studiyaplitki.ru

Перейти на сайт