Green Grey
Ряд сайтов и 3D-модели для международного разработчика и паблишера мобильных игр
кейс
ВТБ Капитал Форекс
Дизайн и фронтенд-разработка сайта и личного кабинета для одного из крупнейших форекс-дилеров России
задача
Разработать трейдинговый портал для физических лиц — дизайн и frontend-разработка сайта и личного кабинета в соответствии с фирменным стилем группы ВТБ.
клиент
ВТБ
отрасль
Банки
год запуска
2020
что сделали
Дизайн сайта
Дизайн личного кабинета
Frontend-разработка
Совместили всё, что необходимо трейдеру: от информации об услугах до аналитических обзоров.
Дизайн с характером
Проанализировали конкурентный рынок и упростили восприятие, разделив страницу на две части — основной контент слева, изображение или панель меню справа. Улучшили навигацию с помощью меню, которое меняется в соответствии с разделом, просматриваемым пользователем. Увеличили яркость фирменных цветов, но не отошли от сдержанности и строгости.
Фоновые паттерны с линиями на главной странице ссылаются на фирменный стиль ВТБ.
Кнопка призыва к действию
Выстроили CTA-кнопки в иерархию значимости для клиента, увеличив таким образом мотивацию пользователя открыть брокерский счет. Кнопки призыва к действию находятся в верхнем блоке, в самом меню и в конце страницы — пользователь может перейти к форме, находясь в любой точке сайта.
Главная кнопка «Открыть счет» находится на всех страницах и является самым ярким его элементом, потому что направляет клиента к форме заполнения.
Навигация внутри разделов
Вынесли подзаголовки в отдельное меню и настроили визуальный прогресс-бар. Например, в блоке «Индекс настроений трейдеров ВТБ Форекс» с помощью бокового меню пользователь ориентируется по всем блокам и может вернуться к необходимому, а в блоке «Обзоры» меню выступает в роли фильтра для разделов. Применили разные решения, ориентируясь на объем контента и цели, которые он выполняет.
Автоматическое построение графиков и диаграмм
Настроили автоматическую визуализацию серверных данных и спроектировали на сайте финансовые графики, круговые диаграммы и гистограммы, которые самостоятельно обновляются и отражают актуальное состояние биржи. Использовали визуальное кодирование, индексирование и градацию.
Перевели все сложные цифровые статистические данные в визуальные диаграммы и графики.
Адаптивная версия сайта
Сайт функционально связан с личным кабинетом и одинаково работает и отображается во всех современных браузерах. Адаптировали проект для мобильных устройств, чтобы трейдер мог управлять счетом и изучать информацию с любого устройства.
Отрисовали кнопку открытия договора специально для адаптива и встроили ее в условия обслуживания, чтобы пользователю не нужно было скроллить и открывать меню, а также настроили компактное отображение диаграмм и графиков.
Личный кабинет
Личный кабинет — ключевой инструмент трейдера ВТБ. Пользователь самостоятельно управляет своим брокерским счетом: получает отчеты по сделкам, видит календарь, может выводить средства в нескольких валютах, общаться на форуме, следить за рейтингом трейдеров, регулировать юридические вопросы и оформлять справки 2-НДФЛ.
Собственная аналитика и анализ рынков
Пользователь получает полную картину состояния рынка Форекс: аналитические обзоры, таблица национальных процентных ставок, анализ рынков, справочник по мировой экономике, экономический словарь и новости о движении валют.
технологии
Pug
SCSS
JavaScript
SVG
D3.js
GSAP
Webpack
смотрите также
связаться