2017年的网页设计趋势, 你了解多少?

网页设计 采集侠 浏览

小编:对于设计师来讲,追随潮流是他们工作的重点。许多设计师甚至会认为带有#old标记的东西是一种耻辱,就好比不符合

  【IT168 评论】对于设计师来讲,追随潮流是他们工作的重点。许多设计师甚至会认为带有#old标记的东西是一种耻辱,就好比不符合潮流的东西会让整个项目都变得没有价值一样。

  其实我们是有利于追随这个趋势的,像Awwwards, FWA或者CSS等网站的设计奖可能会激励设计师创新,养成新的设计习惯。通过创新可以了解新的视觉世界,并与图形语言进行整合。提高技能的方法之一还包括欣赏别人的作品,同时也能让你的设计保持最新的趋势。

2017年的网页设计趋势,你了解多少?

  在过去的一两年中很多设计师都试图摆脱简单、封闭的作品。越来越多的作品开放,剪辑的作品层出不穷,这似乎看起来是混乱的。之前崇拜的电网也渐渐失去了重要性,规则也逐渐有意识的被扭曲,内容被转移。

  在这个过程中扮演重要角色的是Canvas和WebGL,现代的项目往往比最简单的项目有点混乱而且不太直观,但是对用户来讲却会有很持久、强烈的印象。

  那么,2017年的网页设计趋势到底是怎样的?

  开放组合

2017年的网页设计趋势,你了解多少?

  现在设计界还是被封闭、对称和静态组成主导。2016年有很多网站都偏离了这种风格,在屏幕外一些松散的元素开放组合越来越受欢迎——这样的例子可以在romainpsd.com、durimel.io以及booneselections.com都可以看到。这些网站上的部分元素给人的印象是他们依然存在于超出显示器的边缘处。

  不对称

2017年的网页设计趋势,你了解多少?

  2016年统治了设计行业很长时间的对称也被打破,许多设计师创造出左右不对称的布局。你可以查看culture.pl、dada-data.net和durimel.io中的实例来作为参考。

  多样性

  设计师创造了更多的动态成分,大量的交叉对角线(参考poigneedemainvirile.com和vanderlanth.io网站),或是基于有机形状更复杂的(residente.com/en)/(helloheco.com,helloheco.com)。

2017年的网页设计趋势,你了解多少?

  “混乱”的布局

  在过去的一年里,很多设计师都有意识的故意摆脱简约的创造方式,希望有更大的自由和更加不严格的设计方式。某些时候人们会厌倦创建简单布局的元素。

  然而从2016年开始分析项目时,混乱的布局就开始显而易见了。布局任然基于形式、颜色、纹理和尺寸等经典的对比,改变的是不同元素的位置和元素之间的依赖性与和谐性。尽管这些混乱元素是单一主题区块的一部分,但它们是分开的,并且距离很远。它们与容器的边缘没有对齐,并且具有不同的填充效果。

  有些几何图形悬浮只有一个装饰的目的,它具有重叠元素的特性。文本的部分与图片重合或者图像彼此重叠,这在网站e03.epicurrence.com和melville-design.com与olivierbernstein.com上都可以看到。

  这也是破坏典型的简约和谐风格的案例。大标题与精致的装饰和分隔符形成鲜明的对比。

  更加丰富的背景和图案

  越来越多的网站中使用了更加丰富的背景和图案,例如小破折号、条纹或点等。

  特别常见的是网格图案被视为布局中其他元素的“框架”。这些元素以视差原理在网格上移动,并且以混乱的方式排列。

  网格布局

2017年的网页设计趋势,你了解多少?

  使用网格模式的第一个网站之一是werkstatt.fr,这个网站没有使用特征动作。

  在klimov.agency、brand.uber.com和maisonullens.com网站上显示了一种略不同的网格模式。在这些情况下,它具有非常具体的功能——元素的所有运动都符合逻辑。它可以使非常规的决策合理化,并提供问题的答案。例如“为什么图形的边缘与按钮的边缘不合?”,它创造了一个节奏,同时证明了违规的行为。

  在freebies.lorenzobocchi.com网站中的内容已经被松散排列,涉及到网格时,类似于前面提到的e03网站。

  装饰细节

  细节最近才开始改变,从简约的、原始的表单跟随功能逐渐脱离出来。还有更多的元素只具有装饰功能,悬浮的几何图形或其碎片是常见的。线性、摇摇欲坠的图标与说明的内容也会略有分离,下划线和分隔符正在转移,更多信息可以查看bigyouth.fr或kikk.be。

  按钮被创建为中间可以插入文本的粗糙矩形。它们通常设计是柔和、偏移的破折号,更多信息可以查看dahllaw.dk或yasuhiroyokota.com。

  段落之间的平滑动画

当前网址:http://marinahousebkk.com/tutorials/web/2019/0422/388.html

 
你可能喜欢的: