Сайт НПП «Бреслер»

Клиент

Научно-производственное предприятие, с 1992 года выпускающее высокотехнологичное оборудование для автоматизации и защиты энергетических объектов. 

Задача

Полностью обновить дизайн и концепцию сайта, а также создать полноценный каталог продуктов и решений, который будет:

• понятным и удобным в навигации;

• информативным с точки зрения технических характеристик;

• адаптированным для размещения документации.

Ключевые цели:

1. Обновить дизайн и структуру сайта.

2. Создать удобный, структурированный каталог продуктов.

3. Разработать карточку товара с полным набором технической информации.

4. Найти эффективное решение для размещения документации.

Решение

Сайт реализован на 1С-Битрикс: Управление сайтом.

Используемые технологии для анимации:

• Анимация — GSAP / CSS

• Анимация SVG — SnapSVG

• Анимация при скролле — GSAP ScrollTrigger

• Слайдеры — Swiper + Creative Effect

• Всплывающие подсказки — tippy.js

• Бегущие строки — marquee3000.js

• Кастомные селекты — slim-select.js

Меню

Учитывая возможность появления новых разделов, реализовано адаптивное гамбургер-меню. При нажатии открывается окно со всеми пунктами, включая те, что указаны только в подвале. Это обеспечивает удобную и логичную навигацию. Телефоны вынесены в отдельную иконку «Связь».

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

Таймлайн

Информацию о компании решили подать в формате таймлайна. Это был предложенный заказчиком вариант, который наглядно отражает многолетнюю историю «Бреслер» и вызывает ассоциации с надёжностью и устойчивостью. Формат оказался и визуально интересным, и функциональным.

Новости

Объём новостей у заказчика небольшой, обновления — нечастые. Чтобы не создавать впечатление «заброшенного» сайта, решили уйти от стандартной плиточной подачи на главной странице.

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

Каталог

Каталог сложный и многоуровневый: раздел → подраздел 1 → подраздел 2 → товар. Основная задача — сделать навигацию по нему максимально удобной.

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

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

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

Также был добавлен отдельный раздел «Решения», где товары сгруппированы по отраслям 

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

• Иконки отраслей показывают, где применяется продукция, при наведении курсора всплывает подсказка с названием отрасли.

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

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

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

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

Документация

Для загрузки и поиска документации реализованы два подхода:

1. Поисковая строка — для тех, кто точно знает модель.

2. Пошаговая система — последовательный выбор направления (раздел → подраздел → товар).

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

Дополнительно документы размещены в отдельной вкладке каждой карточки товара.