本人是一位货真价实的后端程序员，业余时间做一些 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框架的。
