Январь 15, 2016

Как мы разрабатываем дизайн сайта

От первого экрана

и до футера

Всем доброго дня! Сегодня поговорим и наглядно покажем, как мы в Zolle создаем дизайн сайта. Покажем на примере кейса для компании «Изба», нашего заказчика, строящего красивые и крепкие деревянные дома.

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

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

Подробнее об этом — в статье «Продающий дизайн: миф или реальность?»

Начинаем работу с первого экрана

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

Первый экран должен показывать людям преимущества от жизни в деревянном доме. А также преимущества от сотрудничества с компанией «Изба».

Все функциональные блоки на главной странице подчинены именно этим целям: убедить нашу аудиторию и вызвать у неё доверие. Доверие обоснованное – «Изба» строит действительно качественные дома (с компаниями, у которых плох продукт, мы не сотрудничаем принципиально).

Приступим к рассмотрению.

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

Мы изучили целевую аудиторию компании «Изба» (основной сегмент – молодые семьи, часто с детьми). И выбрали те эмоции и те выгоды, которые аудитория хочет получить от покупки дома.

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

Очень важную роль играет первая форма – призыв к действию, которую мы разместили на экране. Нажав на кнопку-призыв, клиент может отправить специалистам «Избы» архитектурный проект и получить в ответ подробную стоимость строительства в подарок.

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

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

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

Для удобства пользователей в правом верхнем углу есть как возможность позвонить самостоятельно, так и заказать звонок.

Есть ли жизнь после первого экрана?

Второй функциональный блок сугубо утилитарен. Он демонстрирует товар, что называется, в лоб. Короткий заголовок поясняет, что именно в нем представлено (дома, которые строит «Изба» для всех клиентов, в том числе может построить и для того, кто просматривает сайт впервые). В карточках проектов дана вся важная информация.

Подробнее об этом — в статье «Как конкретика в текстах помогает продажам»

Тот, кто только-только начал искать дом, сможет оценить проекты «Избы» визуально, понять, нравятся они ему, или нет. Тот, кто уже немного разбирается в вопросе и ищет себе лучшую строительную компанию, получит самые важные сведения (цена-площадь-сроки). И, при желании, прямо со второго функционального блока может перейти на отдельную страницу-каталог, где представлены все проекты.

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

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

А аудитория у нас, напомним, семейная. С семейными ценностями.

Подробнее об этом — в статье «Целевая аудитория. Как найти к ней ключ»

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

Дизайн сайта: без видео никуда!

Это замечательно. Но как обстоят дела с практикой? Как строят дома по проектам, как они выглядят, каково в них живется и все ли с ними в порядке?

Ответы на эти вопросы дает блок «Отзывы». Здесь размещаются и будут размещаться отзывы реальных клиентов компании «Изба», воспользовавшихся её услугами.

Прямо на главной странице, нажав на каждое из изображений отзыва, можно посмотреть ролик с отзывом клиента. В нем он рассказывает о том, как для него построили дом, что понравилось (а может, и не понравилось) в сотрудничестве с «Избой», что нравится в новом доме. Если потенциальному клиенту понравился отзыв, и он «загорелся» жить в таком же доме – у него всегда есть возможность посмотреть проект в подробностях и заказать его у «Избы».

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

Задача блока с новостями – снять у клиентов страх того, что, может быть, раньше у «Избы» все хорошо шло, а сейчас строят через пень-колоду и компания на ладан дышат. Страх неопределенности.

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

И «Новости со стройплощадок» — как раз наглядное свидетельство того, что «Изба» жива и развивается. Каждая новость со строительства обязательно сопровождается фото- и видеосъемкой (нередко с указанием даты и времени съемки). В каждой новости подробно показывают, насколько качественно работают в «Избе», — аккуратно, красиво, без ошибок.

При этом, здесь даются новости с нескольких стройплощадок, не с одной. Что также помогает убедить клиента в хорошем положении дел в «Избе».

А справа посетитель сайта всегда может узнать о текущих акциях компании.

И, конечно, контент-маркетинг

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

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

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

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

Последний функциональный блок с главной страницы помогает окончательно закрепить вызванное доверие. Обращение руководителя компании – это прямой диалог с читателем, рассказ, о том, кто будет строить и как. А также демонстрация «лицом», «натурой» человека, который несет ответственность и гарантирует результат. Не мог бы гарантировать – не стал бы оставлять обращение на странице.

Футер – блок чисто функциональный, созданный для удобства пользователя. Здесь клиент может ознакомиться с картой сайта без возврата на самый верх, к шапке. Может подписаться на рассылку статей (и стать частью e-mail маркетинговой кампании) или перейти на странички «Избы» в социальных сетях и на Youtube.

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

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

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

Если у Вас остались какие-то вопросы — задавайте в комментариях, я на них обязательно отвечу!

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

Вадим Клюшкин,специалист отдела дизайна