Начали с вайрфреймов
Структуру и порядок блоков всех восьми страниц согласовали на схемах до дизайна. Заказчик увидел логику страницы раньше, чем картинку, поэтому спорные места правили еще на вайрфреймах, до готовых макетов.
Кейс · сайт
Сайт бухгалтерской компании, где новая страница не требует нового дизайна
Сайт бухгалтерской компании из Владивостока целиком: структура, тексты, дизайн и сборка на WordPress. Главная из 14 блоков, шесть страниц услуг на одном шаблоне и страница контактов. Сайт запущен и работает.
8 страниц в макете
14 блоков главной
6 услуг на одном шаблоне
01 / ЗАДАЧА
С чем пришел клиент
Компания продает не товар, а доверие: клиент отдает наружу собственную отчетность. Сайт должен закрывать вопрос о надежности раньше, чем посетитель дойдет до формы.
Шесть услуг для человека без бухгалтерского опыта звучат одинаково: восстановление, сопровождение, ведение, консультирование, сдача отчетности, регистрация. Нужно, чтобы человек нашел свою услугу и не читал остальные пять.
Материал разнородный: шесть отраслей клиентов, пять специалистов в команде, благодарственные письма, партнеры, бизнес-кейсы. Все это должно уложиться на одну страницу без каши.
Одна услуга — один шаблон
Все шесть страниц идут одной последовательностью: заголовок с обещанием, блок «когда это нужно», состав услуги карточками, плашка про цену, аргументы, команда, письма, кейсы и форма. Каждую следующую страницу собирали из готовых блоков, без новой отрисовки и верстки.
Доверие распределили по прокрутке
Аргументы не собрали в один блок, а расставили по всей длине страницы: семь причин с нумерацией, команда с ролями, сравнение «малоопытный бухгалтер — профессионалы», письма клиентов, партнеры и разобранные бизнес-кейсы. На каждом экране есть повод остаться.
Три формы под разную готовность
Кнопка в первом экране — для тех, кто уже решил. Блок обратного звонка с фотографией специалиста — для сомневающихся: у заявки появляется лицо. Узкая красная плашка в середине страницы — для тех, кто дочитал до аргументов.
Похожая задача? Напишите в Telegram, отвечу за пару часов.
02 / ДО — ПОСЛЕ
Как схемы превращались в дизайн
Порядок блоков и тексты согласовали на вайрфреймах, поэтому в дизайне менялась подача, а не структура. Слева схема, справа готовый макет.
Первый экран не поменял порядок
На схеме проверяли порядок: заголовок, обещание, две кнопки и список услуг строкой. В дизайне серый прямоугольник стал фотографией под красной заливкой, а желтая диагональ подхватила цвет логотипа.
Карточка услуги получила иконку вместо картинки
В схеме у каждой из шести услуг стояла заглушка под изображение. В дизайне ее заменила линейная иконка: карточки стали легче, а название и описание вышли на первый план.
Семь причин стали нумерованной сеткой
Схема задала неравные карточки: первая причина крупнее остальных. В дизайне номера 01–07 набраны красным поверх обесцвеченных фотографий, поэтому блок читается как список, а не как галерея.
Сторону компании выделили карточкой
На схеме это два одинаковых списка на белом фоне. В дизайне левая колонка ушла в серую рамку, правая встала на белую карточку с тенью и красным заголовком — сторона компании читается первой.
03 / РЕЗУЛЬТАТ
Что дает такая сборка
Бухгалтерская компания продает не товар, а доверие: клиент отдает наружу собственную отчетность. Услуги для человека без бухгалтерского опыта звучат одинаково, поэтому он должен найти свою и не читать остальные.
Восемь страниц держатся на одном наборе блоков. Новую услугу добавляют из готовых элементов: рисовать и верстать страницу заново не нужно.
Десять услуг перечислены в первом экране под кнопками. Посетитель сразу видит, занимается компания его вопросом или нет.
Отдельный блок с шестью отраслями отвечает на вопрос «а мне это подходит». Клиент узнает себя раньше, чем начнет читать про услуги.
Аргументы, команда, письма и кейсы стоят рядом с услугами. Проверять компанию на стороне не нужно — все ответы на той же странице.
04 / МАКЕТЫ
Главная страница, блок за блоком
Четырнадцать блоков в порядке прокрутки: от первого экрана до подвала.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
05 / МАКЕТЫ
Внутренние страницы — шесть услуг и контакты
У всех шести услуг последовательность блоков одна и та же: меняются заголовок, состав услуги и аргументы. Контакты — короткая страница с адресом, телефонами и картой.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
06 / МАКЕТЫ
Вайрфреймы главной страницы
Тринадцать схем, на которых согласовали структуру и тексты. Блока с благодарственными письмами здесь еще нет — он появился в дизайне.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
07 / СОСТАВ РАБОТ
Что было сделано
- Клиент
- Капиталъ Информ
- Город
- Владивосток
- Год
- 2021
- Структура, тексты, дизайн, сборка на WordPress
- Николай Ковтун
- Реклама и трафик
- lead+
- Структура и вайрфреймы восьми страниц
- Тексты блоков, заголовки, подписи и надписи на кнопках
- Дизайн главной страницы: 14 блоков от первого экрана до подвала
- Шаблон страницы услуги и шесть страниц на его основе
- Страница контактов с адресом, телефонами и картой
- Формы заявки: обратный звонок с фотографией специалиста и короткая форма в плашке
- Сборка всех восьми страниц на WordPress
Нужен сайт для услуги, которую трудно показать?
Расскажите, что продаете и кому. Посмотрю, из каких блоков собрать страницу и чем закрыть вопрос о доверии.