專案實例
網站案例：一個完整網站是如何被做出來的？
2025.11.25
做網站，其實不需要想得很複雜！
以下是我們和客戶合作時最常見、最順暢的一套流程：
從「概念 → 設計 → 完成 → 教學」一步步陪著你走完。
以下是我們和客戶合作時最常見、最順暢的一套流程：
從「概念 → 設計 → 完成 → 教學」一步步陪著你走完。
01｜了解需求（討論方向 & 功能）
通常專案開始時，老闆會先把客戶的想法、需求告訴我：
想做什麼、要呈現什麼內容、需要哪些功能、網站風格喜歡哪種。
這階段的目的就是先確定方向，不急著做畫面。
這階段的目的就是先確定方向，不急著做畫面。
02｜網站架構 Sitemap（整體內容規劃）
接著我會依照需求，做出一份「網站地圖」。
Sitemap 就像蓋房子的平面圖，先決定：
Sitemap 就像蓋房子的平面圖，先決定：
-
網站有哪些頁面
-
內容怎麼分類
-
使用者要怎麼找到他想看的資訊
客戶確認架構後，我們就能往下一步走。
03｜挑選視覺風格（Moodboard / 參考風格）
在開始畫面前，我會和客戶一起討論網站的感覺：
是要活潑？專業？溫暖？科技感？
會提出幾種方向讓客戶挑選，確定基礎風格後，畫面才會設計得更準確。
是要活潑？專業？溫暖？科技感？
會提出幾種方向讓客戶挑選，確定基礎風格後，畫面才會設計得更準確。
04｜Wireframe 線框圖（初步版面規劃）
Wireframe 是沒有顏色的網站骨架，用來確認每個區塊的位置，例如：
-
Banner 在哪
-
圖片放哪
-
按鈕放哪
-
資訊順序怎麼跑
這階段重點是排版和邏輯，不是美術。
調整起來速度最快，也最能避免後面大改。
調整起來速度最快，也最能避免後面大改。
05｜Mockup 視覺稿（正式設計畫面）
Wireframe OK 後，就會進入完整的視覺稿：
會套上顏色、字體、圖片，做出「真正網站會長什麼樣子」。
通常會先做首頁給客戶確認方向，沒問題後再做全部頁面。
會套上顏色、字體、圖片，做出「真正網站會長什麼樣子」。
通常會先做首頁給客戶確認方向，沒問題後再做全部頁面。
這是整個流程中最重要的確認階段。
06｜前端切版（把設計變成真的網站）
Mockup 都通過後，就會開始切版。
這階段會做出：
這階段會做出：
-
電腦版畫面
-
手機版 RWD
-
基本互動效果（滑動、按鈕、動畫等）
此時的網站已經看起來很完整，但還沒與後台串接。
07｜後端後台設定（可自行更新網站內容）
網站完成後，會設定使用者後台：
像是新增文章、更換圖片、修改文字、更新 Banner…等。
能讓客戶未來不用找工程師也能自己更新網站內容。
像是新增文章、更換圖片、修改文字、更新 Banner…等。
能讓客戶未來不用找工程師也能自己更新網站內容。
08｜交接 & 教學（後台使用手冊 + 操作教學）
最後，我們會提供：
-
後台操作手冊
-
網站管理教學（可更新什麼、不能改什麼）
讓你接手後能輕鬆管理，不用擔心不會用。
⭐這整套流程不複雜，你只需要準備好你的內容與想法，剩下的交給我們規劃就好。
