Разработка сайта бренда Ферон

Feron — один из лидеров российского рынка светотехники, выпускающий продукцию под собственными торговыми марками Feron и Feron.PRO. Компания работает с 1999 года, имеет высокую репутацию как на российском рынке, так и в странах СНГ и Европы. Ассортимент огромен: лампы (светодиодные, люминесцентные, галогенные, металлогалогенные, филамент), светильники для всех типов освещения, светодиодные ленты, дюралайт, электротовары — десятки категорий и тысячи позиций.

Для бизнеса такого масштаба корпоративный сайт выполняет двойную роль: с одной стороны, это имиджевая площадка и канал коммуникации с партнёрами и B2B-аудиторией, с другой — навигационный хаб, который должен бесшовно подводить посетителя к покупке через отдельный интернет-магазин shop.feron.ru. Именно эта связка корпоративного сайта и каталога-магазина определила архитектуру и ключевые UX-решения проекта.

Задачи

Бизнес-задачи:

Закрепить статус надёжного поставщика с многолетней историей и широкой продуктовой линейкой

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

Обеспечить отдельный, понятный путь для партнёров (дилеров, оптовых покупателей) — раздел «Партнёрам»

Дать пресс-центру и новостям заметное место — компания оперативно информирует аудиторию (включая антифрод-предупреждения о мошенниках, использующих имя бренда)

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

Технические задачи:

Реализовать многоуровневое мегамню с иллюстрированными подкатегориями (десятки разделов с иконками товаров)

Обеспечить быстрый поиск, избранное и сравнение товаров прямо с корпоративного сайта

Подключить PDF-каталоги и брошюры по продукции отдельным структурированным разделом

Гарантировать стабильную работу при большом объёме медиаконтента (видео в карточках, иллюстрации категорий)

Дизайн в Figma

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

Ключевые экраны и компоненты, проработанные в макете:

• Главная страница с навигационным мегаменю по категориям

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

• Карточка товара с видео — превью продукта в реальных условиях

• Раздел «Партнёрам» с отдельным позиционированием для B2B-аудитории

• Пресс-центр / новости с системой уведомлений (включая предупреждения о мошенничестве)

• Раздел PDF-каталогов и брошюр

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

Вёрстка (Frontend)

Адаптивная вёрстка по макетам Figma с особым вниманием к самому сложному компоненту сайта — многоуровневому мегаменю. Структура навигации Feron включает категории (Лампы, Светильники, Светодиодные ленты и дюралайт, Электротовары и другие), внутри каждой — десяток и более подкатегорий, каждая с собственной иконкой-иллюстрацией товара. Вёрстка такого меню требовала:

• Грамотной работы с производительностью при большом количестве изображений в выпадающем блоке (lazy-загрузка иконок подкатегорий)

• Адаптации мегаменю под мобильные устройства — раскрывающаяся аккордеон-навигация вместо горизонтального выпадения

• Единообразной сетки для карточек категорий и товаров независимо от длины названия

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

Кроссбраузерность обеспечена для всех актуальных браузеров, включая корректную работу видео-блоков и мегаменю в Safari и мобильных браузерах — критично для аудитории, заходящей с разных устройств, включая B2B-клиентов со старыми корпоративными браузерами.

Программирование на 1С-Битрикс

Каталог и категории

Структура каталога реализована через инфоблоки 1С-Битрикс с глубокой вложенностью: категория → подкатегория → товар. Для каждой категории — собственная карточка с изображением, описанием и привязкой к разделу каталога. Учитывая масштаб ассортимента Feron (десятки категорий светотехники), потребовалась оптимизация выборок и кэширование на уровне разделов, чтобы мегаменю не нагружало сервер при каждом обращении.

Интеграция с интернет-магазином

Корпоративный сайт и shop.feron.ru работают как единая экосистема при разделении функций: feron.ru — имидж, информация, навигация по категориям; shop.feron.ru — непосредственно витрина с покупкой. Реализована сквозная навигация между доменами, единая авторизация и синхронизация данных каталога, чтобы изменения в товарной матрице не требовали дублирования контента на двух сайтах.

Функциональность пользователя

• Избранное и сравнение товаров — с сохранением состояния для авторизованных и неавторизованных пользователей

• Раздел «Партнёрам» с отдельной логикой доступа и материалами для дилеров

• PDF-каталоги — структурированный раздел с возможностью скачивания брошюр по каждой товарной линейке

Пресс-центр и новости

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

Администрирование

Административная панель 1С-Битрикс настроена для самостоятельного ведения каталога: добавление и редактирование категорий, товаров, новостей, PDF-каталогов — без необходимости привлекать разработчиков для рутинных операций.

Производительность и SEO

• Кэширование на уровне компонентов для мегаменю и каталожных разделов

• Полная SEO-разметка: метатеги для каждой категории и товара, человекопонятные ЧПУ

• Интеграция Яндекс.Метрики для аналитики поведения пользователей по разделам

• 

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

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