Дизайн сайта для платёжного сервиса TabPay

О клиенте и задаче

TabPay — платёжный сервис для сайтов, Telegram‑ботов и приложений. Магазин подключается к нему и принимает оплату картами российских банков и по СБП, а деньги получает на свой счёт без ИП и ООО. Клиенты сервиса — небольшие онлайн‑проекты: VPN‑сервисы, боты с подписками, цифровые товары, курсы.

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

Договорились идти по частям. Сначала главная страница и платёжная страница со всеми состояниями, в светлой и тёмной теме, плюс мобильная версия и UI‑кит, на котором потом соберём личный кабинет. В этой статье — про первую часть.

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

Первый экран: один заголовок, одна кнопка

Заголовок — «Приём платежей и выплаты для вашего бизнеса». Без «экосистем» и «решений нового поколения». Слово «платежей» обведено линией, как ручкой на бумаге, — это единственный декоративный приём на экране, и он держит взгляд на главном слове. Подзаголовок сразу отвечает на то, о чём спрашивают первым делом: без ИП и ООО, подключение за один день, карты и СБП.

Кнопка на экране одна — «Подключиться». На лендингах любят ставить рядом вторую, контурную: «Узнать больше», «Смотреть тарифы». Она делит внимание пополам и почти никогда не нужна: тот, кто хочет узнать больше, просто листает дальше. Переключатель тёмной темы и языка стоит в шапке рядом с кнопкой входа — так сайт сразу ощущается как продукт, а не как буклет.

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

Визуальный язык: один синий, один шрифт и стрелка

Отправная точка — логотип: синий квадрат со скруглёнными углами и двойной стрелкой вправо. Стрелка — это и есть платёж: деньги ушли и пришли. Из неё вырос весь сайт: тот же синий #2853FF на кнопках, ссылках и акцентах в заголовках, та же стрелка в иллюстрациях и кнопках «дальше». Второго акцентного цвета нет совсем. Остальное — почти чёрный текст и серо‑голубой фон. Чем меньше цветов, тем заметнее главный, и тем проще потом держать стиль без дизайнера.

Шрифт один — Manrope, в трёх начертаниях. Жирный с плотными межбуквенными расстояниями для заголовков, полужирный для подзаголовков и кнопок, средний для текста. Он хорошо держит кириллицу и цифры, а цифр на платёжном сайте много: суммы, комиссии, курс, таймеры.

Иконки нарисовали свои — 31 штука, 24×24, одна толщина линии на весь сайт. Цвет иконки привязан к переменной, поэтому в тёмной теме они перекрашиваются сами. Никаких эмодзи вместо иконок и никаких случайных наборов с разных сайтов: именно разнобой в мелочах делает сайт дешёвым на вид.

Блок продуктов: сетка и своя графика

У TabPay шесть возможностей, и они не равнозначны. Главное — карты и СБП, ради этого подключаются. Поэтому вместо шести одинаковых карточек с иконками сделали сетку с разными размерами: карточка «Карты и СБП» в два раза шире и синяя, остальные — компактнее и светлые. Взгляд сам идёт от большого к малому.

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

Отдельная тёмная карточка — API и платёжные ссылки. Вместо текста «у нас удобный API» в ней показан настоящий запрос на создание платежа. Разработчик за три секунды видит, что интеграция простая, и никакие слова ему не нужны

Платёжная страница: 12 состояний и ничего лишнего

Платёжная страница — самое дорогое место во всём сервисе. До неё покупатель уже выбрал товар и решил платить; здесь он либо доводит дело до конца, либо закрывает вкладку. Каждый лишний элемент на этом экране — повод засомневаться.

Поэтому на ней только четыре вещи. Кому платим: название магазина, за что платёж и таймер — чтобы не было сомнений, что страница настоящая. Сколько: сумма — самый крупный текст на экране, номер платежа рядом и копируется в один клик. Как: СБП или карта, популярный способ помечен. И внизу — знак PCI DSS с одной фразой простыми словами: карту не храним и магазину не передаём.

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

