FORMA
Интернет-магазин
Мебельный магазин: асимметричная сетка, категории, материалы и мини-корзина.
Открыть демо
Concept Project. Мебель и цены иллюстрируют интерфейс; оформление заказов, оплата и сервер не подключены.
Задача
Показать главную мебельного магазина через предметы и материалы: без стандартного рекламного первого экрана.
Проблема
Крупные фотографии должны соседствовать с ценой и действием, а композиция - работать в широком превью.
Решение
Редакционная CSS Grid с наложением блоков, оранжевым акцентом и самостоятельным товарным модулем. Ниже - категории и подборка предметов.
Функциональность
- Асимметричная CSS Grid
- Фильтрация товаров по категории
- Добавление и удаление из мини-корзины
- Цена, материал и итог подборки
Процесс разработки
- 01
Собрана редакционная композиция.
- 02
Добавлены карточки предметов и состояния наведения.
- 03
Подключены фильтры и мини-корзина.
Мобильная
версия.
На небольшом экране меняются сетка и навигация. Ниже - скриншот страницы на телефоне шириной 390 пикселей.
Попробовать интерфейс
Что получилось
Создана главная магазина с локальной мини-корзиной. Desktop-композиция рассчитана на превью 16:9.
Обсудить похожий проект