在開始之前先自我介紹一下我的背景,我本身從高職到大學,整整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次下面小手給予我支持與鼓勵喔!
內容很實用,相信可以大大鼓勵想從事網頁設計的朋友。
感謝你!!希望可以幫助到他們
感謝分享~實在很詳細,由淺入深的解答了很多初踏入網頁設計時會遇到的疑問
感謝你!也希望更多人知道網頁設計有趣的地方
剛好我最近有網頁設計的想法,這篇很實用,要先好好研究才行了 哈哈
希望這篇內容有幫助到你喔!!
謝謝分享,內容很詳細很有條理,相信初學者看完以後會有更清晰的概念~
感謝你的讚美,還蠻多人不太了解網頁設計師工作內容
寫的真詳細????
我也可以運用在我的網站上,謝謝你
好喔!希望有幫助到你:D
版大內容寫的超詳細的,原來網頁設計師的工作不是只有視覺設計啊!長知識了
是呀!踏入之後才知道這麼多學問
之前也有聽過類似的一堂課,感覺很複雜XD 但看了版大介紹後,非常淺顯易懂!
真的嗎?感覺備受鼓勵,希望之後的文章也能幫助到你
我本身也是非本科系從事UI/UX 算小菜鳥哈哈
網頁設計真的是未來趨勢呢 版主可以解釋和教學html和css
感覺市場超大
好喔!之後來整理一篇基礎版的HTML和CSS,這樣在建置自己部落格時候也比較能夠去調整
網頁除了需要設計師的設計美感原來
還需要經過那麽多不同的職位和角色才可以把一個網站做好~謝謝版主 大圖分享 長知知識了
是啊!好險現在有wordpress,不然建立一個網站工程浩大
這篇能激勵那些不是本科生但想學網頁設計的朋友!!
謝謝版主的分享
希望能對想要轉職的朋友有幫助
在專業的道路上,只要肯花時間也是可以累積不同專業的長項,希望版大可以繼續朝向自己的目標前進!
好的!非常感謝你的鼓勵,我會繼續努力邁進:D
我之前有去學習Dreamweaver相關的課程,不過是選修的XD,真的能做好一個網站真的不容易,感謝板主分享!
真的,的確會了工具之後,還需要累積很多設計面向的知識,才能做出好作品。
Joseph您好,我正在撰寫一篇想要發布在medium上的網誌,覺得您寫的這篇文章內容相當棒,不知我是否可以引用此篇文章的連結放入我撰寫的日誌內文呢?感激不盡!
可以喔~沒問題
您好,我是一位正在學網頁視設計的初學者,你的文章我都很喜歡,
不過有一問題想請教:Site map網站地圖跟IA資訊架構的差別是什麼呢?
Hi Anna 非常感謝你的支持:)
網站地圖通常是用來表達網站主要功能頁面,包含這些功能頁面彼此的關係、分類、上下階層。
資訊架構比較是在說明一個頁面中需要有哪些資訊,你可以理解為書本的章節、標題、副標、內容、列表…等等。
原來是這樣~謝謝!!
可以分享嗎?我也想分享給我的客戶聽看看!!這些血淚歷程.你真的是太棒了!