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

自學成為網頁設計師？非本科生設計師的告白(上) · 1.專案經理（Project Manager，PM） · 2.設計師（Designer） · 3.前端工程師（Front-end Engineer，F2E） ... Skiptocontent(PressEnter) WrittenByJosephPublishedOn2020年5月20日2019年7月6日Category轉職分享轉職設計 在開始之前先自我介紹一下我的背景，我本身從高職到大學，整整7年都在讀電子系的理工男子，完全沒有任何設計美學的背景與經驗 唯一可以與美學沾上邊的事情，大概是在大三時候，因為穿著的改變，開始被朋友們注意 有些朋友開始會詢問我如何挑選和搭配衣服，這時候我才跟美感有點關聯 而會踏上網頁設計師之路的契機，是因為我去報名了網站程式設計課程，但每次看到一行行的程式碼卻感覺很無聊，只有在上網頁視覺設計這一部分，才特別興奮 而且再怎麼厲害的程式編碼都需要視覺來做結果的呈現，所以我就非常想要知道如何設計厲害的網站，那時我才知道原來我的興趣不是在寫程式，而是在視覺的呈現 但非設計科班生，能夠成為網頁設計師嗎？ 這是很多的疑問，所以下面我要分享的內容，會是以沒有任何設計背景的人如何成為網頁設計師 內容目錄 一、如何開發一個網站1.網頁與網站的差別在哪？2.網站開發流程二、開發網站需要哪些角色1.專案經理（ProjectManager，PM）2.設計師（Designer）3.前端工程師（Front-endEngineer，F2E）4.後端工程師（BackendEngineer）5.專案測試者三、網頁設計師的工作內容1.瞭解需求2.規劃網站地圖(sitemap)3.操作流程設計(flowchart)4.頁面佈局安排(wireframe)5.視覺設計(visualdesign)6.網頁切版小結 一、如何開發一個網站 既然要成為網頁設計師，我們當然需要先瞭解網站是如何開發出來的 1.網頁與網站的差別在哪？ 什麼是「網站」呢? 其實網站就是多個網頁的集合，網站設計者將整個網站架構規劃好後，再分別製作各個網頁，透過網頁間彼此互相連結，使瀏覽網站的人都能連結到各個網頁來觀看，這樣的網頁架構就稱為「網站」。

2.網站開發流程 一般網站開發前，我們會先透過訪談溝通來知道我們要開發什麼？需要哪些功能？要達到什麼結果？ 例如：我們要製作電子商務網站，主頁需要展示當期活動圖片，用戶能從網站挑選產品和線上購買，並且希望第一次購買的用戶不用花太多時間註冊…等 再將這些需求整理、分析條列出來後，開始交付給相關專業人員去做執行，下面圖片是常見的開發流程 階段一：需求訪談 透過訪談了解需求功能製作評估、時程規劃 階段二：資料蒐集與規劃 專案資料蒐集統整架構、流程與頁面規劃 階段三：網頁設計製作 首頁提案提案確認後進行內頁版面製作全部頁面定稿切版、RWD、特效動畫製作 階段四：網頁程式製作 資料庫規劃、後台建置前台程式開發 階段五：網站測試與上線 網站測試網站上線 二、開發網站需要哪些角色 要開發一個完整的網站，除了需要設計師以外，當然還要其他專業的人才能夠完成，下面我們就來認識這些夥伴 1.專案經理（ProjectManager，PM） PM最大的任務就是排除所有問題，將Project如期、如規格「正確」的執行完成，而這過程中需要大量與人的溝通，對外要面對客戶，對內要面對老闆、設計師、工程師。

2.設計師（Designer） 雖然這篇主要講的是“網頁設計師”，但在這邊我只想稱為設計師，原因是專案開發的類型不同，對於設計師的稱呼也不同 像是網站類型的設計師會稱為“網頁設計師”，APP類型的會稱為“UI設計師”，會這樣區分的原因是因為，需要運用到的技能與知識不一樣，但核心工作都是要運用視覺設計方式，來呈現產品的使用樣貌 因為工程師的程式編寫得再怎麼好，如果沒有好的視覺設計去做呈現，使用產品的人很難體會，畢竟大多數人是以視覺和體感來感受 那“UI/UX設計師”是什麼？可能有些人聽過這職務，以後會再寫另外一篇文章與大家分享 3.前端工程師（Front-endEngineer，F2E） 基本上前端工程師，就是一個網站門面的負責人，前端工程師主要職責是根據網頁設計師的設計圖，建立流暢、友善的使用者介面，讓使用者可以順利地與產品互動，找到並使用網站上的各種功能。

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

