网站banner图怎么设计?

网站banner图怎么设计?,第1张

我们通常打开网站会看到很多长方形形状的广告图片,称之为网站banner,网站的Banner可以放在网站不同的位置,在访客浏览网站的时候,吸引访客的关注,从而获得宣传和销售的效果,我们常常看到的网站百叶窗也是网站banner的一种。一般banner的设计和制作可以找万商云集https://www.iwanshang.cn/等一些企业网站建设相关的服务公司,但一定要注意其中的沟通,明确要求和主题,才能达到好的效果。

Banner广告对于增加在线流量至关重要,但如何才能设计出大家想要点击的网页Banner?网页Banner设计的重点是通过应用基本的设计准则,系统地创建有效的Banner广告。接下来我们就来说说banner的设计要点。

网站的Banner图虽然看起来只是整个网站当中很小的一个方面,但对于网站给用户塑造的印象和体验效果来说,却是至关重要的。毕竟用户来到网站当中,首先映入眼帘的便是网站Banner图,如果Banner图不好的话,那么用户对网站的第一印象就会下降,用户很可能就会因此而跳出离开。所以,只有设计好网站的Banner图,才能使网站的用户吸引力更强,这样网站也才能获得更多用户支持。

一.首先了解你的banner设计需求

确定banner文案的内容,包括定位和主题,以及将会涉及到的设计素材、包括准备投放在什么平台以及它的尺寸大小,这些前期的工都是需要先定下来的。因为这些基本的因素如果没有被确定下来,会阻碍设计师的设计灵感,在设计的过程中也会给设计师带来很多不确定的因素,而且会让banner设计出来可能不符合要求。

二、一定要选用高清图片

图片的清晰度一定要有保证,一定不要出现图片模糊的情况,清晰度低的图片让人容易产生疏离感和塑料感,影响网站的整体质感。高清图片能够让用户准确地获得信息,让人看着更加舒服,更加高级。

三、保持层次结构

Banner广告设计依赖于每个广告之间的正确平衡,所以要注意你的层次结构。有效的Banner广告是为了提高品牌知名度和增加网站流量而设计的。它们有三个基本组成部分:(1)公司Logo(2)价值主张(3)CTA按钮

四、网页设计注意排版网页设计中,使用全屏照片作为网站背景固然简洁漂亮,干净利落之余设计师需更要考虑到整个网页的布局,如何在大幅照片上进行排版,设置栏目,与照片背景颜色不产生冲突,又不影响用户的阅读体验。

总之,banner在网页设计中占据着重要作用,精美的图片配之以绝妙的文案能给网站获得漂亮的加分。而作为背景的照片只有足够精彩漂亮才会给用户留下深刻印象,所以设计师在选择照片时要注意图片的质量问题。此外还要重视图片展示的内容与网站主题的相关性,于此网站的主题内容才会在第一时间传达给访问用户。

1、点击才是王道

一般我们做的banner都是为了宣传、推广某个产品或新功能等,它本身就是引导用户点击参与的入口,我们目的就是要吸引用户点击。所以我们可以用不同形式和手法来表现,但相同处,通情达意,突出主题,富有乐趣,那它们则能让浏览者产生兴趣。

2、主题明确

在着手设计之前,设计师应该先与需求方沟通,并从中获取需求方想要表达的主题和需要重点突出的点。然后在针对性地对广告对象进行诉求,形象鲜明的展示所要表达的内容。不要放一些没用的东西,除非你想赶走你的用户。

3、与整个页面相协调

当我们确定表达的主题之后,要在banner实际放置的环境中展开后续的设计工作。色彩搭配要明亮干净,要与整个页面相协调。不能为了使banner更加吸引用户的眼球而大面积的使用一些浓重的颜色(特殊需求除外)。

4、顺应用户的浏览习惯

我们知道大多数的用户在浏览网页的时候都是从上到下,从左到右的浏览。为使banner更容易被用户浏览,我们应该顺应用户这样的浏览习惯,糟糕的设计会让用户无所适从,焦点到处都是。

5、文字的排列设计

由于是以文字为主体部分,背景其实就无关紧要了,大多数这样的设计,我们都可以拿纯色背景或者是风景、科幻类的壁纸,取其整体的部分作为你需要的设计背景,通常我在截取时都习惯选择大部分能吸引眼球的图案又或者是渐变渐现的纯色部分。

