Семь раз отмерь, один раз отрежь или Как сделать крутой продающий сайт

Пошаговый план работы над сайтом на примере реального проекта.

Анастасия Ершова
Маркетолог, копирайтер и project. Отвечаю за смыслы, позиционирование и тексты на сайтах, курирую верстку и дизайн.

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

Прототип так же важен для сайта, как каркас для здания, как скелет и мышцы для тела человека.
Прототип так же важен для сайта, как каркас для здания, как скелет и мышцы для тела человека.

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

<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fvostrovdom.ru%2F&postId=220173" rel="nofollow noreferrer noopener" target="_blank">Сайт компании «ВостровДом»</a>. Дизайнер — Лена Полякова. В статье рассказываю по шагам, как мы работали над сайтом.
Сайт компании «ВостровДом». Дизайнер — Лена Полякова. В статье рассказываю по шагам, как мы работали над сайтом.

Шаг первый: глубинное интервью

Сначала я просматриваю информацию о компании, которая есть у клиента, серфю в интернете, бегло смотрю конкурентов и набрасываю список вопросов. 2-3 часа беседуем с владельцем компании и ключевыми сотрудниками: обсуждаем целевую аудиторию, преимущества компании, ее особенности и т.д. Я составляю карту смыслов, чтобы структурировать информацию. Это помогает увидеть главное, выбрать правильные акценты и в итоге создать понятный, структурированный сайт.

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

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

Например, прошу у владельца компании рассказать о каждом-каждом шаге в строительстве. Он, конечно, обобщает и пропускает половину. Тогда я спрашиваю предметно:

— А скважину делаете, если нет водопровода?

— Делаем. Определяем место бурения по итогу геологоразведки, сдаем воду на анализы, по результатам подбираем и устанавливаем фильтр для очистки воды.

Ну круто же? Мои родители переехали в загородный дом 5 лет назад, каждый год собираются сдать воду из скважины на анализ, и все никак не соберутся. А тут строители подумали за клиентов обо всем. Эта маленькая деталь показывает заботу и уровень сервиса. И, может быть, так делает каждая вторая компания, но никто об этом не пишет. Добавляю информацию в прототип.

Шаг второй: анализ конкурентов

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

<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1QVxW_17bEoC3a99J4rew8VjOzRI9mIBRnv2mMP7BNSc%2Fedit%3Fusp%3Dsharing&postId=220173" rel="nofollow noreferrer noopener" target="_blank">Сравнительный анализ</a> помогает отстроиться от конкурентов и сделать сайт, который не утонет в общей массе
Сравнительный анализ помогает отстроиться от конкурентов и сделать сайт, который не утонет в общей массе
<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2F1ZpcfIAPsTntpIczKKrnrB5OFf9D87k6V9LRp86K9Gpk%2Fedit%3Fusp%3Dsharing&postId=220173" rel="nofollow noreferrer noopener" target="_blank">В презентации</a> фишки, интересные идеи и ошибки конкурентов. Скрины с сайтов + комментарии.
В презентации фишки, интересные идеи и ошибки конкурентов. Скрины с сайтов + комментарии.

Иногда клиенты дополнительно заказывают обзвон конкурентов: я или мой помощник обзваниваем компании, смотрим, как они продают и делаем выводы. В нише загородных домов частая ошибка менеджеров — закрытие на невнятный следующий шаг: «Пришлите мне фото дома, который вы хотите построить» или «Приезжайте в офис, как надумаете». Крутые менеджеры САМИ пишут клиенту в мессенджер и напоминают, чтобы он сбросил фото. Если закрывают на встречу, то сразу договариваются о времени — делают все, чтобы не упустить заявку и закрыть человека на следующее касание. Возможно, для кого-то это очевидные вещи, но мой заказчик отметил, что было очень полезно.

Шаг третий: позиционирование

Позиционирование разрабатывается на основе анализа и интервью. От владельца компании я узнала, что бренд семейный. Владелец компании — строитель в четвертом поколении, его сын — архитектор с опытом более 15 лет. Решили использовать это как конкурентное преимущество. Семейная история выделяет компанию из сотни обезличенных брендов. На сайт добавили статью с историей семьи. Рассказали, как владелец компании еще при СССР восстанавливал разрушенный после землетрясения город в Армении, а его родители занимали руководящие должности при строительстве знаменитого Академгородка.

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

Референс для дизайнера.
Референс для дизайнера.

Шаг четвертый: прототип сайта

Структура, тексты и визуальное решение

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

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

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

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

Управление вниманием

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

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

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

Схемы привлекают внимание читателей. Если информацию можно лаконично упаковать в схему — обязательно сделайте это.
Схемы привлекают внимание читателей. Если информацию можно лаконично упаковать в схему — обязательно сделайте это.

Формы захвата

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

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

Шаг пятый: дизайн и верстка

Я сотрудничаю с несколькими дизайнерами и верстальщиками разного уровня. Для «ВостровДом» выбрали вариант с дизайном на Тильде, чтобы заказчик мог поменять информацию на сайте без привлечения отдельного специалиста. Результат ниже.

<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fvostrovdom.ru%2F&postId=220173" rel="nofollow noreferrer noopener" target="_blank">Сайт компании «ВостровДом»</a>. Дизайнер — Лена Полякова.
Сайт компании «ВостровДом». Дизайнер — Лена Полякова.

Если прототип — это «каркас» и «фундамент» сайта, то дизайн — «внешняя отделка». Дизайн формирует у человека впечатление о компании за первые 6-10 секунд. Посредственный дизайн с обилием элементов может быть хорошим решением для продажи массовых, дешевых товаров. Если вы продаете дорогие услуги и продукты — упакуйте их соответствующе.

Дешевый сайт с просторов интернета
Дешевый сайт с просторов интернета
 Работа дизайнера из моей команды (Вадима Чернышева). 
 Работа дизайнера из моей команды (Вадима Чернышева). 

Готовый сайт уже передан заказчику, маркетолог кампании запускает первые рекламные креативы.

Семь раз отмерь, один раз отрежь или Как сделать крутой продающий сайт

P.s. Делаю сайты и Landing Page «под ключ» вместе с командой: от предпроектного исследования и прототипа до дизайна и верстки.

Разрабатываю контент-стратегии и концепты, пишу статьи и кейсы.

Учу копирайтеров писать дорого и делать прототипы сайтов.

inst @redactor_ot_bloga

WhatsApp +7 999 584 46 48

11
Начать дискуссию