01
往下一站，先認識品牌
首屏的雙杯主視覺之後，首頁接著以大幅情境照與「一起乘著紅茶巴士」標語帶出品牌故事，再引導進入品牌故事內頁。
紅茶巴士 Black Tea Bus｜品牌官網設計案例
我們做了什麼一杯紅茶冰，
就是一張上車的車票。
紅茶巴士以美式街頭潮流翻玩傳統茶飲。官網要同時服務兩種人：想找飲品與門市的顧客，以及評估加盟的創業者。我們梳理需求，把「巴士」的旅程感變成網頁的節奏——每往下捲一段，就像往下一站前進。
Key Visual
一個主體，
一個主體，
貫穿整站
One red cup, the whole journey.
讓品牌最有代表性的紅杯成為網站主角，
跟著訪客一路往下逛，串起每一個段落。
01 · Motion杯子會跟著你轉往下滑，紅杯就跟著轉動、移動，像在帶路一樣。
02 · Smooth畫面流暢不卡頓動態經過輕量化處理，打開就順，不用等影片載入。
03 · Mobile手機一樣好看iPhone、Android 都能完整呈現，不會變成一張死圖。
04 · Brand一看就記得同一顆紅杯出現在每個段落，逛完整站，品牌印象自然留下來。
Homepage
首屏就是品牌宣言
Big type, flying cups, one slogan.
A · Navigation三入口導覽STORY / DRINKS / JOIN US 對應三種訪客，Logo 置中像車頭。
B · Hero雙杯 + 茶液飛濺紅白雙杯交錯傾斜，配合茶液倒入的動態，第一眼就是「冰」。
C · Slogan下一站，好茶手寫感斜體標語＋門市情境圓窗，把「旅程」故事收進首屏。
Design System
復古巴士塗裝，
復古巴士塗裝，
變成網頁的設計語彙
Paint job, typography & icons.
PRIMARY#C8262A
INK#1E1917
CREAM#FBF6F0
DEEP#9E1519
WHITE#FFFFFF
英文大標
Exo 2CHILL ON THE ROAD
Exo 2CHILL ON THE ROAD
中文標題
Noto Sans TC下一站，好茶
Noto Sans TC下一站，好茶
英文內文
PoppinsThe cup of black tea in your hand is like a ticket.
PoppinsThe cup of black tea in your hand is like a ticket.
圖形元素
巴士・站牌・標誌
巴士・站牌・標誌
Website Planning
從認識品牌，
從認識品牌，
到找到下一站
One website, one connected journey.
02
把品牌個性，變成空間語言
點餐吧台、候車椅與品牌地標，以並列圖文展示門市細節，讓加盟者看見同一套識別如何落地。
03
點一下，換一杯茶
首頁推薦區下方排著招牌飲品，點選任一杯，上方大圖與直排風味介紹即時切換，不用離開首頁就能挑到想喝的那杯。
04
依縣市篩選，找到下一站
縣市標籤快速篩選，每間門市都以「〇〇站」命名，地址、電話與營業時間整齊排列，延續巴士路線的語言。
Features
跑馬燈 | 飲品卡 | 站點地圖，
跑馬燈 | 飲品卡 | 站點地圖，
處處都是巴士感
Small interactions, one journey.
CHILL ON THE ROAD — CHILL ON THE ROAD —
BLACK TEA BUS — BLACK TEA BUS —
CHILL ON THE ROAD — CHILL ON THE ROAD —
01
斜向跑馬燈
品牌標語以斜向雙排滾動，像巴士經過的車身字。
02
熱銷飲品卡
情境照 + 三行風味描述，滑過即放大，降低選擇負擔。
門市據點 GET OUR LOCATIONS
- 台中漢口站台中市北區漢口路四段284號週一～週日 09:30–21:30
- 台中一中站台中市北區一中街19號週一～週日 11:30–22:00
- 逢甲大學站台中市西屯區逢甲路21號週一～週日 10:30–00:00
- 東海大學站台中市龍井區新興路38-2號週一～週日 10:00–22:00
- 豐原總站台中市豐原區博愛街122號週一～週日 10:00–20:30
- 台中東興站台中市南屯區東興路二段700號週一～週日 10:30–20:00
- 台中漢口站台中市北區漢口路四段284號週一～週日 09:30–21:30
- 台中一中站台中市北區一中街19號週一～週日 11:30–22:00
- 逢甲大學站台中市西屯區逢甲路21號週一～週日 10:30–00:00
- 東海大學站台中市龍井區新興路38-2號週一～週日 10:00–22:00
- 豐原總站台中市豐原區博愛街122號週一～週日 10:00–20:30
- 台中東興站台中市南屯區東興路二段700號週一～週日 10:30–20:00
03
台灣地圖 × 站名列表
點亮的台中地圖配上「〇〇站」列表，上下滑動就能查地址、電話與營業時間。
JOIN US04
JOIN US 浮動鈕
站牌造型的加盟入口常駐右側，任何頁面都能一鍵上車。
Responsive
手機上，也一樣大膽
Thumb-first, type still loud.
Website Overview
每一頁，都在同一條路線上
從首頁出發，認識品牌、瀏覽飲品，再找到離你最近的一站。
Next Stop
從一杯紅茶，
從一杯紅茶，
到一段旅程。Chill on the road.
Crew專案團隊
- No.01Project ManagerJoy
- No.02Designervava
- No.03FrontendDylan
Design & Development · iBest · 2026