Сайт страховой компании ВСК

Начинаем изучение предметной области. Чтобы понять, как люди принимают решение о покупке полиса, проводим интервью с клиентами компании. Чтобы глубже погрузиться в механику продаж страховых продуктов, проводим интервью с представителями ВСК. Делаем расшифровки интервью, вычленяем из них самое важное:
Если отбросить стандартные ситуации с обязательным Каско при покупке кредитной машины и страхованием при выезде зарубеж, то в большинстве случаев люди задумываются о страховке, когда у них самих или у кого-то из знакомых что-то произошло.
Решаем использовать тревогу и беспокойство в качестве основного мотиватора к покупке полиса – для этого на сайте необходимо напомнить о рисках, о которых люди не задумываются в повседневной жизни. Используем статистику различных происшествий: угонов, аварий, грабежей и несчастных случаев. Прикидываем протипы основных разделов сайта:
Таким никого не напугаешь! Чтобы клиенту было проще понять задумку сразу же собираем анимированный концепт с примером взаимодействия с сайтом:
Клиенту нравится подход, начинаем поиски визуального решения. Сначала пробуем атмосферу помрачнее:
В основе визального решения – блочная структура подачи информации. Такая система дает простор для нелинейного построения информации на странице и реализации интересных эффектов:
Блочная система является довольно гибкой – когда появляется необходимость в более линейной подаче информации, блок масштабируется согласно «плиточной» сетке:
Вместо приевшегося видео, на фоне страницы
используется анимированный фон, который
создает иллюзию движения – это картинка
состоящая из нескольких слоев.
Готовим презентацию для клиента, где описываем преимущества использования блочной системы и рассказываем о некоторых особенностях, о которых нельзя догадаться, глядя на статичную картинку:
Прорабатываем несколько разделов сайта:
Собираем все это в анимацию взаимодействия со страницей:
Клиенту все нравится, кроме синего цвета, основной контент должен быть на белом фоне. Соглашаемся и переделываем все:
Нужно подобрать визуальные образы для ключевых разделов сайта. Для реализации эффекта параллакса изображения должны содержать несколько планов — ближний, средний и дальний. Кроме того, композиция и ракурс должны быть такими, чтобы движение планов относительно друг друга было естественным и логичным. Ищем идеал:
Вместе с клиентом выбираем наиболее подходящие варианты, после чего готовим иллюстрации к верстке — вырезаем и ретушируем слои, дорисовываем нужное, продумываем анимацию:
Прописываем стили типовых элементов, которые будут использоваться на всем сайте:
Работаем над оставшимися разделами сайта:
Верстаем, программируем, готово!

Трудились

Староста
Андрей Калибабин
Арт-директор и дизайнер
Георгий Давитая
Старший художник
Мария Тишина
Дизайнеры
Ильяс Алиев Павел Степанов Дарья Портнова
Главный инженер
Дмитрий Кельми
Инженеры
Алексей Земляков Алексей Громов Сергей Кривобоков Андрей Шахбанов
Менеджеры
Андрей Фетисов Кирилл Пирогов