如何巧用SLOGAN,让BANNER变得更有设计感!

那么来了解下Slogan对Banner有多大的影响?

如果说Banner比作一个人的脸,那么标语就相当于脸上的五官,以及脸的架构。一个人是否帅气主要还是看她的脸的骨架和五官是否精致,同理你应该知道标语对Banner视觉的影响有多大啦。

来看看有哪些因标语而废掉设计作品

下面整体的背景和产品质感都可以,但用户看着显得很low,是因为被标语设计排版给破坏了。(这里随便选择了一些作品,只代表个人观点哦~)

1.标语排版位置以及大小对比度过小,所以压不住画面,导致画面视觉冲击力不够。

2.英文和VI元素不搭配,文字无紧凑感,对比不够。

3.框太细,文字对比不够,没有品牌感。

4.文字和画面不够呼应,太小压不住画面,文字太呆板点缀突出设计有点让人琢磨不透层次感不够

5.样式过多

通过以上举例的部分案例,我们发现一个Banner设计的好坏,光靠质量高的图是达不到的,还要有一个好的Slogan设计。

那么我们如何使用Slogan让Banner变得更有设计感呢,这次从入门到基础到初级进行分析。

入门-在画面中比例位置

基础-结合图案/图形

初级-改变形状/字体样式

标语在画面中的构图常见为:左右对称、上下对称、对角对称、满屏、字形对称、黄金分割比位置等。

主要根据画面中为图片主视觉元素来定制标语位置在那里。最好不能破坏画面的平衡感、统一性、可读性等原则。

在使用的时候需要注意品牌的定位,运用环境,以及在画面中的比列位置等,尽量不要影响画面构图。

常见的一些设计方式分为:

具有突出/分割作用

方形最大的作用就是可以起到突出分割修饰等作用,可以得画面产生强烈的对比。方形运用的行业比较综合,少数使用于女性小孩行业中。

下图中设计师突出了22所以利用了方形进行突出,标语布局采用了对角布局的方式,让整个画面视觉产生了平衡感。

使标语更紧凑,增加层次感

下图中设计师为了让两端文案变得更整体,不被背景图片所干扰,所以采用了方框进行设计,标语位于画面居中位置。

让文案单独区分并且突出出来

作品也是采用了框型的元素使画面中的文案彼此不被干扰。标语在画面中位于左下角位置。巧妙的平衡了整个画面。

增加层次感

原本人物和图片是紧贴在一起的,设计师使用了线框的元素,巧妙的使得整个标语和画面变得具有层次感。

这里设计师也是使用相同的处理方式,注意在使用线条的时候一定要让线条穿插不一样的平面,才能给用户传达出前后层次的关系。

其实和方形一样,三角给用户的感受更加凌厉,主要在运动或者器械类行业偏多,主要给用户的目的也是起到突出吸引,区分平衡画面等作用。

运动类行业增加速度感/丰富画面

设计师使用了三角形的元素在画面中,与文字结合起来。给用户传达出运用的极速/凌厉的感觉。

下面作品的表现方式也是采用相同的设计方式。

同理圆形也是一样起到的作用,具有突出、分隔等作用,主要给用户传达出平滑柔性的感受,常用于化妆品,偏向女性化小孩等用户群体居多。

突出分隔作用

利用圆形让中间的标语在画面中突出出来,起到吸引用户的视觉,还能通过圆点让标语和背景和之间具有一定交互效果。

增加层次感/丰富画面

这是一款适用于家庭行业的产品,设计师一样采用柔性的元素椭圆形和文字搭配让标语变得具有前中后层次感,而元素上的色彩也丰富了画面。

不规则图形也具有突出,分隔等作用,常运用在个性化行业中,比如潮牌,个人设计师网站等。

准确的说右边图形是两个多边形组成的,恰好从画面中起到了突出作用。

当作标签使用

整个标语排版比较活跃,设计师巧妙的将图形运用在标签上面,使得整个标语变得更有设计感。

Slogan中往往提取一部分来自VI标志中的图形元素,会让整个设计起到画龙点睛的作用,这类设计常用在品牌网站中,用于传达企业的品牌知名度。

