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

这20个切入点,能让你快速着手设计广告Banner

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

本文主要包含Banner,banner教程,淘宝banner,电商banner,经验分享等相关知识,希望在学习及工作中可以帮助到您

Banner 广告是快速高效的吸引用户的重要手段。Banner 广告在网站中通常都占据着不错的位置,它们的转化率和它本身的设计优秀与否息息相关,最重要的是,它要能迅速的吸引用户的注意力,通过优秀的文案和视觉让用户立刻马上点击。

今天的文章,我们通过一系列优秀的范例,帮你梳理Banner 广告的20种高度可行、转化率高的设计思路。

1、聚焦LOGO

如果你的LOGO本身设计足够优秀,那么记得将它放置在广告Banner的正中央。Buatoom 就将他们的投放到Omise 的Banner广告中,高亮处理了他们的LOGO。

2、扁平插画

扁平化的插画是时下流行的一种处理手法,它们并不复杂,但是同样可以带来漂亮的视觉效果。如果你们的产品也适合这么处理的话,不妨试着设计一些扁平风的插画风banner,以备不时之需。

3、模糊效果

模糊效果本身也是非常常见的处理手法。将模糊运用在Banner 的背景当中,突出特定的元素,让整个设计拥有了纵深,相当有趣。

4、借助栅格

栅格常常用来组织不同的设计元素,虽然创建栅格会占用你几分钟时间,但是它能够在设计过程中省却不少时间。Banner 广告中,使用栅格快速构建布局,能够给人清晰直观的感觉。

5、尝试单色配色方案

单色布局同样能够创造出不错的视觉效果,重要的是掌握元素之间的平衡,你看看下面的几个案例就能够理解。单色配色方案不是仅仅只使用一种颜色,而是要善用一个颜色和它的同系色彩。

6、字体搭配

虽然我们为了追求一致性的搭配,通常不会使用太多的字体,但是在广告中,有时候为了创造多样而独特的视觉体验,可以将多种不同的字体有目的的搭配起来。当然,色彩的搭配也是要注意的。

7、大胆使用强对比色

你可以使用色轮上相对位置的对比色来创造设计,当然你也可以使用深浅对比,这个时候色彩甚至可以是近似的颜色,而两者在深浅上作出对比也是不错的。

8、经典的色彩叠加

色彩叠加这种技巧能够将多种不同的色彩统一到一个色彩体系当中来,它并不一定要非常的清晰、准确,但是能让你的整个设计呈现出更为风格化的一面。许多设计会采用高饱和度的色彩来叠加,这样一来白色的文字可以和图像内容构成明显对比。

9、特征明显的手写字体

手写字体是非常富有张力的,你可以使用现成的字体,也可以通过自定义笔画来构建字体。

10、善用图案

在特定的节日,可以在Banner 广告中加入小的图案来营造氛围。在扁平化设计风格深入人心的今天,也许你只需要反复使用一些常见的几何图案就能达到装饰的目的。

11、以文本为中心的布局设计

如果你的Banner 广告并不是以图片为中心,而是要突出特定的文本内容,那么你可能需要将特定的文本风格化处理,或者同其他的内容构成视觉对比。

12、展示,而不是呐喊

让你的产品自己说话,而不是喊口号。如果你的Banner 广告中的产品能够不言自明,那么最好是使用围绕产品本身的设计,突出产品。这样的设计并不是要你将文本去掉,而是要淡化处理,突出产品本身的特质。

13、使用模板

如果你经常做系列化的设计,那么可能会经常用到各式各样的模板,许多模板有不错的复用性,甚至部分模板有相当不错的泛用性,善用这些模板。

14、突出CTA按钮

许多广告都涉及到点击率这样的KPI,按钮几乎是其中绕不开的UI元素,这些核心的行为召唤元素最好高亮显示,搭配合适的文本内容,让它看起来很容易点击也很值得点击。

15、使用抓人眼球的色彩

如果你想让你的广告Banner更容易被人注意到,那么在色彩上多花心思是值得的。在以蓝色为主色调的Facebook 中打广告,你的Banner 如果使用蓝色,不论饱和度多高,都很容易“融入”到整个页面中,如果相反,使用橙色作为主色调,就很容易从整个设计中脱颖而出了。

16、精心策划的摄影内容

许多广告Banner 中都会使用摄影作品作为背景或者视觉主体,

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

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

相关文章

  • 2017-10-28解决stackoverflow打开慢的方法
  • 2017-08-06关于遇到的浏览器兼容问题及应对方法(推荐)
  • 2018-08-23打包下载!23款网页设计师必备经典私藏英文字体
  • 2018-08-23如何简化操作流程?来看这篇超全面的总结!
  • 2018-08-23这个超简单的教程,帮你学会C4D 制作动效的基础方式和流程
  • 2018-08-23最常见的日期选择器,原来有这么多细节设计!
  • 2018-08-23零基础必备:详解十种常见的水彩基本技法+问题总结
  • 2017-09-13sed简单教程
  • 2018-08-23极简设计时代怎么用分隔线?看完这个分析你就会了!
  • 2018-08-23GUI和VUI 到底有哪些区别?来看这篇超全面的总结!

文章分类

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

最近更新的内容

    • 超实用!如何制作统一可复用iOS/Material Design元件库?(附源文件)
    • 美团打车推出之际,来聊聊分时租赁的共享汽车
    • 小型分页的设计
    • 在这些实例中,学会用动效赋予你APP生命力
    • PS用的很溜?但你的设计可能还没入门!
    • 更好的表单设计,从这6个设计策略开始
    • 那些很熟悉但又叫不出名字的设计法则:禁果效应
    • 优设周报 | “远行”的Pinterest 和年满30岁的AI
    • 这5个色彩进阶技巧,能帮你创造更优质的网页用户体验
    • 「这个控件叫什么」系列之输入框/文本框/Text fields

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

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