Открываем на экране смартфона разные банковские сайты.
Изучаем брендбук банка «Санкт-Петербург».
Делаем первый подход.
Пока не то. Похоже на обычное проектирование. Пробуем еще раз.
Все еще много лишней графики, большие объемы текста, нет индивидуальности. Сейчас получается сайт в принципе любого банка, стоит только заменить логотип. И удобных штук в интерфейсе не хватает. Пробуем уточнить.
Параллельно ищем образы для банковских продуктов. Создаем иллюстрации, совмещая изображения тематических предметов и акварель.
Слишком старомодно и иллюстративно, нет визуальной основы, за которую было бы реально зацепиться и распространить в дальнейшем на дистанционные каналы.
Меняем руку и думаем, как связать между собой образ банка, Санкт-Петербурга, акварель и метафоры продуктов. А что, если кодировать продукты формой акварельного пятна, брать актуальные сейчас объекты и связывать все городом — повторяющимися паттернами потолков, полов и стен петербургских дворцов?
Арт-директор: Эстетика кисти вообще не канает как элемент распознавания кредитов-депозитов. Допустимо не привязывать так жестко кисть к виду продукта, а придумать что-то более явное. Или вообще не нужно их делить, не знаю.
Думаем про визуальный язык. Появляется идея поработать с контрформой. Быстро прикидываем, как это будет выглядеть.
В процессе уходим в сплошной авангард. Вместо продуктовых обложек на экраны категорий ставим калькуляторы, поддерживающие образ продукта.
Арт-директор: Слишком много формы, слишком мало содержания видно. Все суперударное. Чтобы прочесть текст, приходится специально напрягаться. Это проблема того, что тексты никто не пишет, и, чтобы их спасти, приходится вводить кучу краски. Ну и флет сам по себе бездушный.
Уделяем внимание тексту, избавляемся от флета, дорабатываем нестандартные калькуляторы.
Арт-директор предлагает не так часто использовать контрформу: надоест через пару экранов.
Начинаем прорабатывать остальные экраны.
Думаем над внешним видом таблиц.
Для мобильной версии нужно подумать про удобные элементы управления, обеспечивающие навигацию по содержимому. Придумываем слайдер, который озаглавит экран и поможет быстро перемещаться по статьям.
Собираем типовой экран.
Показываем, как будут выезжать дополнительные информационные экраны.
Заказчик: Не нравится калькулятор вкладов. Неудобный, непонятный, слишком большой. Такие ощущения возникают, потому что сейчас он выглядит как два куба, которые смотрятся непропорционально большими на экране мобильного по сравнению с остальными элементами. Слишком много пустого пространства, которое не работает. Массивный. Вот такие ощущения.
Продумываем пару других вариантов.
Нравится направление с горизонтальным скроллом. Прикидываем, как он будет работать.
Выбираем третий вариант, заказчику нравится.
Тем временим унифицируем кредитные калькуляторы.
Настало время подготовки чистовых изображений для обложек продуктов. Они составляются из объектов, паттернов и акварели. Подбираем объекты, вектор поисков — актуальная классика.
Собираем изображения и сортируем их по степени попадания в тему.
Иллюстратор рисует паттерны.
Создаем акварельные текстуры и переводим все в фотошоповские кисти.
Собираем всё в картинки и тестируем их на экранах.
В результате примерки перемещаем обложки на продуктовых экранах наверх.
Обновляем исходники с изображениями.
Составляем обстоятельное руководство для разработчиков. Описываем принципы построения модульной сетки, включая определение мест всех элементов на страницах с указанием величины отступов. Рассматриваем общие правила верстки и частные случаи взаимной компоновки элементов. Рассказываем о том, как готовить техническую графику и что должны содержать пользовательские блоки. Не забываем про работу нестандартных элементов управления.
Передаем материалы разработчикам и через некоторое время получаем первую сборку.
Следим за версткой, указываем на необходимые доработки.
