网页设计的Banner作为表达网站价值或者传达广告信息的视觉主体,一直在根据网络环境的变化而变化着,从表现形式到尺寸大小,再到创意的多元化,因此更需要我们网页设计师们对其设计创意进行丰富和完善,才能真正达到宣传的目标。

Banner规格尺寸大小不一,文件大小也有一定的限制,这就使得在设计上增加了许多障碍,怎么在方寸间把握平衡,变得十分重要。Banner中的视觉要素主要包括:背景、图片及文字,此外Banner的投放环境对其设计也有极大的影响,这些都是设计时需要考虑的重点要素。

1、分析需求

任何设计的第一步都是对用户需求的分析,在Banner设计开始前,设计师应与需求方沟通,确定需求,找准定位,然后再有针对性地开始设计,色彩搭配要与整个页面相协调。

2、Banner颜色

(1)下面两个banner哪个更吸引你呢?对比之下,我们会发现大多数人觉得后者给用户带来的视觉传达力更强,简洁明确、朴素有力的效果,给人一种重量感和力量感。前者颜色虽多,却没有带来更好的视觉传达效果。这是因为颜色过度使用会打乱色彩节奏,并且,减弱了颜色间的对比,使整体效果变弱。

(2)其次,使用颜色越多,最后保存时文件体积越大,加载起来越慢,让用户等待就意味着和用户说再见了,如果靠降低品质来达到Banner的上传要求,那展现给用户的是低质量的banner,也一样会丢失一些用户。

3、图片与文字

一般来说,网站制作一个banner分为两个部分,文字和辅助图。虽然辅助图站的面积比较大,但如果不加入文字说明的话,客户就会看不懂你做的banner要表现什么、要说明什么,所以文字是整个banner的主角,我们在制作banner的时候特别要注意对文字的处理和摆放。

但是,文字的搭配也能够一目了然地让受众知道所要传达的主题是什么,但如果文字与图片协调不好,也容易出现反面效果。下面这个Banner看起来比较清新,符合环保、健康的主题,图片没有过多的元素,但由于图片用的浅色,文字也用的浅色,用户是很难看出来,影响阅读性,是此Banner设计的一大败笔。

4、banner设计注意事项

(1)Banner的文字用一两句话来表达即可。

(2)广告语要朗朗上口,突出重点。

(3)图形无须太繁杂,文字尽量使用黑体等粗壮的字体。

(4)图形尽量选择颜色数少。

(5)尽量不要使用彩虹色、晕边等复杂的特技图形效果,这样会增加图形所占据的颜色数,增大体积。

(6)产品数量不宜过多。摆放太多产品,反而被淹没,视觉效果大打折扣。

如何做好Banner设计?

一般来说,Banner分为两个部分:文字和图片。虽然图片占比比较大,但是不加入文字说明的话,有比较多的情况用户是看不懂的,所以文字理所当然也是Banner的主角,文字的设计和排版在Banner图里显得尤为重要。如何做好Banner设计?

一个好的Banner必须要具备:

①文字简练,意义突出。

②标语精炼,容易记住。

③图片清楚且不宜复杂,颜色少主体明确,以便更好的搭配文字效果。

④产品Banner产品不宜太多, 找准更易识别的产品,提升视觉效果。

①分清需求文字的主次关系,带有Logo的和不带Logo的主次关系, 带有Logo的应该是Logo始终在前最显眼的位置处,接下来就是标题与标语。好的Banner文字都比较饱满和集中,Logo和标题应该更为醒目,标语作陪衬辅助Logo和标题来进行设计。

不带有Logo的, 应该是标题应该更为醒目,标语作为陪衬。切记文标题的设计与标语的文字排版,标题永远都应该更为突出,因为标题能给予用户正确的引导。

②当遇到需求文字过多的情况,要注意主要信息的提取,弱化辅助信息以及一些不重要的词汇。

③当遇到需求文字过少的情况,要注意用配图来弥补空间上的不足,或者是加一些辅助信息(域名等)以丰富画面,又或者是做出美术字体让画面更加丰富。

Banner分为动态和静态两种模式。我们经常看到的一些网页动态Banner虽然动态的确更能吸引用户眼球, 但是这种方式不适合长期使用,然而稳定的画面不容易引发特别的关注,所以现在的动态Banner以一个全新的微动态效果重新展现在人们眼前,不仅没有引发负面效果,相反的这种微动态更能让整个画面更有活力。

要时刻把握Banner的大小, 太大的将会给浏览带来压力, 打开时间长了,非常影响用户体验,所以在做的时候必须要时刻注意输出的大小,各个对应尺寸的大小尽量要在不损失图片质量的情况下进行相应的压缩。

①垂直水平式构图。平行排列每一个产品,每个产品展示效果都很好,各个产品所占比重相同、秩序感强,此类构图给用户心情,产品规矩正式、高大、安全感强。

②正三角形和倒三角构图。多个产品进行正三角构图,产品立体感强,各个产品所占比重有轻有重,构图稳定自然,空间感强。此类构图给用户心情,安全感极强、稳定可靠。

多个产品进行倒三角构图,产品立体感极强,各个产品所占比重有轻有重,构图动感活泼失衡,运动感空间感强。此类构图给用户心情,不稳定感激发用户心情,给用户运动的感觉。学牛升学网-教育信息服务平台

③对角线构图。一个产品或两个产品进行组合对角线构图,产品的空间感强,各个产品所占比重相对平衡,构图动感活泼稳定,运动感空间感强。此类构图给用户心情,动感十足且稳定。

④渐次式构图。多个产品进行渐次式排列,产品展示空间感强,各个产品所占比重不同、由大及小、 构图稳定、次序感强,利用透视引导指向。此类构图给用户心情,稳定自然,产品丰富可靠。

