Фирменный стиль и сайт компании «Победит»
Для компании, которая поставляет, монтирует и ремонтирует судовое радио- и навигационное оборудование, мы с нуля создали логотип и фирменный стиль, а затем сайт, который говорит на языке этого стиля.
Сайт сейчас не на нашем обслуживании. На действующем сайте могут быть изменения: показываем проект таким, каким мы его запускали.
Не просто сайт, а целая айдентика: сначала мы нарисовали знак, цвета и шрифты, а потом на их основе собрали сайт, который выглядит как часть одного бренда.
О клиенте
«Победит» оперативно решает задачи по поставке, монтажу и ремонту судового радио и навигационного оборудования. Компания работает с 1996 года, и этот год стал частью её логотипа.
Задача
У компании не было ни узнаваемого знака, ни единого стиля. Нужно было создать фирменную идентику и сайт, который показывает оборудование, услуги и опыт, и одинаково хорошо смотрится на компьютере, планшете и телефоне.
Решение
Разработали логотип и фирменный стиль с нуля, собрали брендбук, спроектировали сайт в Figma и реализовали его на 1С-Битрикс. Анимации выполнены на Json Animations, а формы защищены невидимой reCAPTCHA.
Якорь, штурвал и волны в одном знаке
Знак собран из морских символов: штурвал держит якорь, а под ним бегут волны. Логотип существует в трёх версиях: полная на латинице, полная на кириллице и отдельный знак. Переключайте версии и фон.
Три цвета, один главный
Северный Синий используется примерно в 85% коммуникации. Белый и чёрный дополняют его и помогают расставить акценты.
Comfortaa и DM Sans
Победит
Аа Бб Вв Гг Дд 0123456789Победит
Аа Бб Вв Гг Дд 0123456789Весь стиль в одном документе
Брендбук фиксирует правила: как использовать знак и цвет, какие шрифты применять, как стиль выглядит на бумаге, одежде и транспорте. Листайте страницы.
От визитки до фургона
Сначала структура, потом красота
Перед дизайном собрали прототип в Figma: структуру главной, каталога и карточек. Потяните ползунок, чтобы увидеть, как серый каркас превратился в готовый экран.
- Структура страниц согласована до дизайна
- Блоки каталога, услуг и новостей на каркасах
- Отдельные версии для компьютера, планшета и телефона
ПрототипДизайн
Судно на синей воде и слоган про сервис
Главный экран строится на фотографии судна в фирменном синем. Крупный слоган, меню с языком RU и EN, кнопка входа. Наведите на точки, чтобы увидеть детали.
- Знак и название компании в шапке
- Переключатель языка RU и EN
- Фирменный синий цвет в кнопках и акцентах
От оборудования до новостей
Главная собирает каталог оборудования, услуги, цифры компании и новости. Скролльте страницу, окно справа прокручивается вместе с вами.
Каталог судового оборудования
Плитки по типам: навигационные радары, автопилоты, компасы, АИС, эхолоты и другие. Внутри карточка с фото, техническими характеристиками и кнопкой «Запросить стоимость».
- Крупные фото оборудования
- Технические характеристики в таблице
- Запрос стоимости в один клик
Услуги, компания и карточка
Компьютер, планшет и телефон
Для каждого устройства нарисованы отдельные экраны: компьютер 1920 px, планшет 834 px и телефон 375 px. Меню на телефоне выезжает на весь экран в фирменном синем.
Под капотом
Фирменный стиль «под ключ»
Мы не взяли готовый макет, а создали бренд с нуля и распространили его на сайт и носители.
- Логотип в трёх версиях
- Цвета и шрифты
- Брендбук
- Бланки, визитки, бейджи, одежда, транспорт
Невидимая защита от спама
Формы защищены reCAPTCHA v3: посетитель ничего не вводит, а лишние заявки отсекаются.
Анимации на Json Animations
SEO перед запуском
<title>Победит — морская электроника
<h1>Монтаж и береговое обслуживание
<meta name="description" …Пример структуры метаданных
- Почтовые шаблоныНастроены уведомления о заявках
- Mobile-FriendlyПолная адаптивность проекта
- НаполнениеКонтент подготовлен и загружен нами
От знака до запуска
- 1
Логотип
Знак, начертания и версии
- 2
Фирменный стиль
Цвета, шрифты, брендбук
- 3
Прототип
Структура сайта в Figma
- 4
Дизайн
Компьютер, планшет, телефон
- 5
Разработка
1С-Битрикс, анимации, формы
- 6
Наполнение и SEO
Контент и подготовка к запуску
Нужен бренд и сайт с нуля?
Оставьте заявку — придумаем знак, стиль и соберём сайт, который выглядит как единое целое.
