恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Banner设计宝典01--玩转9种不设计风格
0.0°
2018-01-29 原创文章 经验/观点 举报 4074 104 56 3

分享我的banner设计经验与总结

分享开始前,我想跟大家说点什么......


爱上设计,对我来说真的是个意外。


因为误打误撞的学了设计,所以毕业的时候特别不想做设计(也许只有做设计的你才能懂我的这个臭毛病吧)所以临毕业那会,可劲的在网上查各种招聘信息,销售、运营、教育……看到最后,还是乖乖的选择了设计行业。


刚实习那会儿,内心是无比煎熬的,被设计的前辈各种怼,被刁钻的甲方各种怼,被领导各种怼,被扁扁的钱包各种怼......工作的不顺心让我越来越羡慕那些考上研究生的,那些考上公务员的,那些进大企业的,甚至连以前最不屑的回家当老师的,我都开始羡慕起来。直到有一天我冲男朋友说,要不我也转行干销售得了,男朋友再也看不下去,甩给我一句话,“你以为销售就那么容易啊,你知道我为了签成一个单子等一个客户好几天,等的头皮都麻了吗(冬天...)?你能受得了那种苦吗?哪个行业不都得先付出才能有回报吗?”


我们总是仰望和羡慕着别人的生活,却不知道自己也正在被仰望和羡慕着,每个人的生活除了被羡慕的那部分外,无可奈何心酸辛苦的那部分只有自己知道。我下定决心好好努力做设计,给自己制定学习计划,但是到后来我发现一个人真的很难坚持下来,周一给自己制定每天一练的计划,周三就因为种种原因和借口执行不下去了...


为了克服自己的惰性,我找了一样做设计的好友一起学习,制定学习计划,互相督促,互相打气,在这两年里,我们朝着一个共同的目标一往无前的向前走,谁都没有再打退堂鼓,因为大家心里都明白,真想做出点成绩,一旦开始了,就不能停。


终于通过努力,自己的设计能力一点点提高,被怼的频率降低了,我发现自己已经慢慢爱上每天坐在电脑前绘制各种各样的效果图,有时候甚至觉得打开ps,就好像打开了自己的梦想(夸张了哈,捂脸)~~~


说这么多,就是想把我是如何度过迷茫期的经历分享给大家,还有就是从今天起,会跟大家分享我们在工作和学习中总结的设计方面的心得,一是想把我们学到的东西分享给坚持在设计路上的你们,同时也通过这种公注于众的形式督促我们自己不要偷懒~~~



终于说到正题了,(放心哈,以后我不会这么啰嗦的)今天要跟大家分享的是banner的设计思路。


在设计banner前,我们需要明确banner的定义以及其应用场景。

 

banner定义:可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题。Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。

 

从banner定义中我们可以看出其最主要的应用场景是网页以及手机端APP的广告展示位。设计者通过一定的设计手法使banner传达的信息更为明确,引人注目,引导用户点击,提高广告的点击率甚至是购买商品的转化率。所以说,好的banner在产品、活动的宣传展示中具有非常重要的作用。

 

在网络没发展起来之前,我们常见的banner主要是指报纸杂志中的大标题以及活动旗帜、横幅等。在这些存在形式中,也有着设计的元素,怎么使标题更醒目,怎么使横幅更震撼人心,衬托情绪,是设计者需要考虑的问题。如下图

Image title


从这些早期的banner存在形式中我们便可以找出banner设计中包含的几个元素。分别是标题,辅助文字,背景,修饰元素。标题往往是醒目、易辨识的大字,背景与文字之间对比强烈,直接表达主题。

 

发展到网络时代,banner设计迎来了高速发展的时期。淘宝的人工智能鲁班已经能达到每秒出4000张banner图的速度。不仅令人唏嘘。下面我们将根据几个实例分析banner设计需要掌握的关键点。


按我的理解banner的设计过程可以分为五步:

一、了解需求

二、根据需求确定设计风格

三、根据素材和文案确定版式

四、构成banner的元素的设计(文案/背景/点缀/素材)

五、调整配色

整个设计分享共四期,我们今天的分享内容是第一期也就是前两步涉及到的内容—了解需求风格及各风格设计方向与特点。分析风格找到合适的设计方向是至关重要的,往往决定了整个设计的走向。


一、了解需求

做任何设计的前提就是了解设计需求,只有弄明白需求方到底想要什么,我们才能少改几次稿,我刚参加工作的时候就没少吃这方面的亏,那时候刚进公司脸皮薄,别人让干啥就立马撸起袖子打开ps开始干,不明白的地方也不敢问太多,怕打扰别人工作(事实证明,这种想法是多么的错误错误错误......)

需要了解的需求大体可以总结成以下几个方面:


1、确定文案信息、素材、尺寸大小、投放的平台

一般接到设计需求的时候,文案和素材都是需求方确定好了的,但是有的需求方会说,你可以根据你的设计需要,稍微改动文案信息,本人亲身经历,这句话真的是一个火坑!坑!文案的不确定会严重的影响设计进程,你改的好,改的他们满意还好,如果不满意,那就面临着重做;除此之外,有时候我们可以从文案和素材里获取设计灵感,确定设计的风格。


2、确定banner是为了实现什么目的而设计

比如需求方给到的文案信息是【金秋助学】,我们需要了解金秋助学的对象是谁,是大学生还是小学生,这会影响风格的确定和设计元素的选择;还要了解需求方想要这个banner起到什么作用,是想让更多人参与到这个活动中来,还是想通过这个banner让更多人了解某某企业热心于慈善事业提升企业的知名度和好感,只有确定这些才能确定你的设计风格。