СБП показывает QR‑код сразу, без промежуточного экрана, и код всегда лежит на белой подложке — камера банка читает его одинаково в обеих темах. Перед СБП есть короткое подтверждение: способ потом не изменить, и лучше сказать об этом до, чем получить обращение в поддержку после. Карта — три поля и кнопка с суммой прямо на ней: «Оплатить 199,00 ₽». Экран успеха подсвечен зелёным, с чеком и кнопкой назад в магазин. Экран ошибки не просто сообщает «платёж отклонён», а говорит, что делать: попробовать ещё раз или выбрать другой способ

Тёмная тема: отдельная палитра, а не инверсия

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

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

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

Мобильная версия: отдельная сборка, а не уменьшенный десктоп

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

Шапка на телефоне сохраняет то, что важно: логотип, переключатель темы, язык и меню. Иллюстрации из блока продуктов не вырезаны «ради экономии места» — они остались, просто стали меньше. Мобильные блоки собраны из тех же компонентов, что и десктоп, поэтому правка в кнопке или карточке прилетает сразу в обе версии.

UI‑кит и передача в разработку

Всё, что описано выше, живёт в одном файле Figma. На отдельной странице — UI‑кит: цвета как переменные с двумя режимами, текстовые стили, 31 иконка, кнопки четырёх типов и трёх размеров, поля ввода с четырьмя состояниями, теги, карточки и блоки лендинга как компоненты. Страницы собраны только из них: ни одного «отвязанного» элемента с цветом, заданным вручную.

Зачем это клиенту, а не только дизайнеру. У TabPay своя команда разработки на Nuxt и Vue, и сайт будет расти: новые лендинги под ниши, страницы документации, личный кабинет. Когда есть кит, новую страницу можно собрать из готовых частей за час, и она не разойдётся с остальным сайтом. Без кита каждая следующая страница — новый проект с новыми отступами и немного другим синим.

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

Что это даёт сервису

Красивый сайт сам по себе ничего не стоит. Вот что меняется для TabPay на практике.

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

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

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

Что можно взять в свой проект

Эти правила не привязаны к TabPay. Они работают для любого сайта платёжного или финтех‑сервиса, где человек доверяет вам деньги.

1. Первый экран отвечает на три вопроса — что это, для кого, как начать — и содержит одну кнопку. Вторая кнопка почти всегда лишняя.

2. Возражения снимаются там, где возникают. «Без ИП» — в подзаголовке, курс вывода — рядом с шагами подключения, безопасность — под формой оплаты, а не на отдельной странице.

3. На платёжной странице сумма — самый крупный текст, а на кнопке написано, сколько спишется. Ошибка всегда говорит, что делать дальше.

4. Один акцентный цвет, один шрифт, свои иконки и иллюстрации. Стоковые 3D‑монетки и градиентные пятна делают сайт похожим на сотни других.

5. Тёмная тема и мобильная версия закладываются в UI‑кит с первого дня, а не добавляются «потом». Потом — это второй проект по цене первого.
   

   

Частые вопросы о дизайне сайта для платёжного сервиса

Сколько времени занимает дизайн сайта для финтех‑сервиса?

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

Нужна ли платёжному сервису тёмная тема?

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

Что важнее на платёжной странице — дизайн или скорость?

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

Можно ли заказать только платёжную страницу, без сайта?

Можно. Часто именно с неё стоит начинать: это самый короткий путь к деньгам для сервиса, а лендинг можно собрать позже на том же UI‑ките.

В чём передаёте дизайн разработчикам?

В Figma: компоненты с состояниями, переменные цветов и типографики, автолейауты. При желании берём и вёрстку — тогда кит превращается в набор готовых компонентов в коде.

Нужен похожий сайт?

Мы делаем дизайн сайтов для платёжных и финтех‑сервисов, Telegram‑ботов и онлайн‑продуктов — от логотипа до личного кабинета, с вёрсткой или без. В работу входят десктоп, мобильная версия и UI‑кит; тёмная тема и платёжные экраны — по задаче. Сайт под ключ — от двух недель, логотип и фирменный стиль — от пяти дней.

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