我是卡斯伯，本身是設計出身，從高職 -> 大學 -> 研究所都是設計相關領域，出社會後從事網頁設計後來轉職為前端工程師。雖然主要工作是前端，但還是會有不少時間接觸網頁設計，所以相信我的經驗也是能夠帶給大家許多參考，並且完整的前端經驗也會有助於這些概念的實作。

為什麼要寫這系列文？

不同領域的人們在協作時都會有些許的紛爭，設計師與工程師一直以來也會有這樣的嫌隙，但其實並非所有「設計師與工程師」都有這樣的對立狀態。

這樣的對立來自於「不了解對方」所造成的，設計師可能會想：「有這麼困難嗎？」，工程師則會想：「是想搞死人嗎？以為幾個標籤就搞定！？」，其實觀念的建立是可以減少這樣的紛爭，比如說「預先定義樣式元件庫」，並具有相同的設計邏輯，那麼工程師就可以依據這樣的邏輯反覆運用，設計師產生新的頁面時也是用相同的尺寸、色彩、元件再做變化，前端工程師如果已經依據設計製作好相關元件庫，那麼接下來也就真的用幾個標籤搞定這些事情。

所以，這次的系列文會有助於具有設計相關經驗的工作者，進入此領域時可以注意到更多的細節，減少溝通上的磨擦；非相關領域者，也可以再這次的系列文章學習美感技巧，文中會介紹很多小撇步如：韻律、配色、格線等觀念，讓大家在設計上可以抓到簡單的準則。

這系列文章適合什麼人看？

雖然是設計系列文章，但我會撇除理論概念（美學、什麼是美等等...），會以實際的案例說明，並且以圖文交錯的方式介紹。

平面設計轉網頁設計師：相信你們在進入職場（或者未來進入職場），都會遇到許多溝通上的問題，畢竟我身邊就有許多的案例。所以這些文章會告訴你如何快速了解平面設計與網頁設計有什麼不同，並且了解有哪些資源可以運用，哪些觀念應該拋棄。

初階 UI 設計師：如果你是專職的 UI 設計師，本篇會介紹許多前端開發者在執行上的一些要點，你可以試著將一些觀念融入你的設計之中，相信與您搭配的工程師會體會到你的貼心。

前後端工程師：本篇還會介紹許多美感上的觀念，就算沒有設計師也瞭解畫面該如何配置、圖片如何選擇、色彩的選用等等。不需要太多經驗也能做出具有基礎美感的網頁。

會介紹哪些主題？

相關大綱我還不段的調整，有許多章節是不具有連貫性的，畢竟這不是一份完整的 Guideline，而是告訴大家可以怎麼做的系列文章，所以會著重在以下要點：

• 工具的運用及思維調整
• 基礎網頁設計概念（格線、色彩、響應式、互動、文字、圖形...）
• 使用者體驗 - 別挑戰大家的習慣
• 美感 - 網頁設計大家都這麼做
• 設計規範 - 具有邏輯的設計
• 資源分享

相關文章中也會帶入許多設計實例、原始碼、各種規範文件的說明。圖片來自於 Bootstrap 官網

以上主題，你們著重瞭解哪部分呢？歡迎留言讓我知道，我盡可能在一些章節準備更多內容喔。

文章同步發表於：https://wcc723.github.io/design/2018/10/15/frontend-design-holy-road/