DIIDS
A fashion storefront that gives the brand room to be expressive and the shopper room to decide.
- Sector
- Fashion · E-commerce
- Scope
- UI/UX Design · Website Design · Development
The DIIDS store.
For everyday confidence.
Everyday confidence. From first impression to product detail.
DIIDS is the underwear and everyday essentials brand founded by Wilfred Ndidi, captain of Nigeria’s Super Eagles. Its digital store introduces the brand while helping shoppers make a practical choice about fit, colour and comfort.
The storefront pairs the brand’s own campaign photography with a strong typographic opening. Once the shopper moves into the catalogue, the interface becomes quieter: product information, filtering and selection take priority.
- 01
Brand expression
Keep the photography and distinctive display type central to the introduction.
- 02
Product clarity
Make range, price, colour and size easy to find before the purchase decision.
- 03
Responsive behaviour
Recompose the experience around a narrow screen, rather than shrinking the desktop layout.
An expressive entrance. A direct route to the product.
The store separates inspiration from selection. The home page establishes the brand; category pages narrow the range; the product page brings the decision into one place.
- 01
Discover
Campaign-led home page
- 02
Choose a range
Men · Women · Categories
- 03
Refine
Price · Colour · Size
- 04
Choose a product
Images · Variants · Quantity
- 05
Continue
Cart · Checkout · Account
A home page with an editorial point of view.
Oversized display lettering sits behind the photographed talent. This creates depth without turning the navigation or shopping actions into part of the illustration.
- 01
A recognisable opening
The “Everyday Confidence” headline and original shoot give the site its own voice.
- 02
Two clear entry points
Shop Men and Shop Women offer an immediate next step alongside the brand introduction.
- 03
A change of pace
The sections below the opening move into the story, the range and campaign imagery.
Everyday essentials, clearly presented.
The live range brings individual essentials and matching sets into the same shopping experience.
Boxer
₦15,000.00
Bra
₦19,999.00
Pant
₦14,999.00
DIIDS Socks
₦9,660.00
The Duo: Bra + Pant
₦34,998.00
The Match: Tank + Pant
₦39,998.00Product photographs, names and displayed prices from diids.co, checked for this presentation.
Let the brand lead.
Let the product speak.
From the collection to a considered choice.
The catalogue helps shoppers narrow the range. The product page then brings the garment, its options and the purchase action together.
- 01
Browse the actual range
Boxer and DIIDS Socks appear with original photography and catalogue names.
- 02
Refine the collection
The category controls stay within the browsing context.
- 03
Carry the choice to mobile
The catalogue changes its layout for a narrow screen, while the product page keeps the choices together.
Give the product decision a clear hierarchy.
The product page places imagery beside the name, price and purchase controls. Colour, size and quantity belong to the same decision, with supporting information available further down the page.
- 01
Image first
A generous image area gives the garment the attention it needs.
- 02
Choices together
Variant selection and quantity sit near the purchase action.
- 03
Details in context
Descriptions and supporting product information complete the view.
Display character. Everyday clarity.
Magste gives the live storefront its tall, expressive display lettering. Grift carries navigation, product information and controls, so the store can change pace without losing consistency.
Everyday
Confidence
Ink
Type, controls and strong contrast
White
Product and editorial space
Soft grey
Quiet image fields and separation
A smaller screen, with the same confidence.
The mobile view gives the campaign a portrait composition and moves shopping controls into a compact header. Product information follows the image in a vertical sequence, with enough room for each choice.
Reading orderContent follows the task in a vertical sequence.
Working spaceControls keep their own room on the smaller canvas.
Brand recognitionThe identity carries across both screen sizes.
Look closer at the interface.
Choose a view and a screen size. The embedded interface reflows and responds to your actions.
A designed storefront, connected to commerce.
The Laravel and Bagisto implementation brings the custom interface into a working storefront. The presentation uses the real DIIDS catalogue and live product imagery.
- 01
Custom storefront
An editorial hero, original photography and purpose-designed home sections.
- 02
Shopping structure
Category navigation, product filtering, variant selection and commerce templates.
- 03
Responsive assets
Separate portrait hero imagery and locally supplied brand typefaces.
- Storefront UI/UX
- Responsive website
- Editorial home page
- Product and shopping interfaces
- Brand typography and photography integration
Interactive frontend previews use the original DIIDS hero markup, source styles, brand photography and checked catalogue data. Purchase actions continue on diids.co. No sales or conversion results are claimed.
A store that feels like DIIDS, all the way to the product.
Digital design & development · Gradatim Concept
Let’s build your next digital experience
