2020 年 13 种网页设计趋势

已发表: 2020-02-06

今年有太多的网页设计趋势,很难知道究竟什么是趋势,什么是设计界的共同话题。 Flywheel 自己的行业领导者和艺术总监 Nicholas Petersen 认为跟上当前的平面设计趋势是必须的。 “了解设计界正在发生的趋势有助于真正提高自己作为设计师的技能。”

在本文中,我将介绍 13 大网页设计趋势是什么,为什么要关注它们,以及来自业内其他领先设计师的更发人深省的建议。

以下是 2020 年 13 大网页设计趋势:

  1. 抽象插图
  2. 几何设计
  3. 极简主义
  4. 3D
  5. 可访问性
  6. 偏好设置
  7. 身临其境的体验
  8. 黑暗模式
  9. 充满活力的配色方案
  10. 等距设计
  11. 自定义排版
  12. 简化图
  13. 带图形的摄影


抽象插图

抽象插图是艺术与设计之间的完美平衡。 这是一种日益增长的趋势,因为鲜艳的色彩和抽象的形状、线条和图像创造了一种与众不同的设计。

Dropbox 登录页面的屏幕截图,左侧是蓝色抽象艺术作品。
Dropbox 登录页面截图,带有抽象插图
以恐龙为特色的抽象插图截图,里面有设计。
来自Behance的屏幕截图

几何设计

几何网页设计是今年出现的另一个趋势。 几何设计的特点是简单的几何形状,虽然它看起来很简单,但背后有很多想法和意图。 需要特定类型的网页设计师才能将简单的几何形状(如圆形和正方形)转化为故事。

一个网站的屏幕截图,页面上有一条垂直穿过的粉色丝带,顶部有文字。
RALLY主页截图
带有磁性颜色和几何形状的半透明传单的屏幕截图。
来自 Adob​​e 的图像

极简主义

如果你喜欢几何设计,你会喜欢这种趋势:极简主义。 极简主义设计是直截了当且干净的设计。 在充满喧嚣和明亮色彩的拥挤世界中,极简主义网站已成为网页设计中的灯塔。

极简主义网站设计也越来越受欢迎,因为它为访问者浏览网站创造了无缝的用户体验。

白色主页的屏幕截图,页面中心以自行车为焦点。
Motus网站截图

来自佐治亚州的设计师 Zac Moore 认为,极简主义的平面设计已经成为平面设计师可以预见的趋势。 “过去几年设计一直走简约路线; 运行得更快,以获得干净的用户体验和没有混乱。 我认为刚刚采用极简方法的设计师这样做是为了追随已经流行的趋势,并且随着时间的推移它只会变得越来越流行。”

主页的屏幕截图,全为绿色,带有白色文本,焦点是页面左侧的一个轮子。
Mixd网站截图

3D

3D 图形设计也已成为顶级设计趋势。 许多平面设计师已经开始将不同的排版、图像和抽象形状分层,以创造这种狂野、独特的 3D 效果。 这与鲜艳的色彩相结合,创造出一种有趣的设计,让人感觉它栩栩如生。

页面中央带有“广告素材类型”的页面截图。字体本身看起来模糊或蓬松,就像地毯一样
Adobe Create的创意类型屏幕截图
大部分为紫色的网站的屏幕截图。有一个动画怪物,周围有其他动画作品。
Toggl网站截图

可访问性

可访问性是许多网页设计师最近一直在讨论的话题,但比以往任何时候都更重要的是考虑并将其包含在设计的各个方面。

来自 Calibrate Media 的 David 强烈认为可访问性已成为网页设计的重要组成部分。 “它正在迅速成为大公司的标准。 随着越来越多来自各个年龄段和背景的人在日常生活中使用互联网,满足他们的访问需求非常重要。 在一些国家,例如以色列,它现在已成为法律的一部分。

除了可访问性之外,GDPR 合规性是当今数字环境中的另一个必要条件。 “除了法律原因,越来越多的用户在浏览网页时开始关注他们的隐私权。 实施精心设计和编写良好的 cookie 通知(以及实施 GDPR 标准)将为您的网站访问者建立信任和安全感。”

所有人都可以访问的网站的屏幕截图。
Wesley Mission有一个易于使用的网站、替代图像文本,甚至还有一个可访问性选项卡,您可以在其中提交有关该网站的可访问性的反馈

用户偏好设置

