网页设计构图banner基础
- 格式:ppt
- 大小:7.99 MB
- 文档页数:35
《Banner设计要点》17.5.21声明:本文由相关内容引出,言论仅供参考!一般banner是由文案(包括logo)、商品模特(包括产品图)、背景、点缀元素四个元素组成的。
【设计四要素:对比、对齐、重复、亲密性】。
Banner构图:垂直水平构图,文案居中,比较随意直观,可灵活操作;倾斜构图,文案居中,常用于促销类banner;几何构图,例如文案位于三角内,结构感强;倾斜式构图,辐射式构图等。
一、banner的分类:按照不同的分类标准,就有不同的分法。
例如,按形式感分,有扁平化banner和立体感banner;按是否促销分类,有促销banner和非促销banner;按构图方式分类,有左文右图式banner、左图右文式banner、居中式banner。
这里,按表现的特点分为四大类——年轻化banner、文艺范banner、品牌感banner和大气化banner。
(1)年轻化banner特点:文案通常用促销刚劲类的字体;点缀元素常用一些几何图形或众多商品元素。
(2)文艺范banner特点:文案通常用瘦长类的字体;构图稳重、整体协调、用色淡雅。
比如用邻近色搭配背景和点缀元素,这时,背景与商品颜色邻近的跨度小,背景与点缀颜色邻近的跨度大。
(3)品牌感banner特点:有logo,主色通常用logo上的颜色;文案字体也一般用logo上的字体;banner主体是品牌特征。
(4)大气化banner特点:常运用一些表现手法,例如联想、意识流思维,不以文案为核心,着重表现主体。
二、字体的选用(注意版权):(1)纤细类字体:方正清刻本悦宋、小米兰亭、方正兰亭纤黑、方正兰亭超细黑、华文黑体、汉仪瑞意宋、汉仪宋韵朗黑···(2)粗体类字体:方正兰亭中黑/超粗、方正正中黑、造字工房尚黑···(3)促销类字体:迷你简菱心、造字工房版黑/劲黑、华康俪金黑、方正粗谭黑、爱度综艺简体···(4)书法字体:汉仪尚巍手书、汉仪综艺体、叶友跟书法体···三、Banner处理技巧:(1)文案处理①文字分层:例如错层阴影,让字体有层次感;又或者将文案置于模特或产品图的背后,这是最常见的。
之前我把平面设计的视觉呈现分为:构图,调子,元素和内容四大部分组成,所以我分四部曲来讲,其中元素部分又分为标题,主体和大场景三部分,今天讲的就是标题部分。
在讲标题设计之前,先说说这四部曲的基本前提:序目标我们做设计究竟是为了什么?公司请视觉设计师做美术包装广告究竟是为了什么?赚钱!宗旨我们公司是上市运营公司,公司存在是为了盈利为了赚钱,我们视觉设计师是包装,我们目的是把公司产品美术包装做好,让用户有视觉享受,更好的引导去花费,赚用户的钱,因此,我们做的是商业设计。
用户认同我们,能让美术引导他们去更开心的去浏览,去消费我们的产品就是我们的成功。
所以,商业设计必须以用户的角度出发。
良好的设计习惯因为我们的设计是从用户角度出发,建议每次完成设计后,首先问问自己,也可以问问别人测试一下,如果你是用户,看看这份设计是否吸引到你,是否愿意去读下去用户的特性大部分人总是很忙,生活匆匆过,一般外面的线下广告用户去看不会超过3秒,什么能够让他们视线停下来?网络资讯琳琅满目,怎样才能让迅速浏览和点击的用户停住视线?其实你们自己都是用户,问问自己-那肯定是吸引你眼球的视觉冲击力强的广告,还有你感兴趣的广告文字。
线上广告主要是以banner为主,道理是一样的,能让行走的人留住视线,能让在邻罗满目咨讯中浏览网页用户停住视线的广告,必须的就是充足的视觉冲击力和捕捉力的平面主体,另外就是凸显敏感的标题和重点字眼。
标题文字篇平面设计除了在视觉上给人一种美的享受外,更重要的是向广大的消费者转达一种的信息,一种理念,因此在平面设计中,不单单注重表面视觉上的美观,而应该考虑考虑信息的传达。
标题主要是表达广告主题的短文,一般在平面设计中起了画龙点睛的作用,获取瞬间的打动效果,经常是运用文学的手法,以生动精彩的短句和一些形象夸张的手法来唤起消费者的购买欲望。
不仅要争取消费者的注意,还要争取到消费者的心理。
(引用网文)标题的最基本要求:清晰,明了请问,三秒内以上banner谁能看清楚写什么?有能抓的住谁眼睛?标题的三大特性:逻辑性标题选择上应该简洁明了,易记,概括力强的短语,不一定是一个完整的句子,也有只用一、二个字的短语,但它是广告文字最重要的部分。
banner设计的基本概念和原则banner设计是一种非常重要的视觉传播方式,在广告、活动宣传、网站推广等方面有着广泛的应用。
一幅成功的banner设计可以吸引人们的注意力,传达信息,促进销售和传播品牌形象。
在进行banner设计的过程中,需要遵循一些基本概念和原则,才能确保设计的效果和质量。
首先,banner设计的基本概念包括设计的目的、受众、设计元素和设计风格。
设计的目的是指设计所要传达的信息和目标,可能是推广产品、宣传活动、促销优惠等。
受众是指设计所针对的用户群体,他们的年龄、性别、兴趣爱好等因素都会影响设计的风格和元素的选择。
设计元素包括图片、文字、颜色、排版等,这些元素的组合和使用将直接影响设计的吸引力和传达效果。
设计风格是指设计所采用的整体风格和表现形式,可以是清新简洁的风格,也可以是华丽夸张的风格,需要根据设计的目的和受众来选择。
其次,banner设计的原则包括简洁明了、注意视觉冲击、突出重点、保持一致性和考虑排版规律。
简洁明了是指设计要尽量简洁清晰,不要过于复杂和繁杂,避免信息过载。
注意视觉冲击是指设计要具有吸引人眼球的力量,可以通过色彩、形状、构图等方式来实现。
突出重点是指设计要突出主要信息和卖点,让受众能够在短时间内快速抓住重点内容。
保持一致性是指设计风格和元素要保持统一,不同的banner之间也要保持一致性,以提高品牌的识别度。
考虑排版规律是指设计要遵循一定的排版规则和原则,如对齐、间距、比例等,以确保设计的整体效果和美感。
在进行banner设计时,需要综合考虑这些基本概念和原则,才能设计出符合要求和效果的作品。
在banner设计中,最重要的概念之一是目的。
设计的目的是设计师在开始设计工作之前必须要明确的,因为目的是推动设计的动力。
具体而言,设计的目的可能是向受众推广产品或服务、宣传一个活动或事件、提供信息或咨询、搜集订阅或销售等。
不同的目的将需要不同的设计元素和风格,所以在设计之前一定要明确目的。
网页的banner怎么设计一般来说,banner〔制定〕会通过夸张的颜色来吸引用户的注意力,从而加强banner的吸引力。
但是过多的使用亮色,很容易造成使用者视觉疲惫。
今天给大家说一下网页的banner怎么制定,供大家参照和阅读。
我们都知道,在一个网站中,banner图像对浏览者来说是非常重要的,尤其是电子商务中的banner,它的主要目的是营销,是让消费者有购买的冲动,这对制定有更高的要求。
企业网站也是如此。
一个合适的banner不仅可以吸引注意力,还可以让用户更好的了解产品和功能。
否则,如果banner不合适,整个网站看起来就会很一般。
一、网站banner制定要特别重点内容,展示企业文化制定banner时,可以通过文字反映企业文化,告诉用户企业最近的优惠活动、企业实力等。
这些词应该特别,其他元素应该弱化来衬托关键词。
二、要明确好主题banner制定应特别网站的主题,使用户在进入网站时能快速识别banner的含义,减少辅助干扰元素的使用。
还要注意的是,banner内容不应该太碎或太多,否则,很容易分散用户的注意力。
要明确好主题。
三、文案要走心一个好的标题会吸引人的注意力,而一个糟糕的标题会让人转移视线。
所以做banner的第一件事,就是制定文案的核心。
所谓走心,就是触动你的心,或者让你感兴趣,激发你点击的欲望。
四、banner制定要控制产品数量很多网站在制定banner的时候想要展示很多产品,少到4~5个,多到8~10个。
然后banner变成了产品的展示。
banner空间非常有限,设置过多的产品特别不了banner的含义。
因此,在制定banner时,要控制产品图片的数量,不要影响视觉效果。
五、色彩的运用不能太过醒目一般来说,banner制定会通过夸张的颜色来吸引用户的注意力,从而加强banner的吸引力。
但是过多的使用亮色,很容易造成使用者视觉疲惫,甚至产生不好的感觉。
因此,不建议使用太多的粗体颜色。
banner设计的基本概念和原则banner设计是一种广告设计形式,用于在网页、移动应用程序、社交媒体平台等场景中吸引用户的注意力和促进品牌传播。
一个好的banner设计需要符合一些基本概念和原则,以确保其有效传达信息和吸引用户。
基本概念:1. 目标受众:在设计banner之前,设计师需要了解目标受众的特征和需求,因为目标受众的不同会影响设计的风格、语言和内容。
2. 内容: banners设计的核心是内容。
设计师应以简明扼要的方式呈现信息,利用目标受众感兴趣的图像和文字来传达品牌形象和宣传信息。
3. 视觉吸引力:作为一个视觉设计元素,banner设计需要具有吸引人的外观。
通过运用视觉层次、色彩和图像等元素,设计师可以创造出与众不同和引人注目的效果。
4. 响应式设计:随着互联网的普及,用户通过不同的设备(电脑、手机、平板)访问内容。
因此,设计师需要考虑到不同设备上banner的显示效果,采用响应式设计来确保良好的用户体验。
基本原则:1. 简洁性:banner设计应保持简洁,不要过载信息。
用户往往只有短暂的注意力,所以设计师需要在有限的空间内用简短明了的文字和图片来传达重要信息。
2. 结构性:banner设计需要有清晰的结构,以便用户快速理解内容。
设计师可以通过使用对齐、间距和网格来创建结构,确保重要元素有良好的视觉层次。
3. 强调重点:设计师应合理运用色彩、尺寸、字体和图像等元素,以突出和强调banner中最重要的信息。
这样可以吸引用户的注意力,使其更有可能点击或与banner互动。
4. 可读性:为了提高banner的可读性,设计师应选择易于阅读的字体、颜色组合,并确保文字与背景图像之间具有足够的对比度。
5. 合适的尺寸:根据设计banner的位置和使用场景,设计师应根据不同的平台和设备来选择合适的尺寸。
例如,为了在社交媒体广告中有效传达信息,可选择长方形或正方形的尺寸。
6. 品牌一致性:banner设计应与品牌形象保持一致,包括颜色、字体和图像等,以确保用户对品牌有一致的印象。
banner设计步骤及方法技巧首页顶部Banner的作用是可提高广告商品、优质内容的曝光度,提高浏览到购买的转化率和衡量内容价值。
中间部位 Banner 轮播图的作用是在可利用固定且较小的广告位展示更多的广告数量和内容。
一、Banner设计步骤基本步骤:了解需求——根据需求确定设计风格——根据素材和文案确定排版样式——构成banner的各元素设计——调整配色。
二、Banner的排版要求Banner排版要求如下:内容元素对齐,特别是文案,内容所占面积不能太大,避免增加压迫感。
排版要保持设计的一致性和连贯性原则。
Banner 版式方式中图文左右排版和文字居中用的较多。
三、图文左右排版设计所谓图文左右排版就是当 banner 中需要包含具体的素材,如某人或某件产品时,一般会选择左右排版,图文比例约为6:4(接近黄金比例0.618)。
四、图文居中排版设计图文居中排版比较聚焦,能够起到增强视觉的效果。
电商比较喜欢用,文字放在正中的位子,底下还可以放许多产品。
一般情况下,文字大小标题比例约为2:1。
五、字体设计技巧不要去用一些怪异的字体变形,着重突出的文字信息即可。
常用的字体有三种:衬线体(serif)、非衬线体(sans-serif)、书法体(cursive),通常不会使用太多的字体。
一般会有主标题、副标题、利益点这几个信息,利益点要大大大。
衬线体:适合表达文艺、古典、品质感、传统感强的主题。
非衬线体:适用性较强,一般来说通吃各种风格。
书法体:适合用于表达朴素、优雅、复古、文艺的主题。
六、Banner取色技巧Banner取色上要遵循减法原则。
颜色过多、字体过多、图形过繁,会分散用户注意力,也会使画面过于凌乱。
颜色上三种最多(商品是五颜六色的除外),取色上可参考以下规则进行。
黑色:代表品质、权威、稳重、时尚的色彩,同时也含有冷漠、悲伤、防御的消极情感。
白色:代表简单、纯真、高雅、精致、信任、开放、干净、畅快、朴素的情感。
五大步骤!细说Banner图设计之平面构成的奥秘在讲之前,我先给大家列一个内容大纲:一、平面构成的含义是什么?二、电商Banner图是由什么组成的?三、我们该如何在Banner图设计中运用平面构成呢?四、平面构成之于电商Banner图的意义是什么?五、总结注:前半部分是给大家讲解的基础知识,后半部分是运用这些基础知识结合实例讲解,所以建议从头到位耐心看完哦,需要些时间消化(经济基础决定上层建筑嘛,前面不看后面也就看不懂了),接下来我们一个个问题来解剖:一、平面构成的含义是什么?百度百科的解释是:平面构成是视觉元素在二次元的平面上,按照美的视觉效果,力学的原理,进行编排和组合,它是以理性和逻辑推理来创造形象、研究形象与形象之间的排列的方法,是理性与感性相结合的产物。
而我的理解是:平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言,他可以是抽象的,也可以是具象的,可以是感性的,也可以是理性的,同时它也不是独立存在的,而是伴随着色彩/肌理/光影等而存在的。
基本上世间万物,所有我们接触到的或无法接触到的,看得见的或看不见的事物里都有平面构成的运用和身影。
二、电商Banner图是由什么组成的?Banner组成要素包含4个方面:文案、商品/模特、背景、点缀物(可有可无)。
而我在之前反复强调过的,Banner的作用是:宣传/展示/广而告之/准确传达信息。
三、我们该如何在Banner图设计中运用平面构成呢?在前面我们提到,平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言,而Banner中的所有元素(文案/商品或模特/背景/点缀物)其实都可以看作是平面构成里的点线面这些构成元素。
那么,接下来我们就需要了解3个有关平面构成的概念了:1、元素与元素之间的排列关系2、所有元素在一起所体现的构成形式3、了解几个常用的平面术语接下来,我们分别了解下这几个概念:1、元素与元素之间的排列关系它们之间的排列有下面这么几种:分离/相切/重叠/透叠/结合/减缺/差叠/重叠。