设计创造价值。如果想创建一个成功的博客,好的设计将起到非常大的帮助。

好的设计不是让网站看起来美观,而是让网站每个元素发挥最大的作用。

在设计网站前,需要一些工具:铅笔、纸张和图片编辑器(如photoshop、illustrator等)

设计前需要收集许多信息。许多时候直觉是最好的开始,但是网站设计不是。

假设我们要设计一个本站读者的博客,他叫Fred,爱好撰写有关手表的文章,他现有的网站每月带来几百元的收入,他想要更多。

第一步:定位网站目标(你想干什么,你想达到什么目的?)

我们想设计这个网站增加Fred的收入。所以我们需要设计一个弹性的网站框架,帮助Fred创造更多广告机会,吸引读者的注意力,特别是第一次到访的读者,增加网站对他们的粘性,创造更多机会让他们去点击广告。

因此,我们想增加些插件,让Fred可以控制调整网站的色彩元素以便让网站看起来更鲜活。

第二步:定位你的读者(他们是谁,他们来自何方)

Fred网站的读者一般分2种:铁杆手表爱好者,他们浏览文章了解最新手表的信息,还有就是通过搜索工具到访的普通人,想了解特定的手表款式和功能。

第三步:定位具体需求(这个网站需要什么功能达到需要的目标)

关键是具有最小的灵活性。我们只是让Fred调整广告的位置而不是调整代码,目的只是让网站外表有所改善而不是改动网站代码。

我们还想增加网站的粘性,我们打算增加一个”最热文章“列表,并且在文章底栏增加相关文章链接。

我们还会增加一个目录栏,允许读者自行访问内容;增加一个搜索栏,让读者自行搜索特定内容。我们还想增加些友情链接,更多和其他爱好者交流。最后,我们想显示最新评论,让读者可以同步讨论内容。

第四步:画出框架草图

一般我用omnigraffle(适用于苹果mac系统)来画草图,就是画出梯田般的可视结构图,忽略这一步是许多新手常常犯的大错。

类似下图。

wireframe

Wireframe到了这一步,还是没有太多“设计”,我们只是勾勒出网站合适的位置,然后确定每个板块内容,确定重点,就是我们想引导读者注意力的地方。

这是可以大做文章的地方,一般来说,我们要非常关注以下要素:

  1. 动态
  2. 大小
  3. 图片
  4. 色彩
  5. 文字
  6. 位置

一旦我们决定从何处开始阅读,我们就要开始决定阅读内容,我们要从内容中选出最重要的去引导读者先浏览。

这样我们就可以决定文章的布局和页面的样式,同时也确定需要点击的广告的位置。

第五步 制作样板(图片、色彩、样式等等的集合,感受是否符合目的)

一般我们要收集大量图片,这些图片有不同风格,一般取材于杂志(时尚杂志是个大金矿)、图书和各类图片网站。用这些图片拼接我们设想的网站风格。

做这一步并不需要许多时间,但是你会惊讶这一步有多么重要。比如这些图的效果。

Mood-Board

mood-board

第六步 视觉设计

这是网站设计的最后一步,这是个非常重要的综合步骤,我们要集中精力平衡网站的内容和式样等。

一般新手在这一步常常犯的错误就是没有“留白”就是在一些元素周边保留一些空白,请注意,并不是留出“白色”空间,就是留出一点空间。

在下一部分我们将讨论些静态图片设计。

在离开前,我想展示Fred的网站初稿。

site-so-far

编译自  http://www.problogger.net/archives/2006/02/17/blog-design-for-beginners/

Site-So-Far