---
# System prepended metadata

title: 小應用設計到開發的流程

---

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

## 設計
- [從使用者到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