Главная

Header


Новый дизайн:
  • Цветовая палитра: Сохраняется базовая цветовая схема (темно-синий верхний бар и оранжевое меню), но используется больше белого пространства, что делает интерфейс более легким и чистым.
  • Автоподсказки: При вводе текста в поиске появляются автоподсказки, что значительно упрощает процесс поиска товаров.
  • Размер шрифта: Шрифт стал чуть крупнее, что улучшает читаемость.
  • Dropdown: Выпадающее меню стало более детализированным и информативным. Теперь оно включает:
    • Процент скидки («Авторизуйтесь для получения скидки»).
    • Список действий: «Мои данные,» «Мои заказы,» «Поставщики,» «Заказы покупателей,» «Презентации,» «Мои КП.»
    • Кнопку выхода («Выйти»).
  • Иконки: Каждому пункту меню соответствует значок, что улучшает восприятие и скорость взаимодействия.
  • Общая информация: Появилась возможность видеть общую сумму заказа и количество товаров в корзине прямо в выпадающем меню.
Общие улучшения
  • Упрощение: Более чистый и минималистичный подход к дизайну, что делает интерфейс легче воспринимать.
  • Функциональность: Автоподсказки в поиске, отображение суммы заказа и количества товаров в корзине, значки в меню — все эти элементы значительно повышают удобство использования.
  • Мобильная адаптивность: Новый дизайн лучше подходит для мобильных устройств благодаря увеличению размеров кнопок и пространства между элементами.

Menu

Новый дизайн:
  • Меню стало более логичным и цельным:
    • Левое боковое меню: сохраняет те же категории, но с улучшенным интервалом и выравниванием элементов.
    • Основная область контента: показывает подкатегории и товары в более чистом и организованном виде.
  • Цветовая схема осталась прежней (темно-синий и оранжевый), но благодаря использованию белого пространства интерфейс стал менее плотным.
  • Были перерисованы иконки в более простом и понятном стиле, что облегчило усвоение информации.
  • Выпадающие меню и значки лучше подходят для мобильных устройств благодаря увеличению размеров тач-зон.
  • Логическая структура с меньшим количеством одновременно отображаемых элементов улучшает мобильную доступность.
  • Добавление значков и акцентов (например, выделение активной категории) делает интерфейс более привлекательным и современным.
  • Белый фон с контрастными элементами (оранжевые кнопки, черный текст) создает четкую визуальную иерархию.
Общие улучшения
  • Общий вывод: Новый дизайн значительно улучшил удобство использования, визуальную привлекательность и мобильную адаптивность. Эти изменения положительно влияют на пользовательский опыт и способствуют более эффективному взаимодействию с сайтом.

Pop-up form

Новый дизайн:
  • Читаемость: Шрифт увеличен, а интервалы между полями сделаны больше, что улучшает восприятие.
  • Организация полей: Добавлено поле «Как к вам обращаться,» которое делает форму более персональной.
  • Фокусировка внимания: Звездочки рядом с обязательными полями сохранены, что помогает пользователю понять, какие поля нужно заполнить.
  • Выбор типа клиента: Теперь используется выпадающий список вместо радиокнопок, что упрощает выбор.
  • Цветовая палитра: Сохранена базовая цветовая схема, но форма стала более современной благодаря использованию больших полей и четкого дизайна.
  • Элементы оформления: Добавлены значки (например, глазик для показа/скрытия пароля), что улучшает взаимодействие.
  • Общий стиль: Более чистый и современный подход, который соответствует трендам UI/UX.
Общие улучшения
  • Новый дизайн значительно улучшил удобство использования, визуальную привлекательность и мобильную адаптивность. Однако стоит добавить подтверждение пароля для повышения безопасности. Эти изменения сделают форму регистрации более эффективной и приятной для пользователей.

Catalog

Новый дизайн:
  • Категории: Каталог также разделён на несколько колонок, но теперь используется более линейная организация.
  • Подкатегории: Под каждой категорией перечислены подкатегории, но добавлены значки для большей визуальной идентификации.
  • Иконки: Иконки стали более детализированными и соответствуют конкретным подкатегориям.
  • Организация: Добавлена навигационная ссылка «Весь Каталог» в правом верхнем углу, что позволяет быстро перейти к полному списку товаров.
  • Заголовки категорий: Теперь имеют более четкую визуальную иерархию благодаря:
    • Большим заголовкам.
    • Добавлению значков рядом с названиями категорий.
  • Подкатегории: Улучшенная визуализация:
    • Каждая подкатегория имеет свой значок.
    • Текст выделен маркерами (например, оранжевыми точками), что делает его более заметным.
  • Иконки: Более детальные и специфичные для каждой подкатегории, что улучшает восприятие.
  • Мобильная адаптивность: Улучшенная организация с большим интервалом между элементами и значками делает форму более удобной для использования на мобильных устройствах.
  • Эстетика: Более современный и привлекательный дизайн благодаря:
    • Детальным значкам.
    • Оранжевым маркерами.
    • Логической организации.
  • Визуальное оформление: Улучшенное использование цвета и графики делает интерфейс более динамичным и интересным.

Каталог


Новый дизайн:
  • Фильтры: Расположены слева от товаров.
    • Включают фильтры по категории, размеру тиража, цене, бренду, цвету, материалу и механизму.
    • Добавлена кнопка «Обновить цены» для обновления цен в реальном времени.
  • Сортировка: Размещена в верхней части экрана рядом с фильтрами.
    • Опция сортировки доступна через выпадающее меню («По популярности,» «Сначала дешевые,» «Сначала дорогие,» «По минимальному тиражу»).
  • Товары: Показаны в виде галереи (3 колонки), но с более четкой организацией информации о каждом товаре.
  • Фильтры:
    • Более подробные и структурированные:
      • Добавлены дополнительные фильтры (например, категория, бренд, цвет, материал).
      • Возможность быстро сбрасывать выбранные фильтры.
    • Логическая организация фильтров (например, разделение на категории и фильтры).
  • Сортировка:
    • Выпадающее меню делает выбор сортировки более компактным и удобным.
    • Расположение в верхней части экрана позволяет легко найти и использовать.

Сравнительная таблица улучшений

Карточка товара

Новый дизайн:
  • Основная информация: Более организованная структура.
    • Вверху: Фото товара, название, ценовая информация, кнопка «В корзину.»
    • Средняя часть: Разделение на цвета, размеры, дополнительные услуги и нанесение логотипа.
    • Нижняя часть: Характеристики товара, описание, табло с ценами.
  • Интерфейс: Современный, с использованием выпадающих меню и интерактивных элементов.
  • Функциональность: Улучшенная возможность настройки параметров товара (например, выбор места нанесения логотипа).
  • Цветовая палитра: Яркие акценты (например, оранжевый цвет для основного элемента).
  • Элементы управления: Более четкая организация:
    • Выпадающие меню для выбора цвета и размера.
    • Интерактивные элементы для добавления нанесения логотипа.
  • Фокус внимания: Ключевые элементы (например, цена, кнопка «В корзину») более заметны благодаря увеличению размера и использования цветовых акцентов.
  • Эстетика: Более современный и привлекательный дизайн благодаря:
    • Ярким цветам.
    • Детальным иконкам.
    • Логичной организации информации.
  • Визуальное оформление: Улучшенное использование цвета и графики делает интерфейс более динамичным и интересным.

Корзина

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

Смотреть проект