码农怎么打造一个有设计感的网站

2017-07-27 17:39大爱18 的分享

  码农是一名程序员而不是设计师,谁不想让自己的网站看起来更加吸引人,一方面出于虚荣,因为这样可以显得我更加“专业”,而另一方面是出于现实,因为研究机构调查发现用户会更加信任那些网站“看起来”很好的网站。码农怎么打造一个有设计感的网站?一起来看看吧!

  1. 使用 Bootstrap

  如果你还没有使用 Bootstrap 的话那么赶紧开始吧,这个来自 Twitter 的开源项目使得网站设计真正进入大众化时代。

码农怎么打造一个有设计感的网站   三联

  本质上 Bootstrap 是一种隔栅系统,由两名 twitter 员工 Mark Otto 和 Jacob Thornton 开发的开源前端框架[注:想了解更多请查看什么是 Twitter Bootstrap?],它集成了很多 CSS 样式的合集,可以帮助那些不懂或者不擅长 CSS 的开发人员快速的建立一个外观看起来很不错的网站。

  使用 Bootstrap 的另一个好处就是网站本身就是自适应的(Responsive),可以省去各种为移动设备等的适配工作。此外,Bootstrap 还是可定制的,可以根据你的需求自己配置。(注:英文不好的可以查看中文版的 Bootstrap 文档或 Bootstrap中文网)

  2. Bootstrap 定制指南

  决定使用 Bootstrap 是迈出的重要一步,相比其他可以在前端开发上节省很多精力,但有利有弊,如果你决定使用 Bootstrap 的话就意味着很有可能会和其他人“撞框架”,就像默认的 WordPress 皮肤一样,如果大家都完全用 Bootstrap 的样式的话,会让不少见得多的人心生厌烦。

  所以,如果实在抽不出时间的话可以去Wrap Bootstrap购买一份主题皮肤,这些主题皮肤都是由专业的设计师设计的,虽然不会成为唯一定制的,但已经看起来相当不错了,而且这种方法是最快速的。接下来就是以 Narrow marketing 这个模板(下图)为例教你如何自己定制一份完全属于你自己的 Bootstrap 。

  一. 字体

  修改网页字体是让网站看起来更有特色、有现代感的捷径,我们可以去谷歌的字体服务(免费正版)中随意挑选自己喜欢的字体,但是要注意字体间的搭配,在这里我们选择由 DesignShack 推荐的谷歌字体搭配中的一种:Cardo(用于标题) 和 Nobile(用于主体内文)。

  在网页头部中加入此代码:

  在 CSS 样式表 custom.css 中加入以下代码:h1, h2, h3, h4, h5, h6 {font-family: ‘Corben’, Georgia, Times, serif;} p, div {font-family: ‘Nobile’, Helvetica, Arial, sans-serif;}

  添加完后刷新即可查看效果了,现在我们的网站样式已经变成下面这样了,看起来比默认好多了。

  此外,除了谷歌的字体服务外还可以使用像 Fontdeck或 Typekit 字体服务,它们的字体更多,更多的字体搭配方案可以参考Type Connection。

TA发布的帖子

593

收藏

589