Дизайн сайта для ПлатиКа: как мы упаковали сервис виртуальных карт
Кейс: дизайн сайта для финтех-сервиса ПлатиКа — виртуальные карты для оплаты зарубежных сервисов. Структура, айдентика, 8 типов страниц, UI-кит, мобильная версия
Контекст: зачем этому продукту нужен был сайт
ПлатиКа выпускает международные карты, которыми можно оплатить Steam, Netflix, ChatGPT Plus, Google Play, Booking, Spotify, Airbnb, Uber — суммарно тысячи сервисов, недоступных для прямой оплаты локальными картами.
Продукт при этом попадает в неудобную для маркетинга зону. С одной стороны — финтех: люди опасаются вводить данные, отдавать деньги, привязывать карту к аккаунту. С другой — довольно узкая практическая задача: человек пришёл не «выбрать банк», а закрыть конкретную боль вроде «не могу продлить подписку на ChatGPT».
Отсюда главная задача дизайна: снять недоверие и как можно короче довести человека от его конкретной боли до выпуска карты. Сайт должен был одновременно работать как продающий лендинг, как справочник и как SEO-канал привлечения.
Цели, которые мы поставили на старте
Объяснить продукт за один экран. Человек должен понимать, что это и зачем, без прокрутки и без финансового жаргона.
Развести аудиторию по сценариям. Геймер, путешественник и подписчик стримингов приходят с разными вопросами — и не должны читать чужие.
Снять возражения до того, как они прозвучат. Тарифы, условия, скрытые платежи, «а это законно», «а если не сработает» — всё это должно быть на поверхности.
Построить SEO-фундамент. Основной поисковый трафик в этой нише — запросы вида «как оплатить [сервис]». Значит, сайту нужен масштабируемый шаблон гайда.
Заложить систему, а не набор страниц. Продукт добавляет новые карты и сервисы постоянно — дизайн не должен переделываться под каждое обновление.
Исследование и работа со структурой
Мы разобрали конкурентов в нише и увидели повторяющуюся проблему: почти все сайты сервисов виртуальных карт устроены как один длинный лендинг. Всё вываливается на пользователя сразу — и тарифы, и инструкции, и список поддерживаемых сервисов. В результате страница не отвечает точно ни на один поисковый запрос и одинаково плохо конвертирует все сегменты.
Мы пошли от сценариев использования. Разложили аудиторию на три ядра:
Игры — покупки в Steam, внутриигровые платежи, подписки на консолях, мобильные сторы.
Подписки — стриминги, ИИ-сервисы, облака, софт по модели SaaS.
Путешествия — бронирование жилья, авиабилеты, аренда авто, повседневные покупки за границей.
Под каждый сценарий — своя продуктовая страница со своей аргументацией, своим набором логотипов поддерживаемых сервисов и своей витриной карты. Общая структура и логика при этом сохраняются: пользователь, перешедший между страницами, не переучивается.
Итоговая карта сайта:
Главная
Карта для игр
Карта для подписок
Карта для путешествий
Каталог гайдов
Страница гайда (шаблон) + её SEO-версия
Поддержка
Служебные страницы
Айдентика: как выглядит доверие в оранжевом
Логотип
Знак — скруглённый квадрат с вырезанной четырёхлучевой формой внутри. Читается сразу в двух смыслах: как стилизованная карта и как «плюс»/точка соединения. Форма устойчиво работает и в мелком размере фавиконки, и как крупный паттерн — из повторяющегося знака мы собрали фирменную текстуру для декоративных блоков.
Цвет
Основа палитры — насыщенный оранжевый, глубокий почти-чёрный и белый. Оранжевый берёт на себя энергию и call-to-action, чёрный — «серьёзность» финансового продукта, белый — воздух и читаемость.
Отдельное решение — цветовое кодирование сценариев. Каждая продуктовая линейка получила свой акцент:
оранжевый — подписки (базовый фирменный),
синий — путешествия,
фиолетовый — игры.
Это даёт пользователю мгновенную навигационную подсказку: по цвету экрана понятно, на какой странице он находится, а карточки карт узнаются в любом блоке сайта, включая перелинковку «посмотрите другие карты».
Типографика
Шрифтовая пара TT Runs + Geologica. TT Runs с его плотными широкими заголовками даёт нужную громкость в hero-блоках и работает как голос бренда. Geologica отвечает за интерфейс и длинные текстовые массивы — у неё широкий набор начертаний и хорошая читаемость в мелких кеглях, что критично для страниц с тарифами, условиями и пошаговыми инструкциями.
3D-графика
Ключевой визуальный приём — карты с «прилипшими» к ним объёмными объектами: геймпад для игровой карты, VR-шлем и глобус для путешествий, иконка play для подписок. Это решает вполне прикладную задачу: пользователь понимает назначение карты, не читая текст. Плюс объёмные объекты вытягивают композицию — без них экран из плоских карточек выглядел бы дежурно.
Главная страница
Первый экран построен вокруг динамического оффера: конструкция «плати → [логотип сервиса]» перебирает Steam, Netflix, ChatGPT и другие популярные сервисы. За две секунды человек получает ответ на вопрос «что здесь происходит» — без абстрактных формулировок про «финансовые решения нового поколения».
Дальше страница отрабатывает возражения по порядку:
«Оплачивайте тысячи сервисов по всему миру» — bento-сетка с ключевыми преимуществами: география, скорость, поддержка, способы пополнения. Формат плитки позволяет дать разный вес разным аргументам, не превращая блок в скучный список из шести одинаковых иконок.
«Моментальный выпуск карты из любой точки мира» — процесс из четырёх шагов на контрастном оранжевом фоне. Блок отвечает на «сколько это займёт» и «что мне вообще нужно сделать».
«Выберите карту под свои задачи» — витрина трёх карт с ценами и коротким сравнением. Это главный распределитель трафика: отсюда человек уходит на нужную ему продуктовую страницу.
FAQ-аккордеон — вопросы про законность, комиссии, отказы платежей, поддержку.
Блок гайдов — вход в справочный раздел, который заодно удерживает пользователя, не готового покупать прямо сейчас.
Продуктовые страницы: три карты, один каркас
Все три страницы собраны на одном модульном каркасе:
Hero с названием карты, ключевой выгодой, кнопкой выпуска и 3D-визуалом карты.
«Подходит для оплаты» — плотный ряд логотипов сервисов. Самый быстрый способ ответить на главный вопрос посетителя: «а мой сервис у вас работает?»
Преимущества — 3–4 аргумента, специфичных именно для этого сценария.
Тарифы и условия — открыто, цифрами, без сносок мелким шрифтом. В финтехе попытка спрятать комиссию стоит дороже самой комиссии.
Процесс выпуска — те же четыре шага на цветном фоне.
FAQ — вопросы, характерные для сценария.
«Посмотрите другие карты» — перелинковка внутри продуктовой линейки.
Модульность здесь — не про экономию времени дизайнера, а про то, что четвёртую и пятую карту продукт сможет запустить самостоятельно, собрав страницу из готовых блоков.
Раздел гайдов: главный SEO-актив сайта
Люди в этой нише почти не ищут «виртуальная карта». Они ищут «как оплатить ChatGPT Plus», «как продлить Netflix», «как пополнить Steam». Мы спроектировали раздел так, чтобы сайт мог закрывать эти запросы сотнями страниц.
Каталог гайдов
Сетка карточек сервисов с логотипами, фильтрами по категориям (стриминги, игры, ИИ, путешествия, маркетплейсы) и поиском. Каталог решает две задачи: даёт пользователю быстрый вход в нужную инструкцию и создаёт правильную структуру внутренних ссылок для индексации.
Шаблон страницы гайда
Трёхколоночная композиция:
Центр — пошаговая инструкция с нумерацией, скриншотами и подсказками на сложных шагах.
Правый сайдбар — «Частые вопросы» по конкретному сервису и блок «Посмотрите другие карты».
Внизу — баннер поддержки («Остались вопросы по оплате ChatGPT Plus?») и блок похожих гайдов.
Отдельно проработали точку конверсии внутри контента: блок «Рекомендуемая карта» встроен прямо в инструкцию, там, где человек уже понял процесс и готов действовать. Классическая ошибка справочных разделов — отдать пользователю ответ и отпустить его без предложения.
SEO-версия страницы гайда
Для приоритетных поисковых запросов мы сделали расширенный вариант шаблона: дополнительные текстовые блоки, вынесенный вверх блок рекомендуемой карты, «Основной гайд» в виде плиточной сетки шагов, расширенный FAQ, дополнительная перелинковка на карты и другие гайды.
Смысл в том, что страница под поисковый трафик и страница для пользователя, пришедшего из меню, — это разные задачи. Первой нужен объём, семантика и внутренние ссылки. Второй — скорость и минимум лишнего. Вместо компромисса, который проигрывает и там и там, мы сделали два шаблона на общей дизайн-основе.
Страница поддержки
Три канала — Telegram, онлайн-чат на сайте и почта — вынесены в отдельные равнозначные карточки с указанием, для чего каждый подходит и как быстро отвечают. В финтех-продукте видимая, доступная поддержка — это не сервисный раздел, а элемент продажи: она напрямую снижает страх «а если что-то пойдёт не так, мне некому будет написать».
Мобильная версия
Все страницы спроектированы в мобильном варианте отдельно, а не «сжаты» из десктопа. Основные решения:
сетки преимуществ и карт превращаются в вертикальные стопки и горизонтальные карусели;
ряды логотипов сервисов складываются в компактную плотную решётку;
ключевая кнопка выпуска карты дублируется по мере скролла;
длинные таблицы тарифов переформатированы в списки пар «параметр — значение»;
сайдбарные FAQ переезжают в основной поток в виде аккордеонов.
UI-кит и передача в разработку
Собрали библиотеку компонентов со всеми состояниями: кнопки (default / hover), поля ввода, соцальные иконки, теги, аккордеоны, карточки. Все размеры, отступы, радиусы и цвета вынесены в переменные.
Практический смысл прост: разработка не должна ничего додумывать. Каждое интерактивное состояние определено заранее, поэтому на этапе вёрстки не возникает вопросов «а как это ведёт себя при наведении» и не появляется десять оттенков оранжевого вместо одного.
Как дизайн работает на SEO
Мы держали поисковые задачи в голове с этапа структуры, а не прикручивали их после отрисовки макетов:
Масштабируемый шаблон под запросы «как оплатить [сервис]» — сотни потенциальных страниц на одном дизайн-каркасе.
Продуктовые страницы под сценарные запросы — «карта для оплаты игр», «карта для путешествий», вместо одного лендинга под всё сразу.
Строгая иерархия заголовков в каждом шаблоне: один H1, осмысленные H2 по блокам.
FAQ-блоки на всех ключевых страницах — заготовка под разметку FAQPage и расширенные сниппеты.
Продуманная перелинковка: каталог → гайд → похожие гайды → карта → другие карты. Ни одна страница не является тупиком.
Текстовые блоки заложены в макет, а не добавляются потом «куда-нибудь вниз» — SEO-текст выглядит частью дизайна.
Результат
Вместо одного перегруженного лендинга получилась система из восьми типов страниц, которая:
закрывает три разных пользовательских сценария отдельными посадочными страницами;
масштабируется новыми картами и гайдами без участия дизайнера;
отрабатывает возражения по доверию открытыми тарифами, прозрачным процессом и видимой поддержкой;
готова к росту поискового трафика за счёт справочного раздела.
Измеримые результаты: [вставьте фактические данные — рост конверсии в выпуск карты, позиции по запросам «как оплатить …», трафик из поиска, время на сайте. Если проект только запускается, замените блок на «Проект в разработке, метрики добавим после запуска».]
Частые вопросы
Сколько стоит дизайн сайта для финтех-сервиса? Стоимость зависит от количества типов страниц, глубины исследования и необходимости айдентики. Проект такого объёма — 8 типов страниц с мобильной версией, UI-китом и 3D-графикой — рассчитывается индивидуально. [Добавьте вилку или ссылку на страницу услуг.]
Сколько занимает разработка дизайна сайта? Для проекта сопоставимого объёма — от [X] недель, включая исследование, структуру, дизайн-концепцию, отрисовку всех страниц и подготовку к вёрстке.
Вы делаете только дизайн или ещё и разработку? [Опишите ваш формат работы: дизайн + подготовка к вёрстке, или полный цикл с разработкой.]
Можно ли использовать дизайн-систему для новых страниц самостоятельно? Да. Мы передаём UI-кит с компонентами и переменными, поэтому новые страницы собираются из готовых блоков без переделки макетов.
Учитываете ли вы SEO при проектировании? Да, на этапе структуры. Мы закладываем иерархию заголовков, места под текстовые блоки, FAQ-секции и схему перелинковки до отрисовки макетов.
Нужен такой же результат для вашего продукта?
Проектируем сайты для финтех-, SaaS- и сервисных продуктов: от структуры и айдентики до передачи в разработку.