3、询问需求方的建议

需求方在把这个需求给到我们之前,可能心里就已经有了自己的想法,如果我们在设计之前可以了解到,会很大的降低改稿次数,而且我们主动询问他们的意见,会让他们感觉到自己的想法受到了尊重,以后交流起来也会更愉快。但是有时候他们的想法用语音可能描述不出来,这个时候我们可以用【情绪板】的方法(这个方法我们在以后的分享里会跟大家提到),快速的获取视觉信息。


4、确定设计时间

如果时间很紧张,就尽量选择不易出错的板式和风格,如果时间比较充裕,可以细细打磨设计作品,多尝试一些以前没尝试过的表现方法

是不是很长长长长长长,后面还有更长长长长的等你


二、根据需求确定设计风格

banner的设计风格可以拿人作为比对很好理解。有人外向,有人内敛。而这两种人的穿衣风格和举止言行在生活中也是不尽相同。跟人难过会用哭表现,高兴会用笑表现一样,不同的设计风格,也对应不同的表现方法,下面我们主要分析不同的设计风格对应的表现方法及给大家安利的一些可参考使用的素材,觉得有用的同学别忘了做下笔记哦~


1、关键词:文艺、气质、素雅、安静

Image title

总结:

1)最明显的特点就是留白留白留白,大量的留白

2)字体多采用宋体这样的衬线体,除一级标题字号略大些,其他的文案都非常小,给人精致的感觉

3)色彩以灰白色系为主,其他的色彩饱和度和纯度低,明度高

4)这类banner多运用在茶、棉麻制品、以简洁为特色的家居用品上

5)点缀物多用细线条(点缀物我们会用一个专题专门讲解,会有福利哦,敬请期待...)


2、关键词:高冷、时尚

Image title

Image title

Image title

Image title

总结:

1)高冷的banner就和高冷的你一样,最大的特点就是话少,一般就几个字

2)用色大多采用黑白灰

3)素材图一般都很大,突出细节,大牌的东西对自己的品质还是很有信心滴,所以他们会放大放大再放大他们的细节,唯恐你们看不到

4)很少运用点缀物,直接放张产品细节放大图,放几个字,咋滴,就是这么自信!


3、关键词:传统、中国风、意境

Image title

Image title

总结:

1)字体采用书法字体,文案多用竖形排版、从右向左的顺序,因为古人是这样写字哒

2)可以选用的素材有印章,中国山水画,墨迹,扇面,剪纸,园林窗格,古纹样,祥云,京剧,卷轴等等


4、关键词:青春、活力、年轻

Image title

Image title

总结:

1)很突出的一点就是模特都很年轻很有活力

2)色彩的饱和度和纯度比较高

3)排版你可以随便玩


5、关键词:可爱、甜美

Image title

总结:

1)可爱风格的banner最突出的特点就是他的字体,多采用少年字体、手写字体、卡通字体

2)点缀物多使用卡通小元素,以手绘和矢量图为主,比如星星,云朵,短线条等

3)色彩上多使用暖色调,营造软萌的感觉


6、关键词:节日、促销、热闹

Image title

总结:

1)色彩丰富,红、黄、紫偏多,画面饱满,很少留白

2)主标题很大大大,多用刚硬,棱角,夸张有视觉冲击力的字体

3)可以用到的点缀物有:光效、鞭炮、舞台、灯光、五彩的渐变、冲击性的线条和多边形等


7、关键词:未来、科技

Image title

总结:

1)科技类的banner概括来讲就两个要点,科技感的文字+科技感的背景图(以后会分享科技感字体的类型和制作方法),高级一点的还包括科技科技感的小点缀

2)用色以蓝,黑色,紫等冷色调为主,画面给人硬朗,空间感,速度和力量的感觉

3)可以用到的点缀物有:光效、金属效果、线条、光点,宇宙等


8、关键词:严肃、规矩、党

Image title

总结:

1)因为我们伟大的毛主席喜欢红色,所以党喜欢红色,所以政府类的网站也好,banner也好,大多都会采用红色,点缀色多为蓝色黄色,字体多选用端庄古典的衬线体或中国风味浓厚的毛笔字体。

2)可以用的背景和点缀物有:红旗、城市背景、党徽、英雄雕塑、故宫、石狮子等


9、关键词:手绘风

Image title

1)把手绘风格单拿出来是因为他真的很好用,而且很常用到

2)手绘风格可以用在文案上;产品本身也可以用手绘的形式,如上图左一,简单的几笔就让整个画面一眼就能看懂,而且充满乐趣;手绘风格用的最多的是点缀物,通过不同手绘风格的点缀物营造不一样的氛围。


不好意思各位,写这么长长长长长,下次一定管住...

本期内容作为前期第一步相对好理解,之后更为细致详细的banner版式及各相关元素的设计将之后陆续更新。




更新:2018-01-29

收藏

104人已收藏

任为泽

公zhong号:百感交互集

  • 19

    作品

  • 354

    粉丝

  • 15

    关注

  • 交互设计作品集
  • 状态可见设计原则(上)--“异常状态”篇
  • 游戏化设计概念总结及应用分析
  • 登录注册交互细节全解析

    猜你喜欢

      2018-01-29 原创文章 经验/观点 举报 4074 104 56 3

      Banner设计宝典01--玩转9种不设计风格

      0.0°

      你确定要举报Banner设计宝典01--玩转9种不设计风格

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年01月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      56
      104
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录