Как делались депозиты в Альфа-Банке

Часть 2. Техника создания прототипа

Передо мной стояла задача сделать прототип открытия депозита.

В нем рассчитывается процентная ставка и учитывается десяток зависимостей в ставке, сроке, сумме, типе депозита и проч.

Для решения такой задачи нужен не просто прототип из ряда картинок, которые можно сделать в invision или там marvel.  Тут подойдет, скорее, что-то вроде framer, но я выбрал стандартный набор супергероев:  html, css, js. Я не нашел инструментов лучше, поскольку пока не одна программа для прототипирования не может делать хорошо адаптив, плюс мне нужна была статистика из G.A. или Я.М., которую тоже нужно было каким-нибудь способом прикрутить.

Первым делом, я решил сделать просто блоки, нужные мне для прототипа в html.

На js написал депозитный калькулятор.

В итоге мы получаем набор элементов без верстки.

Теперь, по идее, нужно делать верстку, настраивать адаптивность. Но я нашел более элегантное решение. Решил загрузить свои наработки на скварспейс.

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

Так же у нас сразу становится возможным просматривать и мобильную версию. Следующим шагом я прикрутил сюда все виды статистики. И сделал путь пользователя со страницы выбора типа вклада до открытия депозита, так как было бы не честно предлагать пользователям сразу страницу открытия. Таким небольшим лайфхаком мы экономим время на разработке, получаем сразу готовый сайт с мобильной версией и статистикой.

Из минусов можно отметить разве что стоимость 16$ в месяц.

Настоятельно рекомендую к прочтению первую часть этого рассказа, если вы вдруг её пропустили.