UI-Kit представляет собой набор дизайнерских элементов и руководство по стилю для интернет-магазина, специализирующегося на продаже сувенирной продукции с возможностью нанесения логотипа. Дизайн(UI/UX) решений направлен на создание привлекательного, удобного и функционального интерфейса.

Logo

  • Основная версия :
    • Горизонтальная и компактная версии логотипа.
  • Цветовые варианты :
    • Цветовая версия (оранжевый фон).
    • Черно-белая версия (черный и белый).
    • Инверсия цветов (обратная палитра).
  • Правильные решения :
    • Предоставление нескольких вариантов логотипа для разных контекстов (цветные, черно-белые, инверсия) обеспечивает гибкость использования.
    • Логотипы имеют четкие пропорции и легко масштабируются.

Colors

  • Цветовая палитра :
    • Основные цвета: оранжевый, синий, зеленый.
    • Каждый цвет имеет варианты для меню/ховера, ховера/линков, ошибок и других состояний.
    • Примеры:
      • Оранжевый: FF6A00 (меню/ховер), E35E00 (ховер/линк).
      • Синий: 377DD2 (основной), 2A6BBB (ховер), 5534B5 (клик).
      • Зеленый: 69BF1C (основной), 5AA814 (ховер), 0B815A (клик).
  • Правильные решения :
    • Использование разных оттенков одного цвета для различных состояний (активное состояние, ховер, клик) обеспечивает четкую визуальную обратную связь.
    • Выбор контрастных цветов для текста и фона улучшает читаемость.

Font

  • Шрифт : Rawline
  • Варианты веса шрифта :
    • Medium, Bold, Extrabold, Semibold, Regular.
  • Размеры шрифта :
    • От H1 до H6 для заголовков.
    • От P12 до P16 для основного текста.
  • Правильные решения :
    • Использование семейства шрифтов с различными весами позволяет создать иерархию элементов на странице.
    • Размеры шрифта соответствуют стандартным практикам для заголовков и основного текста, что улучшает юзабилити.

Typography

  • Заголовки :
    • От H1 до H6 с различными стилями (Medium, Bold, Extrabold).
  • Основной текст :
    • Различные размеры и веса шрифта (P12-P16, Semibold, Regular).
  • Правильные решения :
    • Иерархия заголовков помогает пользователю быстро ориентироваться в информации.
    • Регулярные и полужирные шрифты используются для создания акцента на важные части текста.

Icons

  • Иконки меню :
    • Каждая категория имеет уникальную иконку (например, «Ручки», «Текстиль», «Полиграфия»).
  • Иконки корзины :
    • Функциональные иконки для действий (поделиться, сохранить, скачать в PDF/DOC, распечатать).
  • Иконки заголовков , навигации , общие иконки сайта :
    • Включают стандартные иконки для поиска, корзины, фильтров и т.д.
  • Правильные решения :
    • Иконки имеют единый стиль и размер, что обеспечивает консистентность дизайна.
    • Использование иконок для часто используемых функций упрощает навигацию пользователям.

Grid

  • Грид системы :
    • Предоставлены различные размеры экранов (1920px, 768px, 412px).
    • Для каждого размера экрана определены ширины колонок и отступы.
  • Правильные решения :
    • Использование гибкой сетки позволяет адаптировать дизайн под разные устройства.
    • Определенные значения отступов и ширин колонок обеспечивают консистентность макета на разных разрешениях.

Spacing

  • Отступы :
    • Представлены стандартные значения отступов (4px, 8px, 12px, и т.д.).
  • Правильные решения :
    • Использование стандартизованных значений отступов обеспечивает единообразие дизайна и улучшает читаемость.

Buttons

  • Кнопки :
    • Различные состояния кнопок: Disabled, Default, Hover, Pressed.
    • Примеры:
      • Кнопка «Войти» в разных состояниях (серая при-disabled, синяя при-hover и pressed).
      • Кнопка «Заказать Звонок» в разных цветах (зеленая, синяя, фиолетовая).
  • Правильные решения :
    • Использование четких различий между состояниями кнопок (цвет, тень) обеспечивает понятную обратную связь для пользователя.
    • Различные стили кнопок позволяют выделить важные действия (например, зеленая кнопка для подтверждения).

Links/Menu/Input

  • Ссылки :
    • Стандартный текст ссылки и изменение цвета при hover.
  • Меню :
    • Верхнее меню с темной темой и нижнее меню с яркими оранжевыми элементами.
  • Текстовые поля :
    • Различные состояния полей ввода: Default, Hover, Error, Typing, Entered.
    • Визуальная обратная связь через рамки и сообщения об ошибках.
  • Флажки и Radio :
    • Четкие состояния активации и деактивации.
  • Правильные решения :
    • Консистентное использование стилей для всех элементов интерфейса.
    • Визуальная обратная связь для всех взаимодействий пользователя (например, изменение цвета при ошибке ввода).

