Разработка диаграмм бизнес-процессов
Требуется выполнить два задания по бизнес-аналитике: построить контекстную диаграмму, её декомпозицию и диаграмму дерева в draw.io. Все контактные данные из описания удалены.
Задача: дизайн сайта в Figma (4 ресайза, Bootstrap)
Форматы экранов
- Большой компьютер (1920+ px)
- Стандартный компьютер (1366-1440 px)
- Планшет (768-1024 px)
- Мобильное устройство (320-480 px)
Список страниц для отрисовки
- Главная страница - включает все попапы, всплывающие окна (обратный звонок, предложения и пр.)
- Каталог - с фильтром, поиском, популярными запросами
- Карточка товара - с кнопкой включения/выключения света (режим «день/ночь») - при смене режима выключаются источники света на фото
- Шапка (header) и подвал (footer) - отдельные компоненты (мобильное меню также адаптируется)
- Корзина - уже есть базовая версия, нужна полная адаптация под новую цветовую гамму со стилистикой проекта
- Страница «О нас»
- Страница «Сотрудничество»
- Страница «Контакты / Связаться с нами» - обязательный обратный звонок
Особенности и требования к стилю
- Строгая сетка Bootstrap 5 - все блоки, отступы, колонки, брейкпоинты
- Дизайн должен быть «не как у всех» - необычный, современный, без серых стандартных рамок
- Референсы: взять стилистику салона мебели/света (названия скрыты) - эстетичный, атмосферный визуал с приглушенными тонами
- Фишка: в карточке товара - переключатель on/off светильников (кнопка «Включить свет»): в положении off весь фон/сцена темнеет, а светильник начинает светиться (анимация или просто бросание тени)
- Исходный сайт-образец - полностью пустой шаблон, все функции и компоненты наполняются с личных страниц (крупный бренд люстр и интерьеров)
- Кастомная кнопка «Позвонить» - висящая сбоку (справа), без text, только иконка (плавающий лоу-бар на мобильных)
- Минимизировать упоминания ЛК - убрать из заметных мест, оставить только в подвале или в отдельном разделе меню
- Меню каталога - есть набросок, требуется привести к общей стилистике проекта
- Использовать фотографии товара в уникальной манере - серия стоп-кадров со светом и без
Технические детали
- Расстояние между колонками, размеры шрифтов, контейнеры - в соответствии с Bootstrap 5 (контейнер 1320px, отступы var)
- Актуально применение современных фишек: градиентная сетка на фоне, глянцевый акрил glassmorphism для попапов (но без перебора)
- Мобильная версия должна быть независимым макетом, а не просто сжатым десктопом - для экранов менее 480px тоже свои перестроения
- Все интерактивные состояния: ховер, нажатие, ошибка при ответе поля ввода - обязательны к показу (статически в Figma)
Итоговые требования к техническому писателю
Опиши задания исполнителю простым чётким языком. Дополнительные вопросы решать через личное общение.