2019年的20个网页设计趋势

96
风吟且寒
3.1 2019.02.15 02:14 字数 7640
作者:约翰摩尔威廉姆斯

设计师有一种......焦虑......与趋势观念的关系。一方面,跟随人群感觉不对 - 毕竟,除了其他人正在做的事情之外,创造力是不是做了什么?对于这种思路,了解什么是时髦的唯一价值就是知道你在推动什么。当然,你不能简单地做出与趋势相反的事情。但是,了解趋势是什么使得更容易巧妙地评论和/或批评它们。

另一方面,有一种观点认为“创造力就是知道如何隐藏你的消息来源” - 这句话通常归功于爱因斯坦,虽然更可能是幽默作家CEM Joad创造的。(适当的,没有?)

无论哪种方式,都不难知道什么是时髦的。只需将眼睛从智能手机上抬起,然后环顾四周 - 或者不要!

重要的是了解趋势的出现和采用的方法和原因。因为在一天结束时,趋势有很多可以告诉我们关于我们的文化时刻:我们喜欢什么,我们讨厌什么,我们想要走向什么。我们越接近理解这些东西,我们越接近其他人的头脑 - 同情他们。而且,真的,要了解自己。

毕竟,当未来的艺术史学家,时尚评论家和网页设计师回顾我们当前的时代时,他们所看到和评论的将是我们今天最重要的趋势。当他们讨论20年代的美学时,他们真的会讨论什么是时髦的 - 以及是什么逆势而上。

因此,趋势正在形成。 

考虑到所有这些,让我们看看未来的历史学家今天会说些什么。在一些现代品味制造者的帮助下。

我们的第一个贡献者是Zack Onisko,@ edbbble的首席执行官,酷爸爸,吉他noodler。

1.三维图示

资源

正当你认为未来趋于平淡时,像Pitch和Stripe这样的品牌正在以一种新旧的插图形式投入品牌重量:3D。 

不满足于Slack推广的剪裁插画风格,设计师们希望为图形添加深度和逼真度,以模糊数字和物理世界之间的界限。 

从某种意义上说,这会增强数字产品与人类之间的对比度,即使它将它们组合到人们可以掌握和操纵数字元素的虚构空间中(如Pitch的英雄部分中的图形和图标)。你会情不自禁地想到Facebook的真正破坏是它使我们及其用户进入产品的方式,并且想知道设计师是否潜意识地推翻这一观念。

当然,如果是这种情况,这感觉就像是一种渐进的演变。这些设计并没有给人们带来他们的人性,因为他们将平面插图渲染成卡通片。

考虑到这一点,也许Stripe更现实的信用卡动画提供了未来的一瞥,物理和数字可以这样呈现。 


2.从俏皮的文字标记到严肃的标志 - 也就是品牌标识的Helvetic化 

在2018年,我们看到几个高度可见的品牌从令人愉快的古怪品牌身份变为更多...... 咳咳 ......预期......无衬线。

或者,正如我想说的那样:所有品牌标识最终都会产生Helvetica版本。 

左边是Old Marketo标志,右边是新的。来源

可以说是最合适的品牌重塑:左边是MailChimp经典,右边是Mailchimp 2.0。请注意套管的变化!来源

优步这个我们喜欢在左边讨厌的品牌,优步试图摆脱它丑陋的过去。来源

当然,我们想到的三个品牌都没有直接进入旧备用品。其中一个 - Mailchimp - 朝着一个诚实地感觉适合一个品牌的方向发展,这个品牌将独特的声音和俏皮的品牌资产作为其营销的基石。

尽管如此,对于这些公司中的每一家公司而言,品牌重塑都可能让人感觉有点过于熟悉的演变,即你不能不公平地称之为沉闷乏味的社团主义。 

也就是说,你不得不怀疑这种从可识别的古怪到普遍无声的转变是否与认知流畅的概念有关:我们对之前经历过的这种观念最为满意。 

世界上最大,最熟悉的品牌都拥有无衬线标识,毫无疑问,朝这个方向迈出的一步被视为公司成熟的标志。从这个意义上讲,这是一种我们希望一次又一次看到的元趋势,2019年不太可能是例外。


3.概述类型

像任何设计驱动的品牌一样,我们在Webflow上都是排版的忠实粉丝,所以我们总是在寻找文本中的新趋势(请在下面查找更多内容!)。 

因此,当Zack在概述类型中呼出新兴趋势时,我们跳了起来,看看字形中的新东西对我们来说是什么。事实证明 - 它是空的。

资源

资源

有一种难以捉摸的东西,这种半文,一半的文字立即吸引并盯着眼睛,要求你遵循字形到他们的自然结论。这使得它成为一些非常方便的技术,可用于一些令人难忘的品牌。