Banner设计因为尺寸的限制,内容排版方面一定要做减法处理,突出主题,弱化背景以及一些无关紧要的装饰性内容。

如果有好的文案工作人员,像最先需要处理的文案梳理、设计的主题及文字的优先级别都会轻松很多。

如果没有文案工作人员,那么就要在文字上多下功夫,广告文案要表达准确、优美流利、用最少的字数来表达出主题和一些产品的或者其它的相关内容。

对于文案梳理好的设计者来说,首先要根据所投放平台的设计风格、环境来考虑所做banner图的主色以及设计风格,来贴合投放平台的设计,使其不至于突兀而影响到整个平台的视觉效果。

想要科学而快速的设计banner,可以从以下几个方面入手。

1、设计布局

Banne设计的布局大体上可以分为三种,请看下图:

居中对称布局

左右布局

左中右布局

2、色彩搭配

人们在生活中积累了丰富的色彩印象,色彩也被灌输了很多的象征意义,配色不同,就会有寒冷、暖和、强烈、柔和、明亮、黑暗、朴素、华丽等各种不同的感情效果,做为设计者就要了解各种色彩分别适用的场合和风俗习惯。

比如暖色系的红色会引起人们兴奋、热烈的感觉,象征革命、忠勇,春节人们也爱用红色书写对联,装饰房间。

橙色活跃、跳动,黄色轻快、明亮,不同饱和度的黄色又有不同的感受和象征。

冷色系的蓝色给人安静、稳定的感觉,是科学领域的常用色,是智慧和征服自然的力量,成为现代象征色。

绿色是大自然的主宰色,象征生命与希望,紫色给人幽静、高贵的感觉。

白色纯洁、干净,黑色高雅、超俗,不同的国情和风俗,使得颜色又有了不同的象征含义,这一块作为设计者也要特别留意,避免出现不合时宜的配色。

根据产品的特点和设计的主题选择适合的主色至关重要,在颜色的运用上最好不要超过三种颜色,大致上可以参考以下几种的配色方法:

一、巧用对比色

定好主色后,小面积的使用对比色,即突出了重点又活跃了版面。

二、同色系颜色运用

通过饱和度、明度的变化来丰富版面。

三、相近色运用

同一饱和度的相近色的搭配,即便颜色过多,在视觉上也会很舒服,不会显得突兀。

3、字体的选择

文字是banner设计的中最直白的传达信息的重要内容。因此,banner设计中的文字应避免繁杂零乱,只要突出主题,设计的简洁明了就好。

字体是文字的风格和外衣,每一种不同类型的字体都有其相对应的个性和风格,不同的产品和诉求,应选择与之相呼应的字体。

一、力量型字体

黑体系列的字体,笔画横平竖直,结构醒目严密,笔划粗壮有力,常用在标题或需要引起注意的文字上,比较适合科技类、运动类、器械类、体现力量方面的设计,男士产品相关方面的设计也比较适用。

二、柔美型字体

宋体、楷体、圆体等线条纤细的字体系列,秀丽清雅,纤细的字体表现出高贵、典雅的女性文艺气息,比较适合女士用品及周边相关的产品的设计。

三、卡通型字体

方正稚艺、卡通,汉仪丫丫、娃娃等可爱的卡通字体一般用在儿童用品中,活泼、跳跃、不严肃。

四、古典类字体

用于文章标题使用的魏体、隶书行笔自由、静中有动的行楷寓巧于拙、借古于今的舒体;还有苍劲古朴的书法字体,给人浓厚的历史文化气息,飘逸灵动却又霸气十足。适用于文化宣传类、书籍类、游戏类等相关的banner设计中。

4、留白的应用

合适的留白使设计作品不会有满溢的感觉,还能大大提升设计作品的逼格。留白并不是单指留出的一片空白背景色,而是指留出空间,留白可以是其它的任意颜色,也可以是整体看起来比较简洁大气的设计风格。

对于设计者来说,掌握一些留白的理论知识,可以相应的提高自己的工作效率。当然留白也并不是所有的设计中都适用的,对于需要烘托氛围的设计,比如促销设计以及体现节假日的热闹喜庆的设计就不适用。

总结来说,banner的设计就是要布局合理、用色合适、主次分明、错落有致、占比协调。由于banner图的尺寸限制,在做设计时尽量做减法思维,在背景和图文排版上做相应的减法处理。熟识掌握了以上内容,基本上就能快速的设计出适合的banner图了。

