Сайт Autosecurity 2.0
Результаты интервью сильно удивляют заказчика, но, в конечном счете, подход признается верным, и мы можем приступать к проектированию и дизайну интерфейсов.
Забываем на время про «железки» и их технические выкладки и начинаем думать о мелочах, которые обеспечат удобство и комфорт. Для начала прикидываем постраничные сценарии взаимодействия и прототипы:
Появляется идея показать преимущества использования комплексной системы безопасности на примере ситуаций из обычного дня с «умным автомобилем». Делаем интерактивный скетч:
Приступаем к поискам дизайн-концепции:
Готовим презентацию:
Прикидываем вид основного раздела сайта — страницы «Умный автомобиль»:
Нет, все выходит слишком игрушечным. У нас немного другая целевая аудитория, пробуем другую стилистику:
Прорабатываем шапку
Смотрим новым взглядом на страницу «Умного автомобиля». А что, если отказаться от привычной горизонтальной подачи и сделать интерактивную страницу-презентацию, где на первое место выходит идея из прототипов с разными ситуациями в течение дня.
Работаем над картинками — нужно учесть, что вся анимация не должна долго загружаться, поэтому делаем несколько градиентов фона для разного времени суток, паттерн города с полупрозрачностью (он должен хорошо выглядеть как на светлом, так и на темном фоне), создаем несколько локаций (дом, дорога, работа):
Слой с домами на заднем плане должен двигаться медленнее, для создания эффекта параллакса
Соединяем все это вместе:
Добавляем тексты и тестируем в движении:
Получается слишком пестро и шумно, сложно уловить основную идею. Упрощаем графику, добавляем крупные заголовки и переносим таймлайн на главную страницу, добавляя информацию о других услугах
Прорабатываем интерфейсы конфигураторов «Умного автомобиля» и системы защиты от угона:
Прорабатываем интерфейс калькулятора стоимости оклейки машины винилом и интерфейсы онлайн-записи
Рисуем машинки для визуализации разных типов винила
Решаем переделать навигацию по основным разделам – сделать ее в виде раскрывающегося вертикального меню
Правим готовые страницы и доделываем недостающие
Систематизируем каталог товаров в разделе «Защита от угона»
Можно верстать