浅谈banner设计

标签: 视觉设计 | 发表时间:2012-12-18 16:25 | 作者:雪天然美1106
出处:http://udc.weibo.com


关于Banner的设计,相信已经有很多人都看过这方面经验的分享了,我来公司也做过了一些Banner的设计,那在这其中通过不断的学习、实践积累了自己的一些小小经验和方法,下面给大家浅浅的分享下我总结的Banner设计经验。如有错误,尽管拍砖,小女子虚心请教学习。


Banner设计其实是我们接触互联网工作后,最常见一种工作。那么Banner到底是什么呢?Banner的核心使命其实是吸引用户关注,然后被点击。他的主旨就是主题明确,突出关键内容,抓住用户眼球。一个Banner他是由“背景、主视觉和标题文字”三部分组成,在我刚刚接到需求的时候,我首先分析他的重点词、字,想要表达什么,分析好了后可以在纸上画下草稿,在大脑里有个大概的视觉效果,想法多的话可以画几版不一样的,最后根据草稿定一个定稿,接下来就可以找素材着手做了。在做期间,还要注意整体的美观,让人看起来舒服。
下面从这三部分逐一给大家分享下。

一、背景

我们画画的同学可能都知道,一个画面不可能都面面俱到,重点的需要细致刻画,有的一笔带过即可。设计一个Banner有时候就像画画似的,首先要有大的环境,那Banner的背景就好比大环境,其实主要是起到衬托、烘托气氛的作用。一个新需求过来,首先我们考虑要营造一个什么样的环境,什么样的气氛,是欢快的、悲伤的、可爱的还是…比如过年,可能就用红橙色,比如儿童类的,颜色上就要纯一点,活泼点等等。

但是需要注意一点,背景不能太花,否则会影响整体的一个可读识性,简单,清晰即可。

二、主视觉元素

Banner中的主视觉要清楚,符合主题,元素不可太多,否则看起来跟人感觉就会乱。有的人在做时只要是有地,就全放满,其实页面适当的“留白”也是提升画面品质的一个好方法。视觉元素不论是人物,还是其他,一定要清晰,在我们找素材的时候也要找像素质量高的,我一般会去站酷、昵图网、花瓣或者直接google搜,不要太多。还有一点注意的是不可盗用他人的作品,头像等等。大家都懂的:)

下面的这个Banner看起来就比较乱,东西太多,想表达的也太多,这时候需要用户去花时间思考它想告诉我们什么,而往往这时候用户是不愿意是思考的,一是画面不知道他要表达什么,二是整体上没有吸引住用户的眼睛,这种情况下这个Banner是做到比较失败的。

三、标题文字

标题文字非常重要,是整个Banner的主题,重点文字一定要在背景中突出出来,不论用颜色对比、放大、变形设计还是即便做立体效果等等。(这里我分享一个经验,就是在页面上新建一个黑色的图层,样式改成饱和度,整体上成黑白的效果后一眼就能看出来了)

这个Banner标题用了描边和投影,从背景中出来了,但还是看起来不舒服,主要是他的文字有用曲线、斜线的方式,让人不禁会顺着字的排版顺读下去,他这里面不同方向的斜线用的还比较多,这种方式看多了就会比较累,没有形成统一。

这个Banner看起来比较清新,没有过多的元素,但重点是文字,由于背景用的浅色,文字也用的浅色,用户是很难看出来的,影响用户的阅读性。

最后总结几点

1.画面整体统一,颜色搭配的看起来舒服;
2.页面元素要以组为单位;(如文字和文字之间的间距不要过大,让人看起来是一组)
3.采用吸引力的用语,或者添加“火速参与”等刺激性的词语按钮等,让用户在最短的时间内有去点击他的欲望。
4.主次对比分明,合理安排页面布局;
5.输出K数不宜过大,否则加载速度会慢;
6.最后最重要的一点是,前期工作一定要与需求方沟通好,要知道,在工作中,沟通是非常重要的一件事情。

以上是自己在平时工作中总结的一点点小经验吧,希望对初学设计的同学来说有点帮助,还望大师们多多指点,我会虚心学习。有部分图是从网上找的,在这里借用下,如果侵犯您的权了,请告知下。谢谢。
 
 
微博UDC原创博文,转载请注明出处,欢迎 订阅 )

