Kvarta: металл, стиль и технологии — сайт каталог и новый образ промышленного бренда

2025-04-04 14:20:38 Время чтения 10 мин 206

Задача

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

Задачи нового сайта:

1) Привлечение новых клиентов.

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

2) Укрепление бренда.

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

3) Упрощение коммуникации.

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

Решение

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

1) Разработали динамичный логотип, айдентику и полное руководство по использованию бренда

2) Полностью переработали структуру и визуальное оформление сайта с акцентом на удобный каталог

3) Подготовили четыре 3D-motion ролика для демонстрации 4 направлений работы с металлом: гибка, резка, сварка и фрезеровка

Стадии проекта

Главная страница выполняет промо-функцию.
Мы намеренно отошли от демонстрации станков
и отразили деятельность компании с помощью элементов нового фирменного стиля и 3D-моделей металла.

1. Динамичный логотип

Новый логотип Kvarta стал многослойным символом, который отражает суть бренда. В его основе — буква «К», которая не только отсылает к названию компании, но и стилизована под лист металла, подчёркивая специализацию Kvarta. Форма логотипа также передаёт идею точности резки, символизируя высокие стандарты качества, которые компания предлагает своим клиентам.

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

Знак нового логотипа «Kvarta» представляет собой уникальный символ, объединяющий несколько значений. «К» символизирует имя компании, а также форму листа металла и точность резки.

Помимо основного логотипа разработали в единой стилистике логотипы четырёх направлений обработки металла, на которых специализируется Kvarta.

2. Айдентика, которая режет точно

Обновлённый стиль Kvarta строится на сочетании геометричности, насыщенной сине-белой палитры, динамичного логотипа и нео-гротескного шрифта. Эти элементы подчёркивают технологичность компании и создают современный и запоминающийся визуальный образ.

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

– Печатной продукции: визитки, конверты, папки для документов, дипломы.

– Мерча: ручки, блокноты, кружки, браслеты, стикерпаки.

– Упаковки: коробки, пакеты и другие материалы для презентации продукции.

3. Аналитика и проектирование

Перед началом работы мы провели интервью с командой клиента и глубокий анализ конкурентов. Это позволило выделить ключевые точки роста для Kvarta: современность и понятность.

Современность мы решили отразить через обновлённый фирменный стиль и актуальный дизайн сайта.

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

Инструменты, которые мы использовали при проектировании:

– Матрица смыслов;

– Benchmarking;

– Use cases;

– High fidelity prototypes.

Внутренние страницы

4. Дизайн, вдохновленный металлом

Одной из ключевых фишек сайта стал динамичный логотип, который буквально оживает на глазах у пользователя. В прелоадере он адаптируется и растягивается, плавно превращаясь в хедер. Этот приём не только привлекает внимание, но и подчёркивает гибкость и разноплановость направлений Kvarta.

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

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

Карточка товара

5. 3D и видео продакшн

Визуальной доминантой главной страницы стали четыре 3D-motion ролика, которые не только привлекают внимание, но и наглядно показывают ценностное предложение компании.

Мы уделили особое внимание деталям:

– Свет и текстуры были настроены так, чтобы добиться максимально реалистичного изображения металла.

– Анимация оборудования достоверно демонстирует принцип работы ЧПУ-станков.

Инструменты, которые мы использовали:

Blender (Cycles)

3DSMax (V-Ray)

Cinema 4D (Redshift)

After Effects

Визуальная доминанта главной страницы – четыре 3D-motion-ролика. 

В результате тщательной работы
со светом и текстурами нам удалось достичь реалистичного изображения металла и достоверной работы оборудования. 

6. Разработка

Стек технологий:

Фронтенд: HTML5, CSS3, Javascript, Webpack, Pug

Бэкенд: 1C-Bitrix

Интеграция с Битрикс24 для вывода технических характеристик на странице оборудования.

Результат

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

Корпоративный сайт стал важным инструментом для достижения имиджевых целей компании. Он презентует обновленный бренд компании и дает пользователям возможность ознакомиться с товаро-сервисным предложением Kvarta.

Итог

Мы создали современный фирменный стиль с упором на специализацию компании, который прекрасно адаптируется как в digital-среде, так и в печатной продукции и мерче компании.

Новый корпоративный сайт полностью удовлетворяет имиджевым целям компании.

  Еще больше идей, кейсов и новостей от Only— на сайте, в Dprofile и Telegram.  

Категории: Кейсы
Теги: UXUI