这个banner设计方法,不知当讲不?

小编:banner设计难度真的是有点大到无从下手吗?一起去学习下来自沪江UED@萌萌老师总结的他做banner时的参考方法,说不定你的灵感就这么有了呐~

众所周知,沪江网校一年有几次大促,作为集团门面的hujiang.com在2014年改版后正好赶上了1212大促,于是迎来了新版第一次投放大促banner的机会。

这次大促的banner投放,点击率感人

于是这个位置自然而然的变成了大促时必用的banner位,而且每次投放效果都异常的好,尤其是最近三次:16年9月开学季,16年12月,17年3月开学季的大促点击率比往常都要高出很多。

公司每次大促的背后离不开各部门的通力合作,其中包括我们大友谊帝团队。
作为此banner位的视觉设计狮之一,很荣幸能在这里分享一些这几次大促中领悟到的一些东西。

视觉设计师接到banner需求后的思路:

前面那些了解需求啊,沟通啊我们就不提了,我们主要从决定动手开始。
行动起来大致分为两类:

一类,拿到需求脑子里就已经有图了,拿起草稿纸开始画草图,构思,然后根据自己的草图去实现效果图。这类大神我们今天先不讨论(因为我不是大神,没法就此方法展开讨论,羞!)。
另一类,到花瓣等设计网站去找灵感,浏览大量的设计图,找一些大厂或大神设计的契合本次需求的风格,然后做一个差不多的,拿去交差。
大部分时间我是属于第二类,因此,以下这些风格,都被我借鉴过,在我们的页面上出现过。

可是我没有想过,这些风格我可以用,别人也可以用,我们甚至会看到许许多多厂家的banner都长得差不多。

我之前从没有想过,借鉴也是有道道的~

以下这三家也是借鉴的标兵啊,可是效果不太一样呢

双十一,淘宝的设计团队推出了借鉴欧普风格所产出的淘宝大促风格在业内掀起了一段风起云涌的讨论和效仿。

MUJI制造商“制造”的严选,大促永远都是那么的美,坐等大促看美图,也成了严选用户的习惯。

去年,融合了20世纪所有时尚元素的Gucci甚至引发了时尚圈的一股巨浪。

以上,我们不难看出,这三家在大促或新品发布上所采用的办法虽是借鉴,但都是:借鉴经典设计,并结合自身的产品特点,形成属于自己的风格和气质。

很多人说,说什么借鉴,就是抄袭,你们设计界不是盛行一句话:天下设计一大抄?

说这句话的人一定不是设计师,或者说根本不了解设计。

毕加索说过:庸人抄作品,天才借方法。

笑话!设计狮是怎么可能是庸人?

举个栗子,乔布斯时期Apple的产品设计所用的方法其实是迪特·拉姆斯提出的。

大家感受一下,想要满足受众对品质的追求,对美的追求,对易用的追求。这两位大师所用的方法是类似的,迪特·拉姆斯在前期的设计中已证了这个设计方向是正确的,这一验证对乔布斯后来的发展方向是有所启发的,于是我们用上了iMac,用上了iPhone等等,并且还真的是很喜欢,甚至有人说乔布斯时期的产品设计也已经成为了一种经典。

Dieter Rams 迪特·拉姆斯现代设计原则

由此可见,当我们在借鉴经典设计的时候,不是浮于表面的,是借鉴的其方法,用视觉传达某种信息的时候,好用的方法却往往都是类似的,是雷同的。

终于说到今天的重点,举栗说明如何借鉴经典:

三个点击率不错的banner中有两个是借鉴的孟菲斯风格,并且取得了非常不错的成绩

在领悟了借鉴的精髓之后,我拿到banner需求开始思考

  1. 我不能再做“差不多”先生了。
  2. 能否通过某经典设计来帮我提供一些灵感,去诠释这次活动的主题呢?

我想到了孟菲斯设计为什么呢?且看以下分析:

孟菲斯风格形成的背景:

社会大环境:上世纪初,在包豪斯的思想率领下,现代美学进入了一个新时代,理性的,规矩的设计理念已经影响了几十年,到80年代的时候,世界上的产品设计慢慢发展到了一种冰冷的,无感情的时代。

有些设计师认为产品的设计不应该是这样的,应该是让人用起来感觉轻松的,愉悦的,富有热情的。因此,他们开始试图打破这些规矩,balabala经过一系列改革,最后形成了孟菲斯风格。此风格最早是用于建筑设计,室内设计和家具设计。

孟菲斯风格的特点:

  1. 在色彩上常常故意打破配色规律,喜欢用一些明快,风趣,彩度高的明亮色调,特别是粉红、粉绿等艳俗的色彩。
  2. 强调手工艺方法之作,并积极从波普艺术、东方艺术、非洲拉美的传统艺术中寻求灵感。
  3. 在构图上往往打破横平竖直的线条,采用波形曲线,曲面和直线、平面的组合,来取得室内意外效果。
  4. 超越构件、界面的图案,色彩涂饰。

带来的社会反响:

立刻引起了许许多多年轻人的,得到了一大票簇拥者,有太多人想要恢复活泼,想要跳出性冷淡去拥抱热情,因此在社会上传播非常快,名声大噪。

再来看我们现在所处的环境:

一种,扁平化,简约风,配色最好不要多于3个颜色,形状最好圆是圆,方是方,横平竖直的构图等等,这些“规则”已经盛行在互联网行业很多年了呢。
我们的审美似乎又被卷回到了历史的漩涡中很久了。

