Brand Identity · Web Design & Build · Print — 2024

Alastair Smith
Ceramics

A working ceramicist deserved a site that worked as hard as he does. Built to show the craft — and sell it.

Client

Alastair Smith

Location

Deemouth Artist Studios, Aberdeen

Scope

Brand Identity · Web Design & Build · Print

Stack

HTML · CSS · JavaScript · Shopify

Status

Live — Netlify

Alastair Smith Ceramics — wide studio shot or flat lay of fired tableware

Problem

The work was serious.
The presence wasn't.

Alastair Smith produces handcrafted, wood and gas-fired functional wares — mugs, bowls, plates and sculptural objects made for everyday use at Deemouth Artist Studios in Aberdeen. The ceramics are serious work. The existing digital presence was non-existent. There was nothing that matched the quality of the objects, nothing that told the maker's story, and nothing that helped a browser become a buyer.

Insight

Two journeys.
One site to hold both.

Visitors to a ceramicist's site arrive in two different states of mind. Some are ready to buy — they want to see the range, check the price, and get to a basket. Others arrive curious about the maker and need to be convinced. Most ceramics sites serve one of those journeys adequately. This one had to hold both, simultaneously, without compromising either. The navigation structure and the page hierarchy were built around that tension.

Design Intent

Warm but not rustic.
Professional but not cold.

The brief was clear on tone: the site had to feel like the ceramics. Warm without being folksy, considered without being clinical. The mark — a pottery wheel rotated 45° to read as a Saltire — set that register before a word of copy appeared. Everything else in the identity followed from it: a dark chocolate primary colour pulled directly from Alastair's fired clay surfaces, and typography that could carry both maker's voice and commercial function.

Outcome

Live on Netlify.
Shopify ready — not activated.

Five-page coded site, live. Identity delivered: logo, wordmark, brandmark variants, business cards. The Shopify store was designed and integrated on the development side — the store was not activated due to an unresolved payment dispute with the client. The design and build scope is fully represented by the live site. A working ceramicist now has a web presence that shows what the work is worth.

5

Pages — fully coded

250+

Product images — curated and edited

4

Logo Mark Variants - Dark and Light Mode ready and flexible across platforms

Live on Netlify

Sketches first. The brief was specific — Scottish, ceramic, both at once, neither announced — so the early exploration was a search for a single structural device that could carry both readings without explaining itself. Pages of marks before anything stuck.

From the mood board, the visual register was set: dark, considered, restrained. A working ceramicist's brand, not a craft-fair stall. The textures and colour swatches that came out of that exploration fed directly into the surface treatments used across the site.

Once the mark resolved, the system followed quickly — colour tokens, type ramps, button states, info-card behaviours, navbar iterations. Every component was iterated to a specification before being implemented.

Initial pencil sketches exploring the Alastair Smith Ceramics mark — potter's wheel + saltire geometry Sketch — early mark exploration
Initial mood board — dark chocolate, fired clay tones, restrained typography references Mood board — visual register
Alastair Smith Ceramics colour collection — palette derived from fired clay surfaces Colour — pulled from the work
Alastair Smith Ceramics colour shades — accessibility-tested ramps for each base colour Colour shades — accessible ramps
Button iterations and states — design system component exploration Buttons — iterations and states
Navbar and menu iterations — exploring header structure across breakpoints Navbar — iterations
Info card components — hover and active state changes documented in the design system Info cards — state changes
Page section blocks — composing layouts from system components Page sections — system composition
Alastair Smith Ceramics primary logo — a stylised potter's wheel that doubles as a St Andrew's Cross

The Mark

A pottery wheel that's also
a St Andrew's Cross

The brief was to make something that felt genuinely Scottish and genuinely ceramic at the same time — without being obvious about either. The solution was structural: the spokes of a pottery wheel, rotated 45°, form the exact geometry of the Saltire.

One mark. Two readings. Neither one announced. The dark chocolate colour was Alastair's own — pulled from the fired clay surfaces he produces, deep and warm without tipping into brown. The founders recognised the double reading immediately. That's usually the sign a mark is working.

Alastair Smith Ceramics logo — dark version Logo — dark variant
Alastair Smith Ceramics — mobile site view Mobile — iOS view
Alastair Smith Ceramics design system Design System — a complete digital system for the brand
Home

First impression — maker before maker's market

The homepage establishes the register: a ceramicist who takes the work seriously. Hero photography, a single statement, and a clear path to either the process or the shop. Nothing distracts from the object.

About

The maker's story

Studio location, background, practice. Written to be read by someone who hasn't decided yet. The about page is part of the sales path even if it doesn't look like one.

Process

The heaviest strategic page — price justification

Wood-firing and Raku are slow, skilled, physically demanding. Showing the process isn't storytelling — it's price justification. A piece through a 12-hour wood firing isn't priced the same as factory ceramics. This page makes sure the visitor understands why before they reach the shop. It's the page that turns a browser into a buyer.

Gallery

Filterable by type — 50+ images curated

Alastair's photography was excellent raw material. Over 50 product images curated and organised for web delivery. The grid layout lets pieces breathe without becoming a catalogue. Filterable by form — mugs, bowls, plates, specials.

Shop

Shopify — linked, not embedded

The store sits as a linked destination rather than being embedded in the site. That decision keeps the experience clean — the site does the convincing, the store does the transaction. Integration complete on the development side; not activated due to a client payment dispute.

Alastair Smith Ceramics website — desktop view Desktop — five-page coded site
Alastair Smith — process photography, firing or throwing Process — wood & gas firing
Alastair Smith Ceramics — Design System Iteration
Alastair Smith Ceramics — mugs or bowls
Alastair Smith Ceramics — design system variables
Liquid CSS variables system — design tokens implemented in code CSS variables — tokens in code
Liquid template snippet — Shopify theme code structure Liquid — Shopify theme structure
Alastair Smith Ceramics homepage — full screenshot of the live site Homepage — full view
Alastair Smith Ceramics process page — wood firing and raku documentation Process page — price justification
Alastair Smith Ceramics mobile hero — homepage above the fold on phone Mobile hero — first impression
Alastair Smith Ceramics — second mobile homepage view, scroll state Mobile — scrolled state

Site is live: frabjous-frangipane-243c8e.netlify.app — Shopify integration was completed on the development side but not activated due to a incomplete payment. The full scope of the design and build is represented by the live site.

The mark had to be Scottish and ceramic at the same time — without announcing either one. — Design Rationale, Alastair Smith Ceramics, 2024
Identity Logo, wordmark, brandmark variants. Dark chocolate primary — pulled from fired clay surfaces. Delivered as SVG, PNG, and print-ready PDF.
Site Five-page coded site. Home, About, Process, Gallery, Contact. Mobile-first throughout.
Stack HTML, CSS, JavaScript. Hosted on Netlify. Shopify store linked as external destination.
Gallery Filterable by form type. 50+ product images curated and optimised from client's photoshoot.
Print Business cards. Dark chocolate on cream stock. Logo, wordmark, contact. Print-ready files supplied.
Shopify Store architecture, product setup, theme customisation completed. Not activated — client payment dispute.

Next Project

Andra's Garden Heaven