CASE STUDY
Architecture and interior design studio
An editorial site for an architecture studio, with a CMS the partners publish projects from themselves.
THE PROBLEM
Atelier is a high end architecture and interior design studio. Their work is photographic and slow, and the site needed to read like a book about the studio.
THE DECISIONS
Each decision, why I made it, and what it cost.
Some projects matter more to a studio than others. Giving one more of the grid says so before anyone reads a caption.
The card takes its width as a setting instead of being two components. The home page runs seven and five columns, the work page cycles seven, five, six, six, and a gallery image can take all twelve.
The content model decides what the site can say. Designing pages first leads to a CMS full of free text fields that are hard to lay out.
There are two content types, a project and a studio member. Running order is a plain number the partners set themselves.
Alt text gets skipped on a busy week unless the system requires it.
An image cannot be published without a description, on the cover or in the gallery.
Opening a project should feel like moving closer to the photograph, not loading a new page.
The animation removes the element you clicked, which would leave keyboard users with no focus. When it finishes, focus moves to the project heading.
On paper and charcoal, one warm colour can mark everything interactive: links, focus rings, the active filter.
Clay is the only non neutral colour, so it always means interactive.
THE DESIGN SYSTEM
Paper and charcoal, with clay as the only accent.
Newsreader
A serif with optical sizing. Headings at 400 and 500, italic for emphasis, tighter letter spacing at display sizes.
Public Sans
Two weights, 400 and 500, for labels, small print and navigation.
HOW IT WAS BUILT
THE OUTCOME
