網頁設計工作流程

我記得 2018 年初時難得有個機會可以把工作流程寫得很詳盡，為此花了時間整理，向朋友們請教、一起檢討整理出來的經驗分享～（2019.01.30 更新簡報）

網頁工作流程是我工作以來一直想要統整的東西，不過以前真的沒有想很多，直到我遇到複雜的案子時，越覺得這件事情非常重要，有一個 SOP 流程，大家才好做事，也降低溝通的錯誤，因此寫一篇自己經驗的工作流程跟大家分享！

同時也請教各路專業領域的朋友，來幫我看寫得對不對，尤其是 UX 那塊是我特別不熟悉的事情，而且台灣真正有實作 UX 的公司不多，也是我學習的部分，然後順道釐清自己工作的方式有沒有什麼問題，檢討自己工作上是否還有更多要修正的地方。

整篇文件內容分為：企劃、設計、前端、後端
主要分析前三個部分（因為後端有自己的小世界(?!😆)，好吧我承認後端那塊我真的不知道要怎麼寫才對，就算自己架過站也不一定有什麼章法…😂），會用「企劃」、「設計」的講法並不局限於職稱，我認為這是一個階段性的動作，大致目錄如下：

一、前言

二、企劃：

確認網站需求
擬定網站架構圖
- 功能心智圖(Functional Map)
- 網站架構樹狀圖(Sitemap)
- 版面色塊架構圖(Layout Structure)
製作 UX 設計
- 使用者操作流程圖(User Flow)
- 人物誌(Persona)
- 故事板(Storyboard)
- 價值主張(Value Proposition)
繪製完整線稿
- 使用者體驗旅程地圖(User Journey Map)
- 響應式變化線稿(Responsive Wireframes)
- 介面流程圖(UI Flow)
同步抓製作時程

三、設計：

四、前端：

五、後端：

六、附註：

七、維護

八、結語

如果以上有任何的錯誤或是更好的建議，歡迎私訊或留言告訴我～希望對路過的你有所幫助唷 😀

＊此簡報的附件檔案（桌機手機版的 psd 和除錯表 excel）可從這裡下載：網頁設計工作流程SOP.zip