Создание шаблонов сайта Московского кредитного банка

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

Смотрим на действующий сайт, собираем на доске знания и гипотезы по проекту.

Старший дизайнер предлагает концепцию. Сайт делится на две части: контентную — справа и обложку — слева. Лицом банка становятся москвичи и сам город, а градиент от синего к красному связывает все воедино.

Принято. Начинаем отрисовку чистовых макетов — типовой страницы, разводящих и страниц основных продуктов.

Додумываем состав главной страницы и ее анимацию.

Хочется сделать еще интереснее. Пусть персонаж на переднем плане двигается и взаимодействует со зрителем. Прикидываем жизнеспособность на верстке.

Эффектно, но слишком тяжело по загрузке и трудоемко в подготовке. Пока отказываемся от идеи. Параллельно готовим для заказчика гайдлайн по фото- и видеосъемке.

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

Банк придерживается концепции одного продукта с настраиваемыми параметрами. Для общей страницы карты придумываем подборщик и удобную таблицу сравнения.

Собираем все в прототип, тестируем на людях, вносим корректировки и отдаем технологу.

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

Думаем над деталями и анимацией.

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

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

Собираем шаблоны, правим баги, тестируем, вносим правки и передаем прототип заказчику.