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

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

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

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

Задача

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

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

Решение

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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


 

Мы собрали здесь ключевые статьи
нашего блога и даже завидуем вам, если вы их еще не читали!

 

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

100 недель «Ланч-таймов»: как найти формат для блога, который сам себя пиарит
Сибирикс
25 Мая 2016
100 недель «Ланч-таймов»:  как найти формат для блога, который сам себя пиарит
Внимательный читатель уже заметил, что каждую пятницу ему предлагают ланч. Не тот, который про котлеты и булки, а про digital.
Нет времени объяснять —
#Иди в зал!
Сибирикс
19 Мая 2016
Нет времени объяснять —<br>#Иди в зал!
«Нет зала рядом» и «Я не знаю, какой фитнес-клуб лучше» — больше не отговорки. Мы сделали сервис, который решает проблему с выбором зала. Осталось победить лень и любовь к пицце.
Как организовать фотосъемку товаров для сайта
Сибирикс
17 Мая 2016
Как организовать фотосъемку товаров для сайта
И немножко — зачем. Некоторые до сих пор халтурят и ставят на сайт вместо классных дизайнерских подборок унылые картинки с бесплатных фотостоков. Фу таким быть — учитесь наполнять сайт красиво.

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

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

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