Concept project
Oversteek
You choose a bag by size, colour and fit. Those choices must remain visible on a phone too.
Online shop
Colour choice
Mobile purchase
Type
Online shop
Industry
Travel bags and accessories
Year
2026
De ontwerpvraag
Choosing on a small screen
Oversteek is a fictional label with twelve products in canvas, leather and nylon; the name refers to the ferry across the Westerschelde. With bags and belts, the purchase is about the version: which size, which colour, which fit. On a phone, those choices can easily disappear below the fold or inside a dropdown.
The design question: how can colour and size stay visible and verifiable all the way to the basket, even on a small screen? And how can a label with photography from different shoots still have one clear identity? That is what the design aims to do; nothing has been measured.
The collection with filters for type, material and colour, and numbered cards on one shared surface.
De keuzes
A departure board, not a shop window
01 · Graphite, sand and one rust accent
Graphite and sand with one accent in the colour of a buoy. Square corners, fine lines and monospace labels, like a departure board or luggage tag. All text combinations meet WCAG AA; control borders meet 3:1.
02 · Wide for headings, fixed width for measurements
Headings use Archivo in its wide style, in capitals, like lettering on a quay. Measurements, prices and numbers use IBM Plex Mono, so litres, centimetres and amounts align cleanly and can be compared.
03 · Numbered cards on one shared surface
Each product has a number and sits on the same card surface. This brings together photos from a light studio, sunny outdoor shoots and dark tables. Filters for type, material and colour live in the address bar; on mobile, they expand below one button with a count.
04 · Buying without searching
Below the button, three key details sit in a row, such as capacity and weight. No reviews, stars, stock counters or discounts. The basket shows what is still needed for free delivery, and checkout shows a demonstration.
Wat de interactie laat zien
Colour and size in one drawer
For the Gesp belt, you switch between tobacco and midnight blue. The main image, thumbnails, colour label on the photo and address bar update with it. The product information states honestly that the midnight-blue example is a slightly different model.
On mobile, Choose colour and size opens a drawer from the bottom, with a thumbnail that updates and a confirmation button displaying the price. Confirming closes the drawer and opens the basket, containing exactly the selected colour and size.
Gesp after selecting Midnight blue: the main image, thumbnails and colour label update.
Measured result: none
Oversteek does not exist. The concept has been developed as clickable pages in HTML, CSS and JavaScript and is not online. Checkout shows a demonstration; nothing is sold. There is therefore no result to show. The colour change is on a belt, not a bag: a bag in two colours from one shoot, without a visible brand, could not be found.
Image sources: Unsplash product photography; photos with a readable brand were rejected or cropped. Product names and prices are invented.