自學成為網頁設計師？非本科生設計師的告白(上)

在開始之前先自我介紹一下我的背景，我本身從高職到大學，整整7年都在讀電子系的理工男子，完全沒有任何設計美學的背景與經驗

唯一可以與美學沾上邊的事情，大概是在大三時候，因為穿著的改變，開始被朋友們注意

有些朋友開始會詢問我如何挑選和搭配衣服，這時候我才跟美感有點關聯

而會踏上網頁設計師之路的契機，是因為我去報名了網站程式設計課程，但每次看到一行行的程式碼卻感覺很無聊，只有在上網頁視覺設計這一部分，才特別興奮

而且再怎麼厲害的程式編碼都需要視覺來做結果的呈現，所以我就非常想要知道如何設計厲害的網站，那時我才知道原來我的興趣不是在寫程式，而是在視覺的呈現

但 非設計科班生，能夠成為網頁設計師嗎？

這是很多的疑問，所以下面我要分享的內容，會是以沒有任何設計背景的人如何成為網頁設計師

一、如何開發一個網站

既然要成為網頁設計師，我們當然需要先瞭解網站是如何開發出來的

1.網頁與網站的差別在哪？

什麼是「網站」呢?  其實網站就是多個網頁的集合，網站設計者將整個網站架構規劃好後，再分別製作各個網頁，透過網頁間彼此互相連結，使瀏覽網站的人都能連結到各個網頁來觀看，這樣的網頁架構就稱為「網站」。

2.網站開發流程

一般網站開發前，我們會先透過訪談溝通來知道我們要開發什麼？需要哪些功能？要達到什麼結果？

例如：
我們要製作電子商務網站，主頁需要展示當期活動圖片，用戶能從網站挑選產品和線上購買，並且希望第一次購買的用戶不用花太多時間註冊…等

再將這些需求整理、分析條列出來後，開始交付給相關專業人員去做執行，下面圖片是常見的開發流程

階段一：需求訪談

• 透過訪談了解需求
• 功能製作評估、時程規劃

階段二：資料蒐集與規劃

• 專案資料蒐集統整
• 架構、流程與頁面規劃

階段三：網頁設計製作

• 首頁提案
• 提案確認後進行內頁版面製作
• 全部頁面定稿
• 切版、RWD、特效動畫製作

階段四：網頁程式製作

• 資料庫規劃、後台建置
• 前台程式開發

階段五：網站測試與上線

• 網站測試
• 網站上線

二、開發網站需要哪些角色

要開發一個完整的網站，除了需要設計師以外，當然還要其他專業的人才能夠完成，下面我們就來認識這些夥伴

1.專案經理（Project Manager，PM）

PM最大的任務就是排除所有問題，將 Project 如期、如規格「正確」的執行完成，而這過程中需要大量與人的溝通，對外要面對客戶，對內要面對老闆、設計師、工程師。

2.設計師（Designer）

雖然這篇主要講的是“網頁設計師”，但在這邊我只想稱為設計師，原因是專案開發的類型不同，對於設計師的稱呼也不同

像是網站類型的設計師會稱為“網頁設計師”，APP類型的會稱為“UI設計師”，會這樣區分的原因是因為，需要運用到的技能與知識不一樣，但核心工作都是要運用視覺設計方式，來呈現產品的使用樣貌

因為工程師的程式編寫得再怎麼好，如果沒有好的視覺設計去做呈現，使用產品的人很難體會，畢竟大多數人是以視覺和體感來感受

那“UI/UX設計師”是什麼？可能有些人聽過這職務，以後會再寫另外一篇文章與大家分享

3.前端工程師（Front-end Engineer，F2E）

基本上前端工程師，就是一個網站門面的負責人，前端工程師主要職責是根據網頁設計師的設計圖，建立流暢、友善的使用者介面，讓使用者可以順利地與產品互動，找到並使用網站上的各種功能。

以室內設計為例，就好像裝潢師傅一樣，主要工作就是將室內設計師的設計圖實作出來。

4.後端工程師（Backend Engineer）

網頁的後端包括服務器、應用程序、演算法、程式邏輯、以及數據庫設計。這些組件相互作用，使用 API 和前端通信，確保了網頁前端的存在。

以建築設計來說，建造一間屋子，光有室內設計還是遠遠不夠的，還要有人先將屋子實體建出來、配好水電管線等基本設置。於是後端工程師的主要工作，就是基底的搭建和維護這些組件。

現在好像還有“全端工程師”？以後會再寫一篇文章與大家分享他與前端、後端工程師差異

5.專案測試者

