我喜歡的網頁模板

Dribbble · Falah Studio

黑白肖像配細明體引言和三個數字，像雜誌的攝影師專訪頁，安靜又有質感。

看範例

Aura · Photography Portfolio Landing Page Template

灰綠底色加大字標題壓在照片上，莫蘭迪感很重，作品排列也整齊。

到 Aura 看

Webnode · 攝影師模板

白底三欄方格放低彩度風景照，字很少、留白很多，莫蘭迪色的作品集範本。

Webnode 頁面看 Demo

Webnode · 婚禮攝影師模板

細襯線標題加整齊的照片方格，柔和不甜膩，換成一般人像作品也適合。

Webnode 頁面看 Demo

Dribbble · Blaze Smith

上半部只有一行標題和大量留白，下半部是滿版的底片照片牆，照片自己說話。

看範例

GitHub · TryGhost

Ghost 官方的攝影主題：首頁就是不規則照片格，點進去看大圖。開源可直接架站。

看範例原始碼

Aura · Photography & Videography Studio Landing Page Template

米白底配細長襯線字「Two Mediums, One Vision」，幾乎全是留白，照片一出場就是主角。

到 Aura 看

Webnode · 攝影作品模板

整頁黑白大圖，名字小小壓在角落，照片本身就是版面，很有攝影集的安靜感。

Webnode 頁面看 Demo

Dribbble · Anubhav · Stellar UI

米白底、細明體大標題、一篇一張大照片，是最接近 M4 氣質的部落格。

看範例

Dribbble · Zuairia · Ofspace

單篇文章頁：大標題、引言放大、照片穿插在文字間，適合長文閱讀。

看範例

Webnode · 美食部落格模板

木桌俯拍食材的大照片加白底文章列表，清爽好讀，很像日系料理雜誌。

Webnode 頁面看 Demo

Webnode · 家居風尚部落格模板

灰綠色調的雜誌式拼貼首頁，文章卡片疊得密卻不亂，資訊量和留白剛好。

Webnode 頁面看 Demo

Aura · Zero-Waste Frugality Blog Template

淡綠色系，大圖加數字卡片，生活型部落格少見的乾淨版面。

到 Aura 看

Dribbble · Favour Olusanya

兩欄文章卡片配側欄「本週熱門」，照片色調一致，文章多也不亂。

看範例

Aura · Creative Journal Blog Page Template

左側目錄、右側文章大圖，像 Notion 一樣好讀的文章版型。

到 Aura 看

Webnode · 藝術部落格模板

左邊文章、右邊作者介紹的經典雙欄，白底細字，像一本乾淨的創作筆記。

Webnode 頁面看 Demo

Dribbble · Julia Zahorodnia

置中刊頭、滿版頭條照片、柔和暖色，像紙本雜誌的封面翻成網頁。

看範例

Dribbble · Schwiena

米色紙感底、襯線大標題，頭條加最新文章列表，網站和 App 一套設計。

看範例

GitHub · TryGhost

Ghost 官方新聞主題：上方分類、頭條大圖加右側列表，開源可直接改成每日新聞頁。

看範例原始碼

Aura · 音樂文化期刊模板

白底細線的編輯排版配黑白照片，文章列表清楚，是音樂主題的安靜版本。

看範例

Webnode · 政治新聞部落格模板

置中大字報頭、分類選單和新聞照片，結構就是一份簡單的線上報紙。

Webnode 頁面看 Demo

Aura · Digital Trust Journal Template

淺灰底加大號襯線標題，帶一點藍色斜體強調，很像嚴肅的新聞專題頁。

到 Aura 看

Aura · Vintage Newspaper Landing Page Template

真的做成舊報紙的版頭、欄線和黑白照片，第一眼就很有記憶點。

到 Aura 看

Aura · Yunjian Mountain Retreat

雲霧山景加細字，「Stay above the clouds」，東方水墨感，很靜。

到 Aura 看

Dribbble · Stacy More

和室木格窗與暖色燈光的真實照片，大標題壓在照片上，日系靜養感。

看範例

Dribbble · Shuvo

森林湖畔的大照片配細明體大字，下面是設施與房型照片，留白很多。

看範例

Aura · Editorial Stays Booking Landing Page Template

雜誌式排版的訂房頁，大量留白、一張森林小屋照片就很有氣氛。

到 Aura 看

Aura · ÂTMA Luxury Wellness Hotel Template

米色紙感加粗細混排的襯線大字，大地色系，產品介紹頁也能套。

到 Aura 看

Webnode · 山居飯店模板

峽灣紅屋的大照片加房型、價格、預約頁，民宿或小旅店可以直接套。

Webnode 頁面看 Demo

