05 /2026
КонцептATELIER — білизна на скляному манекені
Інтерактивна вітрина для магазину білизни: комплект роздивляються з чотирьох боків, міняють відтінок і обирають розмір, не залишаючи першого екрана.
- #E-commerce: усі кейси з цим тегом
- #UI Design: усі кейси з цим тегом
- #Prototype: усі кейси з цим тегом
- UI Design
- Interaction Design
- E-commerce
- Prototyping
Особистий концепт для портфоліо. Зображення манекена згенеровані, ціни й розміри демонстраційні; прототип першого екрана можна відкрити й покрутити.
- ракурси одного комплекту
- 4ракурси одного комплекту
- відтінки: бордовий і чорний
- 2відтінки: бордовий і чорний
- візуальні напрями: світлий і темний
- 2візуальні напрями: світлий і темний
- екран від погляду до вибору
- 1екран від погляду до вибору
01 /07
ATELIER — ніжність у деталях
ATELIER — концепт сторінки товару для бренду білизни. Головний обʼєкт — напівпрозорий скляний манекен у мереживному комплекті. Його можна повертати, роздивлятися зблизька й одразу обирати відтінок і розміри.
Скляна фігура задає характер бренду, але не забирає увагу: на ній видно лише крій, посадку й візерунок. Тло — теплий айворі, шрифт — спокійна антиква, інтерфейс — тонкі графітові лінії. Єдина щільна форма на екрані — кнопка вибору.
- Категорія
- E-commerce · Fashion · Сторінка товару
- Продукт
- Інтерактивна вітрина комплекту на десктопі й телефоні
- Статус
- Концепт: робочий прототип першого екрана
- Моя роль
- Концепція, UX/UI, підготовка візуалу, прототип
02 /07
Показати білизну без моделі
Білизну зазвичай показують на моделях або плоскими фото. Перше відволікає від виробу, друге не показує посадку. Покупниці доводиться гортати десяток кадрів, щоб зрозуміти, як комплект сидить збоку й ззаду.
Я сформулював задачу так: як дати роздивитися комплект з усіх боків і обрати його, не залишаючи одного екрана і не перетворюючи сторінку на 3D-іграшку, що заважає купити?
- 01
Покупниця
хоче побачити посадку з кожного боку й візерунок мережива до того, як обирати розмір.
- 02
Бренд
хоче впізнаваний образ, який не залежить від фотосесій із моделями.
- 03
Магазин
потребує, щоб вибір відтінку й розмірів лишався поруч із фігурою й не губився під анімацією.
03 /07
Три рішення першого екрана
Екран поділено на три зони: ліворуч назва й фактура, по центру манекен, праворуч вибір. Голова фігури виходить крізь лінію шапки, тож манекен сприймається як обʼєкт у просторі, а не картинка в рамці.
- 01
01. Скло тримає форму, мереживо — характер
Манекен стоїть у мʼякому світлі на айворі; навколо немає бліків і розмиття. Рамка з фактурою зʼєднана лінією з мереживом на фігурі: одразу видно, яку деталь показано зблизька.
- 02
02. Ракурси поруч із фігурою
Мініатюри під фактурою перемикають вид; те саме роблять перетягування, свайп, кнопка «Повернути» і стрілки на клавіатурі. Номер і назва ракурсу завжди підписані.
- 03
03. Вибір там, де дивляться
Колір і розмір стоять праворуч від манекена: круглі зразки з фактурою мережива, круглі розміри, одна графітова кнопка. Зміна кольору зберігає ракурс.
04 /07
Чотири ракурси, два відтінки
Візуал зібраний як контактний аркуш: той самий манекен, ті самі пози й світло, чотири ракурси. Другий відтінок отриманий перефарбуванням комплекту на тому самому аркуші, тому при перемиканні фігура не зсувається.
Рендери були на чорному тлі. Щоб поставити манекен на айворі, я зняв тло маскою з бордового аркуша (бордова тканина ніде не зливається з чорним) і застосував ту саму маску до чорного комплекту, де атлас майже чорний.
05 /07
Як поводиться вітрина
Рух має допомагати роздивлятися, а не тікати від погляду. Тому кожна реакція обмежена й вимикається там, де заважає вибору.
- Курсор над манекеном трохи повертає фігуру: до ±8° по горизонталі й ±2° по вертикалі, з плавним запізненням. Над кольорами, розмірами й кнопкою фігура не рухається.
- Перетягування на ~70 px — наступний ракурс; вертикальний свайп на телефоні гортає сторінку, а не крутить манекен.
- Автоповорот повільно проходить чотири ракурси й зупиняється від будь-якої ручної дії або коли вітрина зникає з екрана.
- Лінія від рамки з фактурою до мережива є лише на виді спереду й на широкому екрані: в інших випадках вона вказувала б у порожнечу.
- Кнопка без обраного розміру не мовчить: підсвічує розміри й пояснює, чого бракує.
- При prefers-reduced-motion анімації вимкнено, нахилу до курсора немає; усе керується з клавіатури, фокус помітний.
06 /07
Інший відтінок, телефон і темний напрям
Зміна кольору міняє фігуру, фактуру в рамці й мініатюри разом. На телефоні порядок інший: назва, ракурси, манекен, колір, розмір; кнопка закріплена лише в межах блоку розмірів і не закриває фігуру.
Першим я зібрав темний напрям, Nocturne: манекен як джерело світла в чорній студії. Він ефектніший, але білизна краще читається на світлому, тому основним став Lace / 01. Темний прототип теж можна відкрити: /prototypes/atelier.
07 /07
Що далі
Зараз готовий робочий прототип першого екрана: ракурси, два відтінки, фактура, розмір і вибір, десктоп і телефон, українська й англійська.
Найближче — нові рендери одразу на світлому тлі й у світлих відтінках: білий, айворі, пудровий. Екран розрахований на пʼять зразків кольору; зараз показано два, для яких є чесний візуал.
Далі — макрофото тканини замість наближеного рендера і справжнє 3D: окремі моделі білизни з текстурами мережива й вільне обертання на 360°. До цього рендери лишаються кращим рішенням.
Наступний кейс · 06 / 06
Forma — масштабована дизайн-система для digital-студій
Розкажіть коротко про продукт і терміни — відповім протягом доби.