在一个厚重的无衬线字体主宰品牌的世界里,视觉上更轻盈的字体肯定会捕捉到传统的感觉 - 但不同。这最终是任何新品牌所需要的:感觉它既具有革命性值得信赖。


4.野蛮主义的持续上升

我们去年说了,我们今年又说了一遍:

未来将是残酷的。 

(太真实了?我知道。抱歉。) 

如今,野蛮主义的近脸美学似乎特别具有吸引力。无论是作为一个自然钟摆摆脱最近主导网络的“干净”和“极简”风格 - 拒绝百万品牌的声音和插图的可爱友善,面对所谓的“中指”同质的网络,“或者是对网络日常超现实的事实和虚构的混合的抵制行为 - 不可否认的是,野蛮主义已经脱离了设计的亚文化,进入了完全烙印的聚光灯。

需要举例?我们抓到你了:

Asana“设计尖峰”的海报概念。

它超越了内部会议海报和迭代概念。Squarespace最近的重塑品牌通过纽约市的坚韧视觉审美和傲慢的个性来接受野蛮主义:

仍然来自brand.squarespace.com

野蛮主义的持久力表明设计趋势的出现和采用的一个有趣的方面让我想起90年代后期的流行朋克现象(这是为了约会自己!):无论趋势如何,无论多么“反叛”或“在你的脸上“看起来乍一看,它可以而且将会被选为热门市场。从“亚文化”趋势到主流支柱的增长可以延续多年。

尽管我已成为大胆开拓性野蛮主义试图推进的粉丝,但我会问设计师一件事: 

记住,,还有人在那里谁发现充满了令人目不暇接,零散型和颜色闪烁的狂热的动画非常迷惑

设计,像任何其他创造性的追求,并不一定适合每一个人所有的时间-但请记住,如果你选择在你的设计工作这样的事情,你决定,你的工作是不是为那些谁将会发现它令人目不暇接,令人作呕,并且势不可挡。

但这些东西对野蛮人的设计来说并不是必需的。如果您希望创建一个关于野兽派美学的可访问性,请查看David Copeland的野兽派设计指南,它提醒我们:

默认情况下,所有屏幕和设备都可读取按预期使用HTML且没有自定义样式的网站。只有设计行为才能使内容的可读性降低,尽管它可以使内容更多。

大粉红箭头矿。 


5.更多样化,反传统的插图风格

在她对Slack工作的惊人细节和令人着迷的案例研究中,插画家Alice Lee提醒我们:

当我们超越我们的直接同行,竞争对手和行业寻求灵感来源时,真的很棒的事情发生了。

虽然很容易看到Alice的工作在SaaS产品公司和其他创业公司之间开启了一种越来越同质的说明风格,但是除了Alice以外的其他设计师在其他领域挖掘丰富的工作环境并不需要花费大量时间。

例如在Medium和Intercom上探索的photocollage风格

Medium的登录页面向您介绍了他们独特的编辑插图风格。 

请注意在文本内容中加入野兽派重复。

但我们也看到人们受到造纸工艺物理性的启发: 

由Outcrowd提供的纸空间

三维化采用Alice的大多数扁平剪裁风格: 

纸船通过加SHIR

在丰富多彩的物理/数字景观中,例如CrowdRise当前主页中所见: 

在所有这些中,不容易看到Alice Lee为Slack工作的回声 - 她的声音已经成为现代设计时代精神的一部分。但是他们每个人都以有趣的方式扩展自己的声音,展示了向外看其他人正在做的事情所固有的创造潜力,并且即使试探性地开辟了你自己的踪迹。

我们甚至看到设计师采用更抽象和超现实的方法来说明不太具体的想法,比如保持斗志: 

贾斯汀特兰的“ 如何保持斗志 ”的illo。

或“生命周期营销”: 

作为一个抽象的艺术爱好者,我非常期待看到更多富有表现力的,暗示性的作品在网络上弹出。 


6.更具冒险精神和复古风格

虽然标志设计工作可能会继续趋于同质化,但我们和Zack 看到了一些更古怪的选择,例如Mailchimp采用了着名的Cooper Black字体(Tootsie Roll成名!)作为其品牌字体:

摘要与Grilli Type的America Mono一起摇晃着厚厚的Vesterbro Black(以及Regular和Heavy): 

在巴勃罗·斯坦利(Pablo Stanley)最近的插图库(充满了爱丽丝·李的回声!)中,令人愉快的胖乎乎的RecoletaHumaaans

