Сайт современного банка
Собираем структуру
Второй аспект — найти самый объёмный раздел по содержанию и начать работу с него. В нашем случае самый объёмный раздел это «О банке». Это 12+ разделов с десятком подразделов, без которых сайт банка не может существовать, так как это требования национального банка.
Положительный момент, что данный раздел на 90% состоит из статических или псевдостатических страниц. Задача понятна, формируем дорожную карту проекта.
Планируем дорожную карту
Так как сроки очень сжатые, стратегия выстраивается сама собой — сдаём разделы сайта короткими этапами, и сразу начинаем наполнять их. Через неделю после начала разработки мы уже начали наполнение «Квартальных отчетов».
В плане не показан этап разработки дизайна, на него выделили весь январь, а дальше он шёл параллельно с разработкой.
Разрабатываем концепт
Разработку концепта всегда начинаем с прототипов. Обозначаем шрифты, размеры элементов, первичную сетку. Таким прототипом удобно прощупать клиента — если направление неверное, переделать прототип проще, чем готовый концепт.
Проанализировали банки и пришли к выводу, что синих банков слишком много. Предложили доработать фирменный стиль для большего различия с другими «синими» брендами.
Утвержденный прототип прорабатывается в цвете. Сетка и относительные размеры элементов сохранили преемственность.
Некоторые вещи, как, например, этот блок, прорабатывались на концепте, но на сайт не пошли из-за ограничений контента.
Обычно мы не рисуем мобильную версию до проработки всего дизайна, но в данном случае нужно было закончить концепт и промежуточные варианты целиком, поэтому концепт готовился сразу к продакшену. С адаптивной версией и проработкой интерактивных элементов.
Кроме самого концепта, из которого для текущего этапа важнее всего взять хедер и футер для сайта, а также текстовые стили, очень важно проработать текстовую страницу.
Эта страница является стилеобразующей, поэтому на ней мы обычно прорабатываем стили, которые могут потребоваться в будущем для работы с контентом:
- Таблицы
- Закладки
- Стили формы
- Заголовки разных уровней
- Ссылки
- Кнопки
- Поднавигацию
- Нумерованные и ненумерованные списки
- Коллапс-заголовки
Сборка базового шаблона
Требования на сборку
Общие гайды для Битрикс
Собираем статичные страницы
Когда базовый шаблон готов, можно собирать множество текстовых страниц. Финансовую отченость, информацию о банке, об учредителях. Фактически 75% страниц уже можно наполнять на данном этапе.
Собираем продуктовые страницы
Пока идёт набивка контента, собираем продуктовые страницы и главную. Главная, в отличие от дизайна, на продакшене собирается, как правило, ближе к финалу, так как она является агрегатором информации с внутренних разделов, и её нет смысла собирать, пока внутренние разделы не готовы.
Версия для слабовидящих
В требованиях тендера надо было подготовить специальную версию для слабовидящих. Эту задачу можно решить несколькими способами. Первый — это установка специального JS-скрипта, который подменяет стили на более контрастные.
Второй вариант нам нравится больше, так как мы уже работали с ним на проекте МТС, и он показал себя хорошо. Речь про модуль «Мибок: версия сайта для слабовидящих». Данный модуль представляет не только расширенные настройки, но и озвучивание текстов.
Последний этап: доработка оставшегося функционала
"На последний этап оставили важный, но некритичный функционал. Например, банк может запустить сайт с депозитами, но без фильтрации по ним. Калькулятор тоже может подождать и так далее.
По итогу данный этап оказался самым объёмным, потому что сделана тысяча мелочей.
Подборщик депозитов и кредитов, калькуляторы для депозитов, кредитов, РКО. Лидген-форма, свой виджет мессенджеров, геолокация, конвертер валют, разбивка курсов валют по филиалам, конструктор форм, интеграция форм с CRM, конструктор всплывающих окон.
Разработка публичного API
Описание методов API
Старая система распределения данных о банке через xml-файлики морально устарела. Требовалось разработать новое API по стандартам «Доступ к финансовой инфраструктуре банков Беларуси через Open API».
Требовалось реализовать не только методы передачи данных по банкоматам и отделениям, но и методы для получения данных с калькуляторов сайта.