作为后端程序员，我做的网站被 Bulma.css 作者推荐到官网了（有个人经验分享）

[Wichna]

本人是一位货真价实的后端程序员，业余时间做一些 side project，比如最近两年一直在做的就是一款叫Anyshortcut 的 Chrome 插件。之前帖子有介绍: /t/415551

从刚开始前端一窍不通，设计一窍不通，到一点一点学习坚持，把 Anyshortcut 官网做到了我比较满意的地步。前两天我看到 Bulma.css 的作者把 Anyshortcut 也推荐到Bulma.css 的官网上了。

感兴趣的朋友可以看看我做的官网： https://anyshortcut.com

使用的前端技术：

• bluma.css
• Vue 2.x
• Vue router

设计工具

• Sketch
• Photoshop (女朋友帮我设计的 logo，做了一些图，定的主色调，其他大部分都是我自己的点子，自己设计的)

一些需要登录之后才能看到的页面

用户绑定的快捷键详情

用户订阅成功之后

用户支付方式，即信用卡详情

用户更新信用卡

用户的优惠码页面

个人经验

• 最重要的是多看国外的 SaaS 网站，多学习，不断提高自己的审美，去 Dribbble，Behance 等网站找灵感
• 先确定好主色调，至少选两种字体，一种适合做标题的字体，一种是普通文本字体，然后定好几个标题的大小和颜色。比如 heading, title, subtitle, text, subtext 之类的
• 可以先用一些原型工具设计一下自己脑海中的页面，比如我一直在用的墨刀 (用这个链接注册你我都有优惠，哈哈) 。 大家可以在这看到我最开始设计的原型:https://modao.cc/app/ARvscvpdmhno0NBixRbt0nMTc277hz0
• 一定要用一款成熟度高的 css 框架，比如 bootstrap, bulma.css, 或者一位国人写的spectre.css。如果不用兼容 IE 系列的话，尽量用 Flexbox 布局
• 图片尽量用 svg
• 一些不会写的 UI 控件，可以去 github 或者 codepen 找找借鉴一下
• 自己动手用在 codepen 或者在Web Maker（我自己经常用的 Chrome 插件）实现一下，然后在集成到自己的项目中

有什么问题，欢迎大家一起交流。

[renxiangbin]

尊敬的楼主先生，有哪些推荐的 SaaS 网站推荐？

[Wichna]

@Heanes 哈哈，有时间可以多看看 Dribbble 或者 behance 这类的网站，看到设计好看的网站都研究研究

[Wichna]

@HELLONAV #40 谢谢认可😄

[Wichna]

@renxiangbin SaaS 网站太多了，我提供几个最容易找 SaaS 网站的方法吧：

1. ProductHunt 上面有 SaaS 的类别，里面全是 SaaS 网站 ttps://www.producthunt.com/topics/saas，或者直接搜索 SaaS 关键字
2. 有一个叫 SaaS1000 的网站 http://saas1000.com/
3. 专门整理 SaaS 网站设计的站 https://www.lapa.ninja/

[kenshin]

学习～ 👍

[bilibiliQQ]

vue 比 jq 难吧！我学 jq 一天入门，vue 三个月了还是一头雾水

[Wichna]

@kenshin 互相学习😊

[Wichna]

@bilibiliQQ vue 确实比 jq 要难，看看 vue 官方文档，应该不用多久就会了啊

[renxiangbin]

@Wichna 谢谢回复，过去搜过大都是 IBM 之流...支持 Anyshortcut

[Wichna]

@renxiangbin 不客气，哈哈，谢谢你的支持🙏

[azoon]

楼主，你好，这个样式能不能加个前缀啊...

[Wichna]

@azoon 好的，多谢你的反馈，我马上加上，我以前没有注意，抱歉

[azoon]

Anyshortcut 插件的样式，都应该加个前缀吧，使用了快捷方式的网站的样式都被插件的同名样式覆盖了😅

[Wichna]

@azoon 谢谢提醒，当然是都加了的，仅仅是用到了几个 common 的类忘了处理了🤣

[quietjosen]

不错不错；小伙，接活吗？😂

[Wichna]

@quietjosen 哈哈，可以接啊，老板有活吗？🤣

[quietjosen]

@Wichna 我的产品网站啊，https://Toolinbox.net 看看怎么整得好看些？😂

[Wichna]

@quietjosen 你的 i 系列软件不是一两个，数量确实不少，估计后期还有推出新的 i 系列软件？而且这些软件的定位一直都是 mac 平台，如果是做成一个静态网站的话，个人认为官网布局可以适当的参考或学习 apple.com ，然后再根据自己特色的改进或调整（主色调，字体，字号等等）。

[quietjosen]

@Wichna 你说的，产品多确实是个问题。其实，我也为 Klib 单独做过一个网站：Klib.me 一个产品的官网，确实容易做些。你的建议不错，谢谢，我来想想。

[Wichna]

@quietjosen 哈哈，不客气，反正加好友了，以后有很多机会交流。

我刚看了 klib 官网，最大的感觉就是太灰了，我认为人的眼睛对鲜艳一点的颜色更感兴趣，更能受到吸引，灰灰的网站，我个人就不愿意停留太久。