我们在2018年宣布了衬线字体的文艺复兴时期,但似乎2019年可能会把它更奇怪,更怀旧的脚向前推 - 至少在头条新闻中。上面的每个复古面都具有完整的重量范围,使其成为编辑工作所需的灵活性的完美选择。

谢谢你的趋势,Zack! 

我们的下一个贡献者是Sacha Grief,一位居住在日本京都的设计师,开发人员和企业家。你可能从他精彩的(和最小的)精选网站和时事通讯,补充工具栏Vulcan.js中认识他。

他非常友好地做了他自己的简短写作,所以这是Sacha的趋势列表,用他自己的话说:


7.包容性设计

关于可访问性的重要性已经写了很多行,但是将它重新命名为“ 包容性设计 ”,并且你有一个全新的无人认领的流行词来撰写书籍和论文!

除了开玩笑之外,考虑各种用户的需求从来都不是坏事,如果需要一个时髦的概念来帮助我们做到这一点,我会接受它。

编者注:正如您在上面的屏幕截图中看到的那样,包容性设计的倡导者通常会诉诸于包容性/可访问性设计如何帮助品牌实现业务目标。逻辑是合理的,但他们不应该这样做。

为人们腾出空间并容纳他人是一种简单的人性行为,如果你在设计过程中建立包容性思维,成本只不过是增量,最终可以改善每个人的用户体验。 

毕竟:我们有时都是残疾人。 


8.设计+代码

虽然我们都在为设计师是否应该学习编码感到痛苦,但我们中的一些人却默默地做到了这一点 - 并利用我们新发现的知识开发出更好的设计工具。我们正在看到像FigmaFramer X这样的新设计工具,通过API和插件系统实现更紧密的编码集成。

编者注:更不用说像Webflow这样的工具,它直接跳过API和插件来让你设计代码。哦,如果你是Figma粉丝,你应该查看设计师Charli Marie关于将Figma设计转换为功能性Webflow站点的视频:

9.大胆的排版

出于某种原因,任何设计趋势列表都必须包含“大胆的排版”。从1439年开始就像排版一样,你不会真的出错。(好吧,除了2013年那个短暂的时期,Apple决定现在应该在Helvetica Neue Ultra Light中设置一切)。

编者按:罪魁祸首,萨莎。更多关于此的信息。

我们的下一个贡献者是无与伦比的巴勃罗·斯坦利。当Pablo没有为InVision设计好东西,或者用他富有洞察力的,有特色的插图让设计世界惊叹时,他似乎非常喜欢深入研究Webflow。

特别是自从我们推出...... 


10. CSS网格

圣鼹鼠!我喜欢Grid,伙计!

-Pablo Stanley 

对于许多网页设计师和开发人员来说,flexbox提供了一种圣杯。它回答了如何在垂直和水平方向正确定位事物的古老问题。它使以前复杂的布局相对容易实现。它甚至(非常字面意思)实现了传说中的“ 圣杯 ”布局。

问题是,它不能让你同时控制元素的水平垂直位置。也就是说,它是一个或那个工具。

输入CSS网格:可以将项目垂直和水平放置在您想要的位置。听起来很简单,但现实情况是它解锁了以前只有印刷才能给我们带来的表达自由和控制水平。

然而:没有人使用它。 

好吧,几乎没有人。特别是当你相对于flexbox看它时。

根据Chrome平台状态,大约83%的网页浏览量包含flexbox。CSS网格?只有1.5%,粗略。

你为什么问?嗯,答案,通常是网页布局工具,是不均衡的支持。

或者更具体地说,Internet Explorer(IE)提供的永不停止的支持(由iffy支持),尽管被微软贬低,仍然被许多企业不成比例地依赖。

尽管如此,IE的使用可能还不足以完全解释网格采用的缺乏。因此,请考虑上面引用的统计数据侧重于页面浏览,而不是页面。这意味着主要网站缺乏对网格的采用,这更可能解释了网格迄今为止表现不佳的表现。

这是有道理的。这些主要平台可能最近才在flexbox上全押。重新调整吸引数十亿用户的网站布局并非易事。

值得庆幸的是,在大多数工作中,可能不会遇到同样的问题。使用Webflow,您甚至不需要花费数小时掌握网格的语法。你可以使用它。今天。直观。

Webflow中的网格入门

设计没有代码的交互和动画

无需查看代码即可构建复杂的交互和动画。

开始制作动画

对于我们的下一位客座设计思想家,我求助于社交应用Mappen的首席设计师Los Montoya和Juxta Labs的创意总监。洛斯用他自己的话来说:

我目前专注于为Mappen的市场营销和产品设计工作提供领先设计,并且对2019年的产品有了独到的见解。


