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

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

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

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

Задача

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

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

Решение

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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


 

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

Мобильная версия сайта и адаптивная вёрстка — оно вам надо?
28 Июня 2016
Вопрос требует изучения. Поэтому в статье — в чём разница между мобильной версией сайта и адаптивной вёрсткой, когда они нужны и что делать, если их нет.
Прототип и ТЗ, или Откуда растут сайты
01 Марта 2016
Отвечаем на вопросы, которые вы стесняетесь задать. Включая популярные «Что это за фигня?» и «Нафига мне эта фигня?»
Агрегация требований. Как и, главное, — зачем
24 Февраля 2016
Если руководитель проекта не торопится писать ТЗ и говорит о какой-то непонятной агрегации требований, возможно, на это есть причины. Не в курсе, что это за агрегация? Листайте вниз.

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

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

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