網站設計 Web Design

作者：手心設計事務所編輯部｜最後更新：2026-10-10

手心設計的網站設計服務，從網站企劃、資訊架構與線框圖（wireframe）開始，接著做介面視覺、插畫與響應式（RWD）版型，一路做到後台介面、程式建構與上線，建置階段會運用 AI 工具輔助。網站是品牌識別最常被看見的地方，所以我們會把您既有的色彩、字型與圖像語言一起帶進網站。高雄市政府青年局的無障礙網站，就是照這套流程完成，並取得無障礙標章。

高雄市政府青年局網站首頁同時顯示在桌上型螢幕、平板與筆電上，畫面中央為標語「青年築夢，創造高雄。」與黃色色塊框住的青年人像｜手心設計事務所 — 高雄市政府青年局網站的首頁，在桌機、平板與筆電上各自排版。　看這個案子：網站設計｜高雄市政府青年局無障礙網站

「我們要做網站」通常是下面三種情況之一。起點不同，要準備的東西也不同。

情況	從哪裡開始
識別已經定了，官網跟不上	LOGO、品牌色、字型都有規範，只是網站還停在舊版型，手機上也不好讀。網站直接延伸既有規範，從架構與版型開始。
品牌本身還沒整理好	網站上要寫「我們是誰」，但公司內部的說法還不一致。建議先看品牌設計或品牌識別 CIS，網站可以同步規劃，或排在識別之後。
機關、學校或資訊量大的單位	服務對象多、內容層級深，還要通過無障礙檢測。時間要先花在使用者與架構上，下方的青年局案例就是這種情況。

分不清楚屬於哪一種，可以直接留下需求，初談時一起判斷從哪一層開始最省。

網站建置前，最常卡在哪裡？

網站案最常卡住的地方在內容與架構，視覺通常是後面的事。我們在案子裡最常遇到這四種情況：

資訊很多，使用者卻沒有耐性。
高雄市政府青年局網站的初稿提案寫明，網站的使用者每天接收的訊息量大、比較沒有耐性，所以語氣要避開宣導式、教條式的說法。如果您的網站也要向民眾說明補助、申請或法規，資訊怎麼分層要比版面先定。
同一個網站，要服務兩種以上的人。
全能外語的網站企劃把主要瀏覽者定為家長、主要學習者定為國小學童：家長要即時掌握班級訊息，孩子要能在課後自主複習。架構上因此把最新消息與線上學習分成不同區塊，讓兩群人各有入口。
內容很專業，讀的人很緊張。
吳博貴醫師的網站要說明骨腫瘤與手術治療。手心畫了治療過程、諮詢狀況與流程圖，也為各種症狀設計專屬的插畫角色，希望病友與家屬瀏覽時能少一些緊張。
功能先列了一長串，卻沒想過誰來維護。
會員、購物車、多語系、表單、電子報，每多一項功能，上線後就多一份要有人照顧的工作。合成帆布行的網站把購物商城做成店裡的老儲櫃，出發點是幫忙解決店面繁忙的問題，功能是跟著這個需求長出來的。

發包前，可以先想好哪五件事？

不用一次準備齊，但下面五件事想得越清楚，報價與時程就越準確：

內容: 未來要放的圖、文、影片、檔案有哪些，哪些已經有、哪些要新寫。文案要讓人讀得下去，也要把讀者會搜尋的詞自然寫進去；品牌故事寫進去，讀者才記得住。
架構: 把內容分門別類畫成樹狀圖。分層通常不超過三層，第一層盡量在十個以內。先草擬就好，網站企劃時我們會一起調整。
功能: 會員、購物車、多語系、可編輯內頁、文件下載、諮詢表單、搜尋……列出真的需要的，也想好上線後由誰維護。我們依功能範圍報價。
版面: 收集兩、三個喜歡的參考網站，說明喜歡的地方。手機上怎麼讀，要和電腦版一起看。面談後我們提出版面建議。
風格: 色彩、質感、圖像的參考，或幾個形容詞，例如活潑、專業、簡潔。已經有品牌識別規範的話，網站直接延伸它。

手心怎麼做網站？每一步交付什麼？

手心的網站案分成六個階段，每個階段都有一份可以核對的提案或檔案，您確認後才往下一步：

網站企劃

先定義誰會來看、來做什麼，以及網站要用什麼語氣說話。青年局網站在畫第一張圖之前，先寫下三個網站目標與溝通調性「年輕、活力、專業、感動、直覺」。

