双十一BANNER如何设计出来的?

每到一年一度的大促季,会场、页面、互动游戏,都在紧张设计之中,这些精美的页面和互动游戏,如何与用户产生联系?必然需要一条与用户连接的纽带 —— 它就是BANNER。有些人可能认为资源位的设计相对简单,但其实不然,小小的资源位承载着重大的使命,设计上自然也是下了一番功夫,那这一次的双11我们是怎么做的?请听我细细道来…..

曦村:在设计前期,做大致规划,是很有必要的,在大促中虽然会有很多变化,但,做规划会帮助我们在大方向上不出错,这次,从了解业务背景及节奏 – 前期风格创意设定 – 突出品牌增强识别度 – 制定规范提升效率等几个方面去做,有了这个框架,这一次的设计过程还是相当丝滑滴!那具体是怎么做的呢?

一、了解业务背景及节奏

今年双11以“全球化”为主题,从主题来看,说明整体方向走国际路线,设计必然要高端大气上档次。不但如此,今年还要突出品牌化!品牌核心元素必须贯穿始终,让用户有明显的感知,设计与设计之间保持统一,传递相同的心智。

三个关键词说明了我们这次品牌的大致方向:

品牌核心元素给了我们比较明确的图形参考。

了解整体设计节奏:

二、制定风格及创意

为何要制定风格及创意?

因为Banner是为会场引流的,须配合会场給用户传递相同的心智,前期的风格及创意的思考,为后期的设计助力不少。

根据每个时期主题的变化,我们需要准备多个创意,这样才能紧跟主题的变化,有多种方案可选。

会场设计:

会场根据整体节奏分为三个时间段,造势期间-主要运用了贯穿品牌的线条及猫头元素,各国国旗烘托了全球化的主题 / 预热期间-主要突出了货品与猫头 / 正式期间-以金色渲染出狂欢的气氛。

根据以上主题变化做了风格方向及创意探讨,以下是脑爆方案:

在前期探讨时,脑爆了多种方案,然后根据每个时段的主题变化,选择合适的创意及风格。

接下来举几个例子,造势期间以全球化为主题,我们思考了全球化,有汇聚各国好货的概念,创意如下:

商品拼接组成图形的创意,正好符合各国好货汇聚的概念,货品与品牌核心元素的完美结合,用国旗彩条作为辅助元素,突出了天猫与全球化概念的融合,并且让商品组成或者溶于猫头,也体现了这一点!

创意参考:

随着时间临近双11,需营造紧张,紧迫,激动期盼的氛围,以狂欢为主题,创意如下:

商品与毛笔字结合,营造出最后关头的疯狂以及紧张,增强了狂欢的氛围。以手势为创意点,一是今年大部分用户都用手机购物,手的元素具有亲和力,二为手势作为倒计时数字的表现形式较为新颖,手势也有其他含义,比如竖起大拇指为点赞等。色彩上也与会场相呼应,看起来较为统一。

创意参考:

当然还有很多创意及风格运用,这里就不一一讲解了,从这个思路,大概也可以看出一二,这次我们是做了充分的准备,一个创意库,让我们整个设计过程井然有序,且能在紧急突发的状况时,及时更换创意,保证较好的活动效果。

三、识别度及差异性

为何要增强识别度,差异性?

原因其实很简单,双11期间,各大电商平台几乎都做活动,用户又怎么能在茫茫图海中认出我们?抄袭,模仿更让用户视觉疲劳,怎么能脱颖而出呢?

案例:

在大促这个时间紧迫又设计资源缺乏的时期,很容易让人感到疲软,设计大同小异,没有太多的特色与区别,所以,打破这种局面,是接下来的重点。

在茫茫图海里,能够让人眼前一亮是我们追求的效果,与其他平台设计形成差异,也是我们的使命。其实在设计之前,我们就希望这次的设计能够区别于以往,有特色,有记忆点。那怎样才能让用户认准我们的双11?你猜得没错,那就是我们品牌的核心元素-猫头!!为了让用户能够强烈感受到品牌,我们就要重复重复再重复的强调!就像脑白金的广告,一日三次,定能给人留下深刻印象,重复的感觉着实也是魔性的!对,是魔性的步伐!

解析魔性关键词:

从这些关键词中,也可以寻找出一些设计元素及方向了!再结合品牌核心元素猫头,一张与众不同的banner就此诞生了。

案例:

这次双11大促的设计,有几个点,是与以往不同的,空间感,刻画猫型元素,轻质感。

字体上我们运用了投影,营造空间感,使其看起来有层次,猫型的元素也显而易见,在商品的处理上,没有运用厚重的投影,而是运用了商品本身的质感,未加太多的特效,质感轻薄,看起来清新脱俗!

