Разработка фирменного стиля и сервиса онлайн-подбора оборудования для производителя систем оповещения

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

О проекте

Заказчик — научно-производственное предприятие «МЕТА», с 1993 года занимается разработкой, производством и поставкой систем оповещения о пожарах и чрезвычайных ситуациях, а также оборудования для звукового вещания и радиосвязи.

На старте у «МЕТЫ» был устаревший и неудобный сайт без визуальной концепции. Фирменные цвета — синий, красный и белый — использовались хаотично, а логотип представлял собой сочетание четырёх букв «М» и шрифтовой части, стиль которой со временем утратил актуальность. Корпоративные носители при этом вовсе не были проработаны.

Мы решили провести полноценный рестайлинг фирменного стиля НПП «МЕТА». Обновили цветовую палитру: сохранили узнаваемые цвета, но сделали их современнее. Пересобрали логотип — обновили шрифтовую часть, подобрали фирменные гарнитуры и оформили целую систему носителей: от визиток и брендированных кружек до шаблонов email-рассылок.

Фирменный стиль

Существующий логотип выглядел устаревшим, визуально перегруженным и не отражал сути компании как современного технологического производителя.

В новой версии мы сохранили идею четырех букв «М», но переосмыслили форму: теперь соединенные элементы образуют более плавное и сбалансированное пространство в форме мерцающего сигнала. Шрифтовую часть мы полностью обновили — теперь она выполнена в гарнитуре Montserrat Bold и подчёркивает технологичность бренда.  

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

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

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

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

Предпроектная аналитика и проектирование

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

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

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

Раздел о компании

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

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

Каталог оборудования

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

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

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

Готовые решения

Одна из ключевых задач заказчика — сократить путь от запроса до внедрения систем оповещения. Это особенно важно для проектировщиков и специалистов по закупкам, которым нужно быстро оценить, как система будет работать в условиях конкретного объекта.

Для этого мы представили отдельный раздел с готовыми решениями, где системные комплекты структурированы по типам объектов — от детских садов и школ до торговых центров, бизнес-центров и аэропортов.

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

Страница товара

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

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

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

Страницы товара можно редактировать и добавлять в административной панели без обращения к разработчикам: от технической информации и документов до изображений и видео — включая презентационные материалы для конкретных товаров.

Онлайн-подбор оборудования

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

Сервис позволяет пользователю шаг за шагом выбирать параметры своего объекта — от типа помещения до требований по мощности и количеству зон.

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

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

Раздел с документацией

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

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

Новостной раздел

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

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

От запроса к решению: путь проекта

[1] Проанализировали конкурентов и целевую аудиторию. Изучили отраслевые сайты и поведение целевой аудитории. Выявили дефицит современных решений и сделали ставку на понятную, технологичную и визуально чистую подачу. 

[2] Обновили фирменный стиль. Создали визуальную систему, которая отражает надёжность и технологичность бренда, оставаясь масштабируемой и узнаваемой на всех носителях.

[3] Спроектировали структуру нового сайта. Разработали логичную архитектуру сайта с акцентом на быструю навигацию и удобство работы с большим объёмом технической информации. Каждому разделу присвоена чёткая роль в пользовательском пути.

[4] Проработали удобный каталог продукции. Сформировали структуру из более чем 100 позиций, распределённых по категориям и фильтрам. Каталог позволяет проектировщикам быстро находить нужное оборудование и получать по нему полную информацию. 

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

[6] Разработали онлайн-сервис подбора оборудования. Он автоматически формирует оптимальное решение на основе параметров объекта, которые выбирает пользователь под свою задачу. На выходе он получает список оборудования, расчёты и документацию, что упрощает и ускоряет этап предварительного проектирования.