Дизайн сайта банка в Ростове-на-Дону

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

  • Контраст текста проверяем по ГОСТ Р 52872-2019
  • Калькуляторы и анкеты — на прототипе до дизайна
  • Условия продукта рядом со ставкой, а не в сноске

Рассчитать стоимость

Изучим задачу и пришлём план работ с ценой.

Первый экран сайта банка

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

  1. 1

    Переключатель аудиторий

    Частным лицам, бизнесу, инвесторам — вкладками над шапкой.

  2. 2

    Вход в интернет-банк

    Заметная кнопка в шапке — за ней приходят постоянные клиенты.

  3. 3

    Продукт с условиями

    Одно предложение со ставкой или лимитом, условия получения — рядом с цифрой.

  4. 4

    Калькулятор

    Сумма и срок — два поля, ежемесячный платёж виден сразу.

  5. 5

    Кнопка заявки

    «Оформить онлайн», а рядом — «Найти отделение» для тех, кто предпочитает прийти лично.

  6. 6

    Продукты плитками

    Кредиты, вклады, карты, ипотека — с короткими условиями на каждой плитке.

Кейсы

Добыча наших клиентов

  • Частный юрист · Симферополь

    350 ₽

    стоимость заявки в контекстной рекламе Яндекса

    Дизайн сайта-визитки частного юриста из Симферополя: стоимость заявки в контекстной рекламе Яндекса — 350 рублей.

    Смотреть кейс
  • Интернет-магазин спецтехники

    Дизайн сайта интернет-магазина спецтехники Lonking

    Дизайн сайта интернет-магазина спецтехники Lonking: продажа по всей России, сервис, запчасти и лизинг.

    Смотреть кейс
  • Компания по строительству бассейнов · Севастополь

    Дизайн сайта компании по строительству бассейнов в Севастополе

    Дизайн сайта компании, которая строит бассейны на заказ в Севастополе и по Крыму: планирование, проектирование и строительство. Десктопная и мобильная версии.

    Смотреть кейс
  • Частное охранное предприятие · Севастополь и Ялта

    Дизайн корпоративного сайта частного охранного предприятия

    Дизайн корпоративного сайта частного охранного предприятия в Севастополе и Ялте. Десктопная и мобильная версии.

    Смотреть кейс

Доступность и доверие

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

  • Контраст и размер текста

    ГОСТ Р 52872-2019, построенный на рекомендациях WCAG 2.1, задаёт контраст текста и фона не меньше 4,5:1. Проверяем каждую пару цветов в UI-ките, включая сноски и надписи на кнопках.

    • Страница работает при увеличении текста до 200 % — критерий WCAG 2.2
  • Удобно пальцем и с клавиатуры

    Цели для нажатия — не меньше 24 на 24 CSS-пикселя, как требует WCAG 2.2, а основные кнопки крупнее. Фокус с клавиатуры виден на каждом элементе.

  • Сотрудник вместо бота

    Банк России в методических рекомендациях 2024 года советует давать клиентам с инвалидностью и маломобильным людям возможность получить консультацию у работника, а не у бота. В чате это заметная кнопка, а не команда, которую нужно угадать.

  • Раскрытие информации

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

  • Спокойный визуальный язык

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

Что мешает оформить заявку на продукт

Заявку на кредит или вклад бросают не из-за цвета кнопки, а из-за неясности.

  • 01

    Калькулятор без итога

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

  • 02

    Анкета на одном экране

    Двадцать полей подряд без шагов и без сохранения черновика.

  • 03

    Ошибки без подсказки

    «Неверный формат» у поля паспорта без примера, как правильно.

  • 04

    Главное условие в сноске

    Условие получения ставки набрано мелким серым шрифтом внизу страницы.

  • 05

    Неясный следующий шаг

    После отправки нет статуса — что проверяют, когда позвонят, какие документы взять.

Как работаем над дизайном