直接运用全部品牌图形

设计师直接将品牌VI图形元素运用在Slogan中,向用户传达品牌知名度。这类运用建议挑选比较具有设计感的图形运用,或者具体VI的距离稍微远一些,这样避免画面元素重复。

下面作品也是采用了相同的设计方式:

运用品牌轮廓比例

运用品牌中间的色彩形状

这里方法使用的比较多,也是比较容易的方式,右边设计作品Sloagn设计师就采用了品牌中的几何图和文字进行组合,有效的传达出了品牌概念。注意在选取元素的时候一定要选取突出的元素,便于用户识别。

使用绘画的方式会让整个Slogan在风格和材质统一性更强/更有趣味性。多数适合于各种行业。

制造环境

设计师将Slogan制作成绘画模式的,然后添加一些各种生活中的小元素进行结合让他们成为一体。给人趣味的感觉,做此类设计注意添加的元素不要抢过了你的主体。

下列设计也是运用相同的设计方法。

制造特殊图形

设计师使用骷髅图形来表达自己想要的概念,配合Slogan还是比较超前的,需要注意的是切勿让插画元素和Slogan之间的对比不大,比如颜色空间大小等。

增加立体感

这是一个设计师个人网站的主页,场景式的插画和Slogan结合使空间感增强。

在使用的时候需要注意品牌的定位,运用环境,以及在画面中的比例位置等,尽量不要影响画面构图。

相对于图形化,图片的结合更加具有感染力,更快把带你带入情境中,主要作用还是宣传品牌为主。多数会从品牌宣传的元素中提取元素进行结合,比如代言人、产品、视频、插画等。

使用模特特质作为修饰

下面设计一看模特就知道是做他是什么行业的,图片和Slogan结合使用,使画面更加具有亲和力,注意选择模特的时候一定要选择主体明确,具有品牌特色的模特。

在产品上增加文字能巧妙的向用户传达出产品的信息,同时节省大量信息展示空间,又能在视觉上增加层次感,主要运用于产品类网站。

展示产品型号为主

设计师在产品后面增加简单而大大罗马数字2,使得用户清晰的理解这是第二代产品,同时拉开了鞋子的层次感。

下面作品设计师也是采用同样的方式。使用Slogan和产品图结合达到了预期的效果。值得注意的是,我们在设计类似效果时一定要保证用户能看明白字的含义,字数不能太多,字体根据品牌或产品的形状选择。

使用文字遮罩的效果

设计师巧妙的用文字遮罩的效果和图片进行结合起来,避免画面的压抑,又能让用户了解它是什么。

模拟真实场景的使用

设计师为了让文字和场景完美的结合,利用纸张和字母大小的前后关系打造出具有空间感的画面。其实这里利用举一反三的思路,可以产出很多设计,比如书桌,书本,黑板等等…

图形和图案之间结合起来会擦出怎样的火花?会让你的标注变得更有art的感觉。

虚实结合,传达出不一样的感受

本来实物的花朵,设计师使用了虚拟的手法让花变得具有层次感,最后画龙点睛将文字放在图的后面,让画面空间感十足。同样可以举一反三,比如你想表达汽车的车灯,网球的球拍等都可以运用相同的手法。

无论是用图形或者图片和Slogan结合使用,都要和行业相呼应。

比如三角,方形,多边形等非圆形更多运用在运动,机械,电器,男性化等行业,传达出速度感,凌厉的调性。

而椭圆,圆形等曲线类形状,更多运用在品牌定位为女性,小孩群体的用户比如化妆品,护肤类,幼儿园。这类让用户更容易接近接受。

而照片类的使用更容易感染用户,给用户传达出真实感。多数使用在画面背景干净上面,加强对比度,就能展示出照片的纹理和真实感。

常见设计方式为:

1.三角形

常见标语架构偏向有正三角,倒三角,右边三角形这几种形态。这里就介绍常见到的正三角形的设计形态。

2.方形

