1. Общие сведения Тип сайта: Промышленный B2B-сайт с каталогом, карточками товаров, блогом и сервисными разделами. Цель: Создать строгий, техничный, функциональный шаблон, который вызывает доверие у инженеров и руководителей производства, удобен для ежедневного использования и не требует переделок при верстке.
2. Требования к визуальному стилю Общее настроение: Строгий, лаконичный, индустриальный. Никаких излишних декоративных элементов. Углы и формы: Без скруглений — только прямые углы для всех блоков, кнопок, карточек, изображений. Запрещено: Мелькающие анимации, прыгающие кнопки, огромные текстовые блоки, «воздушные» пустоты, огромные полноэкранные картинки без контента. Цветовая гамма (точные коды): Фон основной: #ffffff (белый) Темный текст и элементы: #292929 Серые акценты, линии, второстепенный текст: #585858 Акцентный цвет (кнопки, ссылки, иконки, выделения): #ffc815 (желтый)
Шрифты: Гротески (рубленые), например, Inter, Manrope, Roboto. Все размеры, насыщенности, междустрочные интервалы должны быть вынесены в типографические стили Figma.
3. Структура шаблона (все страницы и разделы) 3.1. Главная страница (строго по порядку блоков) 3.2. Страница «Каталог продукции» 3.3. Страница категории 3.4. Карточка товара 3.5. Раздел меню «Решения» (выпадающее / раскрывающееся) Подменю «По отраслям»: 6–8 разделов. Оформление: фон картинкой (отрасль), название, ссылка на раздел с SEO-текстом и подобранными товарами. Подменю «По типу груза»: Простой список (перечень типов груза: «листовое стекло», «мешки», «коробки», «металлические листы» и т.д.). Каждый тип → ссылка на страницу с SEO-текстом и товарами.
3.6. Раздел «Блог» Общий раздел (список статей): Заголовки статей, даты, фон с картинкой для каждой статьи (или общий фон секции). Ссылки на полные статьи. Страница статьи: Текст с встроенными изображениями и видео (YouTube / RuTube). Заголовки H2, H3. Без сложных конструкций.
3.7. Раздел «Сервис и запчасти» Одна страница: фотография (ремонт, запчасти) и текстовое описание услуг.
3.8. Раздел «Контакты» Адрес (текстом). Часы работы. Телефоны. Email. Карта (Яндекс.Карты) — врезка или заглушка для верстки. Кнопки связи: Telegram и Max.
4. SEO-логика и разметка Дизайнер должен предусмотреть в макете места под следующие элементы (визуально выделенные слои или комментарии): Уникальный H1 на каждой странице. Заголовки H2, H3 в каждом значимом блоке. Поле для Title и Description (можно в виде заметки в Figma). Внутренняя перелинковка (блоки «Похожие товары», «Читайте также»). 5. Адаптивность и мобильная версия Обязательно предоставить дизайн трёх версий: Десктоп (1440px+) Планшет (~768px) Мобильный (~375px)
На мобильной версии: Меню превращается в бургер. Фильтр на странице категории уходит в выезжающую панель или располагается под кнопкой. Таблицы характеристик становятся блочными или горизонтально скроллируемыми. Аккордеон FAQ сохраняет удобство тапов.
6. Технические требования к макету в Figma Работать строго в Figma. Использовать Auto Layout для всех повторяющихся блоков (карточки, списки, сетки). Все стили (цвета, шрифты, эффекты) вынести в Styles. Сетка на десктопе — 12 колонок с отступами. Компоненты: карточка товара, кнопка, инпут, таб, аккордеон — должны быть созданы как Component / Variants. Никаких лишних или устаревших версий — после утверждения все черновики удалить или переместить в архив.
7. Выгрузка для верстки и исходники Макет должен быть подготовлен для передачи верстальщику: Чистая структура слоёв с понятными названиями (например, «Header / Menu / Hero / Product-grid»). Экспорт иконок и изображений в SVG, PNG (2x). Для фоновых картинок указать размеры и рекомендации по экспорту. Добавить комментарии в местах сложного поведения (прилипающее меню, аккордеон, отправка формы).
8. Референсы Общий стиль и строгость: vakuumkraft.ru Композиция: шаблон TemplateMonster №67725 (https://demo.templatemonster.com/demo/67725.html)
9. Что дизайнер не должен делать Скругления углов. Огромные пустые области (white space в разумных пределах допустим, но без «воздуха» ради воздуха). Анимированные или прыгающие кнопки, сложные CSS-анимации в статическом макете. Использовать цвета, отличные от утверждённой палитры (по согласованию). Добавлять вымышленный контент (рыбу) в важных блоках — использовать осмысленные тексты-заглушки по согласованию.
10. Итоговый состав передаваемых материалов Файл Figma с макетами всех страниц и всех версий (десктоп, планшет, мобильный). Экспортированные иконки и элементы в папке. Краткий гайд по стилям (можно в виде отдельной страницы в Figma).
