24 июня 2020
Сайт с нуля про дорогие дома из дерева
Для проекта «Русский Север» придумали общий концепт, подготовили контент, сделали прототип, отрисовали дизайн и собрали сайт на Тильде.
КАК ПРОДАВАТЬ ДОРОГОЙ ПРОДУКТ С САЙТА
Спойлер — никак :)
Компания Русский Север строит традиционные, но технологичные дома из дерева. Это сложный, очень комплексный и нереально красивый на выходе продукт.
Такой продукт никто не покупает на сайте, здесь даже промежуток от первого знакомства до первой оплаты может составлять пару лет, не говоря уже о срубе и подготовке деревьев, строительстве и отделке.
Главные цели сайта в таком случае таковы:
- заразить посетителя идеей постройки уникального дома;
- показать, как выглядит путь к воплощению мечты;
- убедить в том, что компания имеет все ресурсы для успешного воплощения любых идей.
Получается, что сайт должен продавать не сам дом, а идею строительства такого дома. Все уловили твист на «Начало» Кристофера Нолана? :)
СОБИРАЕМ ИНФОРМАЦИЮ
Чтобы выстроить верную логику повествования, нужно собрать и структурировать максимум информации о продукте, рынке, конкурентах и преимуществах.
Для этого у нас есть целый ряд инструментов:
Для этого у нас есть целый ряд инструментов:
- БрифФайл с вопросами, который заполняет клиент. Чаще всего за брифом следует еще и список доп.вопросов клиенту. На основе этой информации мы изучаем продукт и рынок, на котором он работает.
- Описание персонажейСоставляем 3-5 наиболее вероятных типажа заказчика. Это помогает лучше разобраться, для кого будет будущий сайт и понять, кому и какие свойства продукта важны больше, а какие меньше.
- Jobs to be DoneКраткие описания желаний каждого персонажа по чёткой структуре: Когда я ______ (контекст), я хочу ______ (мотивация), чтобы _____ (результат).
- Майндмэп проектаЭто карта всех свойств продукта. Она позволяет структурировать всю информацию о продукте, чтобы потом ничего не потерялось.
- УТП-канвасExcel-табличка с кратким итогом разных аспектов проудкта: проблемы клиентов, решения, нечестные преимущества, сегменты ЦА и в итоге — УТП продукта.
- ПрототипИтоговый результат сбора, изучения и структурирования информации, выраженный в визуальном чёрно-белом макете будущего сайта
ФОРМИРУЕМ ПРОТОТИП САЙТА
Процесс создания прототипа делим на несколько итераций:
1
Собрали каркас
Формируем основу будущего сайта, прописываем основное УТП и черновые тексты для каждого экрана сайта
2
Смотрим каркас с командой и клиентом
Сначала прототип смотрит и комментирует команда — чаще всего именно внутренние комментарии сильно усиляют итоговый прототип.
После внутренних правок презентуем результат клиенту и также собираем обратную связь в виде комментариев в Фигме.
После внутренних правок презентуем результат клиенту и также собираем обратную связь в виде комментариев в Фигме.
3
Придаём каркасу душу
Делаем правки по комментариям клиента, брейнштурмим заголовки, детализируем смысловые блоки и снова обсуждаем промежуточный результат с командой и клиентом.
4
Доводим до идеала все детали
Вычищаем и детализируем текстовый контент, описываем смысл графической части в каждом блоке сайта и презентуем финальный прототип клиенту.
В результате у нас получилась вот такая структура страницы.
В результате у нас получилась вот такая структура страницы.
Каждая рабочая итерация вместе с внутренним ревью длится около недели.
На обратную связь клиенту даём 2−3 дня. В самом конце работы закладываем 2−3 дня на буферные доработки — это когда клиент уже в конце решил что-то поменять, или мы сами что-то заметили и поправили.
В итоге финальная работа максимально устравает и нас, и клиента. Можно двигаться дальше, к дизайну :)
На обратную связь клиенту даём 2−3 дня. В самом конце работы закладываем 2−3 дня на буферные доработки — это когда клиент уже в конце решил что-то поменять, или мы сами что-то заметили и поправили.
В итоге финальная работа максимально устравает и нас, и клиента. Можно двигаться дальше, к дизайну :)
ПРИДУМЫВАЕМ ДИЗАЙН
Второй большой этап работы — дизайн сайта. Итерации этого этапа в целом похожи на итерации прототипа. Только на первой итерации вместо каркаса мы готовим несколько вариантов дизайна 1−2 экрана сайта, чтобы закрепить один вариант и на следующих итерациях дорабатывать его.
Ранее у проекта не было брендбука и вообще какой-либо айдентики вроде цветов, шрифтов и логотипа, поэтому нам предстояло совсем с нуля задать стилистику.
Мы собрали все предпочтения, вкусы и общие пожелания клиента к дизайну и… закрылись на неделю в тёмной комнате с макбуком, чтобы придумать премиальный дизайн для премиального продукта :)
Результатом первой итерации стало несколько версий дизайна:
Ранее у проекта не было брендбука и вообще какой-либо айдентики вроде цветов, шрифтов и логотипа, поэтому нам предстояло совсем с нуля задать стилистику.
Мы собрали все предпочтения, вкусы и общие пожелания клиента к дизайну и… закрылись на неделю в тёмной комнате с макбуком, чтобы придумать премиальный дизайн для премиального продукта :)
Результатом первой итерации стало несколько версий дизайна:
ПРОРАБАТЫВАЕМ СТИЛЬ
У нас получилось довольно много светлых версий и всего одна тёмная. И конечно же именно она стала выстрелом в центр мишени :)
Клиент выбрал тёмную версию и мы пошли докручивать стиль до идеала:
- отрисовали фирменные иконки;
- накинули модные золотые градиенты;
- собрали огромное описание этапов строительства в логически понятную инфографику;
- добавили интересных текстур дерева;
- потратили около 10 часов на выбор и утверждение фотографий разных пород дерева :)
- продумали все состояния кнопок, ховеры элементов и прописали сценарии анимаций.
ФИНАЛИМ ДИЗАЙН И ВЕРСТАЕМ НА ТИЛЬДЕ
После всех работ и обсуждений с клиентом у нас получился вот такой макет дизайна. Дополнительно мы отрисовали мобильную версию.
Чтобы не затягивать запуск сайта, для вёрстки выбрали Тильду. Это конструктор, который даёт максимум возможностей и сокращает уйму времени, если знать все секреты и фишки.
Стоит подчеркнуть — мы собираем сайты на Zero-блоках и в процессе дорабатываем функционал Тильды своими скриптами, кодом и стилями.
С таким подходом сайт на Тильде может выглядеть круче любого сайта на чистом коде, не говоря уже о типовых решениях на шаблонах Битрикса или Wordpress’a. А еще наши сайты постоянно мелькают в еженедельном дайджесте лучших сайтов на Tilda.
Чтобы не затягивать запуск сайта, для вёрстки выбрали Тильду. Это конструктор, который даёт максимум возможностей и сокращает уйму времени, если знать все секреты и фишки.
Стоит подчеркнуть — мы собираем сайты на Zero-блоках и в процессе дорабатываем функционал Тильды своими скриптами, кодом и стилями.
С таким подходом сайт на Тильде может выглядеть круче любого сайта на чистом коде, не говоря уже о типовых решениях на шаблонах Битрикса или Wordpress’a. А еще наши сайты постоянно мелькают в еженедельном дайджесте лучших сайтов на Tilda.
1
12 НЕДЕЛЬ
от брифа до свёрстанного сайта
2
12 ИТЕРАЦИЙ
по 4 итерации на прототип, дизайн и вёрстку
3
~30 СОЗВОНОВ
для обсуждений и согласований
- Паша СтарожукВедущий участник проектаПрорабатывать до идеала премиальный продукт — очень тяжелая и кропотливая работа. Вместе с этим заказчик оказался таким же перфекционистом, как и мы — сможете представить количество мельчайших деталей, которые мы проработали? Сейчас, спустя время мы и сами удивляемся количеству работ и весело вспоминаем, как породы деревьев подбирали :)
Да, в процессе мы немножечко утонули в согласованиях и правках, но результат определённо этого стоил — сайт получился красивым, необычным и уж точно идеально доносящим основные ценности компании и продукта до своих посетителей.
Хотите так же круто?
Оставьте номер или email. Обсудим детали и сделаем, как для себя!