# 小應用設計到開發的流程

## 設計
- [從使用者到APP頁面設計準則](https://medium.com/as-a-product-designer/%E5%BE%9E%E4%BD%BF%E7%94%A8%E8%80%85%E5%88%B0app%E9%A0%81%E9%9D%A2%E8%A8%AD%E8%A8%88%E6%BA%96%E5%89%87-9d3437090a46)

步驟：(from:[開發流程](https://www.youtube.com/watch?v=wFRrOalABsI&list=PLGBY4JjI_1PiPNQUKgsRq1GAQgxiCzuv1))

- Wireframe
- 列出整個網站的需求
- 研究對手網站
- 把不錯的東西複製過來
- 規劃需要哪些頁面
- 把想法畫出來
- Design
- 組建設計系統
- 字體
- 大小
- 顏色
- 主色調
- 黑
- 白
- 副色
- 設計 Component
- 卡片
- 導覽列
- Header
- Footer
- 組裝頁面
- 設定好格線
- 把 Component 複製過去
- Coding
- 框架用下去
- Deploy
- 前端
- HTML & CSS 檢驗 ->提高 SEO,速度
- HTML, CSS ,JS,圖片壓縮(ImageOptive)
- 後端
- Cache
- GZIP打開（GitfOfSpeed)
- CDN(CloudFlare)
- Google Page Speed Test