Разработка адаптивного дизайна для сайта-витрины компании «Коррекс» на OpenCart 3.

[ЛикаАдамова]

1. Цель проекта

Разработать современный, минималистичный и функциональный пользовательский интерфейс (UI) и пользовательский опыт (UX) для веб-сайта-витрины. Дизайн должен отражать профессиональный B2B-характер компании, делать акцент на продукции и обеспечивать интуитивно понятное взаимодействие для потенциальных клиентов.

2. Ключевые задачи дизайнера

• Создание визуальной концепции сайта в стиле минимализм, соответствующей фирменному стилю «Коррекс» (или его основам).
• Разработка адаптивного дизайна для всех типов устройств (десктоп, планшет, мобильный).
• Проектирование и визуальное оформление ключевых страниц и блоков:
  • Макет главной страницы (слайдер, баннеры, навигация).
  • Шаблоны страниц категорий и карточек товаров.
  • Страницы контента («О компании», «Производство» и др.).
  • Страница «Контакты» с интеграцией карты.
  • Элементы интерфейса: меню, фильтры, кнопки, формы.
• Обеспечение логичной и удобной навигации по каталогу (~100 товаров) с двумя типами группировки: по категориям и по коллекциям.
• Визуальная реализация функциональных элементов, таких как фильтрация по атрибутам и форма запроса в карточке товара.

3. Движок и технические ограничения

• Платформа: CMS OpenCart 3.
• Базовая тема: Journal 3 (премиум-тема для OpenCart).
• Важное примечание: Дизайн должен быть реализуем в рамках возможностей темы Journal или с ее минимальной доработкой. Необходимо учитывать, что верстку и функционал будет реализовывать программист на OpenCart. Дизайнер предоставляет статические макеты и рекомендации по интерактивности.

4. Требования к стилю и визуальному оформлению

• Стиль: Минимализм.
• Принципы:
  • Чистота и порядок. Минимум декоративных элементов.
  • Акцент на высококачественных фотографиях продукции.
  • Простая и понятная типографика. Разборчивые шрифты.
  • Сдержанная цветовая палитра. Предпочтение отдается фирменным цветам «Коррекс» (если брендбук предоставлен) или нейтральной гамме (белый, серый, черный), которая подчеркивает содержимое.
  • Пространство (воздух) между элементами.
  • Функциональность и удобство выше визуальных излишеств.

5. Структура и ключевые страницы для дизайна

Дизайнер должен разработать макеты для следующих страниц и состояний:

1. Главная страница:
   • Верхнее меню, шапка с логотипом.
   • Слайдер (карусель) для 3-5 баннеров.
   • Блок статичных баннеров (до 10 штук, различной компоновки: сетка, сайдбары).
   • Блоки для вывода товаров (например, «Новинки», «Популярные»).
   • Футер с меню, контактами, ссылками на соцсети.
2. Страница категории / коллекции:
   • Список товаров в виде сетки.
   • Боковой блок с фильтрами (по материалам, размерам, объему, коллекциям). Важно продумать визуал открытого/закрытого состояния фильтра, чекбоксов, кнопки «Применить».
   • Элементы сортировки и настройки отображения.
   • Хлебные крошки.
3. Страница карточки товара:
   • Галерея изображений товара (1-3 фото).
   • Название, артикул, описание.
   • Блок с техническими характеристиками (атрибутами).
   • Динамический информационный блок о материале (ПЭТ, полистирол и т.д.), который появляется в зависимости от характеристик товара. Нужно продумать его визуальное оформление (например, вкладка или аккордеон).
   • Кнопка «Запросить цену/информацию», при нажатии на которую появляется всплывающее окно с формой (поля: Имя, Телефон/Email, Комментарий).
   • Признак «Новинка» (визуальная метка на изображении товара).
4. Информационные страницы («О компании», «Производство»):
   • Макет для размещения текстового контента и фотографий.
   • Продумать оформление заголовков, подзаголовков, списков, цитат.
5. Страница «Контакты»:
   • Блок с контактной информацией (адрес, телефон, email).
   • Блок с интерактивной картой (Яндекс.Карты).
   • Возможно, размещение общей формы обратной связи.

6. Требования к адаптивности

• Все макеты должны быть представлены в 3-х разрешениях:
  • Десктоп (> 1200px)
  • Планшет (768px - 1199px)
  • Мобильный (< 767px)
• Необходимо продумать и отобразить в макетах:
  • Адаптивное меню (гамбургер-меню для мобильных устройств).
  • Изменение расположения блоков (например, фильтры уходят в выпадающее меню на мобильных).
  • Масштабирование изображений и типографики.
  • Удобство нажатия на кнопки и ссылки на сенсорных экранах.

7. Результат работы (что предоставляет дизайнер)

1. Визуальная концепция (Moodboard): Подборка, определяющая общее настроение, цветовую палитру и стилистику.
2. Интерактивные прототипы в Figma, Adobe XD или аналогичной программе, демонстрирующие основные сценарии взаимодействия пользователя с сайтом.
3. Статические макеты (Mock-up) всех ключевых страниц (см. п.5) в трех разрешениях (десктоп, планшет, мобильный).
4. UI-кит (Библиотека компонентов):
   • Стандартные и hover-состояния всех кнопок.
   • Поля ввода и формы.
   • Иконки (или рекомендации по использованию иконок).
   • Типографика (заголовки H1-H6, основной текст, ссылки).
   • Цветовая палитра.
   • Элементы форм (чекбоксы, радиокнопки, селекты).
5. Рекомендации для разработчика по интерактивным элементам (например, анимация появления формы, переходы между состояниями).

 

 

 

Примечание для дизайнера

• На первом этапе сайт является витриной. В дизайне не должно быть элементов, связанных с ценами, корзиной, личным кабинетом или онлайн-оплатой. Основной призыв к действию — «Запросить информацию».
• Второй этап (внедрение конструктора товаров) не входит в текущий дизайн-проект и будет обсуждаться отдельно.
• Все графические ресурсы (баннеры для слайдера, фотографии товаров, контентные изображения) будут предоставлены Заказчиком.

[Tom]

У вас в задаче две совершенно противоположные цели.

Создать удобный, современный итп.

И шаблон Journal, который превращает опенкарт, в нечто совершенно иное требующее за каждый чих денег. Рекомендую пересмотреть столь вредный для опенкарт в целом подход.