方框/方形元素在设计中的运用(1)

来源:网络   作者:热心网友   发布时间:2016-12-20    浏览次数:672

方框/方形元素在设计中的运用


推荐阅读》《网页设计中的破图法设计技巧分享》《板式设计中的格式塔原理教程》《排版的技巧之—短线的用法


常常听见大神说设计不需要方方正正的,这样会显得死板,没有创意。LOW…等等,

其实不然~ 在我认为每一种元素,只要在对的环境中,去运用。相信会出现让人耳目一新的效果。


长辈常说做人需要方方正正,其实我们的设计也一样,只有方正才能打好根基,屹立而不倒。

比如我们身边使用的电脑,冰箱 房屋架构等等,都离不开方形的支持杂志中常常会让方形元素融入进文字或者图片中间,去突出或去修饰它们。

随着现在技术越来发达,设计师也会将杂志中的一些元素,融入到网页设计中去。让网页设计更加有新意。

下面我们就来说下方形方框在网页之中的运用。



作用


01:分割


我们已知的分割的元素,主要是线 和 面 ,其实方形/方框也是具有分割的作用。在设计中运用的话会让你的作品别具一格。

下面设计作品 画面中出现了多个文案信息,这么多的信息集中在一个画面中,如何让它们

变得有主有次呢,为了让用户清晰的阅读到每一个单独的文案信息,所有设计师加入方框的

元素,利用大小对比的关系,有效的避免了内容的冲突和杂乱 。这里的设计通过加方框的元素,使画面中的文字也具有一定的强调作用。


ccfe58079461a84a0d304f89a00a.jpg


这块设计也是具有相同的处理方式


4a6458079499a84a0e282b4fce65.jpg


02:强调

如何让文字内容在众多元素里面突出。 要么弱化其他,要么强化自己,显然下面设计中为

了让用户第一视觉就能看到表达的文字信息,所有设计师利用了方框的元素进行了强突出。


8d4758079603a84a0d304fb9ce16.jpg


下面的海报设计,也是运用到了方框的元素,把用户的视觉焦点聚焦了起来。既强调了重要信息也不丢失

画面的美感和创意。


8ab3580796bfa84a0e282b223b8d.jpg



03:修饰

当我们的在设计一个海报,或者网站页面中的一段文字的时候,有时候画面太单薄,一些设计师会用其他的方式进行修饰,但是也有设计师利用方框,或许并不一定是完成的方框,有残缺的 有截取了方框中的部分元素去作为一种修饰。这样整个画面一定会别具一格。下面来看设计案例吧。


下面是一组平面VI的作品,本来是一个平平淡淡的名片,但是设计师加方框的一角进行修饰,

瞬间这个作品变得十足的创意感觉了。


8c07580796f9a84a0e282bb6d477.jpg

82385807971ca84a0d304fffa39f.jpg


相同的处理方式。


下面网页设计中,原本标题在大面积的留白中间,变得单薄,导致页面的中心不稳定

所以设计师在标题上增加了方框的元素,进行辅助修饰作用 ,有效了丰富了标题的展示效果。


a5ee58079854a84a0d304fa4d3bd.jpg

04 :色块对比让版面变得有血有肉


这里使用色块形式,主要出现的在网站布局方面,设计师利用方形的色块让网站变得生动创新,使网站在布局上面变得有节奏,有主次,逻辑清晰。下面我们来看看这些设计案例。


下面是一家家具类的网站,设计师利用方块的大小来做对比 。使得整个画面中间的元素组织起来变得清晰 有条理,让用户在视觉上变得有层次感, 使得整个版面变得简约清晰。


77be580798bfa84a0d304fc3f0c9.jpg


下面这个建筑公司的首页,采用了方形的元素进行大小层次感的相互结合起来

让整个画面变得极其有稳重感,让原本网站上复杂而多的类容,变得条理清晰,干净简洁。同时在画面的板式创意也是独裁新意。


f89b58079b7fa84a0e282b74840d.jpg


05:信息引导的作用


在复杂而多的海报或者网站架构中,利用方框进行信息引导是非常有效而且新颖的表现方式

以下网站是左侧一个男模特的网站,整个banner采用了红色调,设计师为了让用户快速往下浏览,所有大胆的添加了红色系的方框,有效的引导了用户的视觉,从上而下的浏览,同时

使得整个画面不会出现头重脚轻的问题。上下得意均衡。另外这样的处理让整个版面设计

上更加新颖,使得作品脱颖而出。


右边是阿迪达斯的一个品牌网站,设计师利用了方形的元素作为视觉引导,将用户的视觉一步一步的从引导下去

了解他们的全部商品。


058558079c68a84a0e282b60c536.jpg


下面一组时尚的海报设计,这里将文字利用方形的规律进行引导排版,让用户有顺序的阅读。


c4fd58079fb4a84a0d304fa57580.jpg


06:让文字之间相关联


下面海报设计,如果按照正常设计师的话,对于文案的处理方式,肯定会根据文案信息以及海报架构 进行分散拍版设计。这样的处理方式,对海报的画面要求会比较高,如果海报比较乱的话,哪么文案的识别性就会降低,哪么为了解决这些问题,设计师选择了方框的元素,利用方框讲文案信息关联再一起。然后再利用方框的大小,根据文案内容的主次进行合理的组织分配。这样不仅让视觉上的到别具一格,而且也降低了画面上其他的元素对文案内容的干扰。让用户第一视觉了解到海报需要传达的信息。


8f0f5807a049a84a0e282b4ea38a.jpg


下列海报设计中也利用了方框的元素,让文案信息相联组织在一起。通过改变方框的

大小,来突出文案信息的主次之分。视觉上给用户是舒适的体验,画面也会让人难以忘记。


febf5807a1dea84a0d304f65b178.jpg


如果我们在设计中充分利用上述几个表现方式,相信我们的设计一定会在众多中间脱颖而出。所以设计优秀的作品并不难,难的是你去发现优秀作品的规律。当然还有很多点值得我们去发现~


123共3页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:版式构图

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/5459.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通