在專案完成推出之前都必經一段測試，雖然在程式開發的過程中，工程師們都會檢測自己開發的程式

但整體專案完成後，仍需要完整的測試，主要會以正常測試、不正常測試、效能測試等方面進行

例如：操作流程是否順利、有沒有什麼部分等待太久卻沒有回應、內容文字是否正確、網站是否穩定、網站突然當掉的應變措施…等等

測試這部分非常重要，畢竟這會是使用者最直接的感受。

三、網頁設計師的工作內容

這邊就要具體說明，在開發網站當中網頁設計師所要負責的工作

1.瞭解需求

設計的核心精神，其實就是要為某些事情或狀況找出更好的解決辦法，所以開始設計之前，必需要瞭解目標、要解決事情、想要達到的效果…等

這部分會跟PM(Project Manager)有密切的合作，若對象是客戶的話，會要一起瞭解客戶的需求，有些PM很容易就可以瞭解客戶的需要，並統整歸納功能、網站走向。

但若沒有這樣的PM，設計師就需要自己去瞭解和訪談，並和客戶有一定的共識

這非常重要，因為若沒有共識，那之後設計師所做出來的東西一定會偏離原本的對方想要的樣子，但對於不知道自己要什麼的客戶就另當別論了。

2.規劃網站地圖(site map)

了解需求後，就會先規劃網站總共需要有哪些網頁，以及網頁與網頁之間的關聯，一般會以樹狀圖去做呈現，如下圖

以線上購物網站為例子，基本會有首頁、產品分類、產品介紹、訂購流程、訂單記錄…等頁面，樹狀圖的結構可以讓我們知道進入網站會先看到首頁，然後由首頁前往到其他的頁面。

這部分可以幫助客戶、開發者和自己對網站的大體結構認知。

3.操作流程設計(flowchart)

操作流程主要關係到使用者體驗（User Experience，UX），一個好的流程可以幫助使用的人舒服的完成他要完成的事情

流程圖主要是用來梳理出操作的步驟路線，一般呈現會如下

以線上購物網站為例，若使用網站的人要購買網站的商品，那他在購物流程中會遇到到哪些事情，像是購買人是否需要會員身份？那他如果目前還沒有會員身份要如何購物？

透過流程圖我們才會知道在大網頁裡面，我們還需要設計哪些子畫面給使用者看到，像是操作資訊提示、錯誤資訊提示等

4.頁面佈局安排(wireframe)

這階段已經開始設計網站畫面的雛形了，但主要會以框線圖(wireframe)做呈現，如下圖

框線圖都會順著flowchart來繪製網頁各個需要的畫面，並作佈局網頁的資訊、按鈕等元素，也稱為排版

框線圖有個很重要目的，是用來與客戶、開發人員討論畫面中各個功能的呈現方式。

5.視覺設計(visual design)

視覺設計就是要將顏色、造型、圖片、字體等各樣元素都加入進去網頁當中，也是最後網站完成要呈現的樣子，這應該是熱愛視覺設計的人，最喜歡的部分。

網頁設計師在這部分不僅僅只是要將網站設計的很漂亮，因為不漂亮只是設計師要解決的最基本一件事情

設計師還需要深入去設計網站的用色、資訊排版呈現、眼球的視覺引導等等

6.網頁切版

切版其實就是要依照網頁平面圖的設計，用網頁語法將它編寫出來，這部分有點類似是在寫程式，因為需要使用HTML和CSS來做編輯，無法像在繪圖軟體上拿畫筆隨意繪畫。

但切版工作其實不是每間公司的網頁設計師都需要去做，因為切版已經算是踏入前端工程師的工作範圍之一，前端工程師本身就是掌管網站畫面的所有呈現

只是前端工程師做出來的網站，可能會跟設計圖有些落差，像是字體大小、顏色、排版等等，不是每個工程師對於視覺呈現，都很要求細節的完整度

因為前端工程師切版完成後，還要去完成功能的串接和顯示效果，這也是他們最大部分時間的工作。

小結

這篇主要帶大家初步認識網頁設計師的工作內容，以及會接觸到的人事物，下一篇我會開始分享關於如何自學成為網頁設計師的方法，如果你看完後覺得網頁設計師這份工作很有趣，那就別錯過我的下一篇文章。

延伸閱讀：
自學成為網頁設計師？非本科生設計師的告白(下)
UI、UX是什麼?平面設計轉職必看
一起在家自學網頁UI設計，線上課程推薦懶人包

若你喜歡我的這篇文章，麻煩拍5次下面小手給予我支持與鼓勵喔！