До змісту
Tvorum.
КонцептМагазин одягу2026

FORMA — концепт сайту для магазину одягу

Інтернет-магазин мінімалістичного бренду одягу, де річ показано як архітектуру: креслення з замірами, лукбук і швидка покупка без зайвих кроків.

Це концепт, а не клієнтський проєктКонцепт-проєкт студії: демонстрація дизайну та функціоналу для ніші. Так ми бачимо сильний сайт для магазину одягу: структура, дизайн, тексти й функціонал. Замовте — і ваш сайт стане наступним кейсом.

FORMA — концепт сайту для магазину одягу — головний екран
Ніша
Магазин одягу
Тип сайту
Інтернет-магазин
Рік
2026
Формат
Концепт студії

01 / Задача

Яку задачу вирішує сайт

Малий український бренд одягу конкурує не з сусіднім магазином, а з маркетплейсами й масмаркетом. Покупець не може помацати тканину й приміряти річ, тому сумнівається в головному: чи сяде, чи варта ціни і чи не повернеться посилка назад.

Сайт має працювати як найкращий продавець-консультант:

  • продати образ, а не окремий артикул — щоб у кошик потрапляло 2–3 речі замість однієї;
  • зняти страх розміру — заміри виробу, а не лише «S/M/L», і підказка, який розмір обрати;
  • скоротити шлях до оплати — від картки товару до замовлення за хвилину, з Новою Поштою та LiqPay, які звичні покупцю;
  • пояснити ціну — показати, де й ким пошито, чому пальто коштує 8 900 ₴, а не 2 500 ₴.

Мета — щоб відвідувач з Instagram-реклами не «зберіг на потім», а оформив замовлення, і щоб частка повернень через неправильний розмір була мінімальною.

02 / Рішення

Дизайн і UX-рішення

Ідея — «одяг, зведений як архітектура». Чорний, білий і бетон плюс один акцент — електрик-синій. Брутальна типографіка на змінному шрифті: логотип FORMA буквально «змінює форму» — розтягується на першому екрані й у маніфесті під час прокрутки. Видима модульна сітка й шкала-рулетка праворуч показують, скільки сантиметрів сторінки ви вже пройшли.

Перший екран — фото образу з розмірними лініями («плечі 52 см», «L = 118 см») і точками-хотспотами: модель буквально стоїть на велетенському логотипі FORMA, клік по точці відкриває товар, а поруч одразу «специфікація образу» з сумою. На телефоні кнопка каталогу — одразу під заголовком.

Лукбук закріплюється на екрані й гортається горизонтально; один з образів подано як синє креслення конструкторки — це запам'ятовується краще за ще одне фото.

Каталог побудований на технічних ескізах (flat sketches) у кольорі тканини: однаковий ракурс, чесні пропорції, миттєве завантаження. При наведенні — фото на моделі або креслення з довжиною й шириною. Фільтри за категорією, розміром, кольором і ціною, сортування, чипи активних фільтрів, мобільна шторка.

Продаючий інтерактив:

  • quick view з вибором розміру, залишками («залишилось 2 шт.»), кількістю й трьома видами: виріб, на моделі, креслення;
  • кошик-шухляда з прогресом до безкоштовної доставки, збереження в localStorage, обране;
  • таблиця розмірів у см і дюймах, заміри пальта, підсвічені на кресленні, і підбір розміру за зростом та обхватом;
  • оформлення у 3 кроки: контакти → Нова Пошта (пошук міста й відділення/поштомату) → LiqPay або накладений платіж з розрахунком комісії;
  • «паспорт речі» — бирка з номером у партії, містом і цехом пошиву: так блок «Зроблено в Україні» стає аргументом ціни, а не гаслом.

03 / Функціонал

Що є на сайті

  • Головна-лукбук із закріпленим горизонтальним скролом і хотспотами на фото
  • Каталог з фільтрами (категорія, розмір, колір, ціна), сортуванням і чипами
  • Технічні SVG-ескізи товарів у кольорі тканини + креслення з замірами
  • Quick view: розмір, залишки, кількість, фото на моделі, обране
  • Кошик-шухляда в localStorage з прогресом до безкоштовної доставки
  • Таблиця розмірів (см/дюйми) з інтерактивним кресленням і підбором розміру
  • Оформлення у 3 кроки: контакти, Нова Пошта з пошуком відділень, LiqPay або накладений платіж
  • «Паспорт речі»: бирка з партією, цехом і доглядом — блок «Зроблено в Україні»
  • Змінний шрифт, що «змінює форму» під час прокрутки, і шкала-рулетка
  • Адаптив до 390 px, доступні модалки й форми, підтримка reduced motion

04 / Екрани

Як сайт виглядає на компʼютері й телефоні

FORMA — концепт сайту для магазину одягу — головна сторінка повністю
Головна сторінка повністю — гортайте всередині рамки
FORMA — концепт сайту для магазину одягу — мобільна версія
Мобільна версія

Технології

Стек

Технології підбираємо під задачу: швидке завантаження, зручне редагування контенту та інтеграції з вашими сервісами.

  • HTML5
  • CSS Grid/Flex
  • Vanilla JS
  • Inline SVG: технічні ескізи товарів і креслення
  • Variable font (вісь ширини Roboto Flex)
  • localStorage: кошик і обране
  • Нативні <dialog> з керуванням фокусом
  • IntersectionObserver
  • Готовий до інтеграції з CMS

Палітра

Кольори концепту

  • Колір #0b0b0c
  • Колір #f2f1ee
  • Колір #c9c6bf
  • Колір #8a8780
  • Колір #2340ff

Портфоліо

Інші роботи

Усі роботи

0 ₴ · 24h

Хочете такий самий — але під ваш бізнес?

Залиште контакт — за 24 години покажемо безкоштовний прототип головної сторінки: у стилі цього концепту або в зовсім іншому.

  • Прототип за 24 години — безкоштовно
  • Фіксована ціна, без «доплат» в процесі
  • Запуск від 5 днів
  • Гарантія та підтримка після здачі
Де відповісти?

Без спаму. Натискаючи кнопку, ви погоджуєтесь з політикою конфіденційності.