案例

Fenwater Film Week:電影節網站 Web UI 概念(Landing / Programme / Film)

原創高保真 Web UI 概念,獻給小鎮電影節:官網落地頁、行事曆式的排片格與影片詳情頁。電影節與影片皆為虛構,資料均為 DEMO,不是真實活動。

  • 4 張圖片

圖片署名:Tink

Fenwater Film Week 是一款原創高保真 Web UI 概念,獻給一個在沼澤小鎮舉辦十晚的獨立電影節:四個場館,外加一塊架在老港口上的露天銀幕。

三個頁面

Landing(落地頁)。 窄體海報字標題「Ten nights of films that stay up late」旁邊,是一幅夜景插畫:放映機把開幕影片投到水面上的銀幕。四個關鍵數字與四個以顏色區分的單元(Night Shift、Water Stories、First Features、Short & Loud)把訪客引向排片。

Programme(排片)。 把電影節的一天排成週計畫表的樣子:場館為欄、時間為列,每場放映都是對應單元顏色的柔和色塊。左側是電影節日期、場館篩選、單元標籤與深色的「My plan」卡片。右側顯示選取影片的片長與映後座談,並在與已加入計畫的場次時間重疊時給出清楚的提示。

Film(影片)。 開幕片的深色詳情頁:以程式碼繪製的大幅劇照、片名、導演與簡介,三個場次與剩餘座位條、預約按鈕,以及同一單元的更多影片。

視覺系統

  • 白天頁面用暖紙色與墨色,影片頁用深色影院模式,酒紅色是唯一的操作色
  • 海報式標題用 Big Shoulders,點綴用 Newsreader 斜體,介面用 Inter Tight,時間用 Geist Mono
  • 四種低彩度單元色,既是標籤也是排片色塊
  • 範例時間都對得上:片長加映後座談與色塊長度一致,計畫總時長與所選影片一致

說明

Fenwater Film Week 及其場館、影片與人物皆為虛構。所有日期、票價與座位數均為示範用 DEMO 資料。這是一份靜態設計作品,不是真實活動或售票服務。包括劇照在內的所有圖形均以程式碼繪製,未使用照片、真實劇照或第三方標誌。