11.基于市场地位的相反的色彩方法

在2019年,我希望看到更多的公司跟随其他知名品牌的领先地位,追求更柔软,更平易近人的调色板。 

相比之下,我们将继续看到独立设计师和制造商的公司用更大胆,更饱和和自以为是的颜色来关注。我们仍然会看到大量使用插图来努力使技术人性化,更重要的是,人性化品牌。


12.网格中断网格

我们将看到使用CSS网格为基本框架,打破 “网格”的扩散和CSS电网的可访问性技术将帮助设计师和开发人员都瘦成破布局,努力把“老派, “印刷灵感的布局到网上。


13.移动优先动画

2018年底的网页设计向我们展示了一系列基于滚动的动画,并包含了“定时动画”,以帮助引导人们关注营销页面。虽然这在桌面断点上运行良好,但我们将在2019年看到更多移动优先的交互方法。我期待看到设计师和开发人员如何将“桌面网页设计”带入移动网页设计。


14.伟大的写作年

我相信所有这些都是我们在2018年所看到的自然演变。从某种意义上说,网络和产品的视觉设计已经稳定下来。我们拥有一个坚实的平台,经过测试和验证的用户体验流程和互动,适用于我们的网络和产品设计。结果是数字产品和网站往往看起来像近亲 - 如果不是兄弟姐妹。

这就是为什么,如果你想创造一个人们喜爱的品牌,你的工作是[插入所需的标题]设计师,你需要加强你作为作家的讲故事技巧和功效。从视觉设计的角度来看,很容易培养出美味。你有很多漂亮的设计可供学习的例子。您已经证明了营销漏斗流程和数字产品用户体验流程,您可以轻松访问这些流程,因此您可以设计出大多数客户容易理解的体验。

有了这个,2019年将成为伟大的写作年。伟大的讲故事和叙事的一年。剥离网站上的颜色,动画,网格和插图,剩下的就是文字。词汇在网站中很重要,而词汇在产品设计中很重要。当您通过应用程序浏览客户时,如何以及何时与客户沟通对于再次给他们回来并再次雇用您的应用程序至关重要。

单词是您与团队沟通以有效完成工作的方式。 

话语就是你如何帮助顾客爱上你的品牌。 

你是如何告诉人们为什么他们应该关心你在做什么的。

2019年是建立值得爱的东西的一年。

我们的下一个贡献者是Mariah Driver,Webflow自己的内容制作人,punster和可访问性倡导者:


15.运动太多了

在莎士比亚的“ 你喜欢它”中,罗莎琳德问:“人们可以想要太多好事吗?”

现在,你可能想知道我们如何将1599年写成的牧歌喜剧与2019年的网页设计趋势联系起来。两个词:运动设计。

动画和互动元素的趋势不过是新的 - 更重要的是,它不会去任何地方。运动设计在网页设计中可能是一件“好事” - 当它帮助用户浏览网站时。

为了视觉天赋而不是可用性而添加动画和交互的后果可能远远超过简单地分散用户的注意力。在某些情况下,它们会使用户无法导航您的网站,甚至是危险的。

例如,任何闪烁,闪烁或闪烁的显示都可能触发患有光敏性癫痫的人。虽然这个设计元素确实使网站难忘,但如果使用不当,它很快就会变得有害。

我们已在下面的网站中展示了可能对某些用户有害的闪烁显示类型。如果您对闪烁或闪烁敏感,请不要点击进入该站点

警告:如果你是光敏的,请给这个人一个错过。

为了更好地了解如何安全地使用闪烁,闪烁和闪烁而不牺牲站点的可访问性,请查看关于癫痫发作和闪烁的Web可访问性指南

这种趋势的外卖? 

避免为您的网站添加动作的诱惑,因为现代网页设计工具(如Webflow)可以实现这一点。在添加交互或动画之前,询问它是否在页面上有用。更重要的是,如果它可以阻止某人浏览您的网站。

下一步:小OLE 


16.大量的屏幕主导文本

撰稿人和其他内容专家长期以来一直认为,内容应始终是设计过程中的第一位。毕竟,发布网络......仍在发布。无论我们是否最终设法让世界相信内容的价值,或者设计师刚刚开始对字体形式产生真正的兴趣,我们开始看到真正给予文本内容中心舞台的网站。

见证了可吸烟产品制造商Rolling Flowers的上述镜头。作为滚动烟草的替代品,Rolling Flowers允许文本(大部分)在他们(大声)最小的电子商务网站上进行谈话。

然后抛出一些非常大的购买按钮来启动。

或者从(现在)超级秘密的内部项目中拍摄:

