Контекст и задача
PLANT объединяет макеты магазина растений, библиотеку интерфейсных компонентов и сайт, на котором можно изучить их поведение. Исходными материалами стали три мобильных экрана: вход, каталог и карточка товара.
Задача сайта: представить визуальную систему в одном месте, показать состояния элементов и подготовить компоненты к повторному использованию. Это учебная работа по дизайну интерфейсов и их реализации в браузере.
Визуальное решение
Тёмно-зелёная навигация отделяет содержание от рабочей области. Светлые молочные поверхности, зелёные акценты и крупная типографика поддерживают тему магазина растений.
На странице последовательно раскрываются цветовая палитра, типографика, радиусы, кнопки, формы, навигация и карточки. Отдельный блок показывает применение системы в первом экране лендинга.
Компоненты и взаимодействия
В браузере можно проверить переключение темы, выбор категории и размера, отображение пароля, добавление в избранное и изменение количества товара. Для цветовых образцов предусмотрено копирование значения.
Сайт документирует и ограничения компонентов. Например, выбор чипа демонстрирует активное состояние, но не является полноценной фильтрацией товарного каталога. Корзина и формы показывают поведение интерфейса; они не подключены к реальному магазину.
Реализация
Страница написана на HTML, CSS и JavaScript. Визуальные значения собраны в CSS-переменных, иконки используют SVG. Для повторного использования предусмотрена отдельная библиотека с токенами, стилями, скриптами и готовыми фрагментами разметки.
Навигация связывает демонстрации с гайдлайном и документацией. Изображения исходных экранов и компонентов позволяют сравнить макеты с реализацией.
Результат и выводы
Результат работы: сайт-презентация, интерактивный UI-кит и документация по использованию компонентов. Локальная демонстрация доступна по кнопке «Открыть сайт проекта».
В этом проекте особенно важна связь между визуальным решением и его поведением: одинаковое оформление должно сопровождаться предсказуемыми состояниями. Документация рядом с компонентом помогает увидеть как готовую часть системы, так и места для дальнейшей проработки.
