Переходи на светлую сторону: сайт для производителя светодиодных лент Lucent

Lucent — бренд светового оборудования, который только выходит на рынок. Компания работает в b2b: поставляет светодиодные ленты и другое оснащение оптовикам. Брендинг и слоган «На светлой стороне» у Lucent были, а за сайтом клиент обратился в AVA Digital.

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

Основной идеей визуала стал переход экранов из светлого в темный. Чтобы показать светодиодную ленту — основной товар компании, наиболее эффектно будет положить светящийся объект на темный фон. Но такой каталог товаров быстро утомит покупателя, тем более в b2b, где с сайтом взаимодействуют не один раз, а регулярно.

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

Работу провели в три этапа:

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

2. В дизайне раскрыли идею бренда, воплотили слоган компании и сделали акцент на световые решения.

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

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

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

Сайт создавался на Битриксе, что для нас нетипично. Это усложнило разработку, но дало клиенту возможность интеграции с 1С, которую предоставляет платформа.

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

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

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

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

Прокрутку страницы сопровождает лента, которая заливается неоновым светом при скролле. Lottie-анимации и эффекты свечения, разработанные в After Effects, поддерживают единый визуальный язык сайта.

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

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

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

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