⑤辐射式构图。多个产品进行辐射式构图,产品空间感强,各个产品所占比重不同、由大及小。构图动感活泼、次序感强。此类构图给用户心情,活泼动感,产品丰富可靠。

⑥框架式构图。单个或多个产品框架式构图,产品展示效果好,有画中画的感觉。构图规整平衡、稳定坚固。此类构图给用户心情,稳定可信赖,产品可靠。

总之, 要做一个好的Banner图必须要抓住用户的心理,把握用户的需求来进行设计。

如何做好banner设计(banner设计要点包括哪些)相关推荐

  1. 使用PS(Adobe Photoshop CC)设计Banner

    使用PS(Adobe Photoshop CC)设计Banner (作者:何少军 撰写时间:2019年1月16日) 一.介绍PS(Adobe Photoshop CC)使用的工具以及特效 PS(Ado ...

  2. 前端开发中如何将文件夹中的图片变为背景图_如何用Elementor设计banner

    Banner也可以称之为海报,一般出现在网页的顶部.因为前端设计采用的是Html语言,而Html语言采用的是从上往下依次展示内容的方式,所以Banner的内容往往是一个网站首先呈现给网站访客的内容.如 ...

  3. UI设计 banner

    一.排版方式 排版:把文字.表格.图形.图片等进行合理的排列调整,使版面达到美观视觉效果. 种类: 图文排版 表格排版 图片排版 二.排版里的内容 1.文字 文字层级:字号大小.字体颜色.字体粗细 文 ...

  4. 如何做好优秀的UI设计

    说起产品 UI 设计通常的认识就是 " 图形界面的设计 " 而产品的交互设计往往被忽略!一个好的交互设计对产品的成功起着很关键的作用. UI 所做的就是用户最先接触到的东西,也是一 ...

  5. ZooKeeper架构设计及其应用要点

    ZooKeeper架构设计及其应用要点 ZooKeeper是一个开源的分布式服务框架,它是Apache Hadoop项目的一个子项目,主要用来解决分布式应用场景中存在的一些问题,如:统一命名服务.状态 ...

  6. 如何做好软件系统的架构设计?

    软件系统架构(Software Architecture)是关于软件系统的结构.行为.属性.组成要素及其之间交互关系的高级抽象.任何软件开发项目,都会经历需求获取.系统分析.系统设计.编码研发.系统运 ...

  7. EC-PCA: 利润中心会计流程设计和方案要点

    文章目录 一.概述 二.流程设计和方案要点 2.1 利润中心会计配置 2.2 利润中心段维护流程 2.3 利润中心主数据维护流程 2.4 利润中心记账流程 2.5 利润中心分配分摊流程 2.6 出具报 ...

  8. 计算机教学的两种模式,信息技术与教育技术简答题 请简述教学设计的一般模式包括哪些步骤...

    信息技术与教育技术简答题 请简述教学设计的一般模式包括哪些步骤以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 信息技术与 ...

  9. 如何让整个表格高度固定_Saas产品中,表格设计有哪些要点

    编辑导语:无论是在学校还是公司,我们每个人应该都接触过表格.表格不仅可以迅速的收集信息,还是一种高效的信息展示方式.本文作者基于过去的创业经验,为我们分析总结了数据表格设计的一些关键点,希望看后能够对 ...

  10. 斜面孔如何绘制_如何才能做好钢结构厂房基础设计

    由于钢结构厂房具有施工周期短.强度高和重量轻等优点,我国钢结构厂房经过了快速发展.钢结构厂房不仅要满足基本的功能,还必须具有足够的安全性和对生产环境的适应性,厂房基础是保证厂房结构安全.满足厂房多方面 ...

最新文章

  1. python教程廖雪峰云-Python教程
  2. 魅族Android10内测招募答案,10款机型升级Android 10!魅族Flyme即日起内测招募
  3. Android(IPC)进程间通讯1:详解Binder由来?
  4. HTML-参考手册: HTML 音频/视频
  5. 定义或修改本地屏幕元素的注释
  6. 软件工程 - 设计模式学习之策略模式Strategy
  7. Java线程拾遗(可重入锁)
  8. 美国国家人工智能研发战略规划2019
  9. 基于微信小程序的图书馆管理系统.rar(论文+源码)
  10. 常用的linux技巧,Linux Shell常用技巧(十二)-第二部分
  11. 华为手机Android studio 配置ADB wifi 调试
  12. python turtle画表情包--牛bi
  13. uefi +gpt 系统安装 和 传统legacy + mbr 的区别
  14. 杂记-Macbook Pro M1芯片能玩深度学习吗?
  15. 软件工程课程周学习进度报告——第五周
  16. JSP设置Excel表格换行_如何在WPS-Excel表格中设置可爱的“温馨提示”?
  17. Flink并行度与slot之间的关系
  18. 【每日新闻】欧盟委员会对华硕等4家公司处以1.3亿美元罚款;谷歌发布多款AI工具:帮大众更好地利用人工智能...
  19. 去电脑培训班要考证吗
  20. Java判断某特殊字符串结尾的2种方法

热门文章

  1. geoserver三维_cesium结合geoserver实现地图空间查询(附源码下载)
  2. vs 开发 qt 遇到 无法找到 Visual Studio 2010 的生成工具(平台工具集 =“v100”) 解决方案
  3. 【期权系列】基于偏度指数的择时分析
  4. iPhone4升级到iOS5.0.1越狱后出现Cydia使用闪退的修复方法
  5. 不错的电子书籍下载网址
  6. update和upgrade的主要区别
  7. 关于朗讯,北电,上海贝尔阿尔卡特....
  8. 单品商城活动竞价落地营销单页系统开发
  9. Linux高级应用(九)Linux内核的原理和配置
  10. Android 混淆整理