常见表现方式有长方形正方形这两种形态,让标语排版有严谨的感觉。

3.圆形

常见方式有椭圆、圆形这两种形态的排版方式,下面的设计作品就是使用了圆框元素和Slogan结合使用,注意做此类设计方式的时候,得注意文字的数量,因为纯商业的比较少,毕竟比较难保证它的可读性。

4.六边形

五边形六边形比较多运用在于字体排版,往往会使Slogan变得具有层次感。设计的时候切勿不能乱用,一定要符合设计的本质才能使用。

使用倾斜的设计方式(弧形,左右倾斜等改变Slogan整体形状的角度)告别死板的Slogan设计方式。

1.上弧形

球形等运用会使得Slogan外形框架更具有空间感。这里主要通过变形工具使得整个Slogan形状变得曲面化。下面的设计则采用了圆形偏上的设计手法。

2.上下弧形

下面的作品设计也是采用上下弧度的设计方式,让Slogan变得更具有空间感。

3.左右倾斜/旋转

下面作品让Slogan右倾斜很有效的解决了Slogan的呆板性。右倾使得画面更有纬度。

这里Slogan也是采用了相似设计手法,不过是左倾斜

4.竖列

Slogan使用竖列的排版也能让主视觉更加具有别具一格的感受。

此类设计更多运用在偏向情怀文化类的产业中运用。

下面Slogan设计使用了竖列排版的设计方式,使得整个画面具有设计感。注意往往竖列排版给用户的阅读性不是很高,所以我们需要多控制文字多数量。以及主次关系。

下面也是采用了相同的设计方式。文字数量上控制的不多。

5.横竖结合

横竖排版常见于运用在中国风或单独的设计中。丰富标语层次感。下面Slogan设计使用了横竖结合的设计方式。设计的时候需要注意:前后关系层次,主次关系等比例。

五.通过变化Slogan中间文字的字体样式,能够产生强烈的对比增强设计感

1.单独字体尺寸

通过改变Slogan字体的大小,来制造出标语中段落的空间感。右边设计中就是放大数字01,让它和其他的文字产生对比。

2.丰富背景

下面的设计也是一样,将Slogan中的文案单独突出出来,作为背景使用。

他这边更多表现的是一种修饰为主,但是同样也让文案保持来一定的对比。

3.通过改变特殊样式

通过改变Slogan中的标题的材质,使得标题和副标题产生对比,制造出来空间感。

4.通过改变色彩/位置

右边设计师通过改变Slogan中字体的色彩和在画面中的排版位置,有效拉出来层次感。

5.改变字体

设计师将Slogan的主标题采用特殊的毛笔字,让标题和段落文字产生了对比,使整个Slogan变得具有层次感。注意这里我们选择一个毛笔字体,然后下载一些笔刷拼接。即可产生设计效果。

当我们碰到画面Slogan文字信息少的时候,我同样可以采取一些特殊的字体搭配。

在使用标语进行变形的时候,总结出来了多边形、圆方、三角、横竖、排列、倾斜等。我们介绍的方法不能死用,要根据品牌调性以及画面中的比例去用。

