Корпоративный сайт кровельной компании для частных и коммерческих объектов: услуги, выполненные проекты и предварительный расчёт стоимости работ.
Роль
UX/UI-дизайнер
Направление
Корпоративный сайт
Пользователи
Частные клиенты и компании
Масштаб
61 экран
Пробел или Enter — остановить или воспроизвести видео.
Заказчику нужен был корпоративный сайт кровельной компании для частных и коммерческих объектов. Основная задача — помочь клиенту оценить предложение и обратиться за расчётом своего объекта.
Структуру строил вокруг вопросов перед заявкой: какие работы нужны, есть ли у компании похожий опыт и от чего зависит стоимость.
Вёл проект от брифа до сопровождения вёрстки: общался с заказчиком, анализировал конкурентов, проектировал структуру, сценарии, калькулятор и формы.
Подготовил мудборды, прототип, 33 десктопных макета и 28 адаптивов. Согласовывал решения с заказчиком на созвонах и проверял, что вёрстка сохраняет утверждённую структуру и иерархию.
Предусмотреть обращение для клиентов с разной готовностью: самостоятельную оценку по параметрам объекта и консультацию, если состав работ ещё не определён.
Объяснить границы предварительной стоимости и условия подготовки детальной сметы.
Пять этапов — от брифа до контроля вёрстки.
Сравнивал, как кровельные компании показывают услуги, подтверждают опыт и объясняют стоимость.
Проверял, как устроены услуги, по каким признакам можно найти похожий объект и что клиент узнаёт о цене до отправки контактов.
Ниже — четыре действующих сайта и наблюдения по ним.
Добавил фильтры проектов и связал фотографии с задачей, решением и параметрами объекта: по сопоставимым примерам клиенту проще оценить опыт подрядчика.
Разделил типовые расценки, предварительную оценку объекта и детальную смету — у каждого уровня свой способ работы со стоимостью.
У Мейджик Руф сравнил категории и параметры проектов, у ВАЯР — состав работ, географию, цену за м² и переход к расчёту.
У ФС-Групп рассмотрел подбор объектов и разделение стоимости материалов и работ. У КровельщикPRO — группы параметров и пояснение предварительного итога.
Мудборд помог согласовать с заказчиком характер сайта до разработки экранов: крупные фотографии, типографика и контрастные действия.
В макетах сделал акцент на фотографиях объектов. Тёмные панели держат контраст, жёлтый выделяет только расчёт и обращение.
Определил точки входа, связи между разделами и способы обращения с учётом готовности клиента.
Клиент с понятной задачей начинает с направления и переходит к конкретной услуге. Тот, кто сначала оценивает подрядчика, изучает выполненные объекты.
Связал маршруты переходами между услугой и примерами работ, чтобы знакомство можно было продолжить с любой из этих страниц.
В маршруте расчёта клиент задаёт параметры кровли и запрашивает детальную смету. Для консультации достаточно короткой формы — без калькулятора.
На прототипе согласовал содержание и приоритеты страниц до работы над оформлением.
Проработал первый экран, порядок смысловых блоков и места основных действий. Обсуждал с заказчиком, какая информация нужна клиенту перед обращением.
После согласования структуры перешёл к визуальному дизайну.
Путь клиента: от выбора услуги к оценке стоимости и заявке. Цены и объекты на экранах — демонстрационные.
На первом экране выделил два действия: рассчитать стоимость и вызвать специалиста. Ниже — услуги, понятная стоимость, преимущества и выполненные объекты.
Клиент не всегда знает название нужных работ. Поэтому сначала показал направления и связанные предложения, а подробности вынес на следующие уровни.
На странице направления собрал связанные услуги, на странице отдельной работы — состав предложения и подробности.
На обоих уровнях оставил примеры объектов и обращение: клиент может продолжить выбор, даже если попал сразу на внутреннюю страницу.
Сгруппировал расценки по категориям. Для каждой работы указал цену «от», единицу измерения и пояснение, чтобы ориентир бюджета читался вместе с объёмом и составом работ.
Для оценки конкретного объекта предусмотрел переход к расчёту или запросу сметы.
По фотографии трудно оценить условия и объём работ. Добавил фильтры по виду работ, типу объекта, материалу, цене и площади.
В карточках собрал задачу, решение и параметры — для сравнения примеров до открытия подробностей.
Связал фотографии «до и после» с исходной задачей, выполненными работами и параметрами объекта. Так страница раскрывает результат и способ его достижения.
Детали сгруппировал в раскрывающихся блоках, этапы — в последовательность. Рядом разместил связанные услуги и форму обращения по похожей задаче.
Отделил предварительную оценку от детальной сметы: окончательный состав работ зависит от состояния объекта.
Параметры сгруппировал по типу работ, высоте объекта, кровле, материалу и опциям; итог и запрос сметы — рядом.
У итога указал границы расчёта: только работы, без материалов, расходников и отделки.
Предусмотрел карту, поиск и список городов. На странице города собрал локальное предложение, услуги, стоимость и примеры объектов, сохранив общую навигацию сайта.
В короткой форме оставил имя, телефон и согласие на обработку данных — минимум для начала разговора со специалистом.
После отправки показал подтверждение получения заявки и следующий шаг: компания свяжется для уточнения задачи.
Дополнительные страницы и состояния: навигация, фильтры, формы, материалы о компании и служебные разделы. Десктопные макеты и адаптивы открываются полностью.
Токены, типографика и компоненты, из которых собраны все 61 экран.
Собрал UI-кит в Figma: цветовые токены, 68 текстовых стилей и компоненты с состояниями — кнопки, поля, фильтры, теги, пагинацию и карточки. Каждый элемент — один компонент: стиль, размер и состояние задаются его свойствами, текст и иконка — в макете.
Жёлтый закрепил только за расчётом и заявкой, тёмные панели — за формами и кнопками поверх фотографий. Поэтому главное действие узнаётся на любой странице, а карточки услуг, цен и проектов читаются одинаково во всех разделах.
Спроектировал корпоративный сайт кровельной компании с нуля — от исследования и структуры до интерфейсов и сопровождения разработки.
Выстроил пользовательский путь вокруг главных вопросов клиента: сколько стоят работы, что входит в стоимость и почему стоит доверять подрядчику. Сделал ключевую информацию доступной до обращения, чтобы человек мог принять более осознанное решение.
Структурировал услуги, стоимость и состав работ. Клиент получил возможность заранее разобраться в предложении без необходимости уточнять базовые условия у менеджера.
Объединил информацию об услугах и реализованных проектах в понятную систему. Это позволило подкрепить предложение компании конкретными примерами работ и снизить неопределённость перед заявкой.