交付網站企劃目標使用者網站目標溝通調性與避免事項
架構與線框圖（wireframe）

把單元、層級與每一頁的區塊先用線框畫出來，確認資訊放對位置，再談顏色。全能外語在 2019 年 7 月提了兩版 wireframe，把網站分成最新消息、關於全能、各地分校、線上學習、聯絡我們五個區塊。

全能外語網站首頁的 wireframe：導覽列、主視覺區與課程資訊，先確認每一區放什麼，再進入視覺。　看這個案子：網站設計｜全能外語官方網站

交付網站架構圖各頁 wireframe區塊說明
視覺規範與首頁初稿

定出網站的色彩計畫、字體與首頁主視覺。已經有品牌識別的夥伴，網站從既有規範延伸：吳博貴醫師的網站先提出網站用的色彩計畫與字體標準，配色沿用吳醫師 CIS 的色彩計畫，再往下發展 Banner 與醫師角色。

吳博貴醫師網站的色彩計畫：骨頭色彩加上低彩度色系鋪底，輔助色只用在按鈕、分類與重點。　看這個案子：網站設計｜吳博貴醫師官方網站

交付色彩計畫字體標準首頁初稿
內頁精稿、圖示與插畫

內頁版型、icon、插畫與資訊圖像在這個階段完成。青年局網站把補助申請流程畫成流程圖；全能外語在精稿之後陸續完成 icon 與整套手繪插圖，用老師與孩子的人物、書本、地球儀串起各個區塊。

全能外語網站的內頁：標題放在藍、黃色的圓形色塊裡，資訊分類一眼就能辨認。

交付內頁精稿icon插畫流程圖
響應式與無障礙調整

同一套版型，在手機、平板、電腦上各自排好。機關網站另外檢查色彩對比，以及用鍵盤操作時的焦點樣式。

交付各裝置版型無障礙配色焦點樣式說明
建置、後台與上線

設計確認後，手心接著做程式建構與後台介面，直到網站上線；建置階段會運用 AI 工具輔助。青年局網站的範圍一路做到程式建構，並另外設計了後台介面。

青年局網站的後台設計稿「新增自然人／公司資料」：上線後由誰更新、在哪裡更新，也是設計的一部分。

交付後台介面設計程式建構網站上線

網站是三件事同時被檢驗的地方

載入速度、版面，以及您說了什麼

手心相信好的設計站在哲學、科學、美學的交集上，對應到品格、品質、品味。網站特別誠實⁠——它的每一項都可以被外人量測，包括您沒打算讓人量的那些。

科學 → 品質

載入速度、行動裝置適配、無障礙、結構化資料，這些都有數字。做得好不好，工具直接打得出分數，沒有模糊空間。
美學 → 品味

版面決定訪客願不願意讀下去。第一個畫面留不住人，後面寫得再好也沒有機會被看見。
哲學 → 品格

網站上寫的每一句話都是承諾。誇大的說法會在第一次合作時被拆穿⁠——所以我們寧願把限制也寫出來。

三者統合，才會有好的產出與成果。完整說明請看關於手心。

代表案例：高雄市政府青年局無障礙網站怎麼做？

2019 年，手心為高雄市政府青年局設計官方網站，範圍從網站企劃、架構規劃、草圖、UI 系統、插畫、版面視覺到程式建構。青年局是高雄市政府新成立的一級機關，網站是青年找資源的入口，也是青年和市府溝通的管道。

先定使用者與語氣

初稿提案先寫下網站要服務誰：在地與返鄉的畢業生、返鄉就業青年、創業族群，以及從其他縣市來到高雄的青年。提案寫明這群使用者訊息量大、比較沒有耐性，因此溝通調性定為「年輕、活力、專業、感動、直覺」，並避開宣導式、教條式的語氣。網站目標有三個：以青年為主角提供必要資源、成為青年與市府溝通的媒介、成為青年行銷自己的平台。

架構讓青年找得到資源

網站分成關於青年局、好青年推播、青年補給站、申請進度查詢、我要發問等單元。青年補給站再依需求分成找資金、找空間、找課程、找活動：補助頁的申請流程畫成流程圖，申請資格用文字說明，表單採收合設計；找空間用地圖標出各基地，分成政府共創基地、學校育成單位與民間孵化器三區。首頁下方的各科室資訊也可以收起、展開，避免一次出現太多資訊。