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