Dribbble · 212 Heights

暖棕和米白、柔光照片、斜體襯線字，氣氛很放鬆。

看範例

Dribbble · LAIN

白牆拱門的建築照片、霧藍灰點綴，乾淨到幾乎沒有裝飾。

看範例

Webnode · 旅遊札記模板

海景全版大圖疊上細字標題，下面一篇篇遊記，畫面很有旅行的空氣感。

Webnode 頁面看 Demo

Aura · Koisei Luxury Cultural Journey Landing Page Template

櫻花、錦鯉和水墨拼貼，日系卻不俗氣，動態也很輕。

到 Aura 看

Webnode · 城市模板

湖畔小鎮照片加左右分欄的活動、住宿、交通資訊，景點介紹資訊很齊。

Webnode 頁面看 Demo

Dribbble · Growmelab

淺灰綠底、深綠按鈕，產品照放在苔蘚和樹葉之間，完全是莫蘭迪綠。

看範例

Aura · Artisanal Matcha E-commerce Landing Page Template

石臼抹茶的俯拍特寫加直排日文，日系清新的完整範例。

到 Aura 看

Dribbble · Oripio

超大細字標題加一張焦糖色沙發照，桌機和手機版都有。

看範例

Aura · 永續電商模板

大理石檯面上的真實商品照，墨綠與米白的大地色，商品頁乾淨。

看範例

Webnode · 木製玩具模板

暖白底配原木玩具照片，配色溫柔，產品介紹和購物車都已排好。

Webnode 頁面看 Demo

Webnode · 陶瓷專賣店模板

白底灰陶的商品方格，幾乎沒有多餘裝飾，極簡選物店的標準樣子。

Webnode 頁面看 Demo

Dribbble · Ilya Kolesnikov

米灰底、粗黑標題、燈具照片排成格子，產品就是主角。

看範例

Dribbble · Maaz Mirza

奶油米色、細明體、抹茶飲品照片，日系咖啡店的味道很足。

看範例

Dribbble · Dujima Studio

照片像扇子一樣散開在暖白底上，主廚和料理照真實。橘色字可換成土色。

看範例

Dribbble · Marko Cvijetic

白色標題框和奶茶色色塊並排，下面一張店內實景照，簡單耐看。

看範例

Webnode · 咖啡廳模板

米白底、原木桌椅的店景照片，字很少，安靜的社區咖啡店氣氛。

Webnode 頁面看 Demo

Aura · 咖啡店模板

店內真實照片配襯線大標，菜單和營業資訊分段清楚。

看範例

Webnode · 咖啡廳模板

淺鼠尾草綠底配明亮店內照，菜單、預約一應俱全，日系清新感最強。

Webnode 頁面看 Demo

Aura · Vietnamese Restaurant Menu

奶油色底、圖文並排的菜單清單，資訊多但不亂，適合點餐頁。

到 Aura 看

Webnode · 法式餐廳模板

深色桌面上的香料與料理俯拍配細字，高級餐廳的沉穩質感。

Webnode 頁面看 Demo

Dribbble · Topnotch

米色、細明體、一排作品照片，從首頁就看得出工作室的品味。

看範例

Aura · Vellum Studio Architecture & Interior Design Template

深色照片配淡色外框，「Spaces drawn from light」，光影質感很好。

到 Aura 看

Webnode · 室內設計工作室模板

奶油色客廳照片加細字標題，柔和的大地色，很適合設計或顧問公司。

Webnode 頁面看 Demo

Dribbble · Flick Studio

灰棕大地色、大標題配建築照片條，下面有服務和 FAQ，資訊完整。

看範例

Dribbble · Wingly

白底配溫暖的陶土色家具照，數字和作品格子排得很整齊。

看範例

Aura · Architecture Project Case Study Page Template

「We shape timeless spaces」，大字加細線分隔，公司官網的極簡寫法。

到 Aura 看

Webnode · 建築工作坊模板

藍天下的白色現代建築大照片，下面是服務與作品集，極簡又大器。

Webnode 頁面看 Demo

Webnode · 建築師事務所模板

白底大標題配一張住宅實景，建案列表排得整齊，專業但不冰冷。

Webnode 頁面看 Demo

Dribbble · Nucleus UI

一題一頁的米色卡片：「今天想喝什麼口味？」三選一，配咖啡照片，最接近你要的測驗感。

看範例

Aura · Longevity Medicine Quiz Landing Page Template

米色底加優雅襯線題目，選項卡片簡單清楚，測驗也能很有質感。

到 Aura 看

Aura · Personality Test Question UI Template

一題一頁的大字問答，復古米色調，作答體驗很專心。

