Квантум Рус — техничный сайт в стиле Metro

Маркетинг6 Создание сайтов3 Контекстная реклама3 SEO5 Комплекс услуг4 Дизайн2 Программирование3 Менеджмент SMM2 Digital2 Мобильная разработка Интернет-маркетинг Использование сервиса1 Юзабилити Брендинг E-commerce

Создание сайтовКейс

Заказчик: Компания Квантум Рус — поставщик оборудования для промышленной окраски, официальный представитель Coral и Krautzberger. Спектр предлагаемой продукции: от ручных пневматических краскораспылителей, которыми вы можете сами покрасить автомобиль, до габаритных окрасочно-сушильных камер, в которые помещается этот самый автомобиль. Плюс комплектующие. Ориентированность продукции — на корпоративный сегмент.
Задача: Разработать сайт компании, реализовать каталог с возможностью получения обратной связи от клиента, разработать такие инструменты, как калькулятор окупаемости и калькулятор экономии. Предпочтительный стиль — минималистичный, в духе Metro.

«Сибирикс», студия интернет-решений

10 июня 2013

Решение

Первый этап — это скетч и итерации правок по нему. Согласовываем с заказчиком предложенную нами структуру, изменяем набросок так, чтобы он наилучшим образом отражал наше совместное видение проекта. Финальный скетч:

Дизайнер приступает к разработке макета в цвете. Первый вариант отбраковывается на этапе внутренней приемки дизайна:

Продолжаем искать нужное решение. Подбираемся еще ближе к стилю Windows 8, делаем темную цветовую гамму, работаем над деталями.

В демонстрацию уходит такой макет:

Получаем обратную связь от заказчика, резюме демонстрации: изменить цветовую гамму на более светлую, убрать «декоративные» элементы — акцент должен быть перемещен на продукцию.

Берем за эталон официальный гайдлайн Microsoft по Метро-стилю и приступаем:

Макет утверждается, внутренние прорабатываются по аналогичной схеме: скетч → согласование → дизайн. Пример внутренней странички:

И теперь мы переходим к самому вкусному — технической начинке сайта.

Техническая часть

Что было реализовано:

Калькулятор окупаемости. Можно рассчитать окупаемость ручных краскораспылителей относительно аналогов от других стран-производителей. Крайне полезная штука.
Калькулятор экономии. Рассчитывает, сколько часов рабочего времени сэкономит маляр, используя напорные емкости. Итоговые расчеты можно выгрузить в PDF.
Кнопка, генерирующая версию для печати в виде коммерческого предложения. Можете перейти на страницу любого товара и попробовать.
Кнопка, отправляющая ссылку на товар на указанную почту. Находится там же. Мелочь, а приятно.
Страница «Центр загрузок», откуда можно скачать любую инструкцию и официальный документ.
Фильтр продукции по областям применения. Есть на главной, под рубрикатором по видам продукции. Полезно, когда клиент занимается подбором оборудования сразу под несколько целей.
Интерактивный график, сделанный на Raphaёl. Показывает, какой процент посетителей счел ту или иную информацию полезной. «Голосовалки» внедрены в сам сайт, а график администратор может посмотреть прямо в админ-панели Битрикса.