Latest posts Visit blog
Design examples

Design examples

Forty-four fully developed examples for retail, services and applications — seven of them a complete site with service, location and legal pages. Each shows how structure, typography and imagery can work together for an industry.

For context: These are exemplary design studies, not implemented client projects. Company names, prices, reviews and stock figures are invented. They exist to discuss design directions — not as a reference list.

Multi-page sites

7 examples

These examples cover a complete site rather than a single page: service tree, location pages, legal texts and forms are in place and can be clicked through.

Goldsmith and buyingDemo

Goldsmith with Buying Section

Two lines of business under one roof, each with its own entry point: the workshop for bespoke pieces and repairs, the buying side with a page per category. More than eighty pages show how depth of service is organised without overloading the home page.

Two divisionsDepth of servicePrice derivationAppointment
Open example - Goldsmith with Buying Section

Stonemason and natural stoneDemo

Stonemasonry with Location Pages

Memorials, bathrooms, floors and sculpture in one structure, plus a page for each surrounding town and a section for training and vacancies. Shows how a trade business serves two very different audiences on one site.

Service treeLocation pagesTrainingProcess
Open example - Stonemasonry with Location Pages

Building cleaningDemo

Cleaning Service by Sector

Eleven sectors and around twenty towns, each as its own page. Shows how a service business is organised along two axes — what is cleaned and where — without both axes telling the same story twice.

Sector pagesLocation pagesService areaQuote request
Open example - Cleaning Service by Sector

Repair and serviceDemo

Phone Repair with Price Grid

Repair type, device model and location produce several thousand individual pages, all built from the same template. Shows how such a body of pages stays maintainable without breaking the navigation.

Price gridDevice modelsLocation pagesMail-in service
Open example - Phone Repair with Price Grid

RentalDemo

Vehicle Rental in a Dark Scheme

A dark base scheme with a single strong accent. Vehicles and occasions are two routes into the same range; terms, deposit and rental conditions sit alongside the fleet rather than in the small print.

Dark schemeVehicle pagesOccasionsTerms
Open example - Vehicle Rental in a Dark Scheme

Property servicesDemo

Caretaker Service with Region

Nine services and eleven towns, deliberately kept small. Shows how a one-person business becomes visible regionally without building a structure it cannot maintain on its own.

Service pagesRegional pagesService areaContact form
Open example - Caretaker Service with Region

PharmacyDemo

Pharmacy with Pre-Ordering

Pre-ordering, emergency service and a guide covering six topics. Combines advice on site with a way to reserve medication in advance — without building the mail-order business a local pharmacy does not want to run.

Pre-orderEmergency serviceGuideServices
Open example - Pharmacy with Pre-Ordering

Retail and Shop

16 examples

B2B tradeDemo

B2B Spare Parts Portal

Ordering portal with price lists, quick entry and approval. Shows how an account, a catalogue and an ordering path work together when purchasing and approval are separate.

AccountPrice listsQuick entryApproval
Open example - B2B Spare Parts Portal

FashionDemo

Editorial Fashion Shop

Calm product staging with an editorial rhythm. Image and text alternate instead of filling a grid of tiles.

EditorialCollectionSizingNewsletter
Open example - Editorial Fashion Shop

FoodDemo

Farm Shop with Subscription Box

Direct sales from the farm with recurring delivery. Origin, season and collection stand alongside the range.

Subscription boxSeasonFarm shopCollection
Open example - Farm Shop with Subscription Box

ElectronicsDemo

Electronics Retail

Devices, accessories and repair in one structure. Technical data stays comparable without turning the page into a table.

ComparisonAccessoriesRepairAvailability
Open example - Electronics Retail

Sports and outdoorDemo

Outdoor Equipment

Equipment with advice and sizing guidance. The imagery carries the conditions the goods are used in.

AdviceSizingCategoriesSeason
Open example - Outdoor Equipment

FurnitureDemo

Furniture Workshop

Series and bespoke side by side, with material and workshop context. Shows how two production routes are explained without two websites.

Series and bespokeMaterialsWorkshopEnquiry
Open example - Furniture Workshop

Wine and spiritsDemo

Wine Merchant with Age Check

Range by vineyard and vintage. The age check is part of the flow rather than a barrier in front of it.

VineyardsVintagesAge checkTasting
Open example - Wine Merchant with Age Check

CosmeticsDemo

Natural Cosmetics

Care ranges with ingredients and routines. Efficacy claims stay out; the composition leads.

RangesIngredientsRoutinesTolerance
Open example - Natural Cosmetics

Pet suppliesDemo

Pet Supplies with Advice

Everyday needs with advice and collection. Navigation follows the animal, not the product group.

By animalAdviceCollectionReorder
Open example - Pet Supplies with Advice

Automotive B2BDemo

Vehicle Parts Catalogue

Parts catalogue with vehicle selection, stock and shipping. Shows how a large catalogue reduces to a few decisions.

Vehicle selectionStockShippingTrade account
Open example - Vehicle Parts Catalogue

PharmacyDemo

Mail-Order Pharmacy

Mail order with advice, prescriptions and availability. Mandatory information is built in, not appended.

PrescriptionAdviceAvailabilityDisclosures
Open example - Mail-Order Pharmacy

JewelleryDemo

Jewellery Workshop