当今时代的偏好设置意味着现在可以在网络上利用用户的软件偏好(例如最小化运动!)。 假设用户不想在他们的 Mac 上的系统偏好设置上移动。 网页设计师可以采用该设置并完全调整体验。 一些解决方案是消除视差效果或悬停时的缩放效果。 通过这种方式,客户可以控制最适合他们的体验,并允许网页设计师为所有用户构建最佳体验。

这种趋势很重要,因为它有助于构建将用户放在首位的 Web 体验。 Flywheel 的高级产品设计师 Tyson Reeder 说:“如果用户正在触发动作,并且他们已将计算机设置为‘减少动作’,我们可以利用这一点为他们创造更佳的体验。” 苹果在这方面做得很好。

一段视频展示了 Apple 的设计如何根据用户的系统偏好进行更改。

要了解有关可访问性并将其实施到您的网页设计中的更多信息,请单击此处。


身临其境的体验

身临其境的体验和图形设计是许多人看到的另一个趋势。 在人们越来越重视他们对品牌、公司或产品的体验的世界中,网页设计师使用增强现实(也称为 AR)来增强那些身临其境的体验也就不足为奇了。

来自 Kwitelle 的 Christel 是一位创意人士,他看到身临其境的平面设计从一英里外传来,“你可以在空中感受到它。”

网页设计师将他们的设计视为一种身临其境的体验,无论这意味着设计 WordPress 网站、为品牌创建新的动画徽标,还是介于两者之间。

例如,Apple 通过为搜索更多信息或准备购买的用户创造身临其境的体验,为其新产品发表声明。

MacBook Pro 打开的屏幕截图
当您滚动时,MacBook Pro 的屏幕截图会打开一点
当您继续在页面上滚动时,MacBook Pro 的屏幕截图完全打开。
截取自苹果官网的截图

黑暗模式

黑暗模式就在这里,许多网页设计师都喜欢(我敢说,有点痴迷)这种趋势。 当设计的核心部分是黑色的,通常是黑色的,而文本、图像和其他特征是白色或其他流行色时,就会出现深色模式。 如果做得好,这会创造出时尚和精致的外观,但它是平衡的好线。

使用暗模式的网站的屏幕截图。使用的主要颜色是黑色作为背景,橙色和白色用于文本和其他元素。
图片来自 Anamol Maharjan Dribbble

Andrew Cacho 完全接受了黑暗模式的趋势。 “这是为了平衡在网站上创建空间的需求与遵循大型科技硬件公司在其原生操作系统中设定的趋势之间的紧张关系。 活力回归,彰显个性!”

其他设计师同意移动操作系统界面已经接受了这一趋势。 Proxima 的 Matt Staub 说:“随着黑暗模式接管移动操作系统界面,设计体验将随之而来。 但时尚、鲜艳的色彩会穿透黑暗。”

Spotify 页面的屏幕截图,在深色模式下,专辑和艺术家图像为彩色,文本为白色。
来自 CloudApp 的图像

充满活力的配色方案

说到时尚、鲜艳的色彩,让我们来谈谈充满活力的配色方案。 网页设计师正在拥抱大胆的色彩,通常使用高度饱和的颜色搭配深色调,使他们的设计具有简单、多彩和温暖的感觉。 霓虹灯和荧光灯等不同的鲜艳色彩组合有助于设计在喧嚣中脱颖而出。

以粉色为主色的页面截图。
来自 Cowboy.com 的截图
具有不同鲜艳颜色(如蓝色、霓虹粉色、电蓝色、黄色、白色和黑色)的页面屏幕截图。
喵狼官网截图

等距图

拍摄照片时,很容易理解使用相机的不同视角和角度可以创造不同的外观、感觉和情感。 设计等距插图是一个类似的概念,因为这些设计允许您的主题有更多的视角。 作为设计师,您可以使用等距插图来查看设计的顶部、侧面或任何角度。

等距设计的屏幕截图。设计是从侧面看的小型建筑。
Psych X86网站截图

等距技术还允许您以更少的混乱显示更多甚至更多的小细节。 能够以 3D 形式显示空间会打开以前不可用的空间。 有更多的空间可以放置东西,而不会看起来超级混乱和强迫。

等距设计的屏幕截图。从远处看,这是一个小城市。
编年史截图
Flywheel 电子书的屏幕截图,这是一项网页设计业务,上面有笔记本电脑、图表和插图。
网页设计业务报告截图。 在这里阅读。

自定义排版

为了创造更具创新性的设计,网页设计师正在探索展示排版的新方法。 结合不同的创意元素来转换文本是大多数人看到的趋势。

