点击这里给我发消息 点击这里给我发消息

如何使设计显得真实

添加时间:2010-6-22
    相关阅读: 网页 设计 案例 页面 制作

设计师不应该是只会坐在咖啡馆里拿着一个手提电脑或戴着iPOD听着音乐然后看一下有没有异性打量自己的那种装模作样的小资。毛主席教导我们:到群众中去,从群众中来。这同样是一个设计师必须紧记的工作态度。现在很多的设计作品都很漂亮,从设计技巧上来说无懈可击,但却不真实。无论是颜色还是设计元素,都是设计师凭空想象出来的。本文试图通过一个设计案例,来探讨如何才能设计出一件真实可信的作品。

原文出处:www.bamagazine.com

在本文之前,让我们先来了解一下这个设计的一些背景,然后再来看一下我们是如何将一个平淡无奇的设计改造成一个真实而且令人留下深刻印象的作品。

如何使设计显得真实(图一)

肯德基矿山夏季系列音乐会( Kentucky Mine Summer Concert Series )是在内华达州山区举行的一个低预算的晚上露天的表演节目。在 150 英尺高的松树下的一个小舞台上,莓草叶被风起来的声音、民谣及民歌歌手的音乐与仲夏夜森林中的芳香混合在一起,让这里变成一个让人陶醉的时刻。

如何使设计显得真实(图二)

我们改造前的设计

但问题是,这个音乐会的网页横幅的宣传却完全不能传达这种氛围,虽然它制作得很漂亮和整洁。问题出在哪里?它整齐的线条及平滑的表面既缺乏力量,也缺乏音乐元素和表现出那个山区的感觉。造成这种结果是因为设计师在设计时只是凭空想象,并没有深入这次活动中去。在本文中我们将会为你介绍如何将一些更好的元素加进设计中去。

音乐会的气氛中哪里?图中这个黑色的帽子是想表达西部乡村的夏季音乐会主题,但事实上它不起作用。因为图中的线条太直,字体太过平静,而空白的区域太多,不能传达真实音乐会里那些欢乐的、五弦琴的琴声及歌手跺着脚在唱歌的那种气氛。

让我们来解剖一下这个设计

这个广告的设计师其实并不了解这次活动,于是便犯下一个通常的错误:凭想象设计。这样的设计明眼人一看就知道是人工成分太多。

除了字体的选择不合适外,还有一些不真实的元素:

  • 正反两种颜色的区域不真实;
  • 区域多呈直线和直角并不真实;
  • 颜色采用一些现代感的颜色不真实。

如何使设计显得真实(图三)

不真实的元素

为什么这么说呢?说起乡村山区,你脑海里的第一印象是什么?难道是整整洁洁、井井有条的那种样子?

如果仅从设计技巧上来说,这个广告其实做得不错:它视觉元素重点突出,颜色和谐,字体统一,而且排列整齐,没有混乱的感觉。但它却毫无生气,因为它不能反映事件的本来面目。举个例子,整齐光滑的平面和直线让人想起的只是都市里的会议室,并不是山区那种户外的感觉。

如何使设计显得真实(图四)

直线和平滑的表面让人联想起城市,而不是乡村

深入生活吧。真正的山区是这样的:有树,有岩石,有木制的小屋,有破旧的运货四轮车。这些元素都是呈现一种粗旷的、风化的、粗野的气息。

如何使设计显得真实(图五)

几张乡村的照片

另外,原来的广告的字体太过静态,空间过于消极:

音乐在哪里?我们说过,这个帽子是这个广告的焦点,但与文字却毫无关系:我们阅读的习惯总是从左到右横穿整个页面的,然后就希望能够看到一个与其有关的东西来加强我们观看的效果。但图中的帽子既没有传达树林也没有传达音乐的效果。所以,这个帽子并不能与文字产生某种联系。

如何使设计显得真实(图六)

下述的字体是采用 Quirky ITC Usherwood 黑体,该字体从某个角度上讲是一种可以吸引人的字体,一是该字体在字母“ M ”及“ N ”上有独特的半衬线,而且也呈现一种不规则的效果。但也正是这种特点,命名这种字体看起来有太多的设计味在这里,反而显得不真实和亲切。

