本人是一位貨真價實的後端程式設計師，業餘時間做一些 side project，比如最近兩年一直在做的就是一款叫Anyshortcut 的 Chrome 外掛。之前帖子有介紹: /t/415551
從剛開始前端一竅不通，設計一竅不通，到一點一點學習堅持，把 Anyshortcut 官網做到了我比較滿意的地步。前兩天我看到 Bulma.css 的作者把 Anyshortcut 也推薦到Bulma.css 的官網上了。
感興趣的朋友可以看看我做的官網： anyshortcut.com
使用的前端技術：
- bluma.css
- Vue 2.x
- Vue router
設計工具
- Sketch
- Photoshop (女朋友幫我設計的 logo，做了一些圖，定的主色調，其他大部分都是我自己的點子，自己設計的)
- 墨刀原型工具
一些需要登入之後才能看到的頁面
使用者繫結的快捷鍵詳情
使用者訂閱成功之後
使用者支付方式，即信用卡詳情
使用者更新信用卡
使用者的優惠碼頁面
個人經驗
- 最重要的是多看國外的 SaaS 網站，多學習，不斷提高自己的審美，去 Dribbble，Behance 等網站找靈感
- 先確定好主色調，至少選兩種字型，一種適合做標題的字型，一種是普通文字字型，然後定好幾個標題的大小和顏色。比如 heading, title, subtitle, text, subtext 之類的
- 選字型，直接去Google Fonts上面選，儘量選sans serif 類的字型，google fonts在國內沒有被牆，放心使用吧
- 可以先用一些原型工具設計一下自己腦海中的頁面，比如我一直在用的墨刀。
- 一定要用一款成熟度高的 css 框架，比如 bootstrap, bulma.css, 或者一位國人寫的spectre.css。如果不用相容 IE 系列的話，儘量用 Flexbox 佈局
- 圖片儘量用 svg
- 一些不會寫的 UI 控制元件，可以去 github 或者 codepen 找找借鑑一下 自己動手用在 codepen 或者在Web Maker（我自己經常用的 Chrome 外掛）實現一下，然後在整合到自己的專案中。
為啥要選Bulma？
其實剛開始是打算用pure.css的，不過感覺這個專案好多年沒更新了，所以就放棄了。然後換成了bootstrap 4，當時還是beta版，最大的問題是不方便customize，官方也沒有放出customize頁面 然後看到了bulma.css, 他最大的優點就是基於Flexbox佈局，非常輕量，對個性化，模組化支援非常好，所以就從bootstrap切換到bulma上了。 我是後面才知道國人這款優秀的css框架的。