Latest posts Visit blog
Design examples

Design examples

Forty-three 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

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

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

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

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

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

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

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

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

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

ElectronicsDemo

Electronics Retail

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

ComparisonAccessoriesRepairAvailability
Open example

Sports and outdoorDemo

Outdoor Equipment

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

AdviceSizingCategoriesSeason
Open example

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

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

CosmeticsDemo

Natural Cosmetics

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

RangesIngredientsRoutinesTolerance
Open example

Pet suppliesDemo

Pet Supplies with Advice

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

By animalAdviceCollectionReorder
Open example

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

PharmacyDemo

Mail-Order Pharmacy

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

PrescriptionAdviceAvailabilityDisclosures
Open example

JewelleryDemo

Jewellery Workshop

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

One-offsAtelierProvenanceAppointment
Open example

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

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

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

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

Business and Practice

14 examples

IndustryDemo

Mechanical Engineering Company

Manufacturing with processes, tolerances and enquiry. Technical depth without a datasheet look.

ProcessesTolerancesReferencesEnquiry
Open example

PracticeDemo

Specialist Medical Practice

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

HoursServicesAppointmentAccessible
Open example

Law firmDemo

Law Firm

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

Practice areasTeamConsultationMandate
Open example

Real estateDemo

Estate Agency

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

PropertiesLocationFeaturesEnquiry
Open example

RestaurantDemo

Restaurant with Reservation

Menu, atmosphere and reservation. The menu is readable rather than an embedded PDF.

MenuReservationHoursAtmosphere
Open example

ArchitectureDemo

Architecture Practice

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

ProjectsApproachProcessContact
Open example

HotelDemo

Hotel with Enquiry Flow

Rooms, house and enquiry in calm imagery. Mood and facts stay separate, not blended.

RoomsHouseEnquirySurroundings
Open example

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

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

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

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

Financial servicesDemo

Independent Wealth Management

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

Mandate typesPrinciplesProcessFirst meeting
Open example

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

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

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

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

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

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

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

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
Demo