Banner设计

Banner设计

前几天,我受到了一次打击,之前海盐的紧固件的专场上线后,实际的效果与我原本的设计相去甚远。究竟是什么原因造成了这样的差异呢?在经过一些对照比较后发现,问题就出在“Banner的设计”上。线上的版本只是将一些简单的未经处理的图片放了上去,话说术业有专攻,倒也是为难了运营的同学。一个好的页面是由若干个优秀的点组成,今天在这里就以首页Banner工业品类为例,进行模板化的粗浅总结,以期望对往后在保证Banner设计质量的前提下提高工作效率有所帮助。

我将一块好的Banner设计总结出了3大条件:

1.明确的信息传达;之所以将这一条列为第一点是因为Banner最主要的目的在于告

诉用户我们要干什么,我们要告诉他们什么。在网络世界里,我更倾向认为其是一个能真正体现个人意志的地方,如果我们不能在最短的时间内把我们想说的传达给用户的话,那用户会毫无顾虑的选择离开,而不用考虑什么“情面”。在具体的Banner设计中,信息的传达方式无外乎2种——图片和文字;图片是一种最直接的传达模式,也是用户理解成本最低的信息接受渠道,因此图片一定要选择明晰的,一眼看上去就知道到底在卖什么,要表达什么。

而文字,是要进一步的告诉用户,我们这个是干什么呢,能给用户带来什么,是打折呢还是新货上市?因此,我们要按照我们的利益点的轻重来依次展现,例如我们最大的卖点就是“2折销售”,那么毫无疑问,“2折销售”的字样一定要大,要醒目,其余的则需要相应的弱化。

2.合适的创意;一直以来我都认为我们做的其实是“戴着脚铐”的设计,我们需要在一定的框架内进行设计,否则网站的整体性从何谈起,毕竟我们做的是设计不是艺术。

那Banner具体如何来“创意”呢?(之所有选择“创意”这个词,是因为“设计”包含文字排版,整体创意等,而这里说的是具体的创意)也许Banner的创意有千万种,但是有一种是较容易实现并能在之后的其他设计中通用的,这便是“氛围的营造”。所谓“氛围的营造”就是指根据具体产品的特性来烘托周围的气氛,这个气氛可以是一个很小的相关元素,例如下图,所有的设计都在于机器迸发出的火花,这虽然只是一个元素,但是却可以让死气沉沉的工具“活起来”,最为关键的是这个元素承载了多种电动工具的“共性”,换句话说就是在不同的电动工具的Banner设计中都可以使用到。

图片1

3.优良的素材;很多时候,一个拙劣的素材会毁掉一个很好的创意,可以说素材是Banner设计中的点睛一笔。那么什么样的素材算是好的素材呢?我个人觉得有2点:一是较好的摄影效果,虚实有别才能形成较好的空间感;二是要靠设计师自身去辨别寻找。我总是认为,没有丑陋的事物,只是我们没有发现独特的美。就拿下面两幅图来说,同样的元器件,差别在哪里?

图片2

如何定义模板:

模板不仅仅是字号、颜色,而是包括了信息传达方式、排版、字体、创意、素材等一系列要素,我们所要做的一是规范二是找到共性。下面将从文字、创意、素材3大类来进行分析与设想。

1.信息传达的一劳永逸——文字与图像;首先文字在于图像的层次之上,文字的排版、字号、字体都应有所规范,我们可以定义出不同文字量的排版方式,例如主题4个字的排版方式、8个字的排版方式等,相应的辅助文字对应主题如果排列;文字的层次关系需要明确,字体的选择尽量统一在3种字体选择内,当然在具体的设计中可以有所改变,但是至少要给设计师以参考。图片作为背景可以贯穿整个Banner,主体图片位于右侧,所占Banner比例约为三分一,这样整个Banner不会显得太拥挤,文字的辨别也较为明晰。

2.创意的一劳永逸——“氛围”是虚的东西,只要保持核心的意思不变就可以,所有的材质、素材都可以更换,例如下图其“核心”在于体现机械的冲击感,背景材质,主体产品甚至于那个洞都可以更换,但是无论怎么更换,其总体的感觉是相似的。这便是创意的模板,一个创意可以在不同的产品上使用多次,而这其实是找到不同产品中的共性而已。