我们的内部平面设计师 Rese 喜欢将自定义排版融入他的设计中。 “创建自定义类型很好,因为它是一种个性化和管理设计中某些内容的方法,这些内容通常仅限于字体库中可用的内容。”

黑白的自定义排版。文字以独特的字体显示“Super Fly”。
飞轮设计的自定义排版示例

虽然自定义排版是平面设计中最古老的趋势之一,但它仍在不断发展。 “它已经从漂亮的手工橱窗标牌变成了你可以在 Dribbble 上找到的病态图形”。

自定义排版的一个示例,一些使用简单的字体,而另一些使用草书、独特的字体。
图片来自艾伦·彼得斯 Dribbble

准备好开始修改自定义排版了吗? Rese 提供了一些很好的建议。 “如果你和我一样发现定制类型有点令人生畏,那就去旧类型练习并获得灵感。 我发现只是练习和查看旧脚本对我帮助很大。 去车库销售和古董店,拍照,并尝试重现你所看到的!”


简化插图

简化插图是两种截然相反的设计的平衡。 你有一个通用的方法,通常是一个 SVG 插图,由来自不同行业的一群人与技术交互,并用彩色斑点锚定场景。 另一方面,你有一个看起来非常松散的手绘插图,在执行时更加抽象和解释性。

Mailchimp 主页的截图,在黄色背景上有一个简单的黑色插图
Mailchimp 主页截图

Flywheel 自己的内部平面设计师 Bryan North 认为这是今年的设计趋势有一个重要原因:“如果做得好,它会唤起一种非常人性化/非常平易近人的感觉”。

对于大多数设计趋势,很难确定原件的来源,无论是公司、品牌还是特定的平面设计师。 然而,Bryan 认为 Mailchimp 在 2019 年的重新设计在这一趋势中发挥了重要作用。 “目前似乎有很多品牌在追逐 Mailchimp 的审美。”

Mailchimp 主页的屏幕截图,其中包含更简单的黑色插图。
Mailchimp 主页截图

“我喜欢这种趋势的地方在于,它有很多人(他们通常认为自己首先是平面设计师)用插图测试他们的勇气,否则他们可能会被它吓倒。 从这项事业中诞生了很多很棒的插图,也有一些非常糟糕的插图。”


带图形的摄影

摄影 + 图形 = 天作之合。

这可能有点夸张,但设计师和摄影师都在采用这种趋势并用它来展示自己的作品。 捕捉照片并通过添加动画和图形将它们提升到一个新的水平是一种趋势,即使是我们飞轮公司也已经接受了。

Flywheel 的内部摄影师 Kimberly 喜欢用图形将她的照片提升到一个新维度的想法。 “与我们团队的设计师合作以确保最终结果是最好的,这令人兴奋。 一些额外的计划与使用设计增强形象相结合,最终意味着最终产品更加有意。”

我们博客上一篇文章的截图,其中有一个 Flywheeler 坐着思考,身后有图形和草图。
我们博客上一篇文章的截图,布局

无论是用于我们的博客还是报告,我们都喜欢通过添加动画和图形来转换图像。 这个设计是一个引人注目的设计,并且必须包含在您的设计工作中。

一个人坐着打字的图像,上面有一个图形叠加层,上面有一个图表和“80% 的网页设计师在大多数项目上需要押金”字样
图片来自网页设计业务报告

结论

虽然了解设计趋势是什么以及如何将它们实施到您的工作中很重要,但同样重要的是要注意,仅仅因为一种风格或模式很受欢迎并不意味着它就是您问题的正确解决方案。

“设计师的工作是解决问题。 探索、发现、观察并从其他设计师的工作中学习,然后确定解决问题的最佳方案。 它可能是其中一种模式,也可能是您的设计过程中完全独特的东西。” -Nicholas Petersen,飞轮艺术总监

“一种永远不会过时的趋势是独创性。 你创造的越多,你就越能找到适合你的东西,然后变得非常非常擅长。 最终,您制作的原创作品将引领新潮流! ”

网页设计报告业务

我们询问了 1,000 位领先的自由职业者、代理机构和创意人员,了解构建网站、构建客户服务和按时(全额!)获得报酬的最佳方式。 从那里我们处理数字,挖掘洞察力,并打包一份漂亮的报告,这样您就可以停止猜测并开始扩展您的业务!

从本月开始,将您的网页设计业务提升到一个全新的水平。 从像您这样的其他设计企业那里获得见解,并开始为您的服务收取有竞争力的费用!