4.後端工程師（BackendEngineer） 網頁的後端包括服務器、應用程序、演算法、程式邏輯、以及數據庫設計。

這些組件相互作用，使用API和前端通信，確保了網頁前端的存在。

以建築設計來說，建造一間屋子，光有室內設計還是遠遠不夠的，還要有人先將屋子實體建出來、配好水電管線等基本設置。

於是後端工程師的主要工作，就是基底的搭建和維護這些組件。

現在好像還有“全端工程師”？以後會再寫一篇文章與大家分享他與前端、後端工程師差異 5.專案測試者 在專案完成推出之前都必經一段測試，雖然在程式開發的過程中，工程師們都會檢測自己開發的程式 但整體專案完成後，仍需要完整的測試，主要會以正常測試、不正常測試、效能測試等方面進行 例如：操作流程是否順利、有沒有什麼部分等待太久卻沒有回應、內容文字是否正確、網站是否穩定、網站突然當掉的應變措施…等等 測試這部分非常重要，畢竟這會是使用者最直接的感受。

三、網頁設計師的工作內容 這邊就要具體說明，在開發網站當中網頁設計師所要負責的工作 1.瞭解需求 設計的核心精神，其實就是要為某些事情或狀況找出更好的解決辦法，所以開始設計之前，必需要瞭解目標、要解決事情、想要達到的效果…等 這部分會跟PM(ProjectManager)有密切的合作，若對象是客戶的話，會要一起瞭解客戶的需求，有些PM很容易就可以瞭解客戶的需要，並統整歸納功能、網站走向。

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

2.規劃網站地圖(sitemap) 了解需求後，就會先規劃網站總共需要有哪些網頁，以及網頁與網頁之間的關聯，一般會以樹狀圖去做呈現，如下圖 以線上購物網站為例子，基本會有首頁、產品分類、產品介紹、訂購流程、訂單記錄…等頁面，樹狀圖的結構可以讓我們知道進入網站會先看到首頁，然後由首頁前往到其他的頁面。

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

3.操作流程設計(flowchart) 操作流程主要關係到使用者體驗（UserExperience，UX），一個好的流程可以幫助使用的人舒服的完成他要完成的事情 流程圖主要是用來梳理出操作的步驟路線，一般呈現會如下 以線上購物網站為例，若使用網站的人要購買網站的商品，那他在購物流程中會遇到到哪些事情，像是購買人是否需要會員身份？那他如果目前還沒有會員身份要如何購物？ 透過流程圖我們才會知道在大網頁裡面，我們還需要設計哪些子畫面給使用者看到，像是操作資訊提示、錯誤資訊提示等 4.頁面佈局安排(wireframe) 這階段已經開始設計網站畫面的雛形了，但主要會以框線圖(wireframe)做呈現，如下圖 框線圖都會順著flowchart來繪製網頁各個需要的畫面，並作佈局網頁的資訊、按鈕等元素，也稱為排版 框線圖有個很重要目的，是用來與客戶、開發人員討論畫面中各個功能的呈現方式。

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

網頁設計師在這部分不僅僅只是要將網站設計的很漂亮，因為不漂亮只是設計師要解決的最基本一件事情 設計師還需要深入去設計網站的用色、資訊排版呈現、眼球的視覺引導等等 6.網頁切版 切版其實就是要依照網頁平面圖的設計，用網頁語法將它編寫出來，這部分有點類似是在寫程式，因為需要使用HTML和CSS來做編輯，無法像在繪圖軟體上拿畫筆隨意繪畫。

但切版工作其實不是每間公司的網頁設計師都需要去做，因為切版已經算是踏入前端工程師的工作範圍之一，前端工程師本身就是掌管網站畫面的所有呈現 只是前端工程師做出來的網站，可能會跟設計圖有些落差，像是字體大小、顏色、排版等等，不是每個工程師對於視覺呈現，都很要求細節的完整度 因為前端工程師切版完成後，還要去完成功能的串接和顯示效果，這也是他們最大部分時間的工作。

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