图片3

3.素材寻找的一劳永逸——我们可以自己去拍素材:有一些产品,即使看起来很丑陋的产品,我们都可以发现它身上独特的一点,刚硬的美、柔软的美、简单的美、复杂的美。只是我们没有发现而已。同一个产品不同的角度能体现不同的特点,就像模特一样。6个角度我们可以使用6次,为什么不可以?

收集素材的重复使用率:有多少我们电脑里的素材我们是使用三次以上的?又或是我们总是在不停的寻寻觅觅中。

其实关键在于不要总是听同一首歌:一首歌,再好听,天天听也要腻的,但是如果隔了一段时间,你再听却会有不同的感受。(我们可以准备3套创意,三个素材,如此组合就有9个不同的BANNER。)

Category: 视觉设计

22 responses

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. 花茶伯 says:

    海盐的紧固件的专场,在哪呢,我是海盐人啊嘿嘿。
    这个行业里出现海盐2字,还是第一次看到。

  2. 安小妮 says:

    设计出氛围真的很重要,
    如何让自己的设计有品质感,一直是我在思考的。
    在这里看到的是,能让设计“活”起来的方法
    受教了~

  3. 一一7 says:

    说了一些经验和总结规范!这是一种专业精神!赞一个~

  4. mushui says:

    设计也能模块化,一看作者也是个懒人,和我一样,呵呵

    拜读

  5. 汪XX says:

    伟哥的专栏啊!要多写点文章!

  6. Banner says:

    那个电动工具的图片 我想荡下来用~可以么?

  7. 小伍 says:

    您好,我想自学视觉设计的,今天通过百度来到您的博客,不可否认,您的博客真的很棒,棒得我老是在想您该是个多么有才的人啊!希望能学到您的百分之一就满足了!刚开始了解视觉设计,作为一个新人,请允许我发言,好吗?个人觉得这篇文章推土机那个素材好像有点突兀了,试想一下,如果是推土机从墙后推墙而出的话,洞的形状不应该是这样的;我觉得视觉设计要营造氛围抓住眼球没错,但是也要根据实际出发,要有根据;不知道我有没有说错,作为一个新人,希望您能多多体谅,谢谢,祝您身体将康,工作顺利,家庭和睦。

  8. 深海蓝鲸 says:

    学习了,叉车的那个创意,不错

  9. 我也很喜欢那个叉车的创意Banner

  10. 这样的BANNER 确实不错

  11. 李小风 says:

    很喜欢你们的文章,谢谢分享!!!

  12. 李小风 says:

    很喜欢你们的文章,以后会多多来学习的,也希望你们多发好文章!

  13. 暂时用不到,可以先了解下···

  14. Dream.逆流 says:

    受教了!挺不错,谢谢分享!

  15. Lilinrui163 says:

    阿里巴巴有专门帮助卖家做banner 的服务吗

  16. jianfeng ye says:

    banner应该第一眼看到的是创意,也就是主体图片,然后才会看到主体文字吧

  17. Json says:

    就爱看这个banner设计。先评论再看。哈哈

  18. […] 转自:http://www.aliued.cn/2010/09/25/banner-design.html […]

  19. 是的 是 says:

    你说的是逻辑与现实不符,这是一般人看设计的思维,他们往往会把焦点一下集中在那些看起来“不合理”的地方。例如,叉车不是用来施工的吗?怎么用来挖洞了?如果你陷入这样的思维,那就是有点转牛角尖了。从设计的感性层面来讲,这个是不需要回答的,因为这个洞仅仅是表达一种较为抽样的感觉,例如叉车的力量。他也不是视觉宣传的重点,就像看西游记一样,如果一直纠结于孙悟空翻筋斗违背重力原理,那你就进入了理性的黑洞。感性的部分是不需要解释的,有时候仅仅是为了美观和辅助。

  20. Danneylv says:

    受教!谢谢楼主!

  21. […] 其实关键在于不要总是听同一首歌:一首歌,再好听,天天听也要腻的,但是如果隔了一段时间,你再听却会有不同的感受。(我们可以准备3套创意,三个素材,如此组合就有9个不同的BANNER。) 原文:http://www.aliued.cn/?p=2966 […]