到 Aura 看

自製 · tony197653/bot

會考答案卡風：一題一頁四選一，答完馬上看對錯和解說，做完看分數，可只重練錯題。

看範例原始碼

自製 · tony197653/bot

文科測驗模板：可選題型、一回10題、答完即看解說、錯題再練。

看範例原始碼

自製 · TU 的 Canvas

整份寫完才交卷，交卷後看各單元強弱表和詳解。題目是私人資料，只借版型，縮圖是示意。

看 Canvas（要登入）

自製 · PL 規劃中

把參考書題目轉成線上題庫，樣式走 B 安靜高級，縮圖是樣式 B 樣張。預定網址 /bot/quiz-bank/

上線後補連結

Dribbble · Designkast

上方進度條、左邊照片、右邊選項，手機版也有。換掉題目就能做練習題。

看範例

Dribbble · Designkast

「第 1 題 / 共 4 題」加一張柔光人像，選項是圓角列表，乾淨好點。

看範例

Aura · Soluna Premium Yoga Studio Template

黑白人像配圓形裁切和灰綠點綴，「Move. Breathe. Become You.」節奏很舒服。

到 Aura 看

Webnode · 芭蕾學院模板

米白底配舞者照片和優雅襯線字，課程、新聞、預約分頁清楚。

Webnode 頁面看 Demo

Dribbble · Muhammad Dian Muhafids

淡蜜桃色、細明體、課程卡配人像照，像日系生活風的課程頁。

看範例

Webnode · 音樂學院模板

師生彈吉他的大照片配樂譜底紋，課程和線上預約都有，像才藝班官網。

Webnode 頁面看 Demo

Aura · AI Education Landing Page Template

綠色襯線大標「Grow Your Knowledge」，留白多、配色清爽。

到 Aura 看

Dribbble · Attractive UI

米色底、真人學習照、課程列表一行一門，資訊清楚又不冷冰冰。

看範例

Aura · Cherry Note AI Study Companion Landing Page Template

極簡白底的讀書工具介紹頁，排版輕盈，適合做學習 App 首頁。

到 Aura 看

Dribbble · Odama

大張學習照片當首頁，下面課程分類和方案價格，結構完整。綠字可改成灰綠。

看範例

Webnode · 網球學院模板

紅土球場的動態照片，孩童、成人、一對一課程與價格一目了然。

Webnode 頁面看 Demo

Aura · Learning Platform Landing Page Template

暖奶油色底配一點橘色，數字和按鈕清楚，溫暖不幼稚。

到 Aura 看

Aura · Adaptive Learning Platform Landing Page Template

展示課程、App 畫面與學習進度卡，灰白配黑的俐落組合。

到 Aura 看

Dribbble · Ági Rigó

整片米黃和咖啡色的資料卡，示範大地色也能做資訊密集的報表。

看範例

Dribbble · Pradip Karki

把客廳照片直接放進儀表板，旁邊是房間列表和設備卡，灰米色很柔和。

看範例

Dribbble · Olack

左側選單、中間房型照片和說明、右側訂單明細，照片和資料平衡得好。

看範例

Aura · 市集預約後台模板

白底資訊密集的後台，攤商資料、預約和商品照片都排在同一頁。

看範例

Aura · SellsDash Admin Dashboard Template

白底細線表格加少量重點色，像 Linear 一樣乾淨的後台。

到 Aura 看

Aura · User Authentication Admin Panel

Meng To 做的淺色管理面板，側欄、卡片、表格比例都很標準。

到 Aura 看

Aura · Fitness Admin Dashboard UI Template

淺色底、圖表和數字卡排列緊湊，資訊密集又不壓迫。

到 Aura 看

Dribbble · Soraya Woest

左邊簡單表單，右邊一幅淡粉櫻花山水畫慢慢淡出，最有日系清新感。

看範例

Dribbble · Growmelab

左邊極簡表單，右邊綠葉與肌膚的真實照片，和 L1 Vella 是同一套。

看範例

Aura · User Login Interface with Social Options

米色底加咖啡色按鈕，莫蘭迪配色的登入表單，很少見。

到 Aura 看

Aura · User Authentication Login Form

淡杏色背景配橘粉色按鈕，柔和、簡單、看起來很友善。

到 Aura 看

Dribbble · Dmitry Sergushkin

左邊登入表單，右邊木屋庭園照片和一句使用者推薦語，常見又耐看。

看範例

Dribbble · Morva Labs

淡藍雲天照片上放一張置中的白色卡片，安靜輕盈。

看範例

Dribbble · Maria Brilkova

白色表單配一張床邊木櫃的室內照，安靜、溫暖、沒有多餘的東西。

看範例