Роман Чигирёв

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

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

Ориентированность продукции — на корпоративный сегмент.

Задача

Разработать сайт компании, реализовать каталог с возможностью получения обратной связи от клиента, разработать такие инструменты, как калькулятор окупаемости и калькулятор экономии.

Предпочтительный стиль — минималистичный, в духе Metro.

Решение

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

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

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

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

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

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

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

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

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

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

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

Результат

Готовый сайт можно посмотреть по адресу rusquantum.ru.

P.S. Разработка происходила на базе 1С-Битрикс редакции «Бизнес».


 

Что еще почитать по этой теме

«ПК Титан»: сайт для сурового производства
31 Августа 2016
Обычно производители сложных технических штук консервативны и просят такой же сайт, как конкурентов, только лучше. Но не в этот раз — с ПК «Титан» мы сделали сайт без чужих ошибок.
Тестируем Affinity Designer
26 Августа 2016
Разрабатывать интерфейсы в Photoshop неудобно — факт. Хотя бы потому, что он предназначен для обработки фото. В попытках найти что-нибудь лучше наш арт-директор установил Affinity Designer и, похоже, это любовь.
Mobile First: причём тут котики?
18 Августа 2016
Выясняем, в чём преимущества и недостатки подхода Mobile First, чем он лучше адаптивного дизайна и как связан с котами и слонами.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.