Дизайн сайта производителя вакуумных захватов и промышленных манипуляторов

1. Общие сведения
Тип сайта: Промышленный B2B-сайт с каталогом, карточками товаров, блогом и сервисными разделами.
Цель: Создать строгий, техничный, функциональный шаблон, который вызывает доверие у инженеров и руководителей производства, удобен для ежедневного использования и не требует переделок при верстке.

2. Требования к визуальному стилю
Общее настроение: Строгий, лаконичный, индустриальный. Никаких излишних декоративных элементов.
Углы и формы: умеренные скругления, строгий стиль.
Запрещено: Мелькающие анимации, прыгающие кнопки, огромные текстовые блоки, «воздушные» пустоты, огромные полноэкранные картинки без контента.
Цветовая гамма (можно пересмотреть): Фон основной: #ffffff (белый)
Темный текст и элементы: #292929 
Серые акценты, линии, второстепенный текст: #585858
Акцентный цвет (кнопки, ссылки, иконки, выделения): #ffc815 (желтый)

Шрифты: Гротески (рубленые), например, Inter, Manrope, Roboto. Все размеры, насыщенности, междустрочные интервалы должны быть вынесены в типографические стили Figma.

Меню верхнее, залипающее. Возможно мегаменю для отображения категорий.

3. Структура шаблона 
3.1. Главная страница (строго по порядку блоков, блоки обсудим перед началом работ)
3.2. Страница «Каталог продукции»
3.3. Страница категории
Особая фильтрация «По типу груза»:
(перечень типов груза: «листовое стекло», «мешки», «коробки», «металлические листы» и т.д.).
Каждый тип → загружает страницу с SEO-текстом и отфильтрованными товарами.
3.4. Карточка товара (метки о наличии)
3.5. Раздел меню «Решения» (выпадающее / раскрывающееся)
Подменю «По отраслям»:
6-8 разделов.
Оформление: фон картинкой (отрасль), название, ссылка на раздел с 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. Референсы
Композиция: шаблон TemplateMonster №67725 
Конкуренты:  Vakuumkraft (в зоне ru), сайт компании ruschmalz (зона ru), anvido (зона ru)

9. Что дизайнер не должен делать
Сильные скругления углов.
Огромные пустые области (white space в разумных пределах допустим, но без «воздуха» ради воздуха).
Анимированные или прыгающие кнопки, сложные CSS-анимации в статическом макете.
Использовать цвета, отличные от утверждённой палитры (по согласованию).
Добавлять вымышленный контент (рыбу) в важных блоках – использовать осмысленные тексты-заглушки по согласованию.

10. Итоговый состав передаваемых материалов
Файл Figma с макетами всех страниц и всех версий (десктоп, планшет, мобильный).
Экспортированные иконки и элементы в папке.
Краткий гайд по стилям (можно в виде отдельной страницы в Figma).