Dene & Dune: Fashion Ecommerce Website Case Study

An SR7 concept project, not a client commission. Dene & Dune is an imagined womenswear boutique from the North East coast. I designed and built its complete fashion ecommerce website to show what an independent clothing retailer’s site can be: film-led, quick to shop on a phone, and built to be found in search.

View the live site → (opens deneanddune.co.uk in a new tab)

The homepage on desktop. The campaign film plays behind the headline and loops quietly.

The brief

Independent clothing shops usually have to choose. A template shop looks like every other template shop, and a site that looks like a premium brand is often slow, hard to use on a phone and invisible in Google. The idea behind Dene & Dune was to prove that a small retailer doesn’t have to choose.

It had to feel like a British fashion brand from the first second, make a 105-piece catalogue easy to browse on a phone, be honest about sizing and fit, and rank for what the shop actually sells, not just its own name.

A homepage, department and category pages, collection pages and 105 product pages
Search, filters, a wishlist, a basket drawer and a checkout demonstration
A journal of style guides tied to the catalogue
Delivery, returns, size guide, privacy and cookie pages written for a real shop

Brand and design

Dene is the North East word for a wooded valley running down to the sea, and the dunes are where it meets the coast. The brand takes its colours from there: deep aubergine, warm porcelain, coral and a soft butter yellow, with plenty of space around the photography.

Aubergine #48253D, porcelain #F7F3EC, coral #C66752 and butter #E5C968
Libre Caslon for headlines, with an italic ampersand in the wordmark, and Work Sans for everything else, all served from the site itself
Editorial layouts for the homepage and guides, and a quiet, consistent grid for shopping

The Dresses category. Every product card shows its colours, and the filters stay close at hand.

A campaign film on the homepage

Fashion sells on movement, so the homepage opens with a short autumn campaign film: models walking towards the camera through coloured archways, hard-cut to a steady rhythm. It is edited twice, once in a wide 21:9 frame for desktop and once in a tall 2:3 frame for phones, so nobody is cropped at the knees on a small screen. I checked every clip frame by frame for natural movement and framing before approving it.

AV1 with an H.264 fallback, and a poster image that loads first
Visitors who prefer reduced motion or use Data Saver get the still poster, and the film is never downloaded for them
The film is decorative and hidden from screen readers; the headline and button carry the message

Photography and film, made honestly

A concept shop has no stock to photograph, so the product photography and the campaign film were created with generative AI (Adobe Firefly). I directed them against a written brief and checked every image before it went on the site. The cast is seven models who are not real people. Each has a fixed casting reference so she looks the same across the catalogue. The styling is a premium British catalogue, with mixed ages and sizes.

Every product page gives the model’s height, her usual size and the size she’s wearing, as a real retailer would. Pieces without a complete set of photographs are held back from menus, listings and search until they have one.

A product page, with colour, size, fit notes, a size guide and a “find my size” helper beside the photographs.

Shopping that works on a phone

Most fashion shopping happens on a phone, often one-handed, so that is where the shop was designed first. Everything behaves like a working store, apart from taking money.

Filters for size, colour and price, and predictive search that suggests products as you type
A wishlist, a basket drawer with quantities and a free-delivery threshold, and “complete the look” pairings
A 360° turning view on product pages
A checkout demonstration that validates like the real thing but can never take a payment or create an order

On a phone: a category page, a product page and the basket drawer.

Built to be found

A shop that nobody can find is only a brochure. The search work started with real UK searches from Google autocomplete, matched against what the catalogue could honestly satisfy. Searches it couldn’t satisfy, such as tailored coats it doesn’t stock, were left out.

A permanent search map assigns every important search to one strongest page, so pages never compete with each other
Landing pages for “women’s linen clothing” and “women’s wide-leg trousers”, with shopper guidance, subheadings and related links in the page itself
Six style guides, among them what to wear to an autumn wedding and how to build an autumn capsule wardrobe, each linking to the products it mentions
Canonical URLs on one HTTPS address, an XML sitemap of 166 pages, permanent redirects for renamed products and a real 404 page
Honest structured data. Product pages use ItemPage markup instead of Product, because Google’s Product results need prices, reviews or ratings that a concept shop can’t truthfully have. Breadcrumbs and articles pass Google’s Rich Results Test.

A style guide. Each guide answers a real search and links to the pieces it recommends.

The linen landing page: products first, then guidance written for shoppers rather than for search engines.

Performance and accessibility

A film, 105 products and hundreds of photographs could easily make a slow site. Dene & Dune is a static Astro build with small TypeScript islands and no UI framework. Images are served as AVIF and WebP at the size each screen needs, and everything below the fold loads as it scrolls into view.

Check, on the live site	Result
Google PageSpeed Insights, homepage, mobile	100 Performance · 100 Accessibility · 100 Best Practices · 100 SEO
Lighthouse: home, category, product and guide pages, on mobile and desktop	100 in all four categories on all 8 runs
Largest Contentful Paint (Lighthouse)	1.5–1.7 s on mobile (simulated 4G), 0.35–0.4 s on desktop
PageSpeed Insights, Agentic Browsing	2 / 2
Cumulative Layout Shift	0
axe-core (WCAG 2.2 AA rules), 8 key pages on desktop and mobile	No violations
Keyboard	Skip link first, focus moves into the content, and every focused element shows an outline

Measured on deneanddune.co.uk, 17 September 2026.

The homepage on mobile, measured by Google PageSpeed Insights on the live site.

Privacy by default

Google Analytics 4 loads only after a visitor accepts analytics cookies. Until then, nothing is requested from Google.
The choice can be changed at any time from the footer or the cookies page, and the banner is compact on phones so it never covers the Add to basket button
The basket and wishlist stay in the visitor’s own browser
Security headers, including a Content Security Policy, with Brotli compression and long-lived caching

The promotional reel

To launch it, I cut a 24-second reel from the approved campaign film and frame-by-frame recordings of the live site, with an original soundtrack composed for it. Every cut lands on the beat, and the captions tell the story with the sound off.

Promotional reel for Dene & Dune: campaign film clips, then the live shop on a phone and on desktop, PageSpeed scores of 100, and an end card for deneanddune.co.uk

The result

Dene & Dune shows what an independent fashion retailer’s website can be when the brand, the photography, the shopping and the search work are treated as one job, and it still scores full marks for speed and accessibility.

There are no sales figures here, because there is nothing to buy. What there is, is the shop itself, live and working. Open it on your phone.