Кейс · сайт
Шесть страниц сайта компании, которая монтирует системы отопления в частных домах. У каждого выполненного объекта показаны площадь дома, срок работ и бюджет. Структуру и формулировки согласовали на вайрфреймах до дизайна.
Компания ведет отопление под ключ: техническое задание, смета и договор, монтаж с пусконаладкой, гарантийный сервис. На сайте эти четыре шага должны читаться как один маршрут, а не как перечень услуг.
Заказчик пускает монтажников в свой дом и отдает им котельную. Доверие приходится набирать до звонка, на странице.
Список услуг и список выполненных работ будут расти. Каждая новая позиция не должна требовать отдельного макета.
Собрать предстояло шесть страниц вместе с текстами блоков: главная, услуги, страница услуги, список проектов, страница проекта, контакты.
Шесть вайрфреймов с готовыми текстами прошли согласование до дизайна. Правки пришлись на порядок блоков и формулировки, а не на готовые макеты. Геометрия схем и макетов совпадает один в один — по ним видно, что менялась только подача.
Четыре шага — от технического задания до гарантийного обслуживания — идут карточками со смещением вниз. Сдвиг задает направление чтения, поэтому нумерация 01–04 работает как маршрут, а не как список из четырех пунктов.
Услуга и реализованный проект получили по одному собранному макету. Карточка услуги, карточка проекта, блок «Другие работы» и полоса заявки повторяются на всех страницах, поэтому новая позиция добавляется копированием, а не заказом дизайна.
В карточке каждого проекта стоят площадь дома, срок работ и бюджет — 150 м², 10 дней, 300 000 ₽. Эти же цифры повторяются на странице проекта, поэтому вопрос «сколько это стоит и как долго» закрывается до звонка.
Похожая задача? Напишите в Telegram, отвечу за пару часов.
Порядок блоков и формулировки согласовали на вайрфреймах, поэтому спорные места правились на схемах. Слева вайрфрейм, справа готовый макет.
На схеме проверяли последовательность: заголовок, обещание, три слова об услугах, две кнопки. В дизайне место под картинку занял рендер котельной, а фон стал желтым — порядок не поменялся.
Пятьсот проектов, десять лет работы и пять сотрудников стоят в одной строке с текстом «Кто мы», а не отдельным блоком ниже. В дизайне цифры получили желтый цвет и стали самым крупным элементом блока.
Четыре услуги стоят в ряд одинаковыми карточками: иконка, заголовок, перечень работ, кнопка. В дизайне под ряд ушла желтая подложка, и светлые карточки отделились от нее без единой рамки.
Четыре шага — от технического задания до гарантийного обслуживания — идут карточками со смещением вниз. Сдвиг задает направление чтения, поэтому нумерация 01–04 работает как маршрут, а не как список.
Отопление под ключ идет четырьмя шагами: техническое задание, смета и договор, монтаж с пусконаладкой, гарантийный сервис. Заказчик пускает монтажников в свой дом, поэтому доверие приходится набирать на странице, до звонка.
Четыре этапа работы, услуги и выполненные объекты собраны на одной странице. Заказчику не нужно достраивать картину по звонку.
Сайт держится на одном наборе повторяемых блоков, поэтому новая услуга или новый объект добавляются без нового дизайна.
Площадь, срок и бюджет стоят в каждой карточке проекта, а не в отдельном прайсе.
Полоса заявки и контакты повторяются на всех шести страницах, поэтому уйти в форму можно с любой точки сайта.
Семь блоков в порядке прокрутки: от первого экрана до подвала.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
Пять страниц целиком. Услуга и проект сделаны образцами: по ним компания добавляет новые позиции, не заказывая дизайн заново.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
Расскажите, что за услуги и как часто появляются новые. Посмотрю, какие блоки должны повторяться, чтобы сайт можно было дополнять самому.
