Строительство домов

Премиальные частные дома

Читать описание работы Смотреть работу

#срок

дня

#стоимость

95 000

руб.

01 Задачи

В интервью с клиентом мы выяснили ключевые цели и потребности в создании сайта.

Клиент строит дома в Ектеринбурге и области. Имеет 13 лет опыта постройки промышленных объектов, большой парк спецтехники, профессиональные бригады. Ключевую ставку клиент делает на качество строительства и премиальный дизайн домов.

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

02 Исследование
аудитории

Справа – логотипы компаний, которые мы использовали при исследовании аудитории.

Мы использовали Росстат, ВЦИОМ, Левад-Центр и Romir для исследования потребностей населения и состояния рынка недвижимости. Также в оценке состояния рынка помогли различные публикации РБК-Недвижимость.

TRUD.com помог вычислить средний уровень дохода аудитории, которая интересна нашему клиенту. При помощи парсера TargetHunter мы изучили аудиторию конкурентов клиента во ВКонтакте. Дополнили картину исследованиями Яндекс.Wordstat.

03 Цифры
значат!

Зачем так много исследований? Потому что цифры значат!

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

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

Текст и прототипирование

Зная все необходимое об аудитории, мы написали текст
и упаковали структуру сайта в интерактивный прототип.
Прототип создан на базе Axure и экспортирован в html. Клиент осмотрел
прототип, пощелкал по интерактивным кнопкам, дал несколько правок.
Со второго раунда правок клиент принял
прототип и структуру лендинга.

04 Moodboard
для точности

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

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

05 Выбор
концепции

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

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

06 Отрисовка
дизайна
всего сайта

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

Получилась страница с понятными и лаконичными смыслами. Дизайн не стремится к «бессмысленному украшательству»: он дополняет и акцентирует месседжи, которые аудитории важно прочесть.

07 Программирование
и верстка

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

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

После верстки программист посадил лендинг на CMS: систему управления сайтом. Теперь клиент в случае необходимости может внести правки в текст или заменить изображение через админ-панель без привлечения специалистов.

08 Анимация

По просьбе клиента мы специально для него нарисовали анимированный прелоадер – индикатор загрузки сайта. Прелоадер развлекает пользователя во время загрузки сайта и помогает снизить показатель отказов.

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