如何使设计显得真实(图七)

      让我们开始改造:

      为了传达真实的气息,我们需要真实的视觉符号——真实的物体、真实的颜色、真实的图案。而由于这是一个聚会,我们还需要有一些让人感到惊讶的东西——更少的空间。

      如何使设计显得真实(图八)

      在一个空间不大的地方挤满人可以产生一种聚会的感觉(上图),而一个空荡荡的空间却不能产生这种效果。所以我们第一步,就是将多余的空间去掉。将原来横幅的高度收紧。在这里我们用了原来高度的 65% 。

      如何使设计显得真实(图九)

      我们将高度缩紧到原来的65%,背景我们使用了一张陈旧的羊皮纸图片

      • 将一切光滑的东西去掉:我们采用一张显得很陈旧的羊皮纸作为背景图案及整个空间的区域。
      • 将帽子扔掉,我们用了一个五弦琴,使整个效果不但立即就能传达音乐的气息,而且还能传达一种很特别的音乐韵味。

      如何使设计显得真实(图十)

      一把五弦琴(班卓琴)

      选用乡村字体:为了使整个效果出来后没有太多的“设计味”而是真实的,就象在淘金时代就存在一样,而为了使整个空间产生一种拥挤的效果,我们的标题一定要采用厚重结实的字体。我们采用 Poplar Standard Black 字体。

      如何使设计显得真实(图十一)

      Poplar 字体是根据 19 世纪 30 年代的一种字体重新设计的。因为这种字体内部几乎没有留下空间,使它充满了厚实感及力量感。而它的外观又人联想与木头有关的东西——不平坦、不精细、不规则。它只有一个缺点,就是在字体较小的情况下,它难于阅读,但字体较大时,则不存在这个缺陷。

      这个标题字体采用什么颜色?不要去凭空想象什么所谓的“漂亮的颜色”,它要来自真实的世界。我们通过 PS 中的吸管,在真实的照片中采用了这种泥土气息的颜色,这种字体的颜色与这次活动是非常配合的。

      如何使设计显得真实(图十二)

      从现实世界提取颜色

      标题颜色定好了,那其它文字采用什么颜色与这种棕色搭配呢?利用一下色轮我们就可以找到。根据经验,一般邻近色(或相似色)的搭配一般都有良好的表现效果。

      如何使设计显得真实(图十三)

      其它文字采用什么字体?我们采用 Rosewood 字体。这种字体与 Poplar 简直天生一对,因为象 Poplar 字体一样,这种字体的宽度没有规律,还有特别的衬线,也有短粗的字母伸臂( E 和 F ),字母的线条也一样不规则。唯一的不同是,这种字体在很小的情况下也容易阅读,因为这种字体空间很开阔(见上图)。

      生动的构图:

      我们手上有了这些刚才所述的背景及图片,设计效果开始真实起来。现在,我们要解决的是构图。为了有个生动的构图,我们可以想一下这几样东西:集中、轮廓及角度。

      角度传达动感:角度有一种不稳定的感觉,使到它能产生一种紧张兴奋的效果。同时,倾斜的物体越靠前,这种效果就越明显。所以我们要做的就是将这把五弦琴放置成一个角度,并且尽可能离观看的人近一点(亦即大一点)。只要有空间排列文字就行了。

      如何使设计显得真实(图十四)

      三种不同的构图

      问题又来了,五弦琴要多大才合适?我们可以先考虑一下两种极端情况,上图最上面的这个五弦琴占的位置非常小,而且是一个完整的图案。但它太小的,没有力量。

      而中间那个图又太大,几乎就象贴近你的脸上一样。这个设计只会使整个设计的重点放在五弦琴上,而不是这个活动上。

      如何使设计显得真实(图十五)

      五弦琴的这种放置能呈现最好的视觉效果
      既可以产生动感的效果,又可以留出空间来传达其它信息。

      字体绝对不能随便放上去就了事,就算你放得很整齐。文字是看得见的语言,当你放上这些文字时,可以使用不同的字体、大小、颜色及位置的变化来模仿自然的气息。而且要将字行与字多余的空间去掉。

      我们来看文字排列的三种情况:

      如何使设计显得真实(图十六)

      上图上:这种字体都采用同一种尺寸及字体样式,虽然每一个字母都不会使阅读的人遗漏,但却不自然。可以说,并没有一种“文字声音”上的变化。显得呆板。

      上图中间:这种文字排列层次分明。文字大小泾渭分明,但因为两行文字长度差别太大,使文字没有成为一个整体的效果。也显得缺少冲击力。

      上图下:这种排列一看就是一个有机的整体,不同的文字字体及大小组合,使到文字虽然排得很密,但仍能使观看的人不会造成混淆。而且整体上也呈现出一种厚实的区域,与我们在这次设计中所追求的效果一致。

      如何使设计显得真实(图十七)

      我们采用了上述的这种文字排列方式

      最后,我们加上一句 Foot Stompin' Fun! (跺脚的乐趣)在上面,颜色与下面日期的颜色一致,使整个效果更协调。黑色的“肯德基矿山竞技场”与粗壮的棕色的大标题形成对比,突出了大标题的力量。而“ T ”刚好被五弦琴压住一点,是想使视觉上有纵深的感觉。

      如何使设计显得真实(图十八)

      不同的几个尺寸,以便对不同的情况适用

      随机应变:作为一个网页的横幅的广告,我们可能要多留一条后路。在不同的地点需要不同的尺寸。所以我们必须要作必要的调整。但这种调整必须要紧记主要的元素一定要一致。图中显示的另外两个尺寸主要元素(包括颜色、字体)仍然是一样的。但综合来说,我们仍然认为最上面的设计是最有力量的,所以在可以的情况下,仍然要首选这个设计。

      如何使设计显得真实(图十九)

      本文采用几种颜色的数值

    本文作者:未知
    咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
    广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
    广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
    = 深圳商务地址:深圳市宝源路华丰宝源大厦606
    研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册