Частные дома из Тулы штурмуют Awwwards и CSSDesignAwards

Операция "бессонные ночи" или челендж для студии "как сделать крутой дизайн уровня AWWWARDS и не потерять клиентов бизнеса из среднего ценового сегмента.

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

Так сложилось, что мы разрабатываем сайты для строительных компании уже почти 10 лет. Мы любим строителей, строители любят нас. За эти годы мы набрали столько опыта в строительной сфере, что спокойно можем сделать не только сайт, но и построить дом, знаем чем отличается газоблок от кирпича и парамакса и какой нужно делать фундамент – ленточный или свайно-ростверковый. Единственная проблема – каждый раз возникает вопрос, как сделать что-то уникальное, если ты сделал уже десяток похожего?

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

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

Полный кейс на Behance с обновленным фирменным стилем компании можно ознакомиться по ссылке ниже:

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

ЦВЕТА

ШРИФТЫ

Акцентный шрифт RT Dewi Extended, а для основного мы выбрали Helvetica Nue

СЕТКА

В этом проекте нам повезло, так как заказчик был готов к экспериментам и мы в качестве сетки для сайта мы попробовали поработать с последовательностью Фибоначчи и получили сетку из 23 колонок.

ГЛАВНАЯ СТРАНИЦА

На главной странице строители часто просят разместить красивый рендер или фото со стройки, но мы все-таки сторонники того, что сайт должен продавать не стройку или рендер, а уют, мечту и свое идеальное пространство

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

Чтобы презентовать клиенту концепцию мы подготовили полноценную анимацию в Principle.

В результате мы утвердили концепт с первого раза (такое бывает не каждый раз, но это всегда маленькая победа для отдела дизайна).

СТРАНИЦА ПРОЕКТА

Самые посещаемые страницы на строительных сайтах, это Главная, Проекты, ну и, разумеется, Цены.

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

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

Такая последовательность блоков и наличие воздуха помогает быстро увидеть ответы на все самые частые вопросы клиента и частично снять нагрузку с менеджера.

СТРАНИЦА УСЛУГИ

Первый экран для каждой услуги – это фото выполненных работ работ по данной услуге, далее идет описание, стоимость, roadmap по шагам и ссылки на страницы с выполненными проектами.

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

Мы не адепты секты mobile-first, но считаем, что мобильная версия сайта должна обладать таким же количеством информации, функционала и, по возможности, анимации.

Здесь в качестве удобного и привычного back-end для клиенты мы решили оставить Битрикс, а для front-end использовать VUE.js, чтобы придать сайт большую скорость, сделать его SPA и дать простор для анимации и удобного манипулирования контентом.

Более детальное описание как это работает вы можете прочесть в нашей статье про техническую реализацию:

Одним из основных пожеланий от клиента это было защитить рендеры проектов домов, так чтобы это не создавало неудобства для клиента при просмотре и доставляла сложности пиратам (здесь всегда хочется добавить "Карибского моря"))).

Нам не хотелось, чтобы сайт превратился в филиал Shatterstock'а, поэтому решили найти какой-то обходной путь.

Решение далось нам трудно, но мы его все-таки нашли.

Все изображения рендеров и планировок имеют водные знаки с логотипом компании, которые накладываются на изображение автоматически при загрузке из админки, но это не все, что с ними происходит. Изображение автоматически высветляется.

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

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

Наша команда реализовала нетривиальный проект, от которого клиент был в восторге, при этом сайт получился не только стильный с точки зрения UI, но и помог увеличить конверсию на 22%.

Кроме того, проект также получил международные награды на AWWWARDS, CSSDesignAwards, CSSNectar, BESTCSS, WebGURU и др.