延伸閱讀：自學成為網頁設計師？非本科生設計師的告白(下)UI、UX是什麼?平面設計轉職必看一起在家自學網頁UI設計，線上課程推薦懶人包 若你喜歡我的這篇文章，麻煩拍5次下面小手給予我支持與鼓勵喔！ JosephHi👋，我是Joseph 我是一名從理工界踏入設計圈的UI/UX設計師，同時也是一位人夫和新手爸爸，在這裡我不僅會分享轉職經驗、設計實務，也會分享一些我個人喜愛的事物。

PostNavigation PreviousArticleNextArticle 相關文章 2020年6月5日2020年4月4日 2020年5月1日2019年7月20日 2020年8月9日2020年8月9日 29Comments 內容很實用，相信可以大大鼓勵想從事網頁設計的朋友。

回覆 感謝你！！希望可以幫助到他們 回覆 感謝分享～實在很詳細，由淺入深的解答了很多初踏入網頁設計時會遇到的疑問 回覆 感謝你！也希望更多人知道網頁設計有趣的地方 回覆 剛好我最近有網頁設計的想法，這篇很實用，要先好好研究才行了哈哈 回覆 希望這篇內容有幫助到你喔！！ 回覆 謝謝分享，內容很詳細很有條理，相信初學者看完以後會有更清晰的概念～ 回覆 感謝你的讚美，還蠻多人不太了解網頁設計師工作內容 回覆 寫的真詳細???? 我也可以運用在我的網站上，謝謝你 回覆 好喔！希望有幫助到你：Ｄ 回覆 版大內容寫的超詳細的，原來網頁設計師的工作不是只有視覺設計啊！長知識了 回覆 是呀！踏入之後才知道這麼多學問 回覆 之前也有聽過類似的一堂課，感覺很複雜XD但看了版大介紹後，非常淺顯易懂! 回覆 真的嗎？感覺備受鼓勵，希望之後的文章也能幫助到你 回覆 我本身也是非本科系從事UI/UX算小菜鳥哈哈 網頁設計真的是未來趨勢呢版主可以解釋和教學html和css 感覺市場超大 回覆 好喔！之後來整理一篇基礎版的HTML和CSS，這樣在建置自己部落格時候也比較能夠去調整 回覆 網頁除了需要設計師的設計美感原來 還需要經過那麽多不同的職位和角色才可以把一個網站做好~謝謝版主大圖分享長知知識了 回覆 是啊！好險現在有wordpress，不然建立一個網站工程浩大 回覆 這篇能激勵那些不是本科生但想學網頁設計的朋友!! 謝謝版主的分享 回覆 希望能對想要轉職的朋友有幫助 回覆 在專業的道路上，只要肯花時間也是可以累積不同專業的長項，希望版大可以繼續朝向自己的目標前進! 回覆 好的！非常感謝你的鼓勵，我會繼續努力邁進：Ｄ 回覆 我之前有去學習Dreamweaver相關的課程，不過是選修的XD，真的能做好一個網站真的不容易，感謝板主分享！ 回覆 真的，的確會了工具之後，還需要累積很多設計面向的知識，才能做出好作品。

回覆 Joseph您好,我正在撰寫一篇想要發布在medium上的網誌，覺得您寫的這篇文章內容相當棒，不知我是否可以引用此篇文章的連結放入我撰寫的日誌內文呢?感激不盡! 回覆 可以喔～沒問題 回覆 您好，我是一位正在學網頁視設計的初學者，你的文章我都很喜歡， 不過有一問題想請教：Sitemap網站地圖跟IA資訊架構的差別是什麼呢? 回覆 HiAnna非常感謝你的支持：） 網站地圖通常是用來表達網站主要功能頁面，包含這些功能頁面彼此的關係、分類、上下階層。

資訊架構比較是在說明一個頁面中需要有哪些資訊，你可以理解為書本的章節、標題、副標、內容、列表…等等。

回覆 原來是這樣~謝謝!! 回覆 發佈留言取消回覆發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*CommentName* Email* Website 在瀏覽器中儲存顯示名稱、電子郵件地址及個人網站網址，以供下次發佈留言時使用。

Δ