重复的连续纹样,让人产生晕眩的效果,抓人眼球,同时也使品牌元素更加突出,并且在色彩上也使用了较为鲜亮的颜色,增强了视觉效果。新的尝试当之无愧成为了点击之王,模版中的战斗机。从数据上看,此套BANNER成为当日焦1中点击最高的,确实提升了活动效果!

从空间感,图形元素,及背景这几方面,做了形式上的创新,并且识别性极高,让人难以模仿,又能很快抓住用户眼球,是一次很不错的尝试!

四、规范

在大促期间,资源位数量多如牛毛,如此大工作量,光凭几个人的力量是完不成,借助外部力量是必然的,那如何让沟通更高效,成本更低,这是我们需要思考的。

还有类目运营需要推广活动会场,日日都有焦点,设计素材的审核工作量也不小!面对这些问题,我们确实思考了一番,日常的规范是必然要做的,标注清楚,减少沟通成本,其次是,产出的模版,如何让外部设计师易于延展?经过思考,我们在字体上没有去做不必要的变形,这并非偷懒,而是正真考虑到模版的实用性及延展。

当然,字体是非常重要的,不做任何设计,也不合适,所以我们使用了轻质感,增加一些空间感,这样既便于延展及修改,又有设计感,一举两得。

五、总结

本次负责资源位的经历,让我对品牌有了更深的了解,如何体系化的设计及如何在品牌的基础上创新。从节奏的把控,适应主题的变化,设计创意探讨风格制定,如何配合双11其他相关设计,保持设计的统一性。以及规范制定的重要性等,什么才是优质模版,如何提升工作效率及提升活动效果,都积累了不少。希望能給大家一些启发。

最后一起来回顾一下双11期间的banner:

欢迎手淘团队的微信公众号:

原文作者:MIX无线设计

优设

(0)

相关推荐

  • "双十一"购买手机平板攻略:哪家最划算

    一年一度的网络购物狂欢节还有2天就要到了,许多人现在正在电脑面前兢兢业业的往购物车中堆放东西,电脑、CD机、香水、笔记本、平板、衣服等,当然,还有很多人选择在这一天购买手机。微软、三星、索尼、HTC以 ...

  • 迎战双十一!美图淘淘助网店销量激增

    “双十一”又将来临,这个被戏称为光棍节的日子,对于众多网店来说,又是一次难得的商机。不过,在众多网店纷纷打折扣销的“双十一”期间,不少网店卖家其实也在犯愁如何让自家的商品更吸引眼球,招来更多生意。现在 ...

  • 360抢货神器怎么安装 双十一360浏览器抢货神器使用教程

    天猫双十一活动即将开启,是不是有很多秒杀产品你已经瞄准啦,准备好抢货神器工具才是王道,360抢货神器怎么安装?本文小编就为大家带来双十一360浏览器抢货神器使用教程。 360抢货神器怎么安装 双十一3 ...

  • 2016支付宝11月2日支付口令大全 支付宝双十一11月2日支付红包口令

    双十一抢红包,支付宝的口令今天小编又给大家带来了,在规定的时间点,只要用户拿起手机输入口令就能抢红包了.下面就让小编给大家公布今天的口令吧. 支付宝双十一11月2日支付口令大全 11月2日红包口令大全 ...

  • 双十一红包退款规则,双十一分期付款能用红包吗?

    双十一就要到了,天猫淘宝的预热活动打的非常到位,铺天盖地都是双十一的消息,抢好红包,搬着小板凳坐等双十一,上一篇我们分享了天猫双十一抢红包攻略,这一期排行榜123给大家介绍一下双十一一些简单的规则,比 ...

  • 五大步骤细说Banner图设计之平面构成的奥秘

    写在前面: 我之前说过要写一系列专门针对电商的三大构成的文章的,而在上篇文章中我已经给大家梳理了一篇关于色彩的文章:六个步骤细说电商banner图设计之色彩的奥秘,那么今天呢,我就接着要给大家讲一篇关 ...

  • 如何看待淘宝双十一?

    原先的光棍节,现在变成了购物狂欢,双十一不只是淘宝的狂欢,也是各家电商平台的狂欢.这是个人为创造的商业购物节日. 操作方法 01 有一种喜悦叫做付款成功!!有一种悲催叫做网络拥堵!!有一种等待叫做整点 ...

  • “双十一”狂欢购物节怎么来的?双十一的由来

    现在,"双十一"购物节几乎是每一个中国人都知道的"节日","双十一"当天各大电商的交易额都会非常巨大,那么"双十一"是如 ...

  • “双11”BANNER设计教程(电商设计)

    今年疯狂的双十一又创造了一个奇迹.向在最前线奋战过的各种设计师道声"辛苦了!". 电商设计中关于BANNER的制作是必不可少的一部分.如何打造一个让千万买家动心的设计呢?点开此文章 ...