List

  • Поиск и сортировка :
    • Поиск с автозаполнением и категоризация результатов.
    • Сортировка товаров по популярности, цене и другим параметрам.
  • Профиль пользователя :
    • Меню профиля с раскрывающимся списком опций.
  • Правильные решения :
    • Логичная организация функций поиска и сортировки упрощает навигацию.
    • Раскрывающееся меню профиля обеспечивает доступ к часто используемым функциям.

Product card

  • Карточка товара :
    • Различные состояния карточки: Default, Hover, Photo/New/Discount, Mobile.
    • Включает изображение товара, название, цену, количество цветов и кнопку «Заказать».
  • Правильные решения :
    • Хорошая визуализация товаров с различными вариантами цветов и скидок.
    • Мобильная версия карточки товара адаптирована для удобства использования на маленьких экранах.

Form Pop-up

  • Форма попапа :
    • Различные состояния формы: Default, Hover, Error, Typing, Entered.
    • Включает поля для ввода (Телефон, Фамилия Имя, Сообщение), флажок согласия и кнопку «Заказать Звонок».
    • Показаны ошибки при неверном заполнении полей.
  • Правильные решения :
    • Четкая визуальная обратная связь при ошибках (красные рамки, сообщения об ошибках).
    • Логичное расположение элементов формы обеспечивает удобство использования.
    • Присутствует CAPTCHA для защиты от спама.

Full Header/Adaptive

  • Шапка сайта :
    • Версии шапки для разных размеров экранов (1920px, 768px, 412px).
    • Включает логотип, меню, поиск, корзину и другие функциональные элементы.
    • Мобильная версия с упрощенным меню и важными функциями.
  • Правильные решения :
    • Адаптивный дизайн гарантирует корректное отображение на всех устройствах.
    • Логотип и основные функции легко доступны на мобильных устройствах.
    • Корзина и счетчик товаров помогают пользователям отслеживать их заказы.

Header/Footer

  • Шапка и Подвал :
    • Шапка содержит логотип, меню, поиск и контактную информацию.
    • Подвал включает разделы с контактной информацией, ссылками на социальные сети, методы оплаты и другую важную информацию.
  • Правильные решения :
    • Шапка и подвал имеют четкую структуру и легко навигируемы.
    • Контактная информация и методы оплаты доступны в подвале для быстрого обращения.

Illustrations

  1. Иллюстрации для баннеров :
    • Коллекция иллюстраций, которые могут использоваться в баннерах на сайте.
    • Иллюстрации включают различные элементы, такие как люди, продукты, устройства и другие объекты, связанные с деятельностью компании.
  • Правильные решения :
    • Иллюстрации имеют единый стиль, что обеспечивает консистентность дизайна.
    • Разнообразие иллюстраций позволяет создавать привлекательные и информативные баннеры для разных целей (например, продвижение товаров или услуг).

2. Иллюстрации для страниц нанесения

  • Коллекция иллюстраций, которые могут использоваться на страницах, посвященных нанесению логотипов и брендирования продукции.
  • Включает изображения различных товаров (футболки, сумки, чашки, бейсболки и т.д.) с возможностью нанесения логотипов.
  • Правильные решения :
    • Иллюстрации демонстрируют широкий ассортимент товаров, доступных для нанесения.
    • Детализированные изображения помогают пользователям понять возможности нанесения на конкретные виды продукции.

3. Иллюстрации для инфографики

  • Коллекция иллюстраций, которые могут использоваться в инфографике для передачи информации о продуктах, услугах или процессах компании.
  • Включает изображения людей, технологий, процессов и других элементов, связанных с деятельностью компании.
  • Правильные решения :
    • Иллюстрации простые и понятные, что улучшает восприятие информации.
    • Разнообразие стилей иллюстраций позволяет создавать интересные и информативные инфографические материалы.

4. Иллюстрации для блока оплаты

  • Коллекция иллюстраций, которые могут использоваться в разделе оплаты для демонстрации различных способов оплаты.
  • Включает изображения платежных систем (Visa, Mastercard, МИР), банковских карт, электронных кошельков и других методов оплаты.
  • Правильные решения :
    • Иллюстрации четко показывают поддерживаемые способы оплаты, что помогает пользователям выбрать удобный для них вариант.
    • Простота и понятность иллюстраций упрощает процесс оформления заказа.
  • Общие замечания:
  1. Консистентность :
    • Все иллюстрации имеют единый стиль, что обеспечивает согласованность дизайна.
  2. Функциональность :
    • Иллюстрации предназначены для различных целей (баннеры, страницы нанесения, инфографика, оплата) и эффективно поддерживают эти цели.
  3. Юзабилити :
    • Четкие и понятные иллюстрации улучшают пользовательский опыт, делая сайт более привлекательным и информативным.
  4. Гибкость :
    • Широкий выбор иллюстраций позволяет адаптировать дизайн под разные потребности и контексты.

Сайт