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

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

一、了解业务背景及节奏

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

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

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

了解整体设计节奏:

二、制定风格及创意

为何要制定风格及创意?

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

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

会场设计:

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

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

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

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

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

创意参考:

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

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

创意参考:

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

三、识别度及差异性

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

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

案例:

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

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

解析魔性关键词:

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

案例:

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

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

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

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

四、规范

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

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

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

五、总结

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

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

原文来自:优设

作者:MIX无线设计

线上banner什么意思_那些上亿人都在看的Banner都是怎么设计出来的?相关推荐

  1. mysql 上云迁移方案_数据库上云迁移方案

    自建业务数据库正在面临的挑战 1. 有活动上线,压力突增,数据库却来不及扩容了: 2. 采用读写分离,刚更新的数据,却查询不到了: 3. 数据的主从复制经常中断: 4. 多台应用服务器用同一台数据库, ...

  2. 利用mysql实现上传和下载_文件上传表单 上传文件的细节 文件上传下载和数据库结合...

    1 文件上传表单 1)上传文件的本质是文本复制的过程 2)技术层面,在Java中一定会用到IO操作,主要以二进制方式读写 3)传统方式下,对于上传文件字段不同的浏览器有着不同的解析方式,例如: IE6 ...

  3. nginx 上传文件漏洞_文件上传及解析漏洞

    注:本文仅供学习参考 文件上传定义: 文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行.这里上传的文件可以是木马,病毒,恶意脚本或者WebShell等. 这种攻击方式是最为直接和有效的, ...

  4. jq+ajax前端上传多张图片_史上最轻量的前端框架-VanillaJS

    vanillaJS是史上最轻量跨平台前端框架 ,我们能够使用它构建强大的JS应用.从过去到以后他都是最轻量的框架 介绍 vanillaJS目前在国外备受推崇,Bootstrap5舍弃了Jquery,选 ...

  5. 上云 企业 过程_企业上云有什么好处?该怎么上云?附操作步骤

    "工业互联网"作为新基建的细分领域之一,不仅被市场广泛关注,更在高层中被着重点名.先有国务院常务会议指出,发展数字经济新业态,依托工业互联网促进传统产业加快上线上云.后有工业和信息 ...

  6. 上云 企业 过程_企业上云的步骤

    说起企业上云,可能大家会有些许的陌生,但是,近些年,大家对云计算大数据这样的字眼,应该不陌生了吧,云计算是一种按需分配的资源供给方式,它会根据企业的需求来进行供给,说白了就是能够满足企业拿来就能用,想 ...

  7. nginx 上传文件漏洞_文件上传漏洞,解析漏洞总结

    文件上传漏洞.解析漏洞总结 1.文件上传漏洞是什么 文件上传漏洞是指用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力.常见场景是web服务器允许用户上传图片或者普通文本文件 ...

  8. 知乎上获赞率最高的66个神回复,看完整个人都神清气爽

    很多时候,一句犀利尖锐或充满哲理的话,往往比长篇大论更能打动人.点醒人.当你遇到人生难题的时候,不妨来看看这66个知乎上获赞率最高的神回复吧. 01 Q:交朋友的标准是什么?      A:出世的智者 ...

  9. 用asp.net实现微博系统_微信几亿人在线的点赞、取消点赞系统,用Redis如何实现?...

    戳蓝字"CSDN云计算"关注我们哦!作者 | solocoder责编 | 阿秃点赞功能大家都不会陌生,像微信这样的社交产品中都有,但别看功能小,想要做好需要考虑的东西还挺多的,如海 ...

最新文章

  1. 互联网架构为什么要做服务化
  2. linux 修改系统时间和时区
  3. ftp 服务器 显示未登录,ftp 服务器 显示未登录
  4. laravel redis mysql_Laravel 5.1 Redis 缓存配合 MySQL 数据库实现「用户最后活跃时间」功能...
  5. 2019阿里应届内推编程题
  6. Commit Monitor–svn监控工具
  7. 设计模式(15)——抽象工厂模式(Abstract Factory)
  8. 动物老了没生存能力时,它的子女会养育照顾它吗?
  9. win7共享wifi之bat文件
  10. Kaggle 入门 Crime
  11. 三维场景注记的配置相关(学习记录)
  12. 华硕AC68U无线路由器工作原理
  13. Metropolis Method Condition Derivation
  14. 1218: 青蛙(三)
  15. 6. Lots of Parabolas
  16. 如何理性的调整「rwnd」和「cwnd」的大小
  17. 你的记忆里有黄金矿工吗?
  18. lab值意义_色差仪lab值含义是什么?
  19. 蒲丰投针与蒙特卡洛模拟
  20. unity多个场景切换保存数据_Unity 场景间切换传递保存数据的方法

热门文章

  1. 微信小程序封装showModal/showToast
  2. 这样学还不会?小白入门编程第1讲 计算机基础知识 JAVA基础知识 必看
  3. 取消蓝牙耳机入耳检测的终极解决方法
  4. Java使用Ajax图片上传与修改
  5. 啤酒瓶洗瓶机设计(论文 CAD图纸 开题报告 任务书 答辩PPT)
  6. Java 集合转数组,数组转集合
  7. pyspark学习之——逻辑回归、模型选择与调参
  8. navicat无死角清除卸载
  9. 东南亚LAZADA现在好做吗?
  10. kettle基本介绍