фирменный стиль и сервис онлайн-подбора оборудования для производителя систем оповещения - media-bay

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

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

[сервис]
[айдентика и брендинг]
[проектирование]
[ui/ux]

о проекте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карточки товаров оформлены минималистично и функционально: в превью — только ключевые параметры и фото, а полное описание и технические характеристики доступны на отдельной странице товара.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

комментарии команды

Мария Падалко

Проджект менеджер

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

Для достижения этой цели мы работали комплексно: каждый этап был продуман до мелочей.

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

команда проекта

арт-директор

Андрей Иванов

менеджер проекта

Мария Падалко

аналитика

Мария Падалко

дизайн

Алёна Булганина

разработка

Александр Курносов

над кейсом работали

Ксения Колмагорова

Мария Падалко

Алёна Серёгина

подписывайтесь на наш telegram‑канал

там мы шутим, рассказываем про проекты и делимся опытом

Дизайн-причал Media Bay

Подписаться

Обсудить задачу

Екатерина Ивлева

[Коммерческий директор]

ответит на ваши вопросы, расскажет про подход и технологии

Написать в Телеграм

    Оставьте контакты

    Расскажите о задаче

    Заполняя форму, вы соглашаетесь на обработку персональных данных

    [следующий прооект]

    Язык свободы и андеграунда: разработка интернет-магазина для берлинского бренда FUENF

    Сосредоточились на продуктах и представили новую коллекцию FUENF, передав идею и атмосферу бренда. разработали концепты принтов для новой одежды. Интегрировали на сайт 3D-модели для усиления футуристичного образа и реализовали удобный процесс покупки двумя способами — с помощью PayPal или банковской карты

    [e-commerce]
    [сайты]
    [проектирование]
    [разработка]
    [ui/ux]