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 set the tone. 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 built on the development side but not activated at client's request. A working ceramicist now has a web presence that reflects what the craft is worth.

250+

Product images — curated and edited

5

Pages — hand coded like pottery is

4

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

1

Live site

Sketches first. The brief was specific — Scottish, ceramic, engineered precison and handmade craft all at once. But don't be literal. So the early exploration was a search for a single structural device that could all these meanings without explaining itself. Several 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 logo mark was 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 Variables — 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 — hover state changes
Page section blocks — composing layouts from system components Page sections — iterations of composition
Alastair Smith Ceramics primary logo — a stylised potter's wheel that doubles as a St Andrew's Cross

The Mark

A blend of engineering precision
and tactile softness

Alastair's grandfather was an engineer and metalworker. Alastair was also an engineer, before he became a ceramist, and he inherited their appreciation for the crafts spontaniety but also retained an instinctual need for a precise approach. The mark is a reflection of that heritage. Marrying the geometry of a metalworkers stamp with the hatchings of a compass, it connects name and mark simultaneously. A combination of precison tooling, craft and the natural variations of the ceramics process. The mark is a visual metaphor for the work itself. Engineered for Everyday.

One mark with Two readings. The dark chocolate colour was drawn from the first images of Alastair's own works that he had sent me. Pulled from the fired clay surfaces he produces, deep and warm without tipping into brown. Alastair recognised it immediately. That's usually the sign a mark is working. It was also a colour that worked with his colour blindess and be accessible across the board. The mark is designed to work in both light and dark variants, with the flexibility to be used across a range of applications from digital to print without losing its impact or legibility.

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 or the craft.

About

The maker's story

Our world is increasingly visual, but the story still matters. It can be the thing that turns a browser into a buyer.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 just 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 work was excellent raw material. Through SCM Design Studio, I arranged a photoshoot by Aberdeen Beach for his works. Over 250 product images taken, curated and organised for web delivery. The grid layout lets pieces breathe without becoming a catalogue. That would be for Shopify.

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 handles the transaction.

Alastair Smith Ceramics website — desktop view Desktop — five-page coded site
Alastair Smith — process photography, firing or throwing Macro — glazes & 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. Alastair-Smith.com .

The mark had to feel precise and soft 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 50+ product images curated and optimised from 250 piece photoshoot.
Print Business cards. Dark chocolate on cream stock. Logo, wordmark, contact. Print-ready files supplied.
Shopify Store architecture, product setup, theme customisation completed on the development side.

Next Project

Andra's Garden Heaven