Showroom11Local business — barbershop
Iron & Oak
Shop blue
The barbershop cliché turned off: cool plaster, ruled boxes, and the whole site pointed at one button.
- Brand
- Iron & Oak — Barber Co.
- Where
- Wynwood, Miami
- Sector
- Local business — barbershop
- Quoted as
- Premium Websites · SignatureFrom $4,500
The door sign reads the clock, the comparison drags, the wizard walks three steps and confirms in the dark, and every slot grid shares its borders so the sheet stays a sheet. At 375px the board becomes one column and the booking keeps all three steps. Every venue, package and figure on it is invented, and no date is held.
New tab — the frame above is already running it.
01 — The brief
Black leather, brass, warm haze and a Didone — that is what every barbershop site in the city looks like, and it sells a mood to somebody who wants a chair at 10:40 on Saturday. The shop’s real problem was the phone: every missed call is a chair sitting empty, and the answers a customer needs before booking were three scrolls into an atmosphere.
02 — The direction
Shop blue
Three moves, in the order they were made. Everything after this page — the palette, the type, the sections — falls out of them.
- 01
The room got cool and the boxes came back
Plaster ground, ink hairlines, square corners, and everything on the page — the hero, the price board, the booking — bounded by one rule. It is the visual language of shop paperwork rather than of a fragrance campaign, and all the warmth now comes out of the photographs, which is where warmth belongs.
- 02
One color, off the jar
The blue on every barber’s station is the only color in the building, and it is spent on exactly one thing per screen: the option you have chosen, or the button that books the chair. Nobody has to be told twice what it means.
- 03
The signage face does the shouting
Big Shoulders was drawn for civic signs, so a headline can be enormous and still read as a shop rather than as a luxury brand. Space Grotesk, which descends from a monospace, sets every price and every time in a register that is not trying to charm anybody out of the number.
03 — Palette
The colors, and what each one is for.
Every value here is a real token in the build. A palette with a role written beside each color is a palette somebody can hand over — which is the difference between a design and a decoration.
Plaster
The page. Cool, never cream
Paper
Boards, cards, the booking sheet
Rule
Quiet hairlines inside a panel
Ink
Type, every border, the dark band
Steel
Secondary copy. A floor, not a start
Fog
Its opposite number in the dark band
Blue
The accent. One thing per screen
Sky
The same blue, as the dark band needs it
04 — Typography
Two faces, and the reason for both.
Display
Big Shoulders
Aa Bb Cc 0123
The quick brown fox jumps over the lazy dog — 1234567890
Drawn for civic signage: condensed enough to fit a long word across a narrow shopfront, heavy enough to read from the other side of 2nd Avenue. It carries an optical-size axis, so the wordmark and a section head are the same face at genuinely different drawings rather than one drawing at two sizes.
Text
Space Grotesk
Aa Bb Cc 0123
The quick brown fox jumps over the lazy dog — 1234567890
A grotesque descended from a monospace, which is exactly the register a price board wants — even, technical, and completely uninterested in persuading anybody. Its figures are the best argument for it: sixty dollars at 10:45 with André should read like a fact, because it is one.
05 — What it does
The part a template cannot copy.
A door sign that works out the time itself
Open or closed, and until when — computed from the shop’s own week rather than typed into a box. It knows that Monday is dark and that the last chair on Saturday is at 6:15.
Three taps and no phone call
Service, chair, time, two fields. Times already taken are struck through rather than hidden, so nobody taps a slot that was never there, and the confirmation reads the whole booking back.
The before and after, in the hand
A drag-to-compare frame that plays its own gesture the first time it appears, because nobody drags a slider they have not noticed is a slider. Nobody books off a price list; they book off the last head that walked out.
The board, as a board
Sixteen prices on one ruled sheet with the duration beside each, because the two questions before booking are what it costs and how long it takes, and both should be answerable without scrolling.
Next in the showroom
NextupSoft paper, hard hold