30 天的時間轉瞬即逝，但實際上這個系列並沒有結束，因為筆者在撰寫途中工作繁忙，因此許多日的文章在沒有時間的情況下，都拿以往授課的教材來貼上，因此會出現有部分章節不流暢的問題，而在之後的時間裡，當筆者有時間時，會回來補個章節的相關圖文說明與範例，若各位看到這裡還覺得不嫌棄的話，也可以在下方留言說想要看到的功能或效果，筆者在完善整個系列的同時，也可以參考一些意見來作爲範例撰寫。
本系列的編排方式，是以筆者認為網頁初學者適合的學習地圖而設計的
筆者的本身算是前端工程師與設計師，因此也有教授設計的部分，在筆者看來一個好的前端工程師，對設計本身最好有些掌握，而不是只是單純把功能設計出來，因此會在下面再補充一些網頁設計的相關流程介紹，與一些設計，可以供大家參考一下。
一般我們在說所謂的系統開發時，通常都是指所謂的 Full Stack (全端)應用，而 Full Stack 所指的便是由 Front End(前端)、Back End(後端)與 Database(資料庫) 所構築起來的應用，可以把它想像成一間餐廳，美麗的店面與擺設，使用者的動線與餐廳的佈局等，都是前端(Front End)所負責的工作，而後端(Back End)則負責將廚房裡的各種食材(DATABASE)，組合加工成使用者所指定的餐點，最後再透過負責傳遞餐點的服務員(資料傳輸)，送至消費者的手上。
當然，並不是所有的網頁都需要後端與資料庫的支持，只是在缺少了這兩項應用的時候，我們變得無法提供較為動態的服務，但相對的，就如同部分企業的形象官網抑或是個人頁面等等，並非是所有的需求都依賴著後端，這裡可以把它想像成名勝古蹟與自然風景等，當只需要定期維護而非長期時，靜態官網也是一個相當好的選擇。
最後我們來說說雛形設計這塊，他其實並不會被歸納進 Full Stack 的應用，因為他就像是建築的設計圖一樣，且能與技術工程完全分離，但若想完成一個可良好操作且美觀的網站，一個好的設計圖是絕對不可或缺的。
其實只要是從事網頁網站開發的，都可以被稱為「網頁工程師」(Web Developer)，因此這個群體可以說是非常龐大，但隨著各種應用的複雜度日漸攀升，當中的許多項目便慢慢地產生了明顯的分支，而導致分支的主要原因，個人認為是以開發的環境有著相當緊密的關係，以下就讓我們稍微解析一下個職位的工作項目吧。
其實後端的困難點很容易根據專案需求異動，像大數據的工程師就需要面對演算法等等。
瀑布式開發(Waterfall)
這是最傳統的開發方式，在需求確立之後幾乎不太會進行修改，且每個步驟階段也不會重複進行，需要非常完善的規劃與考慮時間，且基本上沒有所謂的回頭路。
瀑布式開發適合應對穩定需求的大型專案，與硬體和有印成的相關產業，如鞋廠這類需要訂製模板的相關行業。
敏捷式開發（Agile Methodology）
近幾年來盛行的開發方式，會同時在多個項目中推薦，最大的特點就是名稱中的「敏捷」，是近代專案開發喜歡的方式。
Agile 適合面對需求變更快速的市場，近幾年來深受許多企業與新創的喜愛，但 Agile 其實在專案經理等角色缺乏經驗時，反而會導致專案需求左右橫移或產生不合理變更，從而導致專案失敗的風險增高。
Lean UX 的循環：
:::warning
概念設計 -> 雛形設計 -> 內部驗證 -> 外部測試 -> 研究且應用結果
:::
設計是一種既簡單又複雜的概念，並且這個辭彙出現在許許多多的地方，如程式設計、介面設計、使用者經驗設計等等，不過說到底設計的本質，其實也僅僅是人為了達成目的所規劃的過程而已，程式設計是對程式語言進行設計，提升可重復性並提高效能等等，介面設計則是讓產品UI更加適合目標族群閱讀，而使用者經驗設計則是模擬並規劃人們的使用習慣，從而達到最佳的使用者操作體驗．因此也可以說設計的概念，即是為了讓人更加方便的使用文明所帶來的革新而已．
其實實際上一個產品並非僅有UI/UX，還包括了所謂的互動設計師以及視覺設計師等等，通常是由UX設計師將人的行為模式設計出來，並且畫出可以操作使用的Prototype，再經由UI設計師將其進行設計與風格的統一，接著再由視覺設計師去統籌細節的字距以及微小的調配，最後再由互動設計師進行使用者與產品的抗爭，設計拉下的回饋與側拉的效果秒速等等，因此其實一個完整美好的系統，均在背後有著台下十年功的苦心。
| 色彩 | 廣義代表 | 範例 |
|---|---|---|
| 紅色 | 強大的、刺激的、充滿活力(亮紅色)、強大的與壓迫感(暗紅色)、危險 | 太陽、超人、警告標示、錯誤訊息 |
| 橙色 | 勇氣、友善、和善、溫和 | 橘子、夕陽、燈光、文化 |
| 黃色 | 幸福、可愛、活力、警告 | 黃色小鴨、黃金(金粉)、鈴鐺、向日葵、警告標誌 |
| 綠色 | 自然、生命、安全、金錢 | 自然、樹木、綠茶、安全性、保養品 |
| 藍色 | 耐心、平和、成穩、自信 | 科技、海洋、天空、建築、地球 |
| 紫色 | 神秘、知識、皇室奢華 | 極光、傳統文化、紫羅蘭、化妝品 |
| 粉紅色 | 愛慕、呵護 | 親子、育兒、花蕊 |
| 棕色 | 放鬆、耐用、可靠 | 樹木、自然、咖啡、動物(熊、馬) |
| 業務假設 | 內容填入 |
|---|---|
| 我認為客戶需要 | Text |
| 這些需求能以這個方法解決 | Text |
| 我的第一個客戶是(或即將事) | Text |
| 客戶最想從服務裡獲取的價值 | Text |
| 客戶還能獲取這些額外的好處 | Text |
| 通過這項方法獲取大多數的顧客 | Text |
| 獲利營收的方式 | Text |
| 我的市場裡的主要競爭者 | Text |
| 我能打倒競爭對手的原因 | Text |
| 最大的產品風險 | Text |
| 我們會透過這個方式解決問題 | Text |
| 當我們看到客戶產生什麼變化時，代表我們成功了 | Text |
| 還有哪些其他假設一但被證明是錯誤，將會導致專案失敗 | Text |
| 使用者假設 | 內容填入 |
|---|---|
| 使用者是誰 | Text |
| 產品適用於使用者的工作或是生活中的哪些地方 | Text |
| 產品解決了哪些問題 | Text |
| 產品的使用時機與方法 | Text |
| 產品的重要功能為何 | Text |
| 產品的樣貌與表現方式？ | Text |
| 草圖、名稱、角色 | 影響行為因素 |
|---|---|
| 需求、障礙、期望 | 使用者操作週期 |
| Amy 媽媽 40歲 | 已婚、有兩個小孩、關心教育、可支配收入 |
|---|---|
| 需要了解小孩的在校學習情況、需要明確進行頻估、親師溝通、學校裡學過時的科技工具、幫助小孩學習 | 長期 |
以下是幾個比較常見的平台，實際上開源平台對於設計師而言，就是宛如子彈一樣的東西，我們應該善用這些開源資源包括 AI 等來節省我們的工作時間，並致力於有意義的設計與規劃。
多種不同配色可以直接選擇，以一組四種顏色為單位，可以直接選擇主色、輔助色、強調色等．
多款優質且可直接使用的漸層顏色，並可以從漸層色中選擇強調色與輔助系使用
非常流行的配色工具，同時具有多項顏色調和選項，並能直接模擬簡易網頁與相關配色
Adobe推出的色彩搭配器，除了具有多項調色規則可採用外，也可以使用圖片擷取顏色與漸層使用．
主打日系傳統配色，在傳統藝術以及文化相關網站有卓越的發揮．
強大的色票產生器，並提供了多種色彩可供選擇．
免費提供高品質的照片原圖，並且無須特別標記出處．Abstract wallpapers
強化分類與搜尋的圖片平台，本站內的素材基本上都可免責使用．
除了提供圖片資源外，還有部分影音資源，可以直接用於構築美麗的形象網站．
高品質的插畫圖庫，並提供SVG下載，在可商用的同時也很適合進行特效測試．
才華洋溢創作者分享的最佳免費圖庫相片和影片。
GIF 為主的平台，開源需參考平台準則
著名框架Ionic所開源的icon圖庫，完全商用且免費於各大平台．
近年來流行的Material Design所釋出的icon包，並提供多種來源下載或直接應用．
很豐富的圖示與插圖資源
工程師最常見到的函式庫。
最近幾年台灣開源出來的樣式庫
其實像是 Bootstrap 類型的函式庫有非常多的種類，基本上他的統一概念就是為了節省每次開發的時間，畢竟重複性質的工作確實不適合一直進行。
免費的設計資源可供下載，內容包含 UI 版與 code，作法是將個平台免費的資源做彙整連結，因此可能會連到原本平台進行下載，左上角可切換不同軟體的資源。
免費的設計資源可供下載，內容包含 UI 版與 code，作法是將個平台免費的資源做彙整連結，因此可能會連到原本平台進行下載。
Github 上開源的公開專案與相關資源整合，下方還有設計的教程以及設計的資源。
結構標準的 HTML5 開源專案，很適合新手下載查看與做修改練習，但不太會更新內容。
多用途的網頁開源 Layout，同時也支援其他服務的架設。
具有非常良好的結構與特效的範例，非常適合想要較為有設計感頁面的需求，但進階其餘專案需要額外付費才能下載。
公開平台的資源彙整，有很多不同的版型與 UI 可以下載，但使用許可需要另行查看。
思考哪個設計比較符合大眾審美
練習視覺對其與中心點判斷
訓練對色彩的敏感度
iThome鐵人賽
看影片追技術