我跟Sophia算是患难夫妻，经受过困苦考验才缔结永恒的婚姻，Sophia有很好的设计才能，不过没有受过正规的教育，有时不太能帮我的部落格做些设计，而我本身对设计跟美感的感觉几乎没有，我们应该还得多多加油才行，最近听说RWD（Responsive Web Design）响应式设计，应该可以找好感度No.1的网页设计：RWD不出槌法则，网站在任何装置都完美呈现这本书来看能不能有所长进，不过Peter Flaschner这篇文章可以先看看。
[adsense][/adsense]
下面这篇文章是由非有才滑的部落格设计师Peter Flaschner 所完成，也是部落格技巧入门系列的一部分。
嗨！大家，我是Peter Flaschner，The Blog Studio的创始人跟创意的独裁者，我将要带领你们设计部落格或是网站时要走的过程，这是第一篇文章，当我们做完后，我们将有一个超完美灵活的WordPress布景主题给想要使用部落格来赚钱的人。
设计可以对部落格带来巨大的价值，当谈到使用部落格来赚钱时，适当的网站设计对你的利润有重大的影响，因为这样，所以当我要说这个部份时压力很大，我认为这跟人对设计的理解有关，我常获得的回应就是“丑的网站使用adsense可以好好赚”，这很可能是真实的，虽然我敢打赌，这些网站经过适当的设计相同的网站甚至会变得更好。
在我们进入主题之前，我需要驱散另一个神话：设计不是让事情变得更好，设计是在能力范围内让事情变得可以运作，让我从dictionary.com引用一些意义：
l 要制定一个计划；设计：为新产品设计一个行销策略。
l 有系统地规划，通常会有图表的形式：设计一栋建筑物；设计一只电脑程式。
l 为了特别目的或效果来创造或发明：设计吸引所有年龄的游戏。
l 有一个目标或目的；打算。
l 用一种艺术或高技能的方式来创造或执行。
因此，事不宜迟，让我们设计一个网站，下面是我们需要的：笔、纸跟绘图软体（像是Photoshop、Illustrator、Freehand或是Gimp）。
我们将从收集一堆资料来开始，我知道人的本能就是直接跳到绘图程式然后开始闲混，但这样不是最好的方法，你会看到这就是为什么我们会经过这一点。
我们会设计一个虚构的工作达人，这个人（让我们叫他做Fred）撰写关于手表的事，他从现有的网站一个月可以赚几百块钱，想要可以向前一步。
步骤1：定义网站的目标（什么是你想要做的？你如何完成这个目标？）
我们要设计这网站来增加Fred的收益，我们要为Fred设计一个灵活的框架放置广告、为了获得更多地一次到访的使用者增加引人注目的部份、增加网站的黏着度，给使用者机会来看他们想要点击的广告。
既然我们已经在处理了，我们会顺便使用一个我们最近开发的外挂来给Fred控制网站不同的元素的颜色，用这个方法，他能够让事情看起来很新鲜。
步骤2：确定你的观众（他们是谁，他们从何处来）
Fred的观众分成两组：爱好手表的中坚份子，他们阅读Fred站上的最新的钟表新闻跟评论，另一组则是购买手表的人，透过搜寻特定的品牌跟型号来到站上。
步骤3：确定特定的需求（网站需要有什么功能来符合目标？）
在这里最简单的弹性就是关键，我们想要Fred能够移动广告区块而不必碰到程式码，我们也想要Fred能够改变网站的外观然后可以一直看起来很新鲜，一样不用碰到程式码。
我们也想要增加网站的黏着度，我们可以在文章的底部增加“最爱得文章”列表及相关文章来做成。
我们会显示分类清单、让读者用非线性的方法来探索网站，还有一个搜寻栏，这样读者可以搜寻特定的品牌跟型号，我们也想要加入部落格连结(blogroll)，来分享我们喜爱的网站，最后，我们想要显示最新的留言，所以Fred网站上的忠实读者可以跟上所有的对话。
步骤4：绘制框线图(wireframes)（简略草图来实验元素的放置跟布局）
现在有趣的开始了，我使用一个超赞的程式叫做OmniGraffle（只在mac上用）来玩玩网站的部局跟元素的层次（马上就会提到），我要避开我的绘图软体，因为很可能会卷入设计视觉元素这里，在这个阶段你真的要避免跳入设计的视觉部份，不然你很容易迷失方向。
我们现在要做的是建筑我们打好的视觉元素的地形。忽略这个阶段是新手设计师会犯的一个最大的错误。
这里有Fred网站在第一个开发阶段的例子：
正如你我看到的，就现在而言没有”设计”，我们所做的就是想出构成我们网站不同区块的最佳位置，我们正在建立页面元素的层次结构；决定什么是最重要的，我们想要使用者的眼睛可以移到哪。
这是研究非常丰富的地方，我正试着把它简化成最基本的概念（这份资料来自Peter Faraday的一篇文章），在本质上，一旦登录到网页我们会执行2个功能：搜寻跟扫描，搜寻功能是我们眼睛寻找一个显著点来进入网页，我们会被下列的东西所吸引（按降幂排序）
动作(motion)
大小
图片
颜色
文字样式（字型选择、字体粗细）
位置
一旦我们决定从哪里开始阅读，我们就会扫描页面来决定月读得内容，我们会看一组物件，以及个别物件的邻近区域来决定优先阅读最重要的地方。
知道了这一点，我们可以决定页面的布局跟样式以增加产生预期回应的可能性（例如，点击广告）。
你们之中可能眼光锐利地注意到我们放了超过Google目前允许放置广告的数目，我们没有要在相同时间使用这些广告，但是我们会这样建置这样Frank有能力可以来回移动广告。
步骤5：做一个情绪版（收集图片、颜色、类型等等，可以给你瞄准的感觉）。
在较大的工作上，我们收集了一堆图片感觉就像是手头上的专案，我们快速地看过杂志（时尚杂志是金矿）、书籍跟网站的颜色、文字跟布局等等，我们剪起杂志或是印出来，接着逐一地组成一个我们正在瞄准建置网站的情绪版。
对一个较小的工作，我们一样跑了相同的程序，但是会改建一个虚拟的版面，这基本上是一个大型的Photoshop文件，我们可以贴上一堆东西在里面，这些图片变成建置一个调色板、探索结构跟形式，以及通常作为灵感的起点。
建置这些东西不需要很长时间 – 去试试吧，你会很惊讶这可以给予很多的帮助。
这里有一个最近专案的例子：:
步骤6：视觉设计
完成了上面所有的步骤后，视觉设计是较易管理的工作会比我们一开始就直接跳进来还要简单，现在我们可以集中精力在网站的平衡、能量跟样式上。
网站设计新手会犯一个很大的错误就是个别元素周围没有留下足够的空白，这就是所谓的”空白”，注意这不一定需要是白色的！相反地，这个名词说得就是保留空间。
这时候，在设计上应该弄得不错了，现在我要离开你，去弄Fred的设计。
明天，我们要将我们的静态图形转成WordPress的布景主题。
在我走之前，看看目前为止我弄的Fred网站：
更新：Peter有来信给我说他跟他的家人不太舒服，所以，这个系列的下一个部份可能要在几天之后开始，请继续关注第二部份。
2条评论
Comments are closed.