WorkWeb & UI/UX
Perrin House
A website for an imagined eight-room guesthouse, designed around one question: what would make you want to arrive?
- Discipline
- Website design
- Year
- 2026
01Context
Perrin House does not exist. I invented it to test an idea: small hotel websites tend to look like large hotel websites with fewer rooms. They borrow the booking widget, the carousel, and the promises, and lose the thing that makes a small place worth finding.
The brief I set myself was a guesthouse with eight differently shaped rooms, one shared breakfast table, and an owner who would rather you read about the stairs than a list of amenities.
02Objective
Design a site that sells a feeling of arrival without hiding the practical answers: what the rooms are like, whether they are free, and how to get there.
Booking had to stay within reach on every page, but it was not allowed to become the only thing the page was about.
Creative direction
Quiet enough to hear the building.
The layout borrows from small-press books more than hotel templates: a large serif headline set like a chapter opening, generous plaster-colored margins, and photographs that get to be different shapes because the rooms are.
Clay is the only strong color, and it is reserved for the moment you act or the word you should notice.
03Design approach
- 01
Content before layout
I wrote the room descriptions first. Knowing that one room has a strange slanted ceiling changes the page more than any grid decision would.
- 02
A list instead of a card grid
Rooms are presented as a typographic index, with one photograph changing beside the list. It reads like a table of contents and works just as well on a phone.
- 03
Booking in plain language
The summary reads “Three nights, in spring” before it shows any dates. You are told what you are about to do in the words you would use to describe it.
- 04
Mobile as its own composition
On a phone, the headline keeps its size and the booking bar becomes a single fixed line. Nothing is simply stacked and shrunk.
04Typography & color
The system
Lime plaster
Page ground
#F3EDE3
Old stone
Secondary surfaces
#D8CBB6
Umber
Text and booking bar
#33261C
Clay
Action and emphasis
#A9552F
Instrument Serif
Headlines and room names
Eight rooms,
Instrument Serif Italic
The word that matters
one long table.
Manrope
Reading text and interface
See which rooms are free
IBM Plex Mono
Small facts and labels
COURTYARD / 21 M²
One system at three sizes, composed separately for each.
The headline stays the main event at every size. On tablets the image pair rearranges beneath it, and on phones the booking action moves into a fixed bar, so it is never more than a thumb away.
05Final design
Where it landed.
The result is a site that behaves like the place it describes: unhurried, a little particular, and clear about the practical things when you need them.
As this is a concept study it has not been built or tested with real guests. What it demonstrates is how I think about structure, voice, and hierarchy when the brief asks a website to have some character.
Photography from Unsplash: Glenna Haug, Timiciuc Andrei, Azzedine Rouichi, Clay Banks.
Next project
Fenn & Tallow
Brand identity & logoLike the way this was approached?
Let’s talk aboutyour project.
Your project would get the same attention to detail. Tell me about it, and I’ll get back to you about the next steps.