如何把BANNER做得传情达意

 

  编者按:初入职场的设计师,可能每天都要做大量banner,工作多了,创意跟不上怎么办?其实创作banner也有规律可循,网易的同学就用大量案例 + 多个角度分享了他的经验,是一篇不可多得的经典文章,赶紧来学习一下。

  写在前面的话

  有人觉得做个banner放2张图,排几个字的事,一点技术含量都没有,像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的,其实一个banner可以研究的东西还是很多的,而且做一个banner是不难,难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的,比较重要的专题,banner部分是由设计师来完成,一个banner的品质上去了,整个专题的质量感就上来了,所以这部分交给设计师来做也是重视品质的表现,这个毋庸置疑。但banner毕竟不比大型项目,从设计成本上说不可能给太多的时间给设计师,于是乎,设计师有时候是靠经验积累,有时候妙手偶得,质量也是时好时坏,更害怕的是当没有经验没头绪没有心情时,胸中无物,不知道如何下手,于是越急越乱,越乱越急,最后匆匆了事,这种状态下估计也出不了好的东西。在排除技术手段的前提下,如何通过一些经验的思考,让banner达到通情达意效果,也是我下面要说的,个人经验之谈,供大家参考。

  一 :思考专题定位

  顾及需求方的频道定位

  因为包含内容不同,门户网站各个频道有着不同的风格,所以设计师们做设计的时候也要考虑到如体育频道的运动感,财经频道的国际和高端等。


  图1/女人频道的定位是知性 ,所以这个banner设计风格也是很贴切的。/banner 赞助 夏小萌


  图2/历史频道的专题,做出厚重沧桑的历史感还是很切题的。/banner 赞助 10

  顾及此专题的定位

  专题的定位有时候和频道的定位偶尔是有冲突的,如女人频道一贯的知性理性的大风格下,有时候会来一些可爱小女人,有时候有做温馨浪漫,在这种有风格冲突的情况下,我们还是以贴合专题的定位为主,当然也尽量做到不能背离频道风格太远。


  图3/女人频道下的一个怀旧感的专题,所以画面做出了一些怀旧的感觉。/banner 赞助 璇


  图4/数码频道的一个和某手机赞助商的活动,所以banner也表露出一定的商业感。

  二:明白文字在Banner中占主导地位

  从构成上讲,一个banner分为2个部分,一为文字,二为辅助图。辅助图虽然占据大多数的面积,但是不加以文字的说明,很难让用户知道这个banner要说明什么。要读一个人的喜怒哀乐,只要读其五官即可。在一个banner里面,标题文字起着五官一样的作用,所以个人觉得文字才是整个banner的主角。所以对于文字的处理,显得尤为重要,在文字处理时有几个小技巧,与大家分享。


  图5/banner文字阐述专题主题,是绝对的主角。/banner 赞助 淑华

  分清主标和副标,从主次上来说,主标为主,字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满,比较集中。


  图6/对主标题的断词比较巧妙,文字集中,主次明显,且文字与辅助图案相互呼应,统一感很好。/banner 赞助 淑华

  如果主标太长,需求方不舍得删文字的情况下,对主标中重要关键字进行权重,突出主要的信息,弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。


  图7/长标题的时候,如果把‘征集各种端午风俗’排成一行,就会显得没有主次,也很有吸引力。我这里把‘端午’这个最重要的信息提出来,让用户很容易进入环境,然后让他们继续了解更多的信息。这里还要说一个小技巧,我这里‘征集各种’、‘端午’、‘风俗’这三个词虽然分别用了3种字体,但还是能读出‘征集各种端午风俗’这是一断话,因为同一个红色起到了很大的作用。

  如果需求方整体文字太短,画面太空,可以用一些加入一些辅助信息丰富画面。如加点英文,域名,频道名等。


  图8/这个banner附加了一些英文来丰富画面,让画面充满丰富的同时,充满生气。/banner 赞助 LV

  三:构建辅助视觉

  一个banner最主要的是标题,但辅助视觉起着烘托标题文字的作用,然而这也是最有难度的一个活,设计师的个人风格和变现力在这里能够淋漓表现。文字和辅助视觉的关系,我这里列举了3个常见搭配方式,这几种方式搭配分别有不同的效果,从而产生不同感觉。

  3种文字和辅助视觉常见的搭配方式:

  1,文字+背景陪衬两段式。特点突出文字,视觉集中文字,报道感强。


  图9/banner 赞助 胡子


  图10

  2,   文字+主体物的两段式,文字图案相辅相成,起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。


  图11/banner 赞助 淑华


  图12

  3,主体物+背景+文字的三段式,特点虚实结合,主次关系明显,也是效果最好,用的最广泛的一种形式。


  图13


  图14


  图15/banner 赞助 淑华

  四:创造力对主题的艺术化表现

  1,严肃话题也能做出新感觉

  做新闻报道的时候,遇到严肃话题,一般的设计师,都会比较拘谨,不敢也不愿去做视觉上的创新。所以配到这种话题,画面效果一般都会比较模式化,信息量弱,感染力不足。这时候,设计师如果敢解放思想,去动脑子做一些创新,其实严肃话题做上新感觉,能够达到意想不到的效果。


  图16

  /主题文字埋没在洪流之中,让其有一种融入感。洪流、闪电、阴暗的天空、淹没的城市,画面灾难感很强,角落处的武警官兵抗洪,让整体灾难中透出希望,哀而不伤。设计师有时候不仅仅应拥有对画面掌控力,对专题主题的把握,也是作为一个设计师应该具备的素质。


  图17/因为是做夏季高温的专题,所以在处理画面的色彩时候我对比度做的比较弱,就如同烈日下看东西的感觉。


  图18

  这是春运的专题,我在处理画面用了很多斜的构成,因为斜的东西学构成的时候表达那种不安感是比较贴切的。拥挤的人群、阴霾的天空,不安中带着希望,当一张小小的火车票就能映出当回家的曙光时候,我想,或许这就是很多人对于春运的感觉吧。回头看看其他门户的专题,光艳无比,一股社会主义的优越感油然而生的感觉,不知孰对孰错,再想时,我已迷失。

  2,轻松话题可以做出幽默感

  有时候也会做到一些轻松感娱乐感的专题,在做这些专题的时候,设计师们就能更加放开了。


  图19/这个专题banner,做的很轻松很幽默。编辑说他的频道群里发,整个频道的人都笑翻了。


  图20

  3,作品也能带点小情调

  有时候来一些小的创意也会让banner增色不少。


  图21/摇滚的不是乐器,还是文字/banner 赞助

时间: 2024-10-31 14:30:36

如何把BANNER做得传情达意的相关文章

如何将Banner做得通情达意

写在前面的话 有人觉得做个banner放2张图,排几个字的事,一点技术含量都没有,像其他门户banner基本上都是编辑们自己做的.我觉得这么说是不对的,其实一个banner可以研究的东西还是很多的,而且做一个banner是不难,难得是在短时间内做一个出彩的banner.门户的专题一般是编辑套模板拼成的,比较重要的专题,banner部分是由设计师来完成,一个banner的品质上去了,整个专题的质量感就上来了,所以这部分交给设计师来做也是重视品质的表现,这个毋庸置疑.但banner毕竟不比大型项目,

网页设计技巧剖析:专题页面设计传情达意

文章描述:推荐:如何设计"传情达意"的专题头图. xiaoning:相信大家在平时的工作中,经常会碰到专题的设计吧!而且大部分是时间紧任务重.专题不同于网站的常规页面,常规页面更侧重于内容的阅读及人机的交互,因此可读性.可用性是第一位的,装饰性次之. 而专题正好相反,它更侧重于通过气氛的渲染来"传情达意".首屏的头图在气氛的渲染中尤为重要. 我们知道了头图在专题设计中的重要性,那构成头图的主要元素又有哪些呢?它们有 文字.背景.色彩.布局这四种主要元素.下面就通过一

如何做得Banner通情达意

写在前面的话 有人觉得做个banner放2张图,排几个字的事,一点技术含量都没有,像其他门户banner基本上都是编辑们自己做的.我觉得这么说是不对的,其实一个banner可以研究的东西还是很多的,而且做一个banner是不难,难得是在短时间内做一个出彩的banner.门户的专题一般是编辑套模板拼成的,比较重要的专题,banner部分是由设计师来完成,一个banner的品质上去了,整个专题的质量感就上来了,所以这部分交给设计师来做也是重视品质的表现,这个毋庸置疑.但banner毕竟不比大型项目,

网易UED,连个Banner都做的这么专业

写在前面的话 有人觉得做个banner放2张图,排几个字的事,一点技术含量都没有,像其他门户banner基本上都是编辑们自己做的.我觉得这么说是不对的,其实一个banner可以研究的东西还是很多的,而且做一个banner是不难,难得是在短时间内做一个出彩的banner.门户的专题一般是编辑套模板拼成的,比较重要的专题,banner部分是由设计师来完成,一个banner的品质上去了,整个专题的质量感就上来了,所以这部分交给设计师来做也是重视品质的表现,这个毋庸置疑.但banner毕竟不比大型项目,

手机也能玩转MSN传情动漫!J2ME实作

郑昀@ultrapower 产品名称 产品版本 Keyword: Mobile 传情动漫 Wink MSN Messenger Media 媒体播放 j2me midp2.0 WMA PushRegistry PopupWinks Mobile 0.0.1 BETA 手机也能玩转MSN传情动漫! J2ME实作 摘要: 本文档并不是一个关于PopupWinks On Mobile 之Kjava版本的开发说明,这里只是一个总入口.我将给出手机传情动漫的奇异特性.用户使用说明,以及演示程序下载地址:并

星巴克为什么不做广告

这篇是我写给<中国经营报>长三角版首期的文章,去年底应编辑的稿约,匆匆在星巴克里炮制出来的.一不留神又给星巴克做了义务广告,正如所有这个品牌的各种各样的免费宣传员一样.文章是想通过星巴克解释一个道理:品牌认知度其实与大规模的广告并无直接的逻辑关系---- 星巴克励志故事取代广告? 作者:徐雷 最近在上海乘坐地铁的人都会在地铁线的视频上看到一部名为<晴天日记>的"连续剧".该剧情节并不复杂,女主角李晴喜欢乘地铁.喝咖啡,更喜欢帮助别人,经常用博客记录身边的人与事.

通过飞信PC客户端使用秀动传情

通过会话窗口的秀动传情,用户可以把各类动漫.表情.动态图片等发送到好友的会话窗口上,对好友进行传情达意.恶搞整蛊. 在与某位好友的会话窗口中,点击发送区工具栏中的"秀动传情"图标,打开秀动传情窗口,在最新.热门.免费标签中选择您要发送的秀动传情,点击即可发送. 注:"会员"标签中的秀动传情仅限飞信会员使用.

色彩设计哲学

设计   无论你是个怎样的死硬派,你不得不承认色彩和生活的亲密程度,差不多到了难舍难离的地步.小如每天上班该穿著什么颜色的衣服,大如设计一国之国旗应用什么颜色,全反映出色彩在我们的生活中,担当了个吃重的脚色.事实上,除了黑白影片的人物外,没有人可以生活在一个无色世界中.色彩令这个世界变得缤纷,它能改变我们的心情,影响我们对某事某物的看法.企业因此愿意把花绿绿的钞票投资在设计代表企业的颜色上,设计师绞尽脑汁去表现每种颜色的特质,为的是他们相信,在你和颜色相遇的一刹那,你可以意会到在那或温柔,或暴烈

用vfp与sql server构建Client/Server应用程序(远程视图)(4)

缓冲(Buffering) Visual FoxPro 中的缓冲技术 当远端数据下载到客户端时,这些数据就被压入缓冲之中.在客户端用户对数据的各种移动并不反映到数据源,而是在用户确认对数据的变动后,才把各种变动以SQL描述的形式发送到后端.那么为什么不让Visual FoxPro直接一步一动的操控远程数据,就像在不使用缓冲技术控制Visual FoxPro本地数据那样.我想原因在于: 在 Client/Server 构架的应用中,数据库服务器需要同时处理许多客户的请求,如果有一个客户"直接&qu