我们的受众:有学习需求的那些人啊!

我朝学校的教育风格… 难道我们到了互联网上,还要带来差不多的感觉?
我们当然希望传达给他们一种轻松,活泼,愉悦的感觉,让大家怀着一种愉快的心情去学习知识,自然而然的接受知识。

我们的产品:教育

我们不像很多商家有漂亮的实体产品图,我们能做到的就是利用虚拟的视觉语言去传达这些情感,从图形,从色彩,从构图这些方面着手。
这似乎和当年孟菲斯风格的形成有一些相似之处,于是我大胆的借用了他们的一些视觉传达方法:形状,色彩。
但是我们和孟菲斯风格又有一点不一样,毕竟我们还是一个严肃的产业,我们不需要过多的怪诞和非主流。
在此之前,团队已经做了一些关于情感化设计的尝试,从配色,材质等特点上已经有一些属于沪江自己的东西(参阅之前公众号推出的节日氛围图)

于是,把团队已沉淀来的配色方式加上一部分孟菲斯设计的传达方式。
最后产出的banner具备以下特点:

  1. 运用几何图形做装饰元素,既是具象的,又是抽象的。
  2. 配色虽是明亮的,同时又是温和的,是多彩的,又是协调的。
  3. 会利用一些渐变来增加层次感,会加一些肌理来丰富细节。

整个风格给人的感受就是轻松愉悦的,符合我们之前的预期,投放后的效果也大大的超出了我们的预期,说明这次的方向是正确的。
除了配色进行了调整,字体和排版,也选择了比较严谨的方式方法。
字体,几乎没有做变形,保持了字体的易读性,毕竟氛围已经够轻松,那么字体和排版就不宜再松了,应该适当的严谨。毕竟我们的目的是希望用户能在一个轻松的氛围种聚焦到活动主题的。

由于唠叨太多了,我们千万别把重点中的重点弄丢了,以上讲的是做活动时从经典设计中汲取灵感的方法。
不同的活动,不同的目的,不同的受众我们可以找到不同的经典设计思路,难道我们的风格就要随着这些风格一直在变化吗?这不又成了差不多先生嘛?

NO!

最重要的是:产品本身要有自己的气质,运营设计要在自身气质的基础上去学习经典设计所用到的方法,才是真正属于自己的好东西。(说不定还会被别人借鉴哦~)

沪江UED(公众号)

作者:萌萌老师

(0)

相关推荐

  • 如何做出靠谱的Banner设计?这篇文章可以帮到你!~

    写在前面 自从把我的鸿篇巨著<这么设计能热卖>出版完成后,我其实就很少写电商方面的设计干货了. 一方面是因为我那1000多页的书里内容就超级详细了,基本是把走电商设计这条路要用到的各个知识 ...

  • 揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

    隐喻设计是一种常用却很少有人提及的概念,人们往往身在其中却不知究竟为何物. 简单说,隐喻设计它可以将现实生活中用户熟悉的事物以多种形式映射到界面中,从而使用户不熟悉的概念.陌生且复杂的操作等变得熟悉与 ...

  • 5个实操改稿案例,手把手教你做出高质量的Banner设计!~

    虽然我以前写过诸多电商设计和Banner设计方面的文章,也做过很多设计点评,但是因为懒和时间精力有限的缘故,我几乎很少亲自去改稿,毕竟我觉得自己的时间也蛮值钱的,所以我只做自己想做的事情. 但很多人会 ...

  • 潘帅:亲子类场景化产品的设计方法

    以<喜猫儿故事>的场景听单为例,分析亲子类场景化产品的设计方法. 现今市场上的场景化产品越来越多,不同的场景可以创造出不同的产品和影响力. 以<喜猫儿故事>的场景听单为例,分析 ...

  • 网站banner设计的8技巧分享

    网站banner设计的8技巧分享 步骤/方法 01 在工作我们经常会有banner设计需求,和大项目比较,需求方从设计成本方面考虑,不会给设计师太多的时间.那么我们如何才能在短时间内做一个出彩而效果又 ...

  • PPT十字绣效果的设计方法

    PPT十字绣效果的设计方法 下图中的两幅画就分别是初始的图片和设计完成的图片,可以简单的对比一下. 1.切换到"插入"选项卡,在"图像"组中单击"图片 ...

  • 水星Mini无线路由器AP模式的设计方法

      水星Mini无线路由器AP模式的设计方法 步骤一:设备连接 用电脑上的无线网卡搜索无线网络,找到水星MW150RM迷你路由器的SSID(无线网络名称),然后点击连接.注意:水星迷你路由器的SSID ...

  • AE字幕怎么添加边框? AE简洁字幕边框的设计方法

    AE中输入的字幕想要添加边框,该怎么添加呢?下面我们就来看看ae字幕边框的制作方法. 一.新建合成组 1.执行命令:“图像合成>新建合成组”,快速建立新的合成. 2.将合成预置:“HDV/HDT ...

  • PremiereCC2018怎么制作生锈文字特效? Pr锈体字的设计方法

    Premiere中想要给文字添加一种特殊效果,该怎么制作呢?下面我们就来看看详细的教程. 1.新建项目.运行Pr CC 2018软件,点击文件==新建==新建一个项目,如图 2.导入素材.使用Ctrl ...