Задание: Дизайнер сайтов. Шаблон сайта производителя вакуумных захватов и промышленных манипуляторов (Дистанционная работа)
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).