文中配图来源网络,如有侵权请联系删除。

banner的设计并不是简简单单就能做好的,这个需要讲究一定的方法和技巧,所以为了帮助大家能够更科学、更快速的设计出理想中的优质banner,下来就和大家一起分享关于banner设计的科学方法步骤,希望大家都能够设计出自己理想中的banner图。

第一步:定义要传达什么信息这一步,和视觉、审美什么的都没关系。

比如,半月谈,我们要传达的信息有:

品牌LOGO,让用户一眼就知道哪里出品,下次形成条件反射,所谓的视觉认知是需要一定的重复的,只有不断重复才能加深用户印象。

子品牌LOGO,让用户知道我们出了什么东西,并且有系列感。

以上就是我们要传达的核心信息了。你也可以认为这就是一个BANNER,只是——看起来没那么好看而已。

但是,我们发现信息还不够,我们还想要传达:

我们的内容大概是什么,从而让用户形成期待

既然是系列,我们希望用户能够知道这是第几期,从而当他们想要从某一期有兴趣时点击到全部,也有地方去。

所以,我们把信息又放出来。现在我们有4类信息。

第二步:定义信息的优先级

虽然我们有4类信息,但是优先级肯定不一样的,所以对应到设计上,我们给它放的版块的大小、颜色的突出是不一样的。

第三步:考虑用户视觉路径

也即你想引导用户先看哪里,再看哪里,然后再做什么。

通常,用户的阅读从上到下,从左到右边,所以一般重要的内容会放到左上角。

不过这个规则可以用醒目的图片、刺眼的颜色轻易打破,但是我建议你不要轻易这么做,所有的图片和颜色都要有意义,为什么要用这个图片为什么要用这个颜色。

确保用户一开始有视觉中心,如果用户一眼不知道先看什么,那么这个banner就是失败的。

有了视觉焦点后,你可以从视觉焦点引申开来,使用视觉里的亲密性原则(把内容相近的地理位置靠近一些、对比原则等等),引导用户从视觉焦点进而关注到其他细节、或者促使行动的东西。

第四步:考虑标准识别颜色

既然我们要传达品牌形象,请确保用色从我们的标准VI色盘中选择,而不要随便用。

我是配色弱怎么办?有这3个板斧打遍天下:《秒变配色高手!怎么都不会错的6条网页设计配色原则》

记住,品牌传达,重复性很重要。就像我们看到红、黄、白配色会想到麦当劳,看到绿和黑就想到星巴克一样。

第五步:做视觉的排版

不要考虑太多设计技能,否则就陷入到:我不是专业的,所以我不会做设计上

排版上,信息已经完整,优先级已经出来,无非就是把它变得好看一些而已。

让banner好看的几个要诀:

1.对齐

很好办吧,让内容纵向、横向都有一条线,可以对齐。要么居中,要么底部。尽量确保页面上不要有一个元素,没有任何元素和它能够形成对齐的关系。

2.亲密

不要让所有内容都没有聚集地堆在一起,让那些关系比较亲密的内容聚合成一个区域,不要让一个banner上的区域超过4个。

3.简单质感:

千万不要加任何PS的滤镜、阴影、能不渐变就不渐变,因为已经不流行了,不要盲目使用各种样式。

4.如果要用图标,尽量选择样式统一,且能够保持你的优先级次序的图表。比如我们引导用户先看左边,再看右边,结果你在右边的图标里选择了一个血红的,可能用户的视线立马被吸引过来了。

5.不要让字体超过3种。尽量用宋体、黑体、方正黑体,不要用什么魏碑体、行楷等,一看就比较山寨。

第六步:做更多的美化

如果你不想做,其实上面也可以了。

想做的话,我们可以:

比如花点时间去做一个流行的扁平化背景装饰——还是要强调一点,不要为了装饰而装饰,所有的装饰都要有意义~

让背景更加有质感。比如加点磨砂感觉。

比如,你还可以适当变换下别的排版,比如:居中的排版,更容易引导用户从上到下的阅读视角,也是很多人偷懒比较喜欢的排版风格。

banner设计有一大半的精力是梳理信息、设定优先级、设定用户浏览次序,和PS的技能没有太多关系,所以,每个人都可以去尝试做好一张看似很有设计感,但是实际上又没花什么精力的banner。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/7800474.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-10
下一篇 2023-04-10

发表评论

登录后才能评论

评论列表(0条)

保存