Создание сайта «Дельта Банка»

Описание Процесс

Первые идеи.

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

Идея с «преобразователем денег» признается рабочей.

Арт-директор предлагает взять за прототип чайную банку.

Клиенту нужно много баннеров на сайте, поэтому размещаем их по периметру страницы.

Помощник по выбору банковских продуктов решаем делать пошаговым. Рождается идея делать краткие и подробные версии страниц.

Развиваем эту идею.

Дорабатываем концепцию и готовим к презентации заказчику.

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

Разбираемся со структурой. Основной контент сайта можно разделить по сегментам аудитории, и клиент хочет именно так, а можно по типу действия («взять» или «положить» деньги), и на этом настаиваем мы. Результат — компромиссная карта сайта: на одну страницу можно попасть разными путями.

Начинаем прототипирование.

Думаем, как будут раскрываться карточки кредитных и депозитных помощников.

Поиск отделений и банкоматов — на карте и в виде списка.

Варианты переключателя между краткой и подробной версиями.

Просим Тимура Бурбаева показать, как вообще может выглядеть преобразователь.

Останавливаемся на дереве. Магическое золотоносное дерево. Смотрим, как оно может трансформироваться из кубика.

И как оно будет выглядеть на странице.

Первая визуализация.

Прикидываем, как дерево вписывается в страницу.

Готовим три кадра для анимации.


Верстаем карту сайта.

Начинаем работу над помощниками и калькуляторами: собираем информацию обо всех продуктах.

На примере депозитного калькулятора решаем, как должны выглядеть помощники и калькуляторы.


Выбираем окончательный вариант.

Проводим фотосессию сотрудников банка.

Выбираем подходящие фотографии и ретушируем.

Готовим все оставшиеся прототипы страниц.

Переходим к рисованию баннеров. Идеи, предложенные в концепции, нужно немного развить и дополнить.

Первый подход — самые очевидные образы.

После разговора с арт-директором появляются метафоры.

Результат.

Снова варианты переключателя между краткой и подробной версиями.

Эволюция главной страницы.


Рисуем иконки файлов для скачивания. Эволюция иконки ПДФ.

Эволюция страницы ошибки.


Варианты голосовалки, не прошедшие отбор.

Окончательный вариант. Нравится ли вам новый дизайн сайта?