距离升职加薪你只差一张千万点击的Banner图!

发表于 讨论求助 2021-02-08 08:42:37

任何的设计“细节决定成败”。


在网页设计的Banner页面中更是需求吸引视觉性,从而让用户关注网站相关内容并认可和应用。


Banner页面中的细节到位才能充分体现出页面的品质,优秀作品在于细节的把控。


所以今天我们就一起聊聊网页设计Banner图细节。




“依赖于对艺术单个的精神考察,这种元素分析师通向作品内在律动的桥梁。”——瓦西里·康定斯基

 

根据企业网站的产品定位,企业的用户群不同,字符是页面中不可缺少的部分。


网页上80%的信息是以文字形式传达的,任何网页元素都无法替代文字的作用。在Banner中文字设计的好坏会直接影响到整个页面的视觉传达效果。

 

图1


字体在Banner图中排版,也会遵循点线面结合成的设计群体,高低错落、疏密聚散,字体不同,大小不同构成版式形式美的重要因素。


26个英文字母,根据字体的粗细设定节点组合,每个单独的字母就构成了音符。


多行文字排版的纵向韵律,根据单行文字的长短和字体的粗细产生节奏和韵律,再通过颜色,提升视觉关注重点位置阅读。

 

文字采用大写,以单词的间距为节奏,字号大小进行对比形成韵律的强弱,文字排版理性而有秩序,由细微的韵律引导,突然变化成强烈的声调,主题震撼,醒目突出。



图2


一般网站Banner文字设计会更加中规中矩,平面化视觉排版效果,如果根据图2的大胆设计,可增加倾斜变形效果。


根据产品本身引导性排版,使文字具有动感和趣味。如文字的主题字体利用粗体产生厚重感,并且带有渐变样式和投影效果,文字大小也具有主次关系,把画面的层次关系拉开,多重奏的韵律感极强。


 图3


文字在发展的过程中,也在不断经历着去繁为简的过程。


包豪斯影响了工业产品设计的思维模式,使人们在设计的过程中从以往崇尚自然,繁杂的工艺文化中分离出来,设计在慢慢萌芽,从工业产品到平面艺术,都有所体现。


画面图3中网站内容是以男士服装(正装)为主要风格,并且偏向时尚风格。


在企业的LOGO的色调中提取画面中点亮的色调,同时背景以淡色调突出服装的效果,围绕着人物的本身,周边散落着文字内容排版,视觉感受显的不呆板、不平淡、不缺乏趣味性的变化,故此,我们在版面中可安排一些交错与重叠,打破版面呆板、平淡的格局。


利用文字的首写字母利用和图片结合样式,和人物做突出效果,介绍新品文字依然利用文字大小、字体不同、文字颜色不同,用视觉斜线式视觉对比效果,把文字巧妙的结合在产品当中。

 

颜色的运用对于整个文案的表达会产生很大的影响。


使用不同颜色的文字可以使想要强调的部分更加引人注目。色彩可以使得文本不受位置的局限,加强或者减弱文本的表现强度,使页面文本的浏览产生视觉导向。


两幅Banner图利用颜色对比是版面设计中常用的设计方法,无论字与形,无处不在,或者多种文字关系交融在一起。


有主次关系,大小,长短,疏密,动静,深浅,刚柔,虚实等方式,彼此参透,相互并存。


图4-1


图4-2


如图4(两幅图)视觉的对比关系颜色和文字交织在一起,背景蓝色、黄色和红色的文字对比,黄色的圆形作为气泡突出吸引力(免单),文字字体长短疏密的对比,产品和小元素的运用手法对比,形成了很强的视觉冲击力。

 

 图5


Banner图中溶图是比较难设计的其中一种,设计过程中通过模拟真实场景进行虚构视觉效果。同样在设计过程中把握好企业的风格和特点。


图5中是一汽大众的网站Banner设计,在晴朗的天空下展馆外部展示不同款式车型效果,在色调上主色以淡蓝色为主色,视觉感亮灰色范围,提亮效果是红色系车型,为了不让视觉过于突出,所以在排版中在视觉偏后侧并视觉右侧。视觉更集中在画面中间,光源引导我的方向。


色彩统一指的是网页当中色彩色系运用的统一性,可以体现在网页中的整体色系,也可以体现在网页当中所有区块标题的颜色,整个网页界面颜色搭配。


在光源的利用是比较强烈的效果,Banner中文字也是根据建筑中红色和产品中的红色做提取色,突出重点范围。

     

 图6


刚展示图5是以室外场景搭建效果,图6主要是按照室内的光影关系搭建场景。在平面化的场景中,可以模拟立方体的盒子,腾空产品具有视觉动感性,能够让产品更有灵动感,在设计当中光影关系的细节打造,自然环境光的运用突出产品质感。搭配文字利用纤细、轻盈以产品为主要视觉。


构图的视觉美感正是虚实空间对比的作用,也就是所谓的留白。这就是最后一点在整个构成关系中很重要的一部分,留白。


图7


用好留白,任何网站的可读性与易读性都会得到改善。


如果一个页面上的文字过于拥挤,它就会妨碍舒适的阅读体验,从而阻碍整体用户体验。更多的留白使文字更易浏览,从而提升阅读体验,也更易理解。


也许留白最直接,尽管也是最简单的益处,就是突出网页中的其他色彩,使它们更加鲜艳。


这点对于吸引访客目光大有帮助,因为颜色深浅、饱和度甚至浓度都更加突出。


在现在信息爆炸的时代,白变成了一种更高尚的美,让现代人能释放压力并享受这样的美感。


正如上面图7留白被用于突出品牌内容、提升可读性与易读性、突显极简色彩时,展现出了强大的影响力。


像红色、黄色、紫色和黑色这种简单的产品颜色,能够创造出令人愉快同时吸引注意的外观,极简的用色方案,大面积的背景留白,使用户赞赏有加。


作为设计师,应该多花点心思在画面细节上。

让页面风格符合企业,色调运用具有吸引力,文字的搭配差级关系有对比性,适当画面留白保持视觉空间感,变化多样的吸引用户关注度和浏览度。

作者:橙橙

来源:UI设计师之家


— 火星资讯 —

▷电影场景还能画出来?5分钟带你揭秘电影里的大神设计!

▷12人集体入职MORE VFX! 火星时代MMT首期视效高定班华丽就业

▷8天11人270秒,火星影视人燃爆北京车展!

▷在火星学习,谁不是一边被暴击一边在努力!

▷《超时空同居》票房逆袭复联3,这40名火星毕业生火了!

▼点击阅读原文,报名咨询火星精品课程

发表
26906人 签到看排名