onoot
1. Продукт и задача B2B-сайт оптового поставщика сантехнического оборудования , труб и комплектующих. Барнаул , Павловский тракт 311. Собственный склад , отгрузка от 1 короба , работа с НДС , отсрочка до 30 дней. Клиенты: застройщики , подрядчики , УК в Алтайском крае , Новосибирской области и других регионах Сибири. На рынке с 1997 года. Задача дизайна: за 5 секунд передать «серьёзный , надёжный , современный поставщик» и привести посетителя к запросу цены или заявке. Тон: инженерная сдержанность , без пафоса и сленга. Доверие строится на цифрах и фактах. Ключевые цифры: 18 лет на рынке · 1948 позиций в каталоге · 93+ реализованных объекта · смета за 24 часа. Важно: 3D-моделей , WebGL и трёхмерных эффектов на сайте нет. Ощущение дорогого , живого продукта создаётся типографикой , светом , стеклом , реальной фотографией и тонкой анимацией. 2. Визуальный язык Палитра (значения не менять): brand #00649A · brand-bright #0086C9 · brand-ink #00547F accent #E5661A — только для акцентов , цифр и одной линии на экране , не для заливок Светлая тема: bg #F2F5FA , bg-soft #E7ECF5 , text #0C1526 , text-dim #5A6A85 Тёмная тема: bg #05070F , bg-soft #0A0F1E Логотип: синий скруглённый квадрат , белая «П» контуром , оранжевая линия ЭКГ внизу. Три версии: основная , светлая (для тёмного фона) , тёмная (для светлого фона). Логика в навбаре: на тёмном hero используется версия для тёмного фона , после прокрутки (светлая плашка навбара) версия для светлого фона. Типографика: только два шрифта , без засечек. Outfit 800 для заголовков и цифр , трекинг −0.03em на крупных размерах Manrope 400–700 для интерфейса и текста Сетка и ритм: Контейнер 1220px , поля 15px (на узких экранах 20px) , 12 колонок Шаг отступов 4px; секции 96–128px по вертикали , плотные блоки 48px Радиусы: карточки 16px , кнопки и поля 12px , чипы 999px 3. Чем заменяем 3D (фирменный приём сайта) Один сквозной мотив: линия пульса (ЭКГ) как тонкая оранжевая SVG-линия. В hero она рисуется за 700ms по кривой от левого края к правому , проходя под заголовком В навбаре и подвале присутствует как тонкий разделитель В блоке «Цифры» линия соединяет три карточки В остальных секциях не повторяется. Один раз на экран Дополнительные приёмы «лоска» без 3D: Hero: тёмный фон с мягким радиальным свечением brand (8–12% непрозрачности) , очень тонкая сетка-чертёж 1px при 4% непрозрачности. Справа крупное студийное фото ключевого товара (водомер , шаровой кран , фитинг) с вырезанным фоном , лёгкая тень под ним. При скролле фото смещается параллаксом на 20–40px , а заголовок остаётся на месте Стеклянные карточки поверх тёмного hero: backdrop-blur 16px , граница 1px rgba(255 , 255 , 255 , 0.12). В них живые факты («Склад: в наличии 1948 позиций» , «Смета за 24 часа») Тонкий «чертёжный» акцент: размерные линии и выноски в стиле технического чертежа вокруг фото товара , нарисованные тонким SVG Фото наклона нет. Hover на карточках: подъём на 4px , тень мягче и шире , изображение увеличивается на 1.03 4. Паттерны Apple (обязательны) Иерархия вместо декора. Один акцент на экран. Размер и вес , а не цвет и тени. Не более двух насыщенных цветов на экране: brand и accent. Крупная типографика. Заголовок секции 40–56px на десктопе , 28–32px на мобиле. line-height 1.05–1.1 у заголовков , 1.6 у текста. Короткие строки , не заполнять экран текстом. Воздух. Пустое место — элемент дизайна. Выравнивание по базовой линии. Материалы , а не рамки. Стекло (blur 12–20px) , мягкие тени 0 2px 12px rgba(0 , 0 , 0 , 0.06) , границы 1px rgba(13 , 27 , 51 , 0.1). Без двойных рамок и пунктиров. Плавность. 120–180ms hover , 200–300ms появление , 600–800ms hero-анимация. Кривая cubic-bezier(0.22 , 1 , 0.36 , 1). Без пружин и отскоков. Появление секций при скролле: fade + сдвиг на 16px. Отклик на действие. Нажатие: scale 0.98 или opacity. Состояния hover / focus / active / disabled на каждом интерактивном элементе. Focus-visible. 2px accent , без обводки при клике мышью , полная клавиатурная навигация. Мгновенный первый экран. Статичный hero с осмысленным h1 , без «загрузки» и скелетонов. Учитывать prefers-reduced-motion: анимации отключаются. 5. Композиционные паттерны Единый ритм секции: eyebrow → заголовок → контент. Чередование фонов: светлый bg и bg-soft , секции читаются как страницы. Тёмный блок на главной один — hero. Асимметрия 60/40: hero и «О компании» — текст слева , визуал справа. Остальные секции не зеркалить. Один акцентный объект на экран: не смешивать иллюстрацию , цифры и фото в одной секции. Зацикленные ленты: бренды , отзывы , проекты. Бесконечная лента , пауза при наведении , без кнопок прокрутки. Bento-сетка для блока преимуществ и «Ассортимента»: карточки разного размера в одной сетке , крупная карточка задаёт главное. Мобильный первый: на 375px одна колонка , кнопка на всю ширину , sticky-CTA внизу на карточке товара. 6. Страницы и секции Главная Hero. Тёмный фон , eyebrow , h1 , подзаголовок , две кнопки (синяя основная «Запросить смету» , стеклянная вторичная «Открыть каталог»). Справа фото товара с чертёжными выносками , стеклянные карточки с фактами , линия ЭКГ. Слайдер из трёх баннеров (акции , новинки , условия) , переключение плавным кроссфейдом. Цифры. «Проверено объёмами». Три карточки по центру (макс. 1000px) , цифры градиентом brand → accent , подпись под ними. Эта секция задаёт ритм всей страницы. О компании. 60/40: текст и чек-лист из 6 пунктов слева , фото склада или объекта справа. Бренды. Бесконечная лента логотипов на подложке bg-soft , логотипы монохромные , при наведении цветные. Наши работы. 3–4 карточки проектов: крупное фото реального объекта , название , город , тип. Hover: подъём и увеличение фото. Ссылка «Все проекты». Каталог. Карусель превью товаров , кнопка «В каталог». Отзывы и блог. Компактная лента отзывов и 2–3 свежие статьи. Финальный CTA. Один крупный призыв и форма обратной связи. Подвал. Контакты , реквизиты , режим работы , карта 2ГИС. Каталог Хлебные крошки , фильтры (категория , цена , наличие) , поиск , сортировка , сетка товаров. Карточка: фото , название , ключевые характеристики , наличие , «цена по запросу». Счётчик найденного , пагинация или бесконечная лента. На мобиле фильтры в нижней шторке. Карточка товара Галерея с зумом , характеристики таблицей , CTA «Запросить цену» и «Добавить в заявку» , блок наличия на складе. На мобиле sticky-панель с остатком и кнопкой. О компании Hero-блок , текст о компании , «Ключевые показатели» , «Ассортимент продукции» (bento-сетка) , благодарственные письма в галерее с просмотром. Наши проекты Фильтр по категории , крупные кейсы по схеме «задача → решение → результат» , галерея объекта. Доставка и оплата Три шага заказа , таблица тарифов по городам , условия отсрочки до 30 дней , блок частых вопросов (аккордеон). Контакты Карточки: телефон , email , адрес , режим работы. Встроенная карта 2ГИС. Форма общего запроса. 404 Спокойный экран с логотипом , ссылкой на каталог и контактом поддержки. Админка / кабинет Плотная сетка , таблицы , формы загрузки медиа , предпросмотр изменений. Тёмная тема допустима. Здесь плотность важнее воздуха. 7. Функции , которые должны быть видны в дизайне Корзина заявок и список отправленных запросов Авторизация в кабинет дилера , смена роли Каталог с фильтрами и поиском Загрузка и автоматическое сжатие фото товаров Лента новостей и блог Отзывы с модерацией Статистика для менеджера Печатная версия счёта и КП (отдельный макет: логотип , реквизиты , таблица позиций , итог) Подготовка к мультиязычности (RU обязателен): переключатель языка в навбаре и подвале 8. Ограничения Никаких 3D , WebGL , вращающихся и наклоняющихся элементов Никаких смайлов в интерфейсе Никаких градиентов от розового к фиолетовому Никаких drop-shadow текста и бликов Никакого автоплея со звуком Без stock-фото людей в деловых костюмах , только кадры с реальных объектов и склада Анимации не дольше 800ms и не мешают чтению 9. Что отдать на выходе Дизайн-система в Figma: цвета , типографическая шкала , сетка , компоненты (кнопка , карточка , поле , чип , таблица , стеклянная карточка , аккордеон) , состояния компонентов. По одному фрейму каждой страницы: светлая тема , тёмная тема , мобильная версия 375px , плюс макет печатного КП. Что я поправил в исходнике: Логотип в навбаре: в двух местах было написано противоположное. Теперь логика одна: на тёмном фоне светлая версия логотипа , на светлой плашке тёмная. «Личный кабинет и персональные данные не собираем» противоречило авторизации дилера и формам заявок. Я убрал эту строку. Если у вас действительно есть такое ограничение , уточните , какие именно поля допустимы. Ритм «одной линии accent на экран» теперь реализован через линию ЭКГ. ,
1. Продукт и задача B2B-сайт оптового поставщика сантехнического оборудования , труб и комплектующих. Барнаул , Павловский тракт 311. Собственный склад , отгрузка от 1 короба , работа с НДС , отсрочка до 30 дней. Клиенты: застройщики , подрядчики , УК в Алтайском крае , Новосибирской области и других регионах Сибири. На рынке с 1997 года. Задача дизайна: за 5 секунд передать «серьёзный , надёжный , современный поставщик» и привести посетителя к запросу цены или заявке. Тон: инженерная сдержанность , без пафоса и сленга. Доверие строится на цифрах и фактах. Ключевые цифры: 18 лет на рынке · 1948 позиций в каталоге · 93+ реализованных объекта · смета за 24 часа. Важно: 3D-моделей , WebGL и трёхмерных эффектов на сайте нет. Ощущение дорогого , живого продукта создаётся типографикой , светом , стеклом , реальной фотографией и тонкой анимацией. 2. Визуальный язык Палитра (значения не менять): brand #00649A · brand-bright #0086C9 · brand-ink #00547F accent #E5661A — только для акцентов , цифр и одной линии на экране , не для заливок Светлая тема: bg #F2F5FA , bg-soft #E7ECF5 , text #0C1526 , text-dim #5A6A85 Тёмная тема: bg #05070F , bg-soft #0A0F1E Логотип: синий скруглённый квадрат , белая «П» контуром , оранжевая линия ЭКГ внизу. Три версии: основная , светлая (для тёмного фона) , тёмная (для светлого фона). Логика в навбаре: на тёмном hero используется версия для тёмного фона , после прокрутки (светлая плашка навбара) версия для светлого фона. Типографика: только два шрифта , без засечек. Outfit 800 для заголовков и цифр , трекинг −0.03em на крупных размерах Manrope 400–700 для интерфейса и текста Сетка и ритм: Контейнер 1220px , поля 15px (на узких экранах 20px) , 12 колонок Шаг отступов 4px; секции 96–128px по вертикали , плотные блоки 48px Радиусы: карточки 16px , кнопки и поля 12px , чипы 999px 3. Чем заменяем 3D (фирменный приём сайта) Один сквозной мотив: линия пульса (ЭКГ) как тонкая оранжевая SVG-линия. В hero она рисуется за 700ms по кривой от левого края к правому , проходя под заголовком В навбаре и подвале присутствует как тонкий разделитель В блоке «Цифры» линия соединяет три карточки В остальных секциях не повторяется. Один раз на экран Дополнительные приёмы «лоска» без 3D: Hero: тёмный фон с мягким радиальным свечением brand (8–12% непрозрачности) , очень тонкая сетка-чертёж 1px при 4% непрозрачности. Справа крупное студийное фото ключевого товара (водомер , шаровой кран , фитинг) с вырезанным фоном , лёгкая тень под ним. При скролле фото смещается параллаксом на 20–40px , а заголовок остаётся на месте Стеклянные карточки поверх тёмного hero: backdrop-blur 16px , граница 1px rgba(255 , 255 , 255 , 0.12). В них живые факты («Склад: в наличии 1948 позиций» , «Смета за 24 часа») Тонкий «чертёжный» акцент: размерные линии и выноски в стиле технического чертежа вокруг фото товара , нарисованные тонким SVG Фото наклона нет. Hover на карточках: подъём на 4px , тень мягче и шире , изображение увеличивается на 1.03 4. Паттерны Apple (обязательны) Иерархия вместо декора. Один акцент на экран. Размер и вес , а не цвет и тени. Не более двух насыщенных цветов на экране: brand и accent. Крупная типографика. Заголовок секции 40–56px на десктопе , 28–32px на мобиле. line-height 1.05–1.1 у заголовков , 1.6 у текста. Короткие строки , не заполнять экран текстом. Воздух. Пустое место — элемент дизайна. Выравнивание по базовой линии. Материалы , а не рамки. Стекло (blur 12–20px) , мягкие тени 0 2px 12px rgba(0 , 0 , 0 , 0.06) , границы 1px rgba(13 , 27 , 51 , 0.1). Без двойных рамок и пунктиров. Плавность. 120–180ms hover , 200–300ms появление , 600–800ms hero-анимация. Кривая cubic-bezier(0.22 , 1 , 0.36 , 1). Без пружин и отскоков. Появление секций при скролле: fade + сдвиг на 16px. Отклик на действие. Нажатие: scale 0.98 или opacity. Состояния hover / focus / active / disabled на каждом интерактивном элементе. Focus-visible. 2px accent , без обводки при клике мышью , полная клавиатурная навигация. Мгновенный первый экран. Статичный hero с осмысленным h1 , без «загрузки» и скелетонов. Учитывать prefers-reduced-motion: анимации отключаются. 5. Композиционные паттерны Единый ритм секции: eyebrow → заголовок → контент. Чередование фонов: светлый bg и bg-soft , секции читаются как страницы. Тёмный блок на главной один — hero. Асимметрия 60/40: hero и «О компании» — текст слева , визуал справа. Остальные секции не зеркалить. Один акцентный объект на экран: не смешивать иллюстрацию , цифры и фото в одной секции. Зацикленные ленты: бренды , отзывы , проекты. Бесконечная лента , пауза при наведении , без кнопок прокрутки. Bento-сетка для блока преимуществ и «Ассортимента»: карточки разного размера в одной сетке , крупная карточка задаёт главное. Мобильный первый: на 375px одна колонка , кнопка на всю ширину , sticky-CTA внизу на карточке товара. 6. Страницы и секции Главная Hero. Тёмный фон , eyebrow , h1 , подзаголовок , две кнопки (синяя основная «Запросить смету» , стеклянная вторичная «Открыть каталог»). Справа фото товара с чертёжными выносками , стеклянные карточки с фактами , линия ЭКГ. Слайдер из трёх баннеров (акции , новинки , условия) , переключение плавным кроссфейдом. Цифры. «Проверено объёмами». Три карточки по центру (макс. 1000px) , цифры градиентом brand → accent , подпись под ними. Эта секция задаёт ритм всей страницы. О компании. 60/40: текст и чек-лист из 6 пунктов слева , фото склада или объекта справа. Бренды. Бесконечная лента логотипов на подложке bg-soft , логотипы монохромные , при наведении цветные. Наши работы. 3–4 карточки проектов: крупное фото реального объекта , название , город , тип. Hover: подъём и увеличение фото. Ссылка «Все проекты». Каталог. Карусель превью товаров , кнопка «В каталог». Отзывы и блог. Компактная лента отзывов и 2–3 свежие статьи. Финальный CTA. Один крупный призыв и форма обратной связи. Подвал. Контакты , реквизиты , режим работы , карта 2ГИС. Каталог Хлебные крошки , фильтры (категория , цена , наличие) , поиск , сортировка , сетка товаров. Карточка: фото , название , ключевые характеристики , наличие , «цена по запросу». Счётчик найденного , пагинация или бесконечная лента. На мобиле фильтры в нижней шторке. Карточка товара Галерея с зумом , характеристики таблицей , CTA «Запросить цену» и «Добавить в заявку» , блок наличия на складе. На мобиле sticky-панель с остатком и кнопкой. О компании Hero-блок , текст о компании , «Ключевые показатели» , «Ассортимент продукции» (bento-сетка) , благодарственные письма в галерее с просмотром. Наши проекты Фильтр по категории , крупные кейсы по схеме «задача → решение → результат» , галерея объекта. Доставка и оплата Три шага заказа , таблица тарифов по городам , условия отсрочки до 30 дней , блок частых вопросов (аккордеон). Контакты Карточки: телефон , email , адрес , режим работы. Встроенная карта 2ГИС. Форма общего запроса. 404 Спокойный экран с логотипом , ссылкой на каталог и контактом поддержки. Админка / кабинет Плотная сетка , таблицы , формы загрузки медиа , предпросмотр изменений. Тёмная тема допустима. Здесь плотность важнее воздуха. 7. Функции , которые должны быть видны в дизайне Корзина заявок и список отправленных запросов Авторизация в кабинет дилера , смена роли Каталог с фильтрами и поиском Загрузка и автоматическое сжатие фото товаров Лента новостей и блог Отзывы с модерацией Статистика для менеджера Печатная версия счёта и КП (отдельный макет: логотип , реквизиты , таблица позиций , итог) Подготовка к мультиязычности (RU обязателен): переключатель языка в навбаре и подвале 8. Ограничения Никаких 3D , WebGL , вращающихся и наклоняющихся элементов Никаких смайлов в интерфейсе Никаких градиентов от розового к фиолетовому Никаких drop-shadow текста и бликов Никакого автоплея со звуком Без stock-фото людей в деловых костюмах , только кадры с реальных объектов и склада Анимации не дольше 800ms и не мешают чтению 9. Что отдать на выходе Дизайн-система в Figma: цвета , типографическая шкала , сетка , компоненты (кнопка , карточка , поле , чип , таблица , стеклянная карточка , аккордеон) , состояния компонентов. По одному фрейму каждой страницы: светлая тема , тёмная тема , мобильная версия 375px , плюс макет печатного КП. Что я поправил в исходнике: Логотип в навбаре: в двух местах было написано противоположное. Теперь логика одна: на тёмном фоне светлая версия логотипа , на светлой плашке тёмная. «Личный кабинет и персональные данные не собираем» противоречило авторизации дилера и формам заявок. Я убрал эту строку. Если у вас действительно есть такое ограничение , уточните , какие именно поля допустимы. Ритм «одной линии accent на экран» теперь реализован через линию ЭКГ. ,