网站设计之怎么通过一个简单的案例,理解视觉设计原则

不知道多少人和我一样,看到类似“三大配色原理”“七大流行趋势”“十大设计原则”这种干货类文章,都恨得牙痒痒,不看后悔,看了还是晕晕乎乎,什么也记不住。
但是下面小编想要跟大家分享的这篇文章,颠覆了我之前的看法,一起来看看设计师josé torre是怎么通过一个简单的案例,非常浅显易懂的解释基本的视觉设计原则的,一点也不干~
网站设计
点线面万丈高楼平地起,无论是极简还是繁复风格,一个小图标还是一张大海报,点、线、面毋庸置疑是设计的基本组成要素。
在几何学中,点可以看作x轴和y轴的交点,z轴出现就代表这是个三维空间,今天主要和大家探讨二维空间中的点线面。
点线面-形状
两点确定一条直线,一条线由无数个点组成,三点确定一个平面,就能得到一个形状,比如上图中,出现的三角形,我们可以在这个基本的三角形上做更多的演变,比如添加效果,填充颜色……所有的设计都是从最简单的元素开始,然后慢慢叠加效果。
颜色
可见光谱
人类的双眼能看到无数种不同的色彩,我们从小就学会赋予某些颜色特定的意义。
例如交通信号灯,我们都知道红灯停绿灯行黄灯警告,面对不同的颜色我们会产生不同的条件反射。
然而在我看来,这不是颜色固有的含义,而是来源于我们后天的学习。这些意义会根据我们各自的文化,所处的时代或地点发生变化。弄清我们的设计对象,才能找到适合的颜色,并赋予颜色更多特性与意义。
如图,添加了颜色和动效后,这个三角形,似乎变得更有趣了……
字体排印动图从一个三角形到a
字体排印是我认为最重要也是最棘手的设计要素之一,文字的呈现方式往往比内容更受人关注。
一个合适的字体可以使平淡无奇的内容摆脱平庸。道理大家都懂,但是做起来难于登天。
要知道,很多字体都有各自特定的用途,比如,一些字体适用于长篇文本的阅读,一些适用于大标题,一些正式,一些有趣,一些甚至带有讽刺意味,我们完全可以先深入了解,再根据自己的喜好来选用。
现在已经有成百上千种字体供我们选择,除非你追求特异或创新,那么我还是建议沿用经典的字体。
如果遇到需要自己设计的情况(这很有挑战性),需要谨记的是空间平衡。
空间空间的平衡原则是,要么牢牢遵守,要么大胆打破,尤其是排版。在维持元素之间的关联性的同时,需要给他们保留足够的呼吸空间,也就是我们常说的负空间。(字体本身是正空间)。
动图调整字间距
负空间需要纳入设计的考虑因素,过度的留白使设计看上去像个半成品,空间少又会使画面拥挤。
怎样才能找准正负空间的平衡点?这时就需要把握好平衡、韵律和对比
平衡、韵律和对比平衡、韵律和对比为我们的设计注入活力和吸引力。
视觉重量是平衡的关键。比如说一个右下角黑色块会使画面产生视觉下沉,要么补偿这个便宜,要么移动色块的位置。
动图调整字体的视觉重量 创造韵律和对比
平衡感和对比兼具,才更和谐,更有韵律,更能吸引观众目光。
在这方面能帮助你的是比例。
比例动图调整字体的大小比例
不是所有元素都同等重要,为了表现出优先级和韵律感,就需要用到比例了。
别忘记前面提到的空间原则,不要单单为了放大而放大。报纸就是个很好的例子。
拿到一份报纸,我们首先注意到的一定是短小精悍的大标题。可以快速浏览他们来决定是否深入阅读某篇新闻。其次是副标题,为我们提供更多的相关信息。
最后就是适合长篇阅读的最小的正文字体。因此,我们在决定优先级时,总是需要站在观众的视角来思考我们的设计。
说到报纸,又让我想到了网格。
网格大家都玩过俄罗斯方块,堆积是为了清除。
借助网格使元素之间产生关联
当你打开一本书或一张报纸,没有网格,但它们实则暗中遵循着网格的设计准则。网格使版面看上去更整洁有序,观众也更容易摄入信息。无论你的设计有多么超乎常理,也得在混乱中寻求秩序。
对齐的重要性无需多说,通常,人们习惯于从左向右、从上到下地阅读,往往使中部和底部的信息难以被摄取。因为这个因素,我个人偏爱左对齐,不过有时候阅读顺序还是取决于我们的设计对象。
框架框架式构图是摄影中一个重要的方法,也同样适用于视觉设计,它对整个版面起着决定性的影响。
动图重
构并添加一些其它元素
我们需要舍弃无用的信息,用框架式的构图将观众的焦点引向重要的内容。
如果还是感觉缺了些什么,那么你可以尝试添加纹理和图案。
纹理和图案动图尝试噪点纹理
纹理和图案一般出现在饰品上,用上他们会使我们的设计更加生动有趣。
纹理有立体化的功能,曾经有段时间十分流行。它一般不被考虑在构图里,当我们需要打印我们的设计时,只需选择正确的纸张,再加上一些斜面、浮雕或uv光油。(译者注:uv光油,喷涂或滚涂在材质表面之后,经uv灯的照射,材质表面由液态转化为固态,从而硬化,耐刮耐划,表面光亮,美观、质感圆润。)瞬间使作品高大上起来。纹理一两个就够了,物极必反。
很多图案都是重复的,这时也可等同于纹理,一般用来补偿过多的负空间,使画面看上去不那么乏味。
最后,我想说的一点,也是被我视为视觉设计的灵魂的一点设计理念。
设计理念动图一个创意灯(陈词滥调了 我知道)
视觉概念关乎我们的设计理念,也就是你的作品想传达的意思和深层含义是什么。
这是一个好的设计和一个你随便从网上down下来的一个模板的本质区别。
想一想,你在设计之前有确定一个视觉概念吗?你的设计素材有正确传达你的理念吗?如何借助这些理念将每个素材,恰当的结合在一起?选择什么字体最合适?
如果觉得自己的概念很棒,那就坚持下去,把这个想法实现,卖给你的客户、老板或任何人。
跟随流行趋势固然很好,但我真的相信一个好的设计不会跟随潮流,而是创造潮流。
结语以上是我认为一个好的设计需要遵循的10个原则,其中第十条是我认为最必不可少的。
你可能有一个好的想法,但你得学会如何将这个想法通过我们的设计很好地传达出来。大家都说不能因为封面来判断一本书,但实际上很多人都是靠封面来判断一本书的。如果一本书的封面都不足以吸引读者,那又如何让读者有兴趣挖掘它的深层价值?
其实还有很多重要的原则我没有单独列出来,比如弄清设计对象、实现想法的途径,因为我认为这些都是视觉概念的重要组成部分,产品需求决定项目成败。
这些原则相信大家早已明白,但还是希望我这些简单的解构,对大家能够有所帮助。
上一个:上栗做网站知名的公司,大的建站公司
下一个:营销型网站实质就是从浏览者消费者的角度出发考虑问题
上栗网站建设,上栗做网站,上栗网站设计