開始進行網頁設計時，如果能提早把握幾個要點，一切就會順利許多。此篇文章以此為題，將一些製作網頁時的心得進行整體歸納。
. . .
Hello ! 我是Kelly Lee，目前在IBM擔任視覺設計師。我從事平面設計約五到六年，也曾在動畫公司工作，工作範疇偏創意為多。但在2018年時，我決定踏入介面設計領域，成為了一位視覺設計師。從平面設計轉職介面設計看似容易，實際卻不然，因此我想將其中所得所聞記錄下來，由自身經驗出發，分享給有相同處境的設計師們。
前一陣子剛完成了一個較大規模的網頁設計案，由於專案的規模大，因此複雜度也較高。其中牽涉的人眾多，我在一旁觀察著他們的工作流程和模式後，筆記下了一些重點。希望以此為例，讓未來再次執行時可以更有效率地進行。設計網站時考量的很多，除了設計問題，也牽扯了很多技術的問題，初想起來似乎沒有很難，但真正要製作時才發現每個細節都需要很多時間討論，例如：圖片的風格 ? 文字書寫口吻 ? 第一眼印象的呈現 ? 網站的目標族群 ? 他們期望是什麼等等。要探究的問題太多了，而這就是進行設計時必須一一釐清的部分。因此對於網站設計，有系統有架構的進行是非常重要的。
這篇文章希望可以把整個流程中需注意的細節都提點出來。
🤠 本篇文章適合平面設計師或介面設計師閱讀
在開始前，先了解一下網頁設計的目的和團隊分工？
網頁設計的目的？
網站就如同店家的線上店舖。當使用者有需求時，可以透過網站更即時、快速達成任務。因此，網頁的體驗及形象設計至關重要，不管是色彩、文字口吻、圖片、載入速度等，都建構了該品牌在使用者心中的樣貌。當網站的設計夠完善，自然使用者對於品牌的感受也會有很大程度的提升，而該如何有效地執行，這就是設計師必須協助客戶完成的功課。
網頁設計團隊的組成？
網頁設計團隊通常會有四個角色，但角色可能會因為預算或專案大小而產生差異。專案如果不夠大，設計師也會兼任PM，前端工程師也可能需連同後端一起做。
1.設計師 : 負責將客戶的需求轉換成視覺，與客戶確認設計後，提供設計素材和規範給工程師 。
2.前端工程師：負責將設計師的視覺需求轉換成程式語言。
3.後端工程師：前端工程師是負責網站的門面，門面後的東西就由後端負責，例如資料的計算、資料庫的操作及存取等等
4.PM：負責與客戶協調時程、控管團隊進度
接著，我們來談談在完全進入設計前，設計師可以做什麼準備
1.明確的定義網站定位
在開始執行設計前，建議請客戶先思考幾個點
- 網頁的目標族群？
不同的目標族群所喜愛的風格會很不同。例如如果今天產品是要賣給40至50歲的人，網頁設計就不能做得太Fancy，字體也不能太小，並且避免太過大膽的用色。必須考慮該族群的喜好，他們的生活情境與他們期待接收的資訊。 - 產品的競品是誰？或是他們期待成為的樣貌
在跟客戶溝通時，單純用文字形容很容易因為認知或經驗不同，產生歧異。因此如果找一個現有的案例來討論會更清楚的多，我們甚至可以從該案例上的優缺點進行討論，將優化方案運用到即將設計的網頁上。 - 希望因為此網站達到目的的優先順序？
網頁有如實體店，有些實體店是為了要銷售產品，有些店家則是為了要展示產品或建立品牌形象。我們必須確認客戶希望達成目的的優先順序，進而知道設計時最需考量的重點。
2.確認風格走向
跟做所有設計一樣，再進行設計前，請先清楚了解客戶喜歡的風格，以防建構完畫面後需大幅調整。建議以下幾種方式：
- 請客戶針對網站提出3～6個形容詞
如果客戶對於網頁設計還沒有太清晰的概念，我們可以先從形容詞開始和客戶溝通，例如：高級的、乾淨的、豐富的、日式的…。雖然乍聽之下好像很抽象，但至少可以從形容詞開始進行風格收斂，接著在進到下一步的Moodboard整理或是網站參考案例的尋找。 - 以Moodboard的方式進行溝通
如平面設計在進行主視覺設計或品牌設計的流程，我們可以利用片段的圖片畫面拼湊出一種「感覺」，這就是Moodboard。
關於如何製作Moodboard，可以參考這篇文章：https://milanote.com/guide/create-better-moodboards - 提出網頁設計參考進行確認
提出網頁參考時要格外小心，因為客戶有可能會誤以為你會做得跟參考的畫面一樣又或是對設計的期望過高。因此，在提出畫面案例時，要明確的列出該網頁的參考重點與洞察。例如：網頁的插畫配置方式或風格、網頁的色彩風格與比例、網頁的流程架構等。不要僅提供作品給客戶，就十足肯定客戶可以理解你要傳達的意涵。
3.確認Stakeholder有誰？責任歸屬清晰化
在一個網頁設計專案中，牽涉的人往往都很多。可能有客戶行銷部門的人、設計部門的，甚至客戶的大老闆也會加入討論行列中。但不管加入討論的人有多少，總會有一個最終決策者，而我們必須在開始設計前知道這個人是誰，並確保在執行的過程中，他都有參與其中。此外，除了知道握有最終決定權的人外，也必須明確的知道如何分工，例如網站文案由誰提供？圖片由誰提供？網頁架構由誰提供等？責任分工的清晰化，可以為之後的設計流程提供不少效率。
4.溝通時程與流程
一個較大型的網頁設計專案動輒半年至一年。除了時間長，其中參與的人員也很多。因此，時程的安排至關重要。承上，當我們明確知道Stakeholder及責任歸屬後，就可以推斷設計完成後會需經哪些人的確認，以此就能知道時程該如何安排，將此客戶說明，讓他們了解時程緊湊的原因，並把這件事情的優先順序往前推。
5.彼此都要先做功課
網頁設計不是設計師一個人的事情。就如同室內設計一樣，設計師會希望客戶先蒐集自己喜歡的室內風格，並說明平常的生活習慣與喜好，設計師再以此進行規劃和設計。網頁設計亦是，客戶也需要做一些功課，清楚知道自己的需求是什麼，雙方一起把其釐清後，設計師才能精準地做出對應的風格與設計。如果沒有先想清楚，最終很容易變得亂槍打鳥，除了會耗費許多時間外，相信產出也會不夠完美。
由於內容較多，網頁製作中及製作後的部分會於下篇繼續說明！
感謝你/妳閱讀了這篇文章，希望這篇文章有幫助到你。如果覺得這篇文章不錯，希望你能給我一點「拍手鼓勵」，也可以留言讓我知道你的想法，我會更努力寫出更多內容的！
