OUTFIT® — Коллекция одежды студии как журнальный магазин
OUTFIT® — фирменная коллекция одежды дизайн-студии. Магазин одновременно служит работой в портфолио, поэтому в одном макете он должен был и продавать одежду, и показывать мастерство студии.
Задача
Собственный мерч студии несёт двойную нагрузку: он должен продавать как магазин и выглядеть как лучшая работа студии. Типовые шаблоны интернет-магазинов не справляются со вторым, а чисто журнальный сайт — с первым.
Подход
Мы подошли к магазину как к печатному каталогу с работающей корзиной. Название набрано на всю ширину страницы, фотографии товаров идут под ним сплошной сеткой, а элементы магазина — корзина, меню, цена, категория — остаются небольшими и чисто типографическими, без плашек и кнопок.
Типографика — это весь фирменный стиль
Название набрано от края до края узким гротеском, а знак регистрации спрятан в последнюю букву. Один этот элемент делает весь брендинг, поэтому остальная страница может молчать и отдать цвет самой одежде.
Сопроводительный текст набран мелким красным кеглем на почти белом и стоит колонкой рядом с названием, а не по центру под ним, — это ближе к журнальной шапке, чем к первому экрану сайта.
Сетка, которая читается как лукбук
Товары идут ровной сеткой без карточек, рамок и всплывающих панелей. Каждая позиция — фотография, название, цена и категория, набранные тем же шрифтом, что и редакционный текст.
Именно отказ от оформления карточек делает страницу каталогом, а не шаблоном. К тому же ритм страницы задают фотографии, а это и нужно, когда собственная арт-дирекция студии — часть того, что продаётся.
Магазин, который не мешает
Корзина и меню стоят в верхних углах простым текстом. Ничего не мигает, не всплывает, не прерывает рекламой. Корзина всегда под рукой и никогда не громче товара.
Разработка
Фронтенд — приложение на Next.js, опубликованное на Vercel, а за ним Shopify отвечает за каталог, оформление заказа и складские остатки. Такое разделение оставляет витрину полностью под контролем арт-дирекции, а то, что владельцу магазина нужно менять, — товары, цены, остатки — остаётся в инструменте, созданном для этого.
Что сделали
- Журнальный магазин с типографической шапкой на всю ширину
- Сетка товаров без карточек, которая читается как лукбук
- Фронтенд на Next.js поверх Shopify для каталога и оформления заказа
- Публикация на Vercel
Частые вопросы
Потому что магазин одновременно служит работой в портфолио. Тема ограничила бы арт-дирекцию, а фронтенд на Next.js поверх Shopify оставляет дизайн свободным, тогда как оформление заказа, остатки и каталог остаются на платформе, созданной для этого.
Оформление карточек превращает страницу в шаблон. Без него ритм задают фотографии, и это важно, когда арт-дирекция студии — часть того, что продаётся.
Клиент, в Shopify. Своя разработка — только слой отображения.
Как устроен сайт
«Нам хотелось, чтобы магазин ощущался как модный журнал, а не как стандартный магазин на Shopify. Sakura сразу поняла направление. Результат выглядит премиально и при этом работает как настоящий магазин.»