Scope & Craft

Спроектировал и собрал самостоятельную концепцию магазина, перенеся визуальное направление из Figma в адаптивный прототип.

Год 2026
Категория Интернет‑магазин
Моя роль Дизайнер и разработчик
Статус проекта Концепция · рабочий прототип
01 — Просмотр товаров и открытие корзины

Задача

Я хотел создать магазин с выразительной журнальной эстетикой и понятными повседневными сценариями покупки. Задача — дать место фотографии и типографике, не спрятав выбор товара и корзину.

Мой вклад

Я работал над дизайн‑системой и фронтендом. Общие параметры оформления связали направление из Figma с карточками товаров, адаптивными макетами и выдвижной корзиной.

Десктопная витрина Scope & Craft
02 — Коллекция и сетка товаров на десктопе

Как это работает

Покупатель просматривает коллекцию, изучает товары и выбирает варианты. Корзина открывается рядом со страницей: можно проверить покупки, не теряя контекст просмотра. Я проработал это взаимодействие для мобильной и десктопной версий.

Адаптивная мобильная версия Scope & Craft
03 — Мобильные карточки товаров и корзина

Ключевые решения

РЕШЕНИЕ Дизайн‑система в коде

Общие цвета, отступы и правила типографики дали согласованную основу. При этом интерфейс всё равно пришлось адаптировать под реальный контент и разные размеры экранов.

РЕШЕНИЕ Корзина рядом с товаром

Выдвижная панель сохраняет контекст просмотра, но занимает место. Её вёрстку нужно одинаково внимательно проработать и на телефоне, и на большом экране.

РЕШЕНИЕ Акцент на товарах

Журнальная эстетика выдвигает фотографию на первый план. Я оставил элементы покупки рядом, чтобы визуальное решение не добавляло лишних шагов.

Идея на практике

ИСХОДНАЯ СИТУАЦИЯ
Исходная задача — совместить выразительную подачу бренда с привычными сценариями покупки.
МОЙ ПОДХОД
Моя концепция объединяет визуальную систему, просмотр товаров и корзину в одном адаптивном интерфейсе.

Результат и статус

Получилась самостоятельная концепция с рабочим прототипом магазина. Она показывает, как я переношу дизайн в код. Перед коммерческим запуском потребовалось бы проверить оформление заказа и производительность.

Интернет‑магазинДизайн и разработкаReactTypeScriptТокены Figma