在開始之前先自我介紹一下我的背景,我本身從高職到大學,整整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來做編輯,無法像在繪圖軟體上拿畫筆隨意繪畫。

「html」的圖片搜尋結果

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

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

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

小結

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

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

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

Joseph

Hi 👋,我是Joseph
我是一名從理工界踏入設計圈的 UI/UX 設計師,同時也是一位人夫和新手爸爸,在這裡我不僅會分享轉職經驗、設計實務,也會分享一些我個人喜愛的事物。

30 Comments

  1. 內容很實用,相信可以大大鼓勵想從事網頁設計的朋友。

    1. 感謝你!!希望可以幫助到他們

  2. 感謝分享~實在很詳細,由淺入深的解答了很多初踏入網頁設計時會遇到的疑問

    1. 感謝你!也希望更多人知道網頁設計有趣的地方

  3. 剛好我最近有網頁設計的想法,這篇很實用,要先好好研究才行了 哈哈

    1. 希望這篇內容有幫助到你喔!!

  4. 謝謝分享,內容很詳細很有條理,相信初學者看完以後會有更清晰的概念~

    1. 感謝你的讚美,還蠻多人不太了解網頁設計師工作內容

  5. 寫的真詳細????
    我也可以運用在我的網站上,謝謝你

    1. 好喔!希望有幫助到你:D

  6. 版大內容寫的超詳細的,原來網頁設計師的工作不是只有視覺設計啊!長知識了

    1. 是呀!踏入之後才知道這麼多學問

  7. 之前也有聽過類似的一堂課,感覺很複雜XD 但看了版大介紹後,非常淺顯易懂!

    1. 真的嗎?感覺備受鼓勵,希望之後的文章也能幫助到你

  8. 我本身也是非本科系從事UI/UX 算小菜鳥哈哈
    網頁設計真的是未來趨勢呢 版主可以解釋和教學html和css
    感覺市場超大

    1. 好喔!之後來整理一篇基礎版的HTML和CSS,這樣在建置自己部落格時候也比較能夠去調整

  9. 網頁除了需要設計師的設計美感原來
    還需要經過那麽多不同的職位和角色才可以把一個網站做好~謝謝版主 大圖分享 長知知識了

    1. 是啊!好險現在有wordpress,不然建立一個網站工程浩大

  10. 這篇能激勵那些不是本科生但想學網頁設計的朋友!!
    謝謝版主的分享

    1. 希望能對想要轉職的朋友有幫助

  11. 在專業的道路上,只要肯花時間也是可以累積不同專業的長項,希望版大可以繼續朝向自己的目標前進!

    1. 好的!非常感謝你的鼓勵,我會繼續努力邁進:D

  12. 我之前有去學習Dreamweaver相關的課程,不過是選修的XD,真的能做好一個網站真的不容易,感謝板主分享!

    1. 真的,的確會了工具之後,還需要累積很多設計面向的知識,才能做出好作品。

  13. Joseph您好,我正在撰寫一篇想要發布在medium上的網誌,覺得您寫的這篇文章內容相當棒,不知我是否可以引用此篇文章的連結放入我撰寫的日誌內文呢?感激不盡!

  14. 您好,我是一位正在學網頁視設計的初學者,你的文章我都很喜歡,
    不過有一問題想請教:Site map網站地圖跟IA資訊架構的差別是什麼呢?

    1. Hi Anna 非常感謝你的支持:)
      網站地圖通常是用來表達網站主要功能頁面,包含這些功能頁面彼此的關係、分類、上下階層。
      資訊架構比較是在說明一個頁面中需要有哪些資訊,你可以理解為書本的章節、標題、副標、內容、列表…等等。

      1. 原來是這樣~謝謝!!

  15. 可以分享嗎?我也想分享給我的客戶聽看看!!這些血淚歷程.你真的是太棒了!

發佈回覆給「Roy Li」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *