值得学习的Banner广告图完全设计指南

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:designschool   作者:Caitlin Jordan

关键词

Banner广告无处不在。从网站首页页头的内容推荐到侧边栏,从文章内到图库列表中,你会在几乎所有内容存在的地方找到他们的影子。通常情况下,它们看起来漂亮,略显浮夸,还会蚕食你的网络浏览体验,尽管我们在想尽一切办法降低它们给用户的负面影响,但是坏名声总是不可避免地同它们绑定到了一起。

实际上,Banner广告对于用户的影响是巨大的,合理的运用,肯定是事半功倍的。那么到底要如何打造不让人生厌、转化率可观的优秀的的Banner广告呢?

空泛的理论或许不够接地气,不妨从下面50个案例中,来学习Banner 广告的设计技巧。

1、风格化的图文排版

值得学习的Banner广告图完全设计指南

这是Dear Miss Modern 所制作的一组Banner广告,每张图片在文本和图片uimaker.com/uimakerdown/">素材上都保持了气质和风格上的一致性。字体的形式感和图片素材中图像和图形的搭配让整个广告Banner 给人的感觉更加强烈。如果图片并非是这种强风格化的,而是更加微妙的话,应当采用更加经典、耐看的字体来进行搭配,道理是一样的。

2、营造层次

值得学习的Banner广告图完全设计指南

Visa 的节日广告Banner就充分运用了层次结构的优势。照片的挑选就是有景深有层次的美食,让人第一时刻会被它吸引,而文字排版则覆盖在虚化的远景上,确保了可读性,也增加了一个层次,传递出信息,确保不会混乱。按钮的位置正好置于美食之上,文字之下,恰到好处地吸引人来点击。

3、使用相关图标

值得学习的Banner广告图完全设计指南

这个来自Google的广告Banner 通过手绘的图标给人带来一种个人化的体验。

图中每一个手绘的图标都非常易于识别,虽不复杂,但是给人营造出一种仿若在世界中穿行的感觉。这种难以描述但是令人触动的感觉让这个广告不再只是一个广告。

4、增加出人意料的元素

值得学习的Banner广告图完全设计指南

一个招聘广告应该怎么做?谷歌的这个招聘广告也算的上是出人意表了,没有高大上的说明和漂亮的妹子,而是用形同小区布告栏的手写小广告一样的涂鸦手写广告。这种广告不复杂,但是却出人意料,这种熟悉的感觉也足够令人触动。

5、加入插画

值得学习的Banner广告图完全设计指南

这个案例同样是谷歌的广告图,插画的加入让整个广告图充满了童真和趣味,加上扁平化的元素,整体看起来也比较统一。这种插画实现起来不难,看起来可能有点粗糙,但是确实很友好。插画和摄影图片不同,它能赋予设计以后者无法企及的气质,当然,你得用好才行。

6、布局适配

值得学习的Banner广告图完全设计指南

FatCow 的这个广告图是由 Envato Studio 所设计的,为了适配不同的广告位,整个广告制作了多个不同尺寸的版本。将最常用的广告图设计出来之后,将其中的元素进行二次编辑,制作成能够适配其他广告位的尺寸,其中某些元素需要调整,移除或者新增,这样就可以实现了。

7、使用绚丽的色彩

这个Google Music 的广告采用了活力十足的粉色,搭配的是同样高饱和度的蓝色,两者形成鲜明的对比,,也给人留下深刻的影响。和普通单色调为主的Banner相比,这种色彩绚丽的多色搭配更加抓人眼球,不过使用的时候需要多加注意,确保可读性和协调性。

8、保持简约

如果说有可口可乐有什么做的非常突出,那么保持简约的设计绝对是诸多优点之中最值得学习的一个。这个可口可乐的广告Banner 设计很好的延续了这一传统:产品图+LOGO+宣传语+标志性配色。虽然内容不多,但是效果很赞。

一个塞满全部信息的Banner广告图对你而言不会有啥好处,因为用户压根不会去看。将最重要的信息呈现出来,这就够了。

9、关注潮流

值得学习的Banner广告图完全设计指南

关注流行文化和正在风靡的趋势,对你设计banner广告而言,非常有用。Campbell 就是这样,它很好的利用了星球大战电影这个IP,推出相关主体的产品,吸引星球大战的粉丝前来购买产品。合理的借助正在流行的趋势和话题来宣传对应的产品,绝对事半功倍。

10、使用纹理

值得学习的Banner广告图完全设计指南

Campbell 的这个广告是运用纹理提升质感的典范。笔刷式参差的边缘让整个广告的视觉效果更加微妙,广告图中其他的元素谈不上有多突出,但是纹理的加入如同点睛之笔,使得整体的效果都提升上去了。

11、借助利基

值得学习的Banner广告图完全设计指南

利基是指针对企业的优势细分出来的市场。广告通常需要针对目标人群来投放,这样才能达到最好的效果。

Target 的婴幼儿系列产品的广告主要是针对母亲们投放的,那么还有什么比一个粉色的、可爱的场景更容易吸引到她们呢?

12、用图展示,而非语言

值得学习的Banner广告图完全设计指南

Zarbee 的维生素广告banner 在图片的使用技巧上就相当突出,水果来置换维生素,强化概念,而非用语言来描述,巧妙而直观。

13、清晰的聚焦点

值得学习的Banner广告图完全设计指南

当广告有明确清晰的聚焦点之后,品牌和用户之间的沟通就更加直接了。这个Banner 广告图也是为Target 设计的,品牌LOGO从位置到颜色都足够显眼,加上美女的姿势在结构上的引导,Target 的品牌LOGO无疑是整个广告图的焦点。

 收藏