Разработка сайта для строительной компании Rumfot

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

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

Задачи проекта

- Брифинг клиента и созвон для постановки целей и задач

- Анализ конкурентов и целевой аудитории

- Формирование единого стратегического решения

- Разработка и прототипа сайта

- Проработка стилистики и UI/UX

- Отверстать и отпрограммировать…

Решение

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

Решили разрабатывать на React и тянуть, тянуть, тянуть…

Брифинг клиента и что мы анализировали

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

В зависимости от позиционирования различается и дизайн:

- У премиальных предложений: минимализм, спокойные пастельные или тёмные цвета

- У игроков из среднего сегмента: больше светлых тонов и ярких акцентов

Что ещё заметили:

- Успешные конкуренты активно используют видеообзоры строительства, так как это помогает «закрывать боли» клиентов: показывают процесс, качество, прозрачность

- Делают акцент на продукте (домах, банях) и ценах, но не все озвучивают стоимость, ведь каждый проект требует индивидуального расчёта

- Все подчёркивают преимущества, причём чаще не компании, а именно каркасного домостроения, потому что до сих пор у аудитории есть вопросы и стереотипы по этому типу строительства

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

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

В таком случае перед нами стояла задача показать компанию как тех, кто:

- Знает, как сделать жизнь за городом лучше

- Строит качественно - без задержек и с гарантией

- Обеспечивает безопасность и комфортное проживание

К чему пришли-то с этими анализами? 

У нас в руках та аудитория, которая активно пользуется интернетом с разных устройств. А так как React позволяет строить динамичные, быстрые и масштабируемые интерфейсы, да и мы с ним давно работаем, было принято решение остановиться именно на нём.

TypeScript использовали, чтобы ускорить разработку: он помогает ловить ошибки на этапе написания кода и делает его более читаемым и удобным для разработчика.

Ну а PHP - не могли забыть и про него. Он прост в работе и для нас является надёжным гарантом стабильной работы сайта в будущем.

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

В стилистике учли следующие особенности:

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

- Акцент именно на каркасных домах, чтобы подчеркнуть их преимущества и не перегружать внимание клиента самой компанией, свет мой, зеркальце, скажи…

- Демонстрация проектов, над которыми работает компания. Это помогает потенциальному клиенту понять, в каком стиле двигается бренд, и представить, как будет выглядеть его будущий дом, терраса или баня.

Адаптивируем…

Во время отрисовки дизайна и согласования макета у нас появлялись дополнительные адаптивы. Стандартно - до 1920 пикселей, а всё, что ниже, адаптировалось через пиксели и проценты.

Но однажды, в нашей мини стране появился монитор будет шире 1920 пикселей. И тут мы впервые увидели, как красиво может выглядеть сайт в дикой природе адаптива с огромными пустотами и растянутыми элементами.

Решение: переходим на vw (view width). В этом случае мы решили использовать единицу измерения vw, где 1vw = 1% от ширины экрана.

Теперь контент плавно растягивается по ширине экрана, сохраняя пропорции и читаемость - от 1920 пикселей и вплоть до миллиона.

Конечно, мы надеемся, что никто не будет смотреть сайт на телевизоре - немного не тот формат. Но если вдруг начнёт, не страшно: всё будет хорошо!