您可能也喜欢:

让文字讲好banner的故事

关于专题设计,你怎么看?

为信息设计
无觅

相关 [banner 设计] 推荐:

浅谈banner设计

- - 微博UDC
关于Banner的设计,相信已经有很多人都看过这方面经验的分享了,我来公司也做过了一些Banner的设计,那在这其中通过不断的学习、实践积累了自己的一些小小经验和方法,下面给大家浅浅的分享下我总结的Banner设计经验. 如有错误,尽管拍砖,小女子虚心请教学习. Banner设计其实是我们接触互联网工作后,最常见一种工作.

Banner设计的六大原则

- - 优设(UISDC)
Banner设计可以说是我日常工作中最主要的一块需求,banner不比大型项目,从设计成本上来讲不可能给太多的时间给设计师,所以这也引发了我对如 何更有效率地完成一个banner的思考. 我觉得构成banner的重点主要有三个方面,即风格,排版以及配色. 我个人的习惯是先定风格,再做大致的排版 和配色,然后根据整体再来调整,最后再优化细节.

如何做好一个Banner?

- - 互联网的那点事
我现在快毕业一年了,专业是软件工程,很不喜欢这个专业,所以当时就没有选择本专业的工作,可是我很喜欢做设计,喜欢漂亮的图片,实习的时候开始做网页设计,做了三个月,是个很一般的设计,网站的div+css也是在学校学过的,后来经朋友介绍到一家游艇公司做平面设计,现在是做了8个月了,设计水平做企业内部的一些东西还是很一般的.

让文字讲好banner的故事

- - 微博UDC
关于banner设计的话题相信之前已经有很多设计师发表过自己的经验分享,让人看完以后也是感慨良多、受益匪浅. 但是这并不妨碍我们再一次提起这个话题,每个设计师的工作方法和设计的切入角度都是不同的,今天我想跟大家着重谈谈banner中的文字设计,如何设计好banner中的文字,让文字和其他元素相辅相成达到和谐的统一.

2款製作Google+個人資料Banner分隔圖片的產生器

- 夜の猫 - 靖 ● 技場
大家應該知道在Google+的個人資料中可以上傳5張圖片來展現自己的風格,因應這個特色,網路上也有相對應的產生器可以使用,例如「Bannerspl.us」或者「Make Google plus banners for profile」都可以讓我們做出具有個人特色的Banner橫幅欄,本文將以前者為教學範例來做說明.

为了设计而设计

- - 幻风阁|kent.zhu'sBlog
我有个习惯,每天晚上睡前会搜罗一遍最新的App用用. 最开始的时候ios的App还相对比较朴实,强调功能的实用性,后来不知何故吹起一阵ios的App必须足够精美的怪风. 于是乎,各类App纷纷上演换装游戏,一个比一个做的精美,即使是一个很工具性的应用也把自己浓妆艳抹的往坐台小姐的风格搞……. 上周末跟Tony和Angela在下厨房喝茶闲聊,我说目前的移动产品设计可以分为2类,一类是做给用户用的,一类是做给设计师们欣赏与收藏的.

杯盖设计

- Yu - 创意设计-有趣、时尚、另类的创意
微向上的设计,在倒水完毕的时候可以让水滴顺着杯盖回流到杯子中,而不会随意的滴下来. 虽然是细小的设计,但是考虑的却是生活的便利.

再设计Redesign

- Mark - 腾讯CDC
  一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来.   对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法.

简约设计

- - 淘宝网通用产品团队博客
写下这个标题,那么首先得要明确什么叫简约. 简约就是让用户操作简单,让用户更快的达到自己的目的. 一个产品在于解决一个需求,如何让用户最好的完成需求就成为一个产品经理首先得要解决的问题. 那么在日常工作中,我们又有什么可以做的呢. 在《简约至上》里面有四种策略,但是有的东西太高级了,在平时的工作未必能够用得上,所以我自己来提炼一下,看看日常工作中能够遇到并且可以解决问题的方法.