这使得副本如此之大,你被迫以片段而不是整个短语来处理句子。(因此,理论上集中注意力。)

泰勒弗兰德分享了她对用户旅程的一些看法,大胆,大胆。

甚至Huffpost也正在接受大规模的文本诡计: 

作为参考,这是我在MacBook Pro上看到的全部内容: 

我们也看到这种大规模的文本趋势出现在创意菜单设计中,正如你可以在建筑公司Dot to Dot的网站上看到的那样: 

有趣的是,菜单已移出屏幕顶部的栏杆的相对贫民窟,成为中心舞台,因此其寻路系统至少在主页上变成了网站的“肉”。


17.俏皮的光标设计和动画

为了坚持使用Dot to Dot,我们还值得一提出一个新兴的趋势,即充分利用人机交互的最重要工具:简单的光标。 

因为它在人类与数字空间交互的动力学中起着如此重要的作用,我们中的许多人都不愿意弄乱光标。但不是我们所有人。

例如,在Dot to Dot上,光标做了很多工作: 

这里悬停状态显示项目图像。

如果您犹豫了一会儿,它就成了如何与菜单互动的提示。

在这里它揭示了一些使命宣言。(不幸的是将文本渲染为图像。)

在KIKK Festival网站上,您的光标似乎几乎燃烧着丰富的蓝色层,以显示设计的另一个维度,为您在网站上的时间增添乐趣。 

使用Webflow的设计师NiccolòMiranda也将光标投入到更具创造性的工作中,而不是指向并点击他的投资组合网站。在他的主页上,光标提示您点击并按住,在一天中触发他努力工作的机智动画。

我对Niccolò的一个希望是他实际上从早上5点到午夜不工作。 

所有人都欢呼新的同质英雄

直到最近,我们都分享了无处不在的网站的愿景。看起来有点像这样:

资源

我们甚至写了一篇关于构建这个的教程,以防你的客户吵着要它。

但在2018年,这种设计开始变形。设计师们对美丽照片上的中心标题和按钮感到厌倦。

他们做了什么呢?将标题和CTA向左移动。然后缩小图像,将其设置为右侧,并且可能使其成为自定义插图?

Etvoilà!看看新的同质英雄。

Airtable.com

Dropbox.com

Mailchimp.com

Stripe.com

要明确:我个人并不认为这有任何问题。头条新闻越来越清晰。子标题添加了急需的上下文。您总是知道在哪里可以找到您的号召性用语。我们对认知流畅性的渴望 - 与熟悉的事物一起工作时获得的掌握感 - 得以实现。雅各布的法律被考虑在内。

在婚礼邀请之外的任何地方都没有看到中心文字。 

但它确实很新潮。 


19.重叠所有事情

基于卡片设计的时代让我们所有人都进入了具有非常清晰明确分组的离散对象。鉴于格式塔心理学的共同区域定律,这是一个明智的选择。

但是,公共区域不是视觉上链接离散元素的唯一方式。还有一个统一连通性定律,这就解释了为什么在上面的设计中很明显,“它是一个光”指的是左边的灯。

因此,在2019年,我们期望看到更多关于建立连通性的方法的探索,例如NBC网站上的新闻通讯模块: 

这个可定制的照片和副本拼贴:

Zhenya Rynzhuk关于页面的动画

在日本创意机构SONICJAM的网站上:

菜单打开以添加效果。(注意那个时髦的光标!)

20.“用户”反击的那一年

“手机恋人”,由班克斯

自智能手机推出以及社交网络的兴起以来,我们一直在陶醉于一种全新的联系水平。世界的知识触手可及。我们可以“交朋友”(这是对的,孩子们:已经有了这个动词)几乎任何人,任何地方。我们“享受”不断刷新“内容”的“馈送”“量身定制”“仅适合我们”。

我们已经厌倦了这一切。我们厌倦了侵略性。误导和不诚实。面对有关泄密,媒体操纵和(可能​​?)操纵选举的新闻,关于连接世界的高调言论。

我们意识到背上有一只猴子。它住在我们的口袋里。并且永远和永远只对我们意味着最好。

但这种认识让我们很多“用户”感到疑惑:入场价格是否值得投资回报?从移动“手机”到袖珍超级计算机的转变是否比我们带来的更多?

如果是这样的话:我们如何纠正这种不平衡?我们可以吃蛋糕吗?

但是,阅读本文,你不能仅仅以“用户”的身份回答这些问题。你也可能是一个制造者。所以在2019年,是时候(过去的时间)问自己:

有什么可以做把人回到他们的参与,他们的使用情况,控制自己的生活?


——原文链接:https://webflow.com/blog/20-web-design-trends-for-2019

日记本