Individual pieces with atelier and provenance context. Much white space, few items per screen.

One-offsAtelierProvenanceAppointment
Open example - Jewellery Workshop

D2C manufactureDemo

Writing Instruments

Fountain pens, inks and paper with workshop service. Returns and spare parts rank equal to sales.

Workshop serviceSpare partsReturnsVariants
Open example - Writing Instruments

Craft and branchesDemo

Bakery with Branch Network

Range, bakehouse and seven branches without a shop function. The range breaks into its components rather than a product grid.

Range filterBranch railDay pickerAllergens
Open example - Bakery with Branch Network

D2C roasteryDemo

Coffee Roastery with Subscription

Origin, roast level and subscription. The proof of quality is a macro shot ahead of the product, not behind it.

Roast filterProduct railSubscription calculatorOrigin
Open example - Coffee Roastery with Subscription

Specialist retailDemo

High-End Audio Storefront

Storefront for a specialist audio retailer: range, trade-in, listening appointment and a fully worked product view on a single page, laid out for a Shopware 6.7 shop.

StorefrontProduct viewTrade-inAppointment
Open example - High-End Audio Storefront

Business and Practice

15 examples

PracticeDemo

Specialist Medical Practice

Services, consultation hours and appointments. The page answers first what patients actually ask first.

HoursServicesAppointmentAccessible
Open example - Specialist Medical Practice

Law firmDemo

Law Firm

Practice areas, team and initial consultation. Restrained typography, clear responsibilities.

Practice areasTeamConsultationMandate
Open example - Law Firm

Real estateDemo

Estate Agency

Properties with features, location and enquiry. The portfolio stays readable as it grows.

PropertiesLocationFeaturesEnquiry
Open example - Estate Agency

ArchitectureDemo

Architecture Practice

Projects, approach and process in calm order. The image leads, the text stays brief.

ProjectsApproachProcessContact
Open example - Architecture Practice

Trade businessDemo

Solar and Heat Pumps

From roof survey through to commissioning, in seven stages. The entry point asks about the problem, not the product.

Process chainEstimatorObjectionsCallback
Open example - Solar and Heat Pumps

LogisticsDemo

Freight and Contract Logistics

The chain from pickup through to delivery, three locations. Figures sit inside sentences rather than tiles.

Problem entryService chainLocationsFigures
Open example - Freight and Contract Logistics

StudioDemo

Yoga and Strength Studio

Timetable as a real time grid, rooms and membership. On the phone the plan becomes a day view, not a squeezed table.

TimetableClass filterAudiencesTrial session
Open example - Yoga and Strength Studio

Commercial spaceDemo

Coworking in a Former Factory

Four space types, building and onboarding. A sticky chapter bar keeps a long page manageable.

Chapter barSpace typesGalleryViewing
Open example - Coworking in a Former Factory

Financial servicesDemo

Independent Wealth Management

Mandate, investment principles and process. Trust without portraits and without a single return figure.

Mandate typesPrinciplesProcessFirst meeting
Open example - Independent Wealth Management

ConsultingDemo

Executive Search, Two Paths

Companies and candidates on one home page, treated equally. The chosen path swaps the entire middle section.

Dual pathSectorsProcessDual form
Open example - Executive Search, Two Paths

OpticianDemo

Optician with Workshop

Two trades under one roof: sight and hearing, each with its own workshop. Shows how a specialist shop puts measurement, fabrication and appointment into an order that makes sense.

Vertical navigationAppointmentWorkshopTwo locations
Open example - Optician with Workshop

Dental technologyDemo

Dental Laboratory for Practices

A laboratory working exclusively for dental practices: types of restoration can be filtered, and the path from work order to delivery can be read from the practice's or the laboratory's point of view. Shows how a specialist supplier without end-customer business explains its work.

Service filterProcess axisTwo viewsWork order enquiry
Open example - Dental Laboratory for Practices

Culture, Education and Non-Profit

4 examples

Cultural venueDemo

Art Hall with Changing Exhibitions

Runs, collection and education. The page is greyscale; colour comes only from each exhibition's own artwork.

Time filterColour codingProgrammeVisitor info
Open example - Art Hall with Changing Exhibitions

Educational institutionDemo

Private School with Boarding

Three stages, three audiences, admissions. A switch in the header swaps the entry point for parents, pupils and staff.

AudiencesStagesDaily routineAdmissions
Open example - Private School with Boarding

Professional trainingDemo

Corporate Training Academy

Course catalogue with formats and dates. Two levels of detail in the same rhythm keep a very long page scannable.

Chapter barFormat filterDate pickerEnquiry
Open example - Corporate Training Academy

Non-profitDemo

Conservation Foundation

Projects, impact and support without sales logic. Every figure sits in a sentence, none in a tile.

Project filterSupport tiersArea calculatorUpdate feed
Open example - Conservation Foundation

Application

2 examples

SaaS interfaceDemo

Workflow Platform

Product page and analytics for a specialist system. Dark surface, a numbered section chain as reading progress.

Product pageAnalyticsDark modePricing tiers
Open example - Workflow Platform

App interfaceDemo

Fitness and Habit App

App interface with daily overview, history and settings. Operated through bottom sheets rather than page changes.

Daily overviewHistoryBottom sheetsGoals
Open example - Fitness and Habit App
Demo