Инверсия

Графика логотипа отсылает к образам воды и огня, но не так прямолинейно, как это принято в индустрии. Мы сохранили образ кометы, но перерисовали все элементы лого, замешали “панковский” стиль, характерный для компании и ее сотрудников, с трендовой пластичной графикой. Буквы сделали основательными и такими же пластичными.

Символ кометы отражает ценности бренда — динамику развития, инновационность и свободу. Мы сохранили панк-романтику и привнесли эстетику технологичности, чего очень не хватало образу компании.

Логотип отрисовали в двух языковых версиях — русской и китайской. Последняя особенно хорошо легла на новую графику бренда.


Паттерн, трубы и панк-рок!

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

Визуальный стиль на носителях

Помимо стандартных для компании носителей вроде папки-фолдера, рекламных буклетов, футболок и касок, мы разработали оформление громадного контейнера, в котором будет размещаться брендированное котельное оборудование. Брендированный шестнадцатиметровый контейнер будет отлично демонстрировать новый визуальный стиль и привлекать внимание к бренду и продукции в целом.

Быть серьезными и уметь шутить

Мы решили, что брендировать фирменные носители необходимо с огоньком в прямом и переносном смысле. На огромные контейнеры нанесли гигантский фирменный узор, а в постах социальных сетей внедрили шутливую мультяшную анимацию.

Мы очень рады, что клиент дал нам свободу и поддержал в экспериментах со стилем.

Сайт для производителя котлов

Перед нами поставили задачу — кардинально обновить корпоративный сайт и по дизайну и по функционалу.

Для этого мы полностью пересмотрели существующую структуру и добавили много нового функционала, который поможет лучше информировать посетителя и продавать товар.

На сайте появились новые разделы: лизинг, сферы применения с примерами, калькуляторы расчета мощности оборудования, база знаний, энциклопедия.

Wireframe → Дизайн

UX-wireframe. Провели несколько встреч и собрали данные. Работу начали с исследования прошлого пользовательского опыта, согласования структуры и построения прототипа. В прототипе базово проработали функционал каждой страницы и блока. Построили карту сайта — это позволило проверить удобство пользования интерфейсом и оценить понятность структуры. В проверке задействовали фокус-группу.

UI-дизайн. Основой стиля компании стала округлая графика, символизирующая оборудование и сам пар. Такая графическая метафора поможет стать бренду притягательней для своей ЦА. В дизайн сайта мы внедрили фирменный сет иконок, паттерн и иллюстрации. Все это стало основой дизайн-системы сайта и частью UI-kit.

Сайт на компьютере и телефоне

Верстку сайта сделали адаптивной, благодаря этому контент корректно отображается на всех распространенных разрешениях и мобильных устройствах.

В версии сайта на телефоне мы значительно улучшили юзабилити за счет сокращения/перекомпановки числа блоков, так как большая длина страницы критична на таких устройствах. Адаптировали состояние кнопок и интерактивных элементов.

Более подробно с кейсом по разработке сайта можно ознакомиться здесь.