技术开发 频道

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

  【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。

  段落之间的平滑动画

  谈到网站动画其实设计师并不新鲜。你也不能说他们与最低限度的做法不符。然而,Canvas是网页设计中更大可能性的组成部分。新的机会允许设计师做一些不同创新,因此总能吸引人。

  动画的丰富性导致消除了页面部分的严格划分。一个网站在滚动期间顺利地改变,内容逐渐被替代为柔和的动画。这些过渡的顺序正在变得越来越深入。动画不仅仅是内容块之间的一些随机效应,而且在预定时间出现每个元素的分段叙述(Nationalgeographic.com,stylenovels.com)。动画是网站创建时一部分,不仅仅是一个随便添加的细节。

  有趣的动画丰富了简单的布局——添加一个新的值,并构成页面的唯一性。它们是整个项目的实质,也是在网站上创建漂亮、流畅的结构的重要组成部分,更多信息查看Cuberto.com,lookbook.wedze.com,skarv-fashion.com或corentinfardeau.fr网站。

  丰富的排版

  趋势的变化也可以在使用的字体中看到。最近整个互联网由简单的新奇怪风格主导,如Helvetica、Roboto、Lato或Open Sans。新闻头条的设计具有更多的新奇装饰,而段落才被设计成更简单的风格。另外Serif字体不经常使用。

  在过去的两年中,事情已经开始改变。设计师开始大胆地使用不同种类的字体。现在设计师们更愿意使用衬线字体与非衬线字体。

  网站中的排版中会发生很多的变化——文字是动画的,而且被分解成个别的信件,各种各样的效果,图像和视频。

  更强大的技术能力和更勇敢的决策会使得网页印刷多样性增加。

  几何字体

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

  无衬线几何字体越来越受欢迎,例如Futura、ITC Avant Garde、Proxima Nova或Google Library - Poppins和Montserrat提供的经典作品。这些字体比“隐形”新奇的字体更加独特。

  字体

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

  使用衬线字体是非常常见的,不仅包括段落或签名中,还包括在大标题中。具有较大装饰价值的字体特别常用,例如在duhaihang.com或jennyjohannesson.com网站上。引用Bodoni或Didot的其他字体也很受欢迎。

  等宽字体

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

  使用通常与打字机相关的比例字体是一个新奇的东西,这些可以在像admirhadzic.com,cuberto.com或designembraced.com这样的网站上看到。

  对比字体配对

  在2016年,形成对比度较强的和平配对文字中脱颖而出。这种对比字体通过文本大小之间的高对比度,加强了表达的组合。大型和装饰衬线字体与简单的几何字体组合,就像几何字体的标题与段落中的衬线配对一样。

  大型排版作为关键视觉的一部分

  一个非常酷的、经常被选择是使用非常大的尺寸在KV的文本。它在标题和其余内容之间创建了非常强大的对比。这些例子可以在ourroux.com、femmefatale.paris或monsieurcaillou.com上看到。

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

  刻字被当做初始形式的装饰,例如在corentinfardeau.fr或nurturedigital.com上。

  此外,在网站jennyjohannesson.com上可以找到一个明显的例子,其中使用了衬线字体Goku的装饰。

  对排版的附加效果

  排版和图像是电影或动画之间的强大整合。个别部分是内部一致的,排版与背景和其他元素相互作用。目前,设计师正在创造所有元素之间的有趣的关系——将印刷版画成背景、动画化等。

  段落中的字母大小

  我从印刷设计师开始工作时就有用10px字体的习惯。不过,我很快意识到,在网络世界中,14px才是最可读大小的文字。

  目前,我们可以注意到使用更大的字体,这在使用衬线时尤其受欢迎。

  拥抱黑暗的一面

  2016年,设计师使用了各种颜色。但是,大家可以注意到颜色样式上有转向淡色调的微妙趋势。

  创建完全白色的网站,更倾向于使用灰色、纹理或图案的灰度,并不太受欢迎。现在,黑色或黑色渐变填补了背景,形成了一个阴沉的阴影,这样样式的网站越来越普遍。

  尽管如此也很难预测今年这一趋势是否会大幅增长。然而,颜色是品牌的视觉识别的一部分,所以很难期望它们彻底的改变。

0
相关文章