前端工程師作品集 | 從零建構品牌網站(中) 網站設計篇
這系列文章是我在 【前端工程師養成班】的個人專題製作紀錄，包含主題發想與設計階段、寫程式碼階段、作品呈現階段，每一階段重點分別是什麼以及各階段的心路歷程，內容很多所以拆成三篇來寫，分別是【網站企劃】、【網站設計】(本篇)、【程式碼撰寫與發表】。
前端工程師養成班課程設計中，非常吸引人的一部分，就是會在結業時產出 2 個網頁作品( 個人專題 &團體專題 )，可以放到履歷上。（原本的學經歷跟前端工程師不相關到只能讓主管拿履歷去墊便當吧～）
個人專題成品會是一個跨裝置 ( RWD ) 、使用者只能看的靜態網頁，主要是 HTML+CSS 就能完成的。
團體專題的成品，則會有資料的串接，使用者可以在網站上多一些操作，像是登入註冊、搜尋資料、po 文等效果。進行的過程同時也在模擬就業後的團隊開發模式。
對於想職轉前端工程師卻苦無沒有作品集、或已經在養成班苦苦掙扎準備個人專題的人，這系列可以給你一些準備方向或參考內容。
前情提要
個人專題製作流程大致為：網站企劃 > 網站設計 > 網站製作與發表
- 主題發想（要做什麼主題、可能會有什麼內容 )
- 視覺設計（顏色搭配、字體大小、使用者分析等）
網站設計(本篇)
- 網站架構
- 框線稿與設計稿
- 使用流程
網站製作與發表
- 撰寫程式碼
- RWD
- 專題評比
作品至少包含 7 種不同排版的網頁，要可以跨裝置瀏覽
還沒看過上一篇【網站企劃】的話，可以先去看看，有些內容比較銜接的上唷！
網站設計包含哪些流程？
- 畫 site map 網站架構
- 畫 Wireframe 框線稿，用線條跟色塊來排版
- 畫 Mockup 設計稿，加點文字和圖片更清楚
- 整理 UI Flow，讓使用者逛網站不迷路
以上每一階段都有需要上台報告，每次報告表現 (印象中) 也包含在總成績裡
Site map 網站架構是什麼？
可以理解成：用樹狀圖定義出網站的頁面與功能
UX 老師教的時候要求我們網站架構樹狀圖 “只能畫出頁面，而非功能”，光這句話就讓大家頭腦打結 ( 也可能是他表達能力很有問題 )
舉一般品牌網頁為例：頁面像是品牌介紹、產品全品項、購物車等；而功能就像會員登入註冊，可能可以在每一頁發生；或是像在結帳”頁面”，會有選擇付款方式、運送方式的 “功能”
以上，可以出現在樹狀圖上的內容有 ( aka 頁面)
- 品牌介紹
- 全品項一覽
- 單品介紹
- 購物車
- 結帳
禁止出現在網站架構樹狀圖上的有 ( aka 功能)
- 登入註冊
- 選擇付款方式、運送方式
對我們這種功能&頁面傻傻分不清的菜鳥，要求我們不能把功能寫出來實在很逼人，後來團體專題為了方便跟組員溝通以及報告，我還是都寫出來，再以顏色作區別，畢竟文件是拿來溝通而非交差，你懂我的明白最種要 ~
以自己習慣的思考方式，用心智圖把功能畫出來，再就功能與使用者，去切分出頁面會是比較容易的方式
網站設計 | Wireframe & Mockup
Wireframe 應該是整個半年課程中最大的謎團了！
每個老師都說很重要、３個老師有提到、２個老師有讓我們瞄到範例，卻沒有一個老師教我們怎麼畫！要畫什麼 ?
直到專題老師要求要看進度時，大家大眼瞪小眼，各種黑人問號？
後來是問了一個大家很信任的老師，用他上課的空檔，簡單跟我們說明 Wireframe 是在幹嘛。
所以說 Wireframe 是在幹嘛？
中文可以理解成 “框線稿”，像是網頁的版面配置
先在設計稿上規劃出網頁的各區塊、哪裡會有文字（內容不重要）、哪裡想放圖片、主選單（header）、網頁底部的常用連結（footer）、Logo在每個地方出現的大小比例等等 …
Wireframe 讓新手很困惑的是，我們就已經知道這邊會放公司介紹、那邊是要放最新消息，為何不乾脆寫上公司介紹、最新消息等字樣，反而要我用色塊來代替，這樣下次忘了不是很麻煩？
總之一頭霧水的我，去看學長姐的網站，找出喜歡的排版，再去找他們的簡報裡的 Wireframe 長怎樣，照著畫就對了。（這流程更本末倒置，就好像你寫完一篇文章，再回頭跟自己說說這一段是引言、這一段是主要內容、這一段是結論… 這一切是為了？？）
Mockup 是在幹嘛？
Wireframe 懵懵懂懂的畫完後，下一步要進行mockup，也就是排版的重點注意事項，像是
- 相關物件的間距要拉近
- 留白的重要性
- 如何引導視覺走向
- 去欣賞神人作品
在Mockup 階段，要把想像中的網頁畫面畫出來、上色、上照片、上文字
這階段很有趣，類似之前 CSS 老師給我們練習的作業，只是我們變成出作業的那個人
實作是把之前有蒐集到的照片裁剪好、放到確定的位置，文字也如法炮製，文案不用完整想好，大概確定文字在每個區塊占多少版面就好
例如副標題是一句話、新品上市的介紹在首頁只出現二行而非整篇文章之類的
參考CSS的作業、跟設計背景的同學的說明，雖然專題老師沒要求，還是把 mockup 精準到連邊框距離（Marging, Padding）的數字都量好，字體大小跟粗細也把企劃階段定義好的畫出來
事後證明這樣做雖然花的時間比其他同學多了 2~3 倍，但在開始寫程式碼時會超級有效率！
至今仍覺得這麼重要的事情，老師沒有說明真的超雷 ?！
很多同學的 Mockup，在繪圖軟體上看比例很美好 (因為菜鳥根本不知道怎麼看比例)，放到網頁上就很驚人，例如標題 60 號字、內文 40號字這種巨人網頁都有 ( 正常內文 14px ~ 18px 就夠了)
一樣回家自己在 Youtube 自學 Adobe XD、跟同學交換使用經驗 (正是在抱怨老師都沒有教沒錯 )，然後參考學長姊、免費 / 收費的網頁模板、多看喜歡的網頁，然後把自己的網頁畫出來
當時 Mockup 進度只有要求畫電腦版，沒有手機版、平板。後來切版時發現，有準確的 Mockup 對於切版的 CSS 規劃及執行效率都有影響，於是在開始做 RWD 時還是補畫了
而為了做 RWD，還把原本寫好的程式碼全部刪掉重寫又是另外一個故事了…
Mockup 算是開發流程中很愉快的過程，可以把想像中的網頁視覺化，就好像已經做出網頁似的美好想像
如果有很想呈現的動畫效果、背景圖或物件，務必配合效果去設計構圖
UI Flow 設想周到，使用者不迷路
想找盲點，就大方分享自己的流程圖，讓大家來當你的眼！
在前一個階段，每一個畫面的跳轉、從 A 功能到 B 功能，一切都好像理所當然。
但在這個階段，通常會迎來網頁設計新手最常見的挫折：別人覺得這個流程很奇怪、別人不會想到這個東西可以點下去、別人覺得應該要先有什麼，但為什麼你的網頁沒有放…
這就回到每一個人過往的使用習慣，舉例來說，如果我假設使用者必須要是會員，才能在我的商城購物，所以在一點進網頁，就設計註冊功能，全部走完就可以開始瀏覽商品。
乍聽之下好像很有道理，但想想，我還沒看到商品，也還不認識這個品牌，怎麼會想要先花時間註冊會員，一定看到就先轉身了。而最根本的問題，是我一開始的假設就不對了！
或許這個例子有點極端，但新手在設計網頁流程時，真的超級常犯這種錯誤。
而要避免這個盲點，有個不錯的方法。在不跟人解釋的前提下，請人看著自己的設計稿，講出他認為從首頁到完成某件事，會有哪些操作，以不同類型的網站為例
- 商城：把某商品放到購物車
- 部落格或社群平台：在自己的貼文修改內容
- 品牌官網：找到目前的節慶新品
過程中通常會冒出很多自己以為理所當然、但使用者一頭霧水的設計
這部分滿有趣的，但如果要找人來順自己的 UI Flow，建議找跟網站目標使用者比較接近的族群。如果目標使用者是大學生，千萬別找家裡長輩來幫你看 UI Flow，絕對會衍伸出更多更莫名的想法，像是這字那麼小，我怎麼看的見…等
網站設計學習重點
- 使用 Adobe XD 繪圖軟體。除了基本操作沒教之外，學了一些完全用不到的特效，細節又是另一個故事了… (之後加上內部連結)
- 畫出可以跟別人溝通、討論需求與操作流程的網站設計稿
- 分析網站結構與使用者操作流程 ( UI Flow )
我認為課程可以優化的地方
- Wireframe 環節可以跳過，或是找個範例，從頭帶大家畫一次，有個概念就好
- 在做 Mockup 時，要求大家依照自己規劃的文字大小，在設計稿上排版，而不是 “照感覺” 來選字體大小
- 別去看 AI、XD 裡很 fancy 的字體，直接去 google font 看有什麼字體能用更實際。fancy 字體要想辦法下載、要確認版權太沒有效率了！
網站設計總結
當時負責個人專題的老師，自己有個接案公司，對 UI/UX 非常專業，經常拿工作遇到的狀況跟我們分享。
但養成班規劃的部份流程 ( 像是Wireframe )，感覺更適合有設計背景的人，而不是我們這種白紙路人。當時的我們，因為業主是自己，最初在腦中建構的畫面，就已經很類似成品了，要我們反過來把那些東西改成色塊放到設計稿上，再報告給大家聽，反而困難重重，而且滿多餘的。( 本班甚至有高手在我們要用 Adobe XD 畫 Mockup 時，直接用 HTML+CSS 繳作業， 原因是不會使用繪圖軟體，用程式碼來寫比較簡單？)
回想起來，專題老師的出發點很多都是在避免在業界很常發生的 “開始寫程式後，業主大改特改”，這種會讓人想大翻桌 “你他Ｘ為什麼不認真看設計稿？之前討論時為何不講清楚自己要什麼” （至於我沒接案，卻也有很深的怨念，就是另一個故事了…）
但網站設計整個流程，如果沒有要自己接案，用到的機率其實很低，或是像我就業至今幾乎都做內部系統網頁，就更用不到了，工作至今一年半，也就畫過幾張 Mockup 去對流程而已。
並且區塊設計（Wireframe）這個環節，貌似也只對比較常跟設計師互動的業主能溝通。大多數的人好像還是需要有至少 40% 的畫面或一些些內容，才有辦法自己在腦補出另外 30%，進而有效的提出或討論實際的需求。
在設計階段不知不覺也快3000字！讓我為你拍拍手，然後起來伸個懶腰吧！
下一篇會從網站架構設計開始，內容包含寫程式碼、將網頁 RWD 的過程以及我踩到的雷。
如果喜歡我的文章，歡迎拍拍手讓我知道，更歡迎你追蹤並持續關注更多的分享。
我們下篇文章見！