nimatica
Обсудить проект
2026

arvo

Сайт SaaS для контроля расходов и денежного потока

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

Задача

Финансовый софт покупают люди, которым уже что-то похожее продавали. Список функций ничего не говорит им о ежедневной работе.

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

Что сделали

Первый экран говорит, что делает продукт

Три слова во всю ширину, Plan Save Grow, под ними одно предложение про подключение банков, карт и почты со счетами. Остальной экран занимает интерфейс: два телефона с остатком и графиком по неделям.

Цифры, которые компания публикует о себе, стоят на тёмной полосе сразу ниже, поэтому утверждение и подтверждение попадают в один проход прокрутки.

Первый экран сайта SaaS: широкий заголовок, два телефона с остатком и графиком, вынесенные карточки с цифрами.

Продукт показан экранами

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

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

Обзорный блок: слева карточки прогноза, справа экран продукта на зелёной панели.

Отзывы тех, кто согласует расходы

Блок отзывов сделан слайдером, на экране один отзыв: портрет, несколько предложений, имя и должность. Финансовые директора говорят о том, что изменилось в их неделе, а не о впечатлениях от продукта.

По одному — это осознанно. Три цитаты рядом просматривают как узор, а одну читают.

Блок отзывов: портрет на тёмном фоне, цитата финансового директора и точки слайдера ниже.

Тарифы и заявка на демо на той же странице

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

Финальный блок предлагает разбор на своих данных вместо презентации. Вопросы по ценам вынесены на страницу тарифов, а кнопка регистрации остаётся в шапке на всём пути вниз.

Блок тарифов: три карточки с ценой за рабочее пространство, средняя выделена как популярная.

Техническая часть

Сайт — это купленный шаблон, перестроенный под бренд, причём перестройка идёт скриптом, а не руками. Вот как это устроено и что показывают замеры страницы.

Оценки Lighthouse

  • Скорость 98 на десктопе

    Lighthouse замеряет десктопную версию на 98 по скорости загрузки: самый крупный элемент появляется примерно за секунду.

  • Доступность 96 на обоих замерах

    Проверка доступности даёт 96 и на мобильном, и на десктопе: контраст, порядок заголовков, описания картинок, подписи кнопок и полей.

  • Сто баллов за SEO и практики

    Lighthouse ставит странице 100 по SEO и 100 за лучшие практики — и на мобильном, и на десктопе, ни один пункт в этих разделах не проваливается.

  • Сниппет помещается целиком

    Заголовок в 36 символов, описание в 119 — оба помещаются в выдаче целиком, а не обрываются посреди слова.

Безопасность

  • HTTPS без пути назад

    Незащищённый адрес переадресуется на HTTPS, сервер отдаёт заголовок HSTS с preload, и браузер перестаёт пробовать небезопасный вариант.

Приватность

  • За посетителем никто не следит

    На странице нет ни счётчика аналитики, ни менеджера тегов, ни рекламного пикселя.

Мобильная версия

  • Мобильная версия под палец

    На ширине 390 пикселей страница ровно 390 пикселей: вбок ничего не уезжает.

Процесс сборки

  • Ребрендинг собирается скриптом

    Исходник шаблона лежит нетронутым, а скрипт прогоняет по нему 107 правил замены и собирает брендированный сайт: названия, цвета, шрифты, изображения, ссылки.

Мобильная версия

Сайт SaaS на телефоне: заголовок, экраны продукта и карточки тарифов друг под другом.
Сайт SaaS на телефоне: заголовок, экраны продукта и карточки тарифов друг под другом.

Что получилось

  • Понятно, как работает продукт, ещё до регистрации.
  • Интерфейс, шаги подключения, тарифы и заявка на демо живут на одной странице.
  • У каждого утверждения на странице рядом стоит экран.

Сайт доводит посетителя от первого предложения до кнопки регистрации без звонка по дороге. Он показывает интерфейс, проходит первый день работы, называет цену и предлагает разбор на настоящих данных.

Нужен похожий проект?

Напишите, что должен делать ваш. Ответим в тот же день с оценкой и сроками.

Вопросы по проекту

  • Первый экран, который говорит, что делает продукт, интерфейс в том порядке, в каком его встречает пользователь, подтверждения от клиентов, тарифы с понятной разницей и один следующий шаг. Всё, что имеет смысл только после регистрации, остаётся в продукте.

  • Мы их рисуем. Экраны на этой странице сделаны под неё, в визуальном языке самого продукта, поэтому интерфейс можно показать до того, как всё в нём готово.

  • Да. Регистрация ведёт в продукт, а заявка на демо уходит туда, где уже работает отдел продаж: в CRM, на общую почту, в мессенджер.

  • Продуктовые сайты такого рода считаются от тарифа «Сайт компании», актуальная цифра стоит на странице цен. На неё влияют количество страниц, число экранов продукта, которые нужно нарисовать, и интеграции.

Похожие проекты