THE END
1.网站banner设计网站banner设计图片网站banner设计模板觅知网为您找到176个原创网站banner设计图片,包括网站banner设计图片,网站banner设计素材,网站banner设计海报,网站banner设计背景,网站banner设计模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于网站banner设计素材、图片、海报、背景、插画、配https://www.51miz.com/so-sucai/2786463.html
2.UI页面Banner设计大揭秘:4大分类+6种类型,让你的设计更出彩!UI设计中的banner大致分为四类:顶部banner、白底banner、胶囊banner、封面banner。现在一些大厂取消了顶部banner位或者压缩顶部banner,比如淘宝将横版banner改为竖版banner,融入到产品列表里,属于少数,暂不列举。 顶部banner 位于APP的首页顶部,多用来推广宣传,占的区域比较大,设计需要符合产品的调性。 https://www.uweb.net.cn/zhishiku/jishuyanjiu/18411.html
3.banner制作banner设计本专题介绍了banner制作的相关内容,包括在线设计工具、设计模板推荐等。通过使用这些工具和模板,您可以轻松制作出个性化的banner。https://m.gaoding.com/features/banner-maker
4.深圳网站设计首页BANNER轮播图设计的六个重点深圳网站设计首页BANNER轮播图设计的六个重点 网站设计中轮播图的设计非常重要,打开网站第一眼看到的就是网站的轮播图,可以这么说吧,网站能否成功,轮播图至关重要。那么,轮播图该如何设计呢,网站轮播图设计的重点是什么呢,华专网络给大家分享下! 一:网站首页图片抓人眼球http://huazhuan.com.cn/news/1520.html
5.科技网页首页bannerPSD电商设计素材海报模板免费下载科技网页首页banner,PSD背景图片,设计素材及海报模板源文件下载免费素材网站-享设计-享设计,上传作品、天天分红~https://www.design006.com/detail-73682395963
6.网站首页banner图片设计时要注意什么?网站首页banner图片设计时要注意什么? 网站的banner是网站顶部的最大图片,有部分网页banner设计是单张的广告图,有些是幻灯片进行轮播。一般来看,大多数网站为了在这个最显眼的地方可以显示更多的信息,都会采用幻灯片的轮播方式。Banner是网站更明显的地方,也是用户在进入网站之后靠前眼看到的。所以,好的网页banner设计,http://www.luntui.cn/zixun/139277.html
7.WebUI设计理论学习笔记设计必须要在意的地方:创意,版式,色彩,细节 banner首焦图设计 bannner首页焦点图。无论你是web设计师还是ui设计师,只要混迹在互联网公司的设计师,都会接触到设计banner这一工作,并且有时会是加急的。 所以如何高效的完成banner工作是我们需要掌握的一项工作方法论 https://www.imooc.com/article/details/id/20171
8.出吸引人的网页布局与用户体验指南响应式网页设计命令提示符在互联网时代,网页设计不仅仅是美观的追求,更是用户体验的关键。一个成功的网站能够吸引用户的眼球,提供流畅的浏览体验,并促使用户采取行动。无论是电商平台、企业官网还是个人博客,布局和用户体验的设计都至关重要。良好的网页布局能够引导用户的视线,帮助他们快速找到所需的信息,而优质的用户体验则能提升用户的满意度https://www.163.com/dy/article/JJHCC0RA05569BV4.html
9.网站建设策划方案范文整体形象设计 在程序员进行详细设计的同时,网页设计师开始设计网站的整体形象和首页。 整体形象设计包括标准字,Logo,标准色彩,广告语等。首页设计包括版面,色彩,图像,动态效果,图标等风格设计,也包括banner,菜单,标题,版权等模块设计。首页一般设计1-3个不同风格,完成后,供客户选择。 https://www.ruiwen.com/gongwen/fangan/947498.html
10.banner设计是什么意思打开手机APP或者是网页,我们会发现它们的首页被划分为了几个板块,其中处于顶部位置的,往往是几张轮播的图片,这些图片就是我们所说的banner图。Banner设计,是视觉设计师重点培养的能力之一,特别是对于UI设计师来说。 在UI设计中,Banner设计通常伴随着轮播的形式展示,所以也经常称之为轮播图。对于web产品来说,banner是https://www.hxsd.com/content/17176/
11.网站首页banner图片首页网页界面网站首页banner图片,网站首页banner免费下载 banner 安卓 苹果 软件开发 手机 网站 网站 首页 banner 海报 软件开发 体验设计 安卓 苹果 App开发 手机 原创设计 原创网页设计 网页UI,图行天下素材网图片编号:20150326014745430965https://www.photophoto.cn/pic/00641611.html
12.[网站页面banner设计]图片免费下载网站页面banner设计素材千图网为您找到984张网站页面banner设计相关素材,千图网还提供网站页面banner设计图片,网站页面banner设计素材, 网站页面banner设计模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://m.58pic.com/tupian/wangzhanyemianbannersheji.html
13.网页banner设计在线设计制作网页bannerMAKA是简单好用的免费在线网页banner设计制作平台,提供海量网页banner设计模板素材,5分钟完成在线设计制作bannner。https://www.maka.im/zhinan/wangyebanner
14.网页banner尺寸是多少钱,一般私活做一个网页banner多少价位3,淘宝电商banner设计多少钱 具体看要求和工作量,是你提供素材还是需要设计公司发挥创意等等,价位400左右都算合理 100-500元一张,不过也可能有不一样的,如果多的话可能优惠点; 4,各个网站发布广告收费标准 广告形式 报价(元/月) 位置 尺寸(px) 格式 说明产品专栏 10000(一年) 首页 包括产品图片、性能、主要技术http://m.netbei.com/article/aspx/29827.html
15.网页banner设计实训报告总结合集网页设计实训报告总结一: 本学期的网业设计课程, 开展了动态思维训练教学活动,对于我们学生来说,可以激 发学习兴趣,调动学习的自觉性,自己动脑、动手,动口, 运用网络资源,结合教材及老师的指导,通过自身的实践, 创作出积聚个人风格、个性的个人网页。总体来说,整个学 期的学习过程,我学会了很多知识,虽然过程比较艰https://wenku.baidu.com/aggs/224a9a08763231126edb1181.html
16.网站banner设计的尺寸标准三、从banner自身的设计大小看 1、页面长度原则上不超过3屏,宽度不超过1屏。 2、每个标准页面为A4幅面大小,即8.5*11英寸。 3、全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px,另外120*90,120*60也是小图标的标准尺寸; 4、每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K。https://www.vikecn.com/baike/287.html
17.网页banner设计,高清网页banner设计图片/素材/模板,免费网页图品汇是领先中国万千网页banner设计素材图库网中免费设计素材模板网,提供免费网页banner设计素材,模板,高清原创正版图片下载,为您优选原创网页banner设计模板下载,网页banner设计素材。精品原创,作品严格审核,高速免费下载。https://m.88tph.com/tupian/1068529/
18.网页横幅广告设计技巧,让你的banner吸睛又高效!在网页端和软件的轮播图中经常会看到各式各样的网页横幅广告设计,当网页广告设计得以正确的传递信息时,就成功促使对内容感兴趣的用户,产生自然的交互行为。那么如何才能打造出吸睛又高效的网页横幅banner设计呢?网页横幅广告设计有哪些技巧呢?下文,我们帮你整理了重点知识,供你参考。 https://pixso.cn/designskills/hengfusheji/
19.网页banner设计要点网页设计师都明白,网页对于用户的第一印象是非常重要的,而网页给用户的第一印象很大程度上取决于网页的视觉设计。现在的网页虽然多种多样,但是出于视觉化设计的目的,大多会使用大图背景,或者超大尺寸的Banner。当用户一打开网页的时候,映入用户眼帘的Banner ,是影响https://www.bjszhd.net/news/233.html
20.网页首页设计图片网页首页设计素材红动中国素材网提供447个网页首页设计图片、网页首页设计素材、网页首页设计背景、网页首页设计模板、网页首页设计海报等PS素材下载,包含PSD、AI、PNG、JPG、CDR等格式源文件素材,更多精品网页首页设计设计素材下载,就来红动中国,最后更新于2024-12-12 18:28:15。https://so.redocn.com/wangye/cdf8d2b3cad7d2b3c9e8bcc6.htm
21.网页横幅(banner)设计急速办理,1个工作日拿证。 占位图标品牌设计 手机h5专题/微海报设计 海报/画册/名片设计 海报/画册/名片设计 网页横幅(banner)设计 网站首页设计服务 LOGO设计 <> 网页横幅(banner)设计 价格: 90元 服务: 立即购买 详细信息 阿里云视频点播接入 SEO关键词排名https://www.qulvkj.com/show/108-29.html
22.UI设计网UI设计作品欣赏UI设计网:CND设计网旗下品牌,为UI设计师提供原创作品展示,让UI设计作品被商业用户和大众所欣赏,提升UI设计价值,让世界看见您的才华---为设计师提供有效传播和服务http://web.cndesign.com/
23.进行网页banner设计的时需要注意什么网站的banner是网站顶部的最大图片,有部分网页banner设计是单张的广告图,有些是幻灯片进行轮播。一般来看,大多数网站为了在这个最显眼的地方可以显示更多的信息,都会采用幻灯片的轮播方式。Banner是网站更明显的地方,也是用户在进入网站之后第一眼看到的。所以,好的网页banner设计,就好比商店门口的装饰一样相当重要。那么https://www.kufeisoft.com/kufeiseo/43.html
24.网页Banner尺寸知多少?一文全搞定!网页 Banner 尺寸通常包括 468x60px、300x250px、336x280px、160x600px、120x600px、180x150px、240x400px和250x250px,其中宽度越宽的尺寸通常具有更好的广告效果。那么今天我们就来介绍一下常见的网页 Banner 尺寸有哪些、如何选择合适的网页 Banner 尺寸以及网页 Banner 设计工具,一起来看看吧!https://js.design/special/article/webpage-banner-size.html
25.网页banner中文字体设计方法频道宣传以上就是网页banner中文字体设计方法,但是在网页banner中文字体设计时,考虑到有些时候背景颜色比较复杂,也可能背景有比较多产品等元素,这时我们需要让文字放在一个相对独立的区域或色块中,如果没有相对独立的区域,我们就要自己设计创造出这个独立区域和色块,这样更便于文字阅读,也能让文字的视觉焦点加强。如果你对网页bannehttps://www.epwk.com/meijie/150418.html
26.网页设计中Banner有哪些常见设计技巧图片在网页设计中扮演重要的角色,是网站中重要的视觉传达工具。特别是大尺寸Banner,用户打开网页的第一眼就是Banner,Banner不仅是衡量整个网页视觉效果的关键因素,也会影响用户对网站的第一印象。 1.采用情感化设计 正所谓,动之以情,晓之以理。将情感融入设计,将情感融入图片,能够触动用户,引起用户共鸣的设计才具有https://jzm.fkw.com/blog/10426
27.banner设计模板banner图片素材大全创客贴为您提供了海量精美banner设计模板和banner图片素材,涵盖各个行业,风格多种多样,且每一张图片都可编辑,改图换字即可生成banner设计,方便至极。https://www.chuangkit.com/jhydt/bannermap.html
28.《网页设计与制作》2CSS篇22banner边框的实现CSS篇项目二 “中国诗词”网站首页banner制作任务二 banner边框的实现边框属性1CONTENTS目录边框属性网页中的边框属性 也是一个复合属性,一个边框样式至少需要定义颜色、线型和粗细三个基本属性才能显示出边框效果,对应了三个子属性:border-colo rborder-color 设置边框颜色,border-color值可以是任意能表示颜色的值。如果http://www.360doc.com/document/22/1101/19/80521207_1054179483.shtml
29.精美酷站欣赏,精美banner欣赏,精美UI欣赏我爱模板网网页模板 369 ART TO YOUR LIFE是一款来自国外的,艺术气息浓厚的水粉画风格的艺术网站,无论是logo、navigation、banner还是下面的大图,都是弄弄的水粉画风格,淡雅,清新,banner的底部波浪形效果。 韩束化妆品天猫旗舰店首页设计欣赏 网页模板 419 韩束KANS是上海著名的化妆品品牌,本作是高手设计的韩束KANS天猫旗http://www.5imoban.net/kuzhan/
30.BANNERPSD素材国外设计欣赏网站销售BANNER网页横幅宣设计合集PSD模板 2391 32 夏季时尚销售网页横幅BANNER设计夏季服饰折扣PSD模板 1344 4 创意橙黄与黑色简洁几何长条网页BANNER横幅PSD模板-27 280 2 回学校网页横幅BANNER照片设计招生PSD模板 1815 5 简洁大气几何扁长条网页BANNER横幅PSD模板-07 369 2 简洁大气几何扁长条网页BANNER横幅PSD模板https://www.doooor.com/forum-97-typeid622.html