Number Nine Café

A website for a small neighbourhood brunch café. Regulars can read the whole menu, order ahead and pick up from the shelf by the door, groups can ask for the one big table, and the order and booking messages go out on their own. 為一間社區小早午餐店製作的網站。熟客可以看完整菜單、先點餐再到門邊的架子取餐，人多的話可以申請那張大長桌，訂單和訂位訊息也會自動寄出。

Type類型: Concept (not a real café)概念作品（並非真實店家）
What I did我負責: Design, writing, photography direction, build and an automation example設計、文案、影像規劃、製作與自動化示範
Languages語言: English and Traditional Chinese英文與繁體中文
Year年份: 2026

Visit the site瀏覽網站 (opens in a new tab)（在新分頁開啟）

Number Nine home page: the headline Coffee from 7, eggs until 2 on navy, beside a large plate of scrambled eggs on toast

The brief需求

Number Nine isn't a real café. I wrote myself the kind of brief a small brunch place might bring me, then built the site as if it were going live. 九號咖啡並不是真實的店家。我替自己寫了一份小早午餐店可能會提出的需求，然後當作真的要上線一樣把網站做出來。

The problem: weekday mornings are a queue of regulars who want the same flat white on the way to work, and weekends bring groups who turn up and wait for a table. People also keep asking the same things: are you open, what can I eat if I'm vegan, until when do you do eggs. 要解決的問題：平日早上是一排趕上班、每天點同一杯馥列白的熟客；週末則是一群群朋友到了才等位子。客人也一直問同樣的事：現在有開嗎、吃全素可以點什麼、蛋料理供應到幾點。

So the site had to:所以這個網站必須：

say the hours and whether it's open right now on the first screen,在第一屏就說清楚營業時間，以及現在有沒有開，
show the whole menu with prices and plain dietary marks,列出完整菜單、價格和清楚的飲食標示，
let regulars order ahead for a real pickup time,讓熟客先點餐，選一個真的可以取餐的時間，
let groups ask for the big table, and send the confirmations without anyone typing them.讓人多的客人申請大長桌，確認訊息也不用有人手動打字。

Where the design came from設計從哪裡來

My first version built every section out of the café's paper: a menu sheet, a kitchen docket, a clip-out coupon. It worked, but it felt busy, and a brunch café should feel easy. So I started again with one idea: show the food, bigger than seems reasonable, and keep everything else plain. 第一版我把每個區塊都做成店裡的紙張：菜單、廚房出單、可以剪下來的訂位券。功能都有，但看起來太忙，而早午餐店應該讓人覺得輕鬆。所以我重新開始，只留一個想法：把食物放大到誇張，其他都保持簡單。

The colours come from the café's own things: the navy of its enamel mugs, white tiles, and tomato red kept for the order button only. One typeface in a few sizes. The Chinese version is set as its own page, with its own font and spacing, rather than as a translation squeezed into the English layout. 配色來自店裡的東西：琺瑯杯的深藍、白色磁磚，番茄紅只留給點餐按鈕。整頁只用一種字體、幾個尺寸。中文版當成獨立的一頁來排，有自己的字體和字距，而不是把翻譯硬塞進英文版面。

What I decided, and why我的決定與原因

The opening screen on a phone: Coffee from 7, eggs until 2, whether it's open now, and a large plate of eggs on toast

Open or not, on the first screen有沒有開，第一屏就知道

The headline is the hours. Under it, the page works out from the clock whether the café is open, when the kitchen stops, or when it opens next, so nobody has to call to ask. 標題就是營業時間。下面會依照當下時間，算出現在有沒有營業、廚房到幾點，或下次幾點開門，不用打電話問。

The menu on a phone: each dish with a small photo, its price, dietary marks and a plus button

A menu you can read in a queue排隊時也看得清楚的菜單

Seventeen dishes in four groups, each with a small photo where a bullet would be, the price, and vegetarian, vegan, gluten-free and dairy-free marks. On a phone, the group names stay at the top so you can jump between them. 十七道餐點分成四類，每一道都有一張小照片、價格，以及蛋奶素、全素、無麩質、無奶的標示。在手機上，分類名稱會固定在上方，方便直接跳過去。

A pickup order in Chinese, with the order-received and ready-on-the-shelf messages written out below it

Order ahead, get a message先點餐，等訊息

Tap + on anything and a small order bar appears. Pick a pickup time (only real times, from the hours and the kitchen's 2:00 cut-off) and a name for the bag, and the page writes out the two messages that could go out automatically: order received, and ready on the shelf. It's labelled as an example and nothing is sent. 按任何品項的「＋」，下方就會出現小小的訂單列。選一個取餐時間（只會出現營業時間內、廚房兩點前能做的時段）和袋子上的名字，頁面就會寫出兩則可以自動寄出的訊息：已收到訂單，以及已放上架子。這是標示清楚的示範，不會真的寄出。

The opening screen in Traditional Chinese, set in its own font with wider spacing

Chinese that isn't an afterthought中文版不是附帶的

Switching to Chinese changes more than the words. The headline is rewritten to fit two even lines, the dietary marks become words, and the text gets its own font, cut down to only the characters on the page so it stays fast. 切換成中文，改變的不只是文字。標題重寫成兩行整齊的句子，飲食標示改成中文，內文也有自己的字體，只保留頁面上用到的字，所以載入還是很快。

Around the site網站一覽

Number Nine Café

Home page首頁
The menu菜單
Ordering ahead, with the messages先點餐，以及會收到的訊息
The people店裡的人
Hours and booking the big table營業時間與預約大長桌

Where it stands目前成果

Because Number Nine is a concept, there are no customers to report on. The people, prices and address are made up, and the photos and the short clip of the room are AI-generated. A real café would use photos of its own food, room and team. 因為九號咖啡是概念作品，所以沒有實際客人的數據。人物、價格和地址都是虛構的，照片和店內的短片都是 AI 生成。真實的咖啡店會使用自己的餐點、店面和團隊照片。

For a real café, I'd measure how many orders come in ahead instead of at the counter, how long the morning queue is before and after, and how often the big table gets booked instead of groups waiting at the door. 如果是真實的咖啡店，我會追蹤：有多少訂單是事先點的而不是在櫃檯點、早上排隊的長度前後有什麼變化，以及大長桌被預約的次數，取代一群人在門口等位。

The next step would be connecting the order and booking forms to the café's own order system and LINE account, so the messages go out for real. 下一步就是把點餐和訂位表單接上店裡自己的點餐系統和 LINE 帳號，讓訊息真正寄出。

Want something like this for your business?想為你的店做一個這樣的網站嗎？

Start a project開始合作 Visit the site瀏覽網站 (opens in a new tab)（在新分頁開啟）