Сроки — ориентиры для проекта до 10 шаблонов: лендинг быстрее, магазин дольше. Точный график — в договоре.

  1. 2–3 дня

    Бриф

    Задача, аудитория, конкуренты, текущая версия и данные Метрики, если проект уже работает.

    Итог этапаБриф и список шаблонов

  2. 3–7 дней

    Прототип

    Схемы страниц без цвета и картинок: блоки, их порядок, кнопки и формы.

    Итог этапаСогласованная структура страниц

  3. 3–5 дней

    Концепция первого экрана

    Шрифты, цвета, фото и кнопки на одном экране. После согласования стиль переходит на остальные страницы.

    Итог этапаУтверждённый стиль

  4. 2–3 недели

    Макеты страниц

    Все шаблоны из брифа, включая формы, сообщения об ошибках и служебные страницы.

    Итог этапаМакеты для компьютера

  5. 3–5 дней

    Адаптив

    Версии для телефона и планшета: порядок блоков, меню, размеры кнопок и текста.

    Итог этапаМакеты для телефона и планшета

  6. 1–2 дня

    Передача разработчику

    UI-кит, состояния элементов, спецификация. По договорённости сверяем вёрстку с макетами.

    Итог этапаФайл Figma и спецификация

Стоимость дизайна сайта банка в Ростове-на-Дону

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

  • Лендинг

    Одна страница под рекламу или акцию. Ориентир — 2–3 недели

    от 40 000 ₽

    • Прототип
    • Макет для компьютера и телефона
    • Две итерации правок
  • Сайт до 10 шаблонов

    Для компании или сферы услуг. Ориентир — 4–6 недель

    от 90 000 ₽

    • Прототип и концепция
    • До 10 уникальных шаблонов
    • Адаптив и UI-кит
  • Интернет-магазин

    Каталог, карточка товара, корзина. Ориентир — 5–8 недель

    от 150 000 ₽

    • Каталог, фильтры и карточка
    • Корзина и оформление заказа
    • Личный кабинет
    • Сверка вёрстки с макетами
  • Время на согласования с юристами и безопасностью закладываем в график
  • Число итераций правок — в договоре

Не подошёл тариф — предложите свою цену

Назовите бюджет — предложим состав работ или запуск по этапам.

FAQ

Вопросы о дизайне сайта банка

Не нашли ответ?

Как проверяете контраст и доступность макетов?

Каждую пару цветов в UI-ките считаем по формуле контраста WCAG, кнопки и поля проверяем на размер, для всех элементов рисуем видимый фокус. На прототипе отдельно смотрим порядок перехода по элементам с клавиатуры и вид страниц при увеличенном тексте.

Как калькулятор должен работать на телефоне?

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

Какие фото и иллюстрации подходят сайту банка?

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

Сколько шаблонов обычно рисуем для банка?

Больше, чем у сайта компании: страница продукта, подборка продуктов, калькулятор, таблица ставок, список документов, карта отделений, анкета по шагам и её состояния — ошибка, проверка, решение. Точный список составляем по продуктовой линейке после брифа.

Нужна ли отдельная версия для слабовидящих?

Лучше, когда основной сайт доступен сам по себе: контрастный, масштабируемый, удобный с клавиатуры. Отдельная версия часто отстаёт по содержанию и превращается во второй сайт, который тоже нужно поддерживать.

Содержание
  1. Цвет, шрифт и цифры
  2. Как показать ставки и условия
  3. Формы и анкеты

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

Цвет, шрифт и цифры

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

Как показать ставки и условия

Ставка «от» без условий выглядит как уловка. Надёжнее показать рядом с цифрой, от чего она зависит, а полные условия открывать одним нажатием, без перехода в документ. Для вкладов удобна таблица «срок × сумма», которая на телефоне превращается в выбор срока и список сумм.

Формы и анкеты

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

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

Первый шаг

Покажите продукт — начнём с его страницы

Пришлите ссылку на страницу кредита, вклада или карты. Предложим, как перестроить калькулятор, условия и анкету, и оценим объём работы.

Что написать в заявке, чтобы план был точнее:

  • Какие продукты важнее всего — кредиты, вклады, карты
  • Есть ли внутренние требования к доступности
  • Кто согласует макеты — маркетинг, юристы, безопасность

Офис в Ростове-на-Дону: адрес уточняется · контакты

Перезвоним в рабочее время и ответим на вопросы.

Расскажем, как сделали этот проект, и прикинем план для вашего бизнеса.