E-Commerce
ConceptForme
An editorial fashion storefront with a working bag.
A fashion store concept built around restraint: large campaign imagery, an edited collection with category filters, and a slide-out bag that adds, removes and totals items as you shop.
Independent concept — designed and developed by TrueFrame Studio
- Type
- Independent concept
- Category
- E-Commerce
- Platform
- Responsive web store
- Built with
- HTML · CSS · JavaScript
- Disciplines
- E-Commerce, UI/UX Design, Website Development
Screen 01 — Home
Campaign imagery and the season's message lead.
01Live demo
Try the working site.
Try this
- 01
Filter the edit by tops, layers or accessories.
- 02
Add a piece: the bag slides in with a running total.
- 03
Remove items from the bag and watch the count update.
Key features
- 01
Campaign-led home
A full-bleed editorial hero introduces the collection before the shop.
- 02
Instant filters
Tops, layers and accessories filter the edit in place.
- 03
Slide-out bag
Add and remove pieces with a running total, without leaving the page.
02Screens
Inside the product.
Responsive
Recomposed for every screen.
Navigation, hierarchy and controls are rebuilt for tablet and phone, not scaled down from the desktop layout.
Tablet768 px
Phone390 px
03Under the hood
How it was made.
- ItalianaDisplay serif · 400
- DM SansText · 400–700
- Paper#F2EEE8
- Linen#E5E0D7
- Stone#98958F
- Ink#262522
Forme explores how an independent clothing label could sell online with the calm of a well-run boutique. Campaign imagery and a serif display face carry the brand; the shop itself stays quiet so the pieces do the talking.
01Brief and goalsWhat it set out to do · what it explores
The collection filters instantly by category, and the bag slides in from the side so shoppers never lose their place. Checkout is a demonstration only; no payments are taken.
Goals
- 01
Give a small collection the presence of a flagship store.
- 02
Let shoppers filter and add to bag without leaving the page.
- 03
Keep the brand voice consistent from campaign to cart.
What the concept explores
- 01
An editorial approach to e-commerce for a small, design-led label.
- 02
Shopping interactions that keep the visitor on one calm page.
- 03
How far restraint can go before a store feels empty.
02Design decisionsTypography · Colour · Layout · Interaction
- Typography
A display serif with room to breathe
Italiana, a fine high-contrast serif, sets the headline at up to 230px with a 0.73 line height and a slanted, indented YOUR. DM Sans handles everything else in small spaced capitals, and the logo itself is letter-spaced: F O R M E.
WhyA thin serif at large sizes reads as fashion editorial. Small spaced capitals keep the navigation quiet, so the two faces never compete.
- Colour
Warm paper, muted photography
The page sits on a warm off-white with near-black ink. Campaign photography is pulled down in brightness and saturation, and product photos sit on a linen tone.
WhyWith colour taken out of the interface, the clothes and the type set the mood and the store reads as one calm surface.
- Layout
Shop without leaving the page
The bag is a drawer that slides in from the right over a dimmed shade: up to 440px wide on desktop, full width on phones. Adding a piece opens it automatically.
WhyShoppers see what they added and keep their place in the edit. Closing the drawer returns them exactly where they were.
- Interaction
Controls that step back
Filters are text tabs underlined when active, Add to bag is an underlined text action, and product photos zoom 4% on hover. The grid drops from three columns to two on phones.
WhyPill buttons and badges would make a small collection feel like a discount store. Quiet controls keep the pieces in front.
03Build and technologiesHTML · CSS · JavaScript
HTML
Header, campaign hero, shop and a bag drawer marked up as a labelled aside.
CSS
Hand-written: a three-column product grid (two on phones), a fixed drawer with a transform transition, hover zoom and fluid display type.
JavaScript
app.js renders the products from a data array, filters by category, adds and removes bag items with a live count and total, and opens and closes the drawer.
Google Fonts
Italiana for display, DM Sans for text.
Unsplash
Campaign and product photography; product images load lazily.
Static hosting
Plain files served from /showcase/forme. Checkout is a demonstration and takes no payment.
Services in this concept
04ProcessDiscover · Plan · Design & Develop · Launch & Support
01Discover
Look at how small labels sell in person, and what shoppers need before they add to bag.
02Plan
Define the edit, the filter categories and a bag that keeps shoppers in context.
03Design & Develop
Design the editorial system and build the storefront, filters and bag interactions.
04Launch & Support
Test the shopping flow on phones first, then tune imagery for fast loading.
Concept study. Forme is an independent concept, designed and built by TrueFrame Studio to show how we approach this kind of product. There is no client, and no results are claimed.