Как мы делали сайт про заборы

Сергей Асанов Сергей Асанов

Сайт: om-zabor.ru

om-zabor.ru

К нам обратился клиент производящий металлические заборы по собственному проекту. Идея новая, конструкция уникальная и реальных заборов установлено всего несколько штук. Фотографий почти нет, но есть эскизы.

ом-забор

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

Ом-забор

Мы решили нарисовать их максимально правдоподобно в условиях реальной обстановки. Но заборы могут быть разных типов и разных цветов. Выпишем все возможные варианты.

Ом-забор

Отрисуем все эти заборы и потом будем просто переключать, давая посетителю посмотреть любое сочетание. Этот функционал мы решили реализовать с помощью панели со всплывающими переключателями. Невозможные для выбора варианты будем показывать пользователю перечёркнутыми.

ОМ-забор

Самый выгодный вид забора — вид спереди. Именно так хозяева и гости загородного дома будут видеть забор. Решили «переключать» центральную часть заборов, а края иллюстрации стилизовать под набросок и «тянуть» его на широких мониторах. 3D-иллюстратор взялся за дело и через короткое время выдал первый эскиз.

ом-забор

Бревенчатый сруб не совсем то, что нам нужно. Дом должен быть не «золотым дворцом», но и не слишком дешёвым. Сначала разберёмся с забором. Хочется передать металлический блеск, но он не должен быть слишком зеркальным. С одной стороны хочется показать забор максимально крупно и во всех деталях. С другой, посетитель должен увидеть цельную картину с домом и окружением. Забор получается неплохо. Можно переходить к цельной картине.

06

Второй вариант наброска уже гораздо лучше. Но дом всё равно не подходит. 

06

Подбор дома шёл не просто. После того, как мы отмели десяток вариантов, наконец остановились на подходящем.

Ом-забор

3D-иллюстратор приступил к реализации сцены.

Ом-забор

Получалось не очень реалистично и мы сначала не могли понять почему. Потом разобрались. Деревья из другого региона, совсем не похожие на растительность ленинградской области. И освещение было какое-то экваториальное. Решили отталкиваться от того, что хотим показать приятный августовский вечер. Очень кстати пришёлся Калькулятор высоты солнца. Оказалось, что в нужное время солнце в Питере находится на высоте не более 25° вместо изначальных 40-45°. Кстати, зимой оно вообще не поднимается выше 6°.

Калькулятор высоты солнца

Сцена с домом

Отлично. Дом получился. 

ом-забор

Теперь нужно подготовить ~80 штук заборов всех типов модификаций и цветов. Цвета должны соответствовать цветам из каталога RAL. При этом при разном освещении сцены и на разных мониторах, заборы смотрелись абсолютно по-разному. После недельной подгонки и компромиссов всё-таки удалось получить результат, который всех устроил.

ом-забор

То что сайт про заборы мы напишем крупно прямо в заголовке. А ниже подчеркнём основные детали и преимущества. К модному тонкому шрифту Roboto дорисуем такие же тонкие иконки.

ом-забор

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

Ом-забор

Переходим к вёрстке. Самое сложный вопрос, что делать с картинкой на разных мониторах. На разрешениях от 1024 до 1600 будем масштабировать центральную картинку. А на больших разрешениях по краям добавим тайлы, которые будем повторять по оси x.

ом-забор

У забора есть модификация с подсветкой. Клиент был удовлетворён «дневным» результатом, поэтому мы решили попробовать сделать ночной вид. Скорее для эффектности. 3D-иллюстратору поставили задачу, где в конструкции забора будут располагаться элементы подсветки. И он принялся за работу.

ом-забор ночью

Получилось весьма неплохо. Кнопка в правом верхнем углу сайта позволяет переключаться между Днём и Ночью.

Ом-забор ночью

Сайт: om-zabor.ru

Ждём ваших заказов на создание сайтов :)