• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何巧用Slogan,让Banner变得更有设计感!

如何巧用Slogan,让Banner变得更有设计感!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Banner,Slogan,经验分享,网页设计等相关知识,希望在学习及工作中可以帮助到您

Slogan在Banner中占据着举足轻重的地位,Slogan设计得好,可以成为广告图的点睛之笔,画面品质感明显提升。设计得不好,也能毁掉整个Banner。本文主要分析如何巧用Slogan(品牌口号,广告语),实现网页Banner的创意表现。

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

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

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

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

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

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

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

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

5. 样式过多

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

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

入门 - 在画面中比例位置

基础 - 结合图案/图形

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

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

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

一. 通过结合/图形元素让Slogan变得具有设计感

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

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

1. 方形

具有突出/分割作用

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

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

2. 方框

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

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

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

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

增加层次感

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

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

3. 三角形

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

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

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

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

4. 圆形

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

突出分隔作用

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

增加层次感/丰富画面

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

5. 不规则几何图形

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

突出分隔作用

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

当作标签使用

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

6. VI 标志

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

直接运用全部品牌图形

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

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

运用品牌轮廓比例

Slogan中的图形化形状来源于品牌VI的外形让画面变得具有透气感,同时也传达出来了品牌感。注意尽量挑选VI轮廓有规律的图形来尝试。太复杂的话会让用户不太理解,以及画面的不美观。

运用品牌中间的色彩形状

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

 

7. 绘画元素

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

制造环境

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

您可能想查找下面的文章:

  • 如何做好 Banner设计?我总结了这4类基础知识
  • 实战案例!阿里巴巴如何用人工智能做Banner 设计?
  • 如何巧用线条,让你的Banner 更有设计感?
  • Banner设计宝典之可能是最全面的流程分析总结
  • Banner设计宝典系列!玩转9种最常见的设计风格
  • 5个实操改稿案例,教你做出高质量的Banner设计!
  • 2017年天猫双11海报全集,为52家品牌创意疯狂打Call!
  • 没经验没思路?最常用的电商Banner 设计方法都在这
  • 如何巧用Slogan,让Banner变得更有设计感!
  • 高手课堂!3招搞定数字元素在Banner及专题页设计中的运用

相关文章

  • 2018-08-23想成为UX 设计师,该学习哪些很重要的技巧?
  • 2018-08-23如何用另一个角度做设计?来看Airbnb 这个创新方法!
  • 2018-08-23重新认识滚动交互,让你设计的网页更适合这个时代
  • 2017-08-06关于div+css及Web标准网页的好处
  • 2018-08-23新版抢先看!Material Design 的7个重大更新
  • 2017-08-06Div与table的区别在速度和加载与网页应用等等中的差别介绍
  • 2018-08-23资深交互设计师经常强调的「场景」到底是什么?
  • 2018-08-23熟知用户行为的这7个层面,你的设计才会走进人心
  • 2017-08-06切勿用数字开头来命名css伪类名
  • 2018-08-23三款思源宋体改造繁体版免费下载+MacOS GUI素材打包

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 腾讯设计师:我做设计这七年里的心态变化
    • 设置网页图片热点链接以及坐标值示例代码
    • 已然成熟的卡片式设计,遵循着怎样的设计规则?
    • 哈哈哈!设计师专用表情包合集(二)
    • 将像素点转化为全面的品牌体验的经验技巧
    • 腾讯好文!如何设计内容精确、体验友好的Dashboard?(上篇)
    • 趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?
    • 让你脑洞大开的创新思维方法系列:奔驰法
    • 阿里巴巴UED总监:新商业环境下设计师的转型三部曲
    • CSS实现单行、多行文本溢出显示省略号的实现方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有