05 /2026
ConceptATELIER — lingerie on a glass mannequin
An interactive showcase for a lingerie store: the set is studied from four sides, the shade changes and the size is picked without leaving the first screen.
- #E-commerce: all cases with this tag
- #UI Design: all cases with this tag
- #Prototype: all cases with this tag
- UI Design
- Interaction Design
- E-commerce
- Prototyping
A personal portfolio concept. The mannequin images are generated, prices and sizes are for the demo; the first screen is a working prototype you can open and turn.
- views of one set
- 4views of one set
- shades: burgundy and black
- 2shades: burgundy and black
- visual directions: light and dark
- 2visual directions: light and dark
- screen from first look to choice
- 1screen from first look to choice
01 /07
ATELIER — tenderness in the details
ATELIER is a product page concept for a lingerie brand. The main object is a translucent glass mannequin in a lace set. It can be turned, looked at up close, and the shade and sizes are chosen right next to it.
The glass figure gives the brand its character without stealing attention: all you see on it is the cut, the fit and the pattern. The ground is a warm ivory, the type a quiet antiqua, the interface thin graphite lines. The only solid shape on the screen is the button.
- Category
- E-commerce · Fashion · Product page
- Product
- An interactive showcase of a set, desktop and phone
- Status
- Concept: a working prototype of the first screen
- My role
- Concept, UX/UI, visuals, prototype
02 /07
Showing lingerie without a model
Lingerie is usually shown on models or as flat shots. The first distracts from the product, the second hides the fit. A shopper scrolls through a dozen photos to see how a set sits from the side and the back.
I put the task this way: how do you let people study a set from every side and choose it without leaving one screen, and without turning the page into a 3D toy that gets in the way of buying?
- 01
Shopper
wants to see the fit from every side and the lace pattern before picking a size.
- 02
Brand
wants a recognisable image that does not depend on photo shoots with models.
- 03
Store
needs the shade and size choice to stay next to the figure, not lost under animation.
03 /07
Three decisions on the first screen
The screen has three zones: the title and the lace on the left, the mannequin in the centre, the choice on the right. The figure's head rises through the header rule, so the mannequin reads as an object in space, not a picture in a frame.
- 01
01. Glass holds the form, lace holds the character
The mannequin stands in soft light on ivory, with no glare or blur around it. The lace frame is joined by a line to the lace on the figure, so it is clear which detail is shown up close.
- 02
02. The views sit next to the figure
The thumbnails under the lace switch the view; so do dragging, swiping, the «Turn» button and the arrow keys. The view's number and name are always labelled.
- 03
03. The choice is where people look
Colour and size stand to the right of the mannequin: round swatches with the lace texture, round sizes, one graphite button. Changing the colour keeps the view.
04 /07
Four views, two shades
The visuals are built as a contact sheet: the same mannequin, poses and light, four views. The second shade is the same sheet with only the set recoloured, so the figure does not move when the shade changes.
The renders had a black ground. To stand the mannequin on ivory I cut the ground with a mask taken from the burgundy sheet (burgundy fabric never blends into black) and applied the same mask to the black set, whose satin is nearly black.
05 /07
How the showcase behaves
Motion should help people look, not run from their gaze. So every reaction is limited and turns off where it would get in the way of choosing.
- The cursor over the mannequin turns the figure a little: up to ±8° horizontally and ±2° vertically, with a soft lag. Over the colours, sizes and the button the figure stays still.
- A drag of ~70 px is the next view; on a phone a vertical swipe scrolls the page instead of turning the mannequin.
- Auto-turn slowly passes the four views and stops at any manual move or when the showcase leaves the screen.
- The line from the lace frame to the lace appears only on the front view and on a wide screen: elsewhere it would point at nothing.
- The button without a size is not silent: it highlights the sizes and says what is missing.
- With prefers-reduced-motion animation is off and there is no cursor tilt; everything works from the keyboard with a visible focus.
06 /07
Another shade, the phone and the dark direction
Changing the colour changes the figure, the lace in the frame and the thumbnails together. On a phone the order differs: title, views, mannequin, colour, size; the button is sticky only inside the size block and does not cover the figure.
I built the dark direction first, Nocturne: the mannequin as the light source in a black studio. It is more dramatic, but lingerie reads better on light, so Lace / 01 became the main one. The dark prototype is open too: /prototypes/atelier.
07 /07
What comes next
What is ready is a working prototype of the first screen: views, two shades, the lace, size and the choice, desktop and phone, Ukrainian and English.
Next come new renders made on a light ground and in light shades: white, ivory, powder. The screen is designed for five colour swatches; two are shown now, the ones with honest visuals.
After that, macro photos of the fabric instead of a zoomed render, and real 3D: separate lingerie models with lace textures and free 360° rotation. Until then the renders remain the better solution.
Next case · 06 / 06
Forma — a scalable design system for digital studios
Tell me briefly about the product and the timeline — I'll reply within a day.