案例 · Web

Ribspan:市政玻璃花房網站 UI 概念(Landing / Houses / Display)

原創高保真網站 UI 概念,面向一座市政玻璃花房:帶鐵架玻璃房插畫的首頁、三座花房平面,以及本週展出的 Marsh Cycad 專頁。虛構品牌,資料均為 DEMO,不是真實園圃,也不是參觀指南。

  • 4 張圖片

圖片署名:Tink

Ribspan 是一款原創高保真網站 UI 概念,設定在虛構的 Westmere Gardens 裡的 Ribspan Houses:三座鐵架玻璃花房,走一段短路就能串起來。

三個頁面

Landing(首頁)。 標題 “Under glass, this week.” 旁邊是一座由程式碼繪製的拱形玻璃房。今天是 11 月 12 日週四,開放 10:00–16:30,最晚入場 16:00,三座花房合計 262 種 DEMO。虛構展品 Marsh Cycad 正在 Palm House 結球。卡片給出三座花房:Palm House 86 種、Fern Walk 112 種、Alpine Court 64 種,並註明 11 月 14 日週六 14:00 有一場講座。

Houses(花房)。 三座花房的平面,由西入口一條連通的地面路徑串起。各房數字與頁腳一致:86 + 112 + 64 = 262。

Display(展品)。 深色專頁介紹 Marsh Cycad。頁面標明這是虛構展品,不是真實植物,也不是養護建議。展期為 11 月 12 日週四至 29 日週日。下一場講座是 11 月 14 日週六 14:00,已預約 24 / 40 席,DEMO。

視覺系統

  • 灰米色、鐵綠色、葉色、花色和玻璃色
  • 標題用 Bodoni Moda,介面用 Outfit,標註用 IBM Plex Mono
  • 玻璃房、平面和蘇鐵均以 SVG 繪製
  • 公共導航:Visit、Houses、What's in bloom、Talks、Plan a visit

說明

Ribspan 是虛構品牌。Westmere Gardens、三座花房、物種數量、開放時間、Marsh Cycad 和講座都是演示用的 DEMO 資料,不是真實園圃、名錄或參觀指南。這是靜態設計研究,不是真實網站。全部畫面由程式碼繪製,沒有照片或第三方標誌。