24 июня 2020
Сайт с нуля про дорогие дома из дерева
Для проекта «Русский Север» придумали общий концепт, подготовили контент, сделали прототип, отрисовали дизайн и собрали сайт на Тильде.
КАК ПРОДАВАТЬ ДОРОГОЙ ПРОДУКТ С САЙТА

Спойлер — никак :)

Компания Русский Север строит традиционные, но технологичные дома из дерева. Это сложный, очень комплексный и нереально красивый на выходе продукт.

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

Главные цели сайта в таком случае таковы:

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

Получается, что сайт должен продавать не сам дом, а идею строительства такого дома. Все уловили твист на «Начало» Кристофера Нолана? :)
СОБИРАЕМ ИНФОРМАЦИЮ
Чтобы выстроить верную логику повествования, нужно собрать и структурировать максимум информации о продукте, рынке, конкурентах и преимуществах.

Для этого у нас есть целый ряд инструментов:
Бриф
Файл с вопросами, который заполняет клиент. Чаще всего за брифом следует еще и список доп.вопросов клиенту. На основе этой информации мы изучаем продукт и рынок, на котором он работает.
Описание персонажей
Составляем 3-5 наиболее вероятных типажа заказчика. Это помогает лучше разобраться, для кого будет будущий сайт и понять, кому и какие свойства продукта важны больше, а какие меньше.
Jobs to be Done
Краткие описания желаний каждого персонажа по чёткой структуре: Когда я ______ (контекст), я хочу ______ (мотивация), чтобы _____ (результат).
Майндмэп проекта
Это карта всех свойств продукта. Она позволяет структурировать всю информацию о продукте, чтобы потом ничего не потерялось.
УТП-канвас
Excel-табличка с кратким итогом разных аспектов проудкта: проблемы клиентов, решения, нечестные преимущества, сегменты ЦА и в итоге — УТП продукта.
Прототип
Итоговый результат сбора, изучения и структурирования информации, выраженный в визуальном чёрно-белом макете будущего сайта
ФОРМИРУЕМ ПРОТОТИП САЙТА
Процесс создания прототипа делим на несколько итераций:
1
Собрали каркас
Формируем основу будущего сайта, прописываем основное УТП и черновые тексты для каждого экрана сайта
2
Смотрим каркас с командой и клиентом
Сначала прототип смотрит и комментирует команда — чаще всего именно внутренние комментарии сильно усиляют итоговый прототип.

После внутренних правок презентуем результат клиенту и также собираем обратную связь в виде комментариев в Фигме.
3
Придаём каркасу душу
Делаем правки по комментариям клиента, брейнштурмим заголовки, детализируем смысловые блоки и снова обсуждаем промежуточный результат с командой и клиентом.
4
Доводим до идеала все детали
Вычищаем и детализируем текстовый контент, описываем смысл графической части в каждом блоке сайта и презентуем финальный прототип клиенту.

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

На обратную связь клиенту даём 2−3 дня. В самом конце работы закладываем 2−3 дня на буферные доработки — это когда клиент уже в конце решил что-то поменять, или мы сами что-то заметили и поправили.

В итоге финальная работа максимально устравает и нас, и клиента. Можно двигаться дальше, к дизайну :)
ПРИДУМЫВАЕМ ДИЗАЙН
Второй большой этап работы — дизайн сайта. Итерации этого этапа в целом похожи на итерации прототипа. Только на первой итерации вместо каркаса мы готовим несколько вариантов дизайна 1−2 экрана сайта, чтобы закрепить один вариант и на следующих итерациях дорабатывать его.

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

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

Результатом первой итерации стало несколько версий дизайна:
ПРОРАБАТЫВАЕМ СТИЛЬ

У нас получилось довольно много светлых версий и всего одна тёмная. И конечно же именно она стала выстрелом в центр мишени :)

Клиент выбрал тёмную версию и мы пошли докручивать стиль до идеала:

  • отрисовали фирменные иконки;
  • накинули модные золотые градиенты;
  • собрали огромное описание этапов строительства в логически понятную инфографику;
  • добавили интересных текстур дерева;
  • потратили около 10 часов на выбор и утверждение фотографий разных пород дерева :)
  • продумали все состояния кнопок, ховеры элементов и прописали сценарии анимаций.
ФИНАЛИМ ДИЗАЙН И ВЕРСТАЕМ НА ТИЛЬДЕ
После всех работ и обсуждений с клиентом у нас получился вот такой макет дизайна. Дополнительно мы отрисовали мобильную версию.

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

Стоит подчеркнуть — мы собираем сайты на Zero-блоках и в процессе дорабатываем функционал Тильды своими скриптами, кодом и стилями.

С таким подходом сайт на Тильде может выглядеть круче любого сайта на чистом коде, не говоря уже о типовых решениях на шаблонах Битрикса или Wordpress’a. А еще наши сайты постоянно мелькают в еженедельном дайджесте лучших сайтов на Tilda.
1
12 НЕДЕЛЬ
от брифа до свёрстанного сайта
2
12 ИТЕРАЦИЙ
по 4 итерации на прототип, дизайн и вёрстку
3
~30 СОЗВОНОВ
для обсуждений и согласований
Паша Старожук
Ведущий участник проекта
Прорабатывать до идеала премиальный продукт — очень тяжелая и кропотливая работа. Вместе с этим заказчик оказался таким же перфекционистом, как и мы — сможете представить количество мельчайших деталей, которые мы проработали? Сейчас, спустя время мы и сами удивляемся количеству работ и весело вспоминаем, как породы деревьев подбирали :)

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

Хотите так же круто?

Оставьте номер или email. Обсудим детали и сделаем, как для себя!