- ЗадачаРазработка магазин по продаже элементов из таблицы Менделеева.
Основные требования
Где применяется
Промышленность, Лаборатории, Университеты
Фильтры
Нужно сделать фильтры\сортировки по свойствам элементов из таблицы, но чтобы не грузили страницу.
Промо
Есть товар-магнит, с промо картинкой и ценой (Литий - раз в году 50% скидка)
Карточка элемента
У каждого элемента есть - название, цена, картинка, атомная масса.
Категории
Есть дорогие, популярные и недорогие товары
Light & dark mode
Сайт бывает светлой и темной версии
Промышленность, Лаборатории, Университеты
Фильтры
Нужно сделать фильтры\сортировки по свойствам элементов из таблицы, но чтобы не грузили страницу.
Промо
Есть товар-магнит, с промо картинкой и ценой (Литий - раз в году 50% скидка)
Карточка элемента
У каждого элемента есть - название, цена, картинка, атомная масса.
Категории
Есть дорогие, популярные и недорогие товары
Light & dark mode
Сайт бывает светлой и темной версии
Определяем пользователей
Целевая аудитория уже была определена до начала работы над проектом.
- Химики
- Лаборанты
- Учащиеся
- Технологи
- Госзакупки
Основное решение
Решение построено на принципах Bento-дизайна, который идеально подходит для небольших интернет-магазинов с каталогами товаров — в данном случае с элементами таблицы Менделеева. Такой подход использует модульную сетку с карточками разного масштаба, позволяя расставлять визуальные акценты, поддерживать ясную иерархию информации и обеспечивать лёгкое сканирование каталога. Крупные блоки задают контекст, а компактные карточки элементов показывают название, цену, изображение и атомную массу, позволяя пользователю быстро находить и сравнивать нужный товар.
Карточка элемента
Каждая карточка элемента спроектирована с учётом быстрого восприятия информации. В ней отображены ключевые данные: название, цена, изображение и атомная масса. Название в виде аббревиатуры выделено крупным шрифтом для мгновенной идентификации, изображение обеспечивает визуальную узнаваемость, а цена и атомная масса расположены компактно, чтобы пользователь мог быстро сравнивать и принимать решения.
Коллекции и промо
Блок коллекций помогает быстро ориентироваться в каталоге и выбрать элементы в зависимости от задач пользователя. Карточки сгруппированы по ключевым сценариям применения, что соответствует потребностям ца.
Промо-блок выделяет ключевое коммерческое предложение и служит точкой привлечения внимания. Контрастный тёмный фон, крупное изображение элемента и чёткая ценовая информация формируют визуальный фокус, позволяя блоку оставаться заметным, но не перегружать навигацию.
Промо-блок выделяет ключевое коммерческое предложение и служит точкой привлечения внимания. Контрастный тёмный фон, крупное изображение элемента и чёткая ценовая информация формируют визуальный фокус, позволяя блоку оставаться заметным, но не перегружать навигацию.
Фильтры
Фильтрация реализована как интерактивная панель с мгновенным применением параметров без перезагрузки страницы, что сохраняет контекст просмотра и ускоряет поиск нужного элемента.
Выбор параметров реализован в виде чипсов, позволяющих включать и отключать критерии одним нажатием.
Фильтры сгруппированы в раскрывающиеся блоки, благодаря чему панель остаётся компактной, сохраняя ощущение чистоты интерфейса.
Индикатор количества выбранных фильтров помогает контролировать применённые ограничения и быстрее ориентироваться в текущем состоянии поиска.
Выбор параметров реализован в виде чипсов, позволяющих включать и отключать критерии одним нажатием.
Фильтры сгруппированы в раскрывающиеся блоки, благодаря чему панель остаётся компактной, сохраняя ощущение чистоты интерфейса.
Индикатор количества выбранных фильтров помогает контролировать применённые ограничения и быстрее ориентироваться в текущем состоянии поиска.
Компоненты
В макете был реализован минимально необходимый набор компонентов, обеспечивающий целостность интерфейса и удобство дальнейшего масштабирования. Компоненты были спроектированы с учетом двух разрешений: 1920x1080 и 430x932.
Основные элементы — карточки товаров, кнопки, чипсы фильтров, фильтрация, промо — собраны в переиспользуемые компоненты, что позволяет поддерживать консистентность и ускоряет внесение изменений.
Для интерактивных элементов предусмотрены различные состояния: default, hover, active, selected и disabled. Это помогает корректно передать поведение интерфейса и обеспечивает предсказуемую обратную связь для пользователя.
В работе применена система стилей: заданы цветовые токены для фона, акцентов и состояний, а также текстовые стили с чёткой иерархией заголовков, подзаголовков и служебной информации.
Основные элементы — карточки товаров, кнопки, чипсы фильтров, фильтрация, промо — собраны в переиспользуемые компоненты, что позволяет поддерживать консистентность и ускоряет внесение изменений.
Для интерактивных элементов предусмотрены различные состояния: default, hover, active, selected и disabled. Это помогает корректно передать поведение интерфейса и обеспечивает предсказуемую обратную связь для пользователя.
В работе применена система стилей: заданы цветовые токены для фона, акцентов и состояний, а также текстовые стили с чёткой иерархией заголовков, подзаголовков и служебной информации.
