作品集網站範例：給設計師、開發者與創作者的 14 個點子

最好的作品集網站會快速做好三件事：說明你是誰、你做什麼，展示幾件你最好的作品並附上背景，並讓人容易與你聯絡。以下是 14 個作品集網站範例。其中五個是我們在 2026 年 10 月實際瀏覽過的真實網站；另外九個則是不同類型作品的常見模式，並未指名特定網站。之後會提供檢查清單、常見錯誤，以及建立作品集的方法。

14 個範例一覽

真實的作品集網站，以及它們做得好的地方

描述為 2026 年 10 月的狀況。

1. Brittany Chiang：開發者招募人員需要的一切

Brittany Chiang 的網站以一句關於打造易用、精緻網頁體驗的標語，介紹她是一位前端工程師。導覽列可在關於我、經歷與專案之間快速切換。每份工作都列出雇主、日期、簡短描述與技術標籤，並附上完整履歷的連結。精選專案有截圖、說明與連結，而「查看完整專案封存」的連結則收納其餘所有作品。寫作區則連結到她的文章。

可借鑑之處： 首頁只展示最好的幾項，其餘的收納在封存區。標籤讓人容易快速掃過，找到特定的技能。

2. Jessica Hische：兼具事業經營的作品集

Jessica Hische 的網站將她呈現為字體藝術家、作者與創業者。客戶作品依類別分組（廣告、書籍與影視、編輯、產品），每個專案都有一張連結到完整頁面的縮圖，說明文字口語化並解釋了製作流程。除了作品之外，還有委託、演講、輔導、書籍、商店的頁面，以及針對不同類型詢問的獨立聯絡信箱。

可借鑑之處： 如果你販售多種東西，請為每一項提供獨立的路徑與聯絡管道，讓正確的詢問能找到你。

3. Lee Robinson：樸素的文字，清晰的思考

Lee Robinson 的網站是一個極簡的單頁：簡短的個人簡介、一份主題筆記清單，以及依日期排列的部落格文章。聯絡方式是一個電子郵件連結與一個 X 個人檔案。

可借鑑之處： 對於以想法為核心工作的人，寫作本身就是作品集。一份附日期的標題清單既容易閱讀，載入也很快。

4. Paco Coursey：簡短而有主張的區塊

Paco Coursey 的網站將他描述為一位打造介面的設計師與開發者。頁面有幾個簡短區塊：他正在打造的東西、三個開源專案、寫作、一個談論目前興趣的「現況」區塊，以及聯絡連結。

可借鑑之處： 「現況」區塊是一個簡單的方式，能讓作品集感覺即時且具個人風格，而不需要部落格。

5. Bruno Simon：網站本身就是作品

Bruno Simon 的作品集是一個互動式的 3D 世界，你可以駕駛一輛小車穿梭其中，支援鍵盤、滑鼠、觸控與遊戲手把操作，還有成就系統與計時競速模式。「幕後」區塊說明了技術架構，並附上原始碼連結。

可借鑑之處： 對於創意開發者來說，一個實驗性的網站可以是最有力的技能證明。但它不太適合大多數其他職位，因為只想看履歷的訪客必須先玩過遊戲。

可以直接套用的作品集模式

6. 案例研究型作品集

三到五個專案，每個都有獨立的頁面：問題、你的角色、限制條件、流程（草圖、反覆修改）、成果，以及你下次會如何改進。在頁面頂端用一句話先點出成果。最適合產品設計師與 UX 研究員。

7. 照片網格作品集

大張影像以網格或全幅序列呈現，依相簿分組（婚禮、人像、商業）。文字極少，影像載入快速，每個相簿都附上預約或詢問連結。請參閱如何建立攝影網站。

8. 寫作作品集

把你最好的文章依主題或刊物分組，每篇都附上標題、刊物、日期與一句話摘要。連結到線上原文，並保留一份 PDF 副本，以防文章下架。

9. 單頁式自由工作者網站

你做什麼、為誰服務、三件作品、起始價格或價格區間（如果你願意公開），加上推薦語與聯絡表單。當目標是取得詢問而非求職招募時，這種形式很合適。

10. 學生或初階作品集

把課程與個人專案當成真實的工作來呈現：題目說明、你的決策，以及成果。一個簡短的「我正在學什麼」區塊可以顯示你的發展方向。連結到程式碼與線上示範。

11. 影片精華作品集

頁面頂端放一段 60 到 90 秒的精華影片，之後是各個附有署名與你角色的專案。將影片託管於專為影片設計的服務，讓頁面保持快速。

12. 建築或室內設計作品集

依類型篩選的專案（住宅、商業），每個專案都附上照片、平面圖與關於設計需求的簡短說明。地點與年份能幫助客戶找到相關的作品。

13. 數據或研究作品集

幾篇已發表的分析，附上一兩張互動圖表、筆記本或報告的連結，以及每項發現的白話摘要。

14. 連結型個人頁面作品集

適合主要活躍於社群平台的創作者：一個以手機為優先的頁面，包含你最近的優秀作品、你的各個頻道，以及聯絡或預約連結。請參閱如何建立連結型個人頁面。

最佳作品集的共同特點

• 一句話的自我介紹。 你的名字與你做什麼，使用客戶或招募人員會用的字眼。
• 精選的作品。 幾件有說服力的作品，其餘的放在封存區。
• 每件作品的背景說明。 你的角色、問題與成果。單靠視覺效果無法說明你的決策。
• 容易聯絡。 每一頁都有電子郵件連結或簡短表單，而不是藏在頁尾裡。
• 快速且易讀。 最佳化的圖片、清楚的字體，並能在手機上正常使用。
• 保持更新。 最近的作品或「現況」筆記，顯示你仍然活躍。
• 如果可以，使用自己的網域。 讓網址永遠屬於你。

常見錯誤

• 什麼都放。 十個普通的專案會掩蓋住兩個出色的作品。
• 沒有說明。 一整排截圖並不能說明你做了什麼。
• 聯絡方式不易找到。 如果人們必須到處翻找電子郵件，很多人就會放棄。
• 重形式輕內容。 過度的動畫拖慢頁面，或遮住了內容。
• 失效的連結與無法運作的示範。 在把網站寄給任何人之前，請檢查每一個連結。
• 使用不能公開的作品。 發布機密專案前，請先徵得客戶或雇主的同意；必要時請去識別化。

如何建立你自己的作品集網站

1. 確定你的受眾： 招募人員、客戶或合作夥伴。這會決定什麼內容該放在最前面。
2. 挑選三到六個專案，並為每一個寫一篇簡短的案例研究。
3. 選擇上面的一種模式，並草擬頁面：首頁、專案頁、關於我、聯絡。
4. 動手建置。 使用 Mythex，你可以在對話中描述你的作品集，在即時預覽中檢視，上傳你的圖片，並一鍵發布到網址（請參閱如何連接自訂網域）。你也可以從範本開始。如果你想把它當成學習專案，用手寫程式碼建置也是很好的選擇。
5. 請別人用手機檢視，並請他們告訴你，十秒鐘之後他們記住了你做什麼。

如果想要逐步的做法，請閱讀如何建立作品集網站；如果你主要需要在線上放一份履歷，請參閱如何建立履歷網站。

我們如何挑選這些範例

我們在 2026 年 10 月瀏覽了每一個被提及的網站，並只描述當時所展示的內容。我們挑選的是能說明清楚概念的知名網站，而不是「最佳」作品集的排名。這些模式則是以一般性方式描述的常見格式。

常見問題