1. Цель проекта
Разработать современный, минималистичный и функциональный пользовательский интерфейс (UI) и пользовательский опыт (UX) для веб-сайта-витрины. Дизайн должен отражать профессиональный B2B-характер компании, делать акцент на продукции и обеспечивать интуитивно понятное взаимодействие для потенциальных клиентов.
2. Ключевые задачи дизайнера
Создание визуальной концепции сайта в стиле минимализм, соответствующей фирменному стилю «Коррекс» (или его основам).
Разработка адаптивного дизайна для всех типов устройств (десктоп, планшет, мобильный).
Проектирование и визуальное оформление ключевых страниц и блоков:
Макет главной страницы (слайдер, баннеры, навигация).
Шаблоны страниц категорий и карточек товаров.
Страницы контента («О компании», «Производство» и др.).
Страница «Контакты» с интеграцией карты.
Элементы интерфейса: меню, фильтры, кнопки, формы.
Обеспечение логичной и удобной навигации по каталогу (~100 товаров) с двумя типами группировки: по категориям и по коллекциям.
Визуальная реализация функциональных элементов, таких как фильтрация по атрибутам и форма запроса в карточке товара.
3. Движок и технические ограничения
Платформа: CMS OpenCart 3.
Базовая тема: Journal 3 (премиум-тема для OpenCart).
Важное примечание: Дизайн должен быть реализуем в рамках возможностей темы Journal или с ее минимальной доработкой. Необходимо учитывать, что верстку и функционал будет реализовывать программист на OpenCart. Дизайнер предоставляет статические макеты и рекомендации по интерактивности.
4. Требования к стилю и визуальному оформлению
Стиль: Минимализм.
Принципы:
Чистота и порядок. Минимум декоративных элементов.
Акцент на высококачественных фотографиях продукции.
Простая и понятная типографика. Разборчивые шрифты.
Сдержанная цветовая палитра. Предпочтение отдается фирменным цветам «Коррекс» (если брендбук предоставлен) или нейтральной гамме (белый, серый, черный), которая подчеркивает содержимое.
Пространство (воздух) между элементами.
Функциональность и удобство выше визуальных излишеств.
5. Структура и ключевые страницы для дизайна
Дизайнер должен разработать макеты для следующих страниц и состояний:
Главная страница:
Верхнее меню, шапка с логотипом.
Слайдер (карусель) для 3-5 баннеров.
Блок статичных баннеров (до 10 штук, различной компоновки: сетка, сайдбары).
Блоки для вывода товаров (например, «Новинки», «Популярные»).
Футер с меню, контактами, ссылками на соцсети.
Страница категории / коллекции:
Список товаров в виде сетки.
Боковой блок с фильтрами (по материалам, размерам, объему, коллекциям). Важно продумать визуал открытого/закрытого состояния фильтра, чекбоксов, кнопки «Применить».
Элементы сортировки и настройки отображения.
Хлебные крошки.
Страница карточки товара:
Галерея изображений товара (1-3 фото).
Название, артикул, описание.
Блок с техническими характеристиками (атрибутами).
Динамический информационный блок о материале (ПЭТ, полистирол и т.д.), который появляется в зависимости от характеристик товара. Нужно продумать его визуальное оформление (например, вкладка или аккордеон).
Кнопка «Запросить цену/информацию», при нажатии на которую появляется всплывающее окно с формой (поля: Имя, Телефон/Email, Комментарий).
Признак «Новинка» (визуальная метка на изображении товара).
Информационные страницы («О компании», «Производство»):
Макет для размещения текстового контента и фотографий.
Продумать оформление заголовков, подзаголовков, списков, цитат.
Страница «Контакты»:
Блок с контактной информацией (адрес, телефон, email).
Блок с интерактивной картой (Яндекс.Карты).
Возможно, размещение общей формы обратной связи.
6. Требования к адаптивности
Все макеты должны быть представлены в 3-х разрешениях:
Десктоп (> 1200px)
Планшет (768px - 1199px)
Мобильный (< 767px)
Необходимо продумать и отобразить в макетах:
Адаптивное меню (гамбургер-меню для мобильных устройств).
Изменение расположения блоков (например, фильтры уходят в выпадающее меню на мобильных).
Масштабирование изображений и типографики.
Удобство нажатия на кнопки и ссылки на сенсорных экранах.
7. Результат работы (что предоставляет дизайнер)
Визуальная концепция (Moodboard): Подборка, определяющая общее настроение, цветовую палитру и стилистику.
Интерактивные прототипы в Figma, Adobe XD или аналогичной программе, демонстрирующие основные сценарии взаимодействия пользователя с сайтом.
Статические макеты (Mock-up) всех ключевых страниц (см. п.5) в трех разрешениях (десктоп, планшет, мобильный).
UI-кит (Библиотека компонентов):
Стандартные и hover-состояния всех кнопок.
Поля ввода и формы.
Иконки (или рекомендации по использованию иконок).
Типографика (заголовки H1-H6, основной текст, ссылки).
Цветовая палитра.
Элементы форм (чекбоксы, радиокнопки, селекты).
Рекомендации для разработчика по интерактивным элементам (например, анимация появления формы, переходы между состояниями).
Примечание для дизайнера
На первом этапе сайт является витриной. В дизайне не должно быть элементов, связанных с ценами, корзиной, личным кабинетом или онлайн-оплатой. Основной призыв к действию — «Запросить информацию».
Второй этап (внедрение конструктора товаров) не входит в текущий дизайн-проект и будет обсуждаться отдельно.
Все графические ресурсы (баннеры для слайдера, фотографии товаров, контентные изображения) будут предоставлены Заказчиком.
