Z1 Lighting Tools
Задачи:
- Создание дизайн-концепции — Разработать современный, эстетически привлекательный и функциональный дизайн, вдохновлённый проектами компании.
- Анимация и интерактивность — Реализовать анимацию загрузки сайта, вдохновлённую инсталляциями заказчика, с несколькими вариациями, символизирующими проникновение света сквозь тьму.
- Функциональный конфигуратор светильников — Создать мощный инструмент для подбора светильников, способный обрабатывать тысячи вариаций и артикулов.
- Мультиязычность и гибкость управления контентом — Реализовать возможность создания и размещения многоязычного контента с помощью удобного конструктора страниц.
Описание:
Компания Z1 Lighting Tools — ведущий производитель высокотехнологичной и современной светотехнической продукции, создающий освещение для самых значимых архитектурных объектов России. Среди клиентов компании — Сколково, Совет Федерации, Лахта Центр, аэропорт Платов, СберБанк Сити, а также офисы крупных компаний: Яндекс, Росатом, МТС, Авито и многие другие.
Технологии:
Laravel
Наша роль:
- Проектирование
- UI дизайн
- Верстка
- Front-end
- Back-end
- Техническая поддержка
- Тестирование
Современная
дизайн-концепция
Команда дизайнеров под руководством Анны Галактионовой разработала лаконичный, минималистичный и при этом выразительный дизайн сайта, который подчёркивает особый статус компании и её проектов.
Анимация на
главной странице
Было предложено 4 варианта анимации загрузки экрана, выполненных на pixi.js. Основная анимация повторяет реальную световую инсталляцию заказчика и символизирует букву Z, рассыпающуюся на лучи света, собирающиеся в геометрические формы.
Продвинутый
конфигуратор
Изначально предполагалось простое решение, но в процессе работы стало ясно, что необходим более сложный механизм, позволяющий пользователям быстро и удобно подбирать тысячи вариантов светильников по техническим характеристикам. Был создан кастомный конфигуратор, поддерживающий:
- Управление десятками тысяч артикулов через документоориентированную базу данных;
- Сложную логику отображения и фильтрации характеристик, исключение не возможных вариантов конфигурации;
- Гибкое управление настройками конфигуратора из админ-панели.
Техническая
реализация сайта
Сайт реализован в формате SPA (Single Page Application) с серверным рендерингом (SSR), обеспечивая высокую производительность, быструю загрузку и качественную SEO-оптимизацию.
Стек технологий: Laravel, Vue.js (Nuxt.js), Tailwind CSS
Кастомная
админ-панель
Реализована удобная админ-панель с разграничением прав доступа (администратор, сотрудник), двухфакторной аутентификацией и логированием действий пользователей, обеспечивающая безопасность и удобство работы с контентом.
Админ-панель. Раздел товаров
Админ-панель. Редактирование категории
Админ-панель. Раздел проекты
Админ-панель. Заявка на заказ
Мультиязычность
и контент
Благодаря использованию конструктора страниц Grapes.js, была достигнута максимальная гибкость в размещении контента на разных языках, что делает сайт удобным и актуальным для международной аудитории.
Проект был реализован
командой из 10 человек
за 10 месяцев
Результат
Получился быстрый, мощный и гибко настраиваемый инструмент для профессионалов рынка освещения — архитекторов и инженеров. Сайт Z1 Lighting стал одним из самых сложных и успешных проектов нашей команды, где эстетичный дизайн органично сочетается со сложным функционалом.