想知道接下来会发生什么吗?看看2022年的网页设计的趋势将。

所以考虑到这一点,我决定问Webflow的设计师的趋势,他们认为2017年将主导世界的数字设计。(和写评论他们的想法。)

首先,让我们听到Webflow的设计总监,Sergie Magdalin。

1。布局,让内容

设计元素在给定结构的安排应该允许读者容易关注的消息,但不会降低他的阅读速度

赫尔曼Zapf

过去的几年里看到了一个巨大变化在人们如何看待设计在商业中的作用。设计已经从一个在处理流程中“优化”阶段,设计师们冲进洒上一些“非常”神秘的仙尘一个真正的竞争优势。

这是一个了不起的进化看。

和一个迷人的元素的进化已经转变到关注内容:网络的骨头上的肉。全世界的设计师已经意识到人们访问网站的内容——无论是tweetstorms肆虐,深思熟虑long-reads,或最新的“用户”的文化基因,设计的最终作用在一个直观的展示内容,高效和“讨人喜欢的”方式。

这是远离skeuomorphic设计转向的原因之一“奉承”,更简约的设计方法,如谷歌的材料审美,实际上,在网络和各种设备。

当然,正如牛顿第三定律的州,为每一个行动,有一个大小相等、方向相反的反作用力。许多设计师认为平面设计趋势已经设计的“灵魂”。我们希望看到这样的对话持续跨越2017年,但期待它成为一个富有成效的对话,不要失去眼前的心我们的设计工作:内容。欧宝体育在线首页

2。更好的合作的设计师,设计师和开发者之间

设计了一个更大的和更有影响力的作用在塑造企业,越来越多的注意力都集中在设计师的与他们合作的设计师和开发人员的同事。

强调设计师合作出现了部分大量的这些天我们建立网站和移动应用程序。巨大平台像谷歌、Facebook、Twitter和LinkedIn不仅需要庞大的设计团队在不同方面的平台,也为设计师更好的方式停留在相同的页面,这意味着更多的合作,和更好的沟通。

出现了各种各样的工具来帮助促进协作,从共享模板和仪表板Webflow的团队计划到实时共享Figma的画布——你可以打赌2017将改善这两个平台上,和全新的选项。

在打协作方面,大量的注意力一直集中在最重要的切换阶段。设计师曾经手巨大的包的静态图片和规格,他们现在分享InVision等工具支持的动态可视化,奇迹,和UXPin——或者做一个更好的出口,生产就绪代码欧宝体育在线首页Webflow。

正如米勒卡森最近在TechCrunch的文章”前端开发设计的未来”:

只是一个时间问题设计和原型设计工具完全取代前端开发,无缝地生产高质量的前端框架选择的代码库。

Webflow,未来我们可以在后面。因为我们帮助构建它。

3所示。改进的设计到开发工作流

作为web设计和原型设计工具获得成熟和成熟,传统的切换可交付成果已从上述静态文件转化为更多的动态可视化,从动画主题文件功能齐全的网站。这些更动态交付缩短反馈回路,同时改善设计和开发团队敏捷性和降低挫折感。他们还促进与客户更好的沟通。事实上,对于许多用户的Webflow,客户会议已成为实际生活工作会议,设计师能够快速带来思想生活每个人都能体验他们几乎立即。

接下来,产品设计师欧宝体育在线首页Gadzhi Kharkharov:

4所示。大,粗体

设计成为全球的共识,我们的焦点应该是内容,越来越多的网站功能的共振,鼓舞人心的副本集类型的一样大,大胆的声明本身。

从示例截图您会注意到,“大”和“大胆”并不一定指字体的重量!相反,它是关于投入大量屏幕以一个单一的、简单而包罗万象的声明有关的产品或服务。欧宝体育在线首页清新,很多这些语句看起来清晰、到位的,自由的发表冗长演说声称破坏和伟大最近我们看到很多。(好吧,“设计不可能”可能会发表冗长演说,授予)。

的世界一样快,忙,我们是信息过载,这些简洁而强大的声明将成为实用的各类公司。

5。复杂布局的平面设计原则

如果我们想要预测网页设计的进化(至少在视觉方面),我们应该参考平面设计的发展。

在过去的几年里,网页设计布局一直受制于CSS的局限性,但新工具像flexbox和CSS网格(2017年3月来)将允许在网络上更富有表现力的布局。

现在我们的主要挑战:了解这些新web布局方法应该响应设计的工作在世界上。

你可以看到一些例子我们可以期待(只要你使用浏览器支持CSS的网格,如Firefox夜间,Safari技术预览版,或者Chrome金丝雀):

珍西蒙斯的实验室实验布局

注意Merz-esque风格的英雄节中,一个清晰的回调平面设计的发展,及其与美学运动正在进行的对话。

网格的例子

头的学习网格布局页面更多的例子。

6。更多的svg

svg(可伸缩向量图形)目前web设计人员和开发人员有很多优势传统的图像格式像JPG, PNG和GIF。

svg的关键优势通过响亮和清晰的格式名称本身:可伸缩的和向量。而不是光栅或基于像素,svg是由向量:数学的描述对象的形状。这意味着svg分辨率无关,所以他们会在任何屏幕上看起来很好,任何设备类型。不需要担心一切retina-ready。

但这还不是全部。svg还摇滚,因为他们不需要任何HTTP请求。如果你曾经上运行一个页面速度测试你的一个网站,你可能已经注意到,这些HTTP请求可以减缓你的网站。不与svg !

另外,你可以激活!

现在让我们听听产品设计师Nathan罗梅欧宝体育在线首页罗。

7所示。基于设计工具

响应设计已经完全改变了我们如何浏览网页和构建。

但是,奇怪的是,它还没有真正改变了设计工具是如何工作的,。Webflow是明显的例外,大多数流行的设计工具需要你简单的重建相同的屏幕,为不同设备大小和屏幕分辨率。

在这一行业的快速发展,意念,并启动,大量时间水槽不是可持续的。

因此,新一波的设计工具(如Figma),使用约束的想法减少重复设计师构建跨设备布局时要做的工作。这些工具集中在元素之间的空间关系,努力保全他们的复合元素大小的设备和用户。

设计师需要做的工作越少的胜利。

现在,到瑞安·莫里森,高级视觉设计师。

8。更更亮的颜色

“兽性”和“简约主义”等运动2016年来到前台,设计师寻求方法来注入更多的个性设计工作仍然工作在这些简约美学。

至少有一些情况下,明亮、大胆的颜色成为了自然的回答。

见证体式color-drenched重新设计。

和嘲弄,但毫无疑问brand-revivifying, Instagram应用图标设计。

更不用说一切条纹。

正如您可以看到的,它不是只是明亮的,热情的颜色。梯度也回来在很大程度上,融合和模糊的色调成光谱想起中午天空或引人注目的日落。

有一种合成的自然主义的再度出现明亮的色彩和大胆的梯度,而且我个人2017年期待更多。

不过也许我们可以把亮度降到11这一次?看着你,体式。

9。更关注动画

动画一直扮演着重要的角色,我们的数字接口,没有理由认为2017年将减弱。事实上,作为设计师越来越可视化工具来帮助他们建立吸引和smile-sparking动画,我们肯定会看到他们变得更加突出,更精致。

后者的特点将会变得特别重要,因为它更容易创建动画。在2016年的设计和内容发布会上,动画大师Val负责人强调,设计师应该自己品牌的声音和语气文档构建动画时,确保他们加强语气内容创建者的目标。这有助于确保动画执行有意义,新的篇章功能的用户,而不是鼓舞人心的偏头痛。

10。独特的布局

2016年——就像过去几年前出现一个正在进行的讨论网页设计要么死亡,或失去它的灵魂。

戏剧化的web-design-is-dead论点,你不能责怪任何创造性寻求创新的方法来呈现内容的读者。和最迷人的一个方法的爆发box-centric许多怪响应设计布局是破碎的网格。

这种方法寻求出路的精心排列和四四方方的“布局我们最近看到很多各种各样的可能似乎喜欢视觉上的技术。这些包括:

重叠的排版和图形元素,出现在…

大纲

Bauhaus-Archiv

看似随机图像和文本位置,出现在…

Epicurrence

Heco伙伴

接下来,纳尔逊Abalos, Jr .)客户支持英雄和主机Webflow的研讨会

11。Flexbox

如果你还没有潜入flexbox然而,你在治疗。这个相对“新”CSS布局模块提供了令人难以置信的responsive-friendliness的功能,但也很有道理,视觉设计师在画布上用于操纵对象的对齐和分发工具提供的草图和插画家。

与所有现代浏览器(不,我不算IE11)现在完全支持flexbox,没有理由不去潜水,只要你的观众不是IE顽固分子。

当然,flexbox可以需要一些时间来适应,如果你超级舒服,非常不同的布局模块。如果你需要一些帮助包装灵活的框,查看Flexbox游戏。

好吧,你认为,沃尔多Broodryk,客户快乐英雄?

12。复杂的CSS网格布局

上来的flexbox继角逐更新、更好的布局模块是CSS网格。正如克里斯房子,创造者的“一个完整的指南”所言:

网格是第一个CSS模块专门解决布局问题我们都是黑客在只要我们一直做网站。

虽然flexbox帮助我们解决一些严重恶化和长期存在的网页设计问题,如垂直定心,真的不是用于整版的布局。(虽然这当然是他们的能力。)网格,另一方面,是了整版的布局。和flexbox一样,它允许您轻松地重新排列内容为不同媒体查询。

网格还不准备使用在野外,但这只是给你一些时间来熟悉规范。这是伟大的,因为这将是大了。

如果你想开始玩CSS网格今天,方法如下:

• 在Chrome,去Chrome: / /旗帜,使“实验网络平台功能”
• 在歌剧中,歌剧:/ /旗帜和启用“实验网络平台功能”
• 在Firefox中,启用layout.css.grid。启用(或安装Firefox夜间)

13。专注于内容交付设计、个性化和转换

设计日益受到关注的一个结果作为一种有效的手段提供内容将在交付压力说在正确的时间正确的人——都着眼于增加所需的行动,自然。(所有的好消息告诉你内容战略家!)

个性化的内容一直是一个非常热门的话题内容圈子里很长一段时间了,但似乎没有人完美破解,螺母。从本质上说,我们的目标是提供基于内容特征:

• 人口统计资料:谁是游客(专业和/或个人),它们从何而来?
• 行为:什么是客人现在正在做什么?他们做了什么在你的网站在过去吗?
• 上下文:客人使用设备和浏览器是什么?他们如何到达你的网站?他们登录或注销吗?

我们看到这个方向在整个网络上一些有趣的实验,其中许多围绕用户手册内容的个性化推荐,推荐的“相关”读,和一些算法解决方案更类似于Facebook能够做什么。

Fubiz特性手册个性化通过其“创造力仪,”说话的风格形式,从一系列预定的选项让你选择你,你的位置,你在寻找什么。这有点“低科技”,但它确实提供了一个机构大多数内容平台的感觉真的不提供。

Fubiz

红移

一步从Autodesk的新红移的博客,这加深用户水平的机构通过提供一系列的手工定制选项:

• 下面的主题和作者
• 可定制的饲料
• 高亮显示的评论和分享
• 书签

主要是东西自己精明的读者可以实现,但红移极大地简化了这些功能。更重要的是,它代表了从一个范式转变观点的博客文章内容版本的“雾件”,更多的把它变成一种常绿的学习资源。

如果很多红移的功能听起来很熟悉,可能是因为它很大程度上复制从媒介。与红移,媒介拥有更大的优势基础的读者和作家,更不用说紧密集成与Twitter——所有这些提升算法向您推荐内容的能力。

所有这些内容个性化方法概括一个视图的产品设计方法,发现用户需求和业务需求之间的十字路口。欧宝体育在线首页读者希望能够保存、共享和定制他们所看到的内容,该公司可以使用这些数据在一个宿主的方式。所以,双赢。

当然,值得记住的是,转换并不是只有指标内容个性化可以开车。个性化的帮助文档可以帮助降低支持请求量。教育材料可以降低生产和改善生命周期价值。但它不像转换会不是有价值的。

现在我的两个美分:

14。更关注谈话(是的,机器人,但也…)

你可以拨打2016年机器人——尽管是否这是机器人的胜利的开始还是有点平庸的发射是非常公开讨论。

说,如果bot-related启动产品的体积狩猎和谷歌Android是助理的深度集成到任何指示,2017欧宝体育在线首页年将会看到更多的机器人出现在你的生活。

但机器人只是一个特定的实例化一个更抽象的,因此更加普遍,想法:对话是一个接口。我们可能会看到这个想法形状很多2017年的设计工作。

这可能意味着什么,确切地说,我们必须等等看。但可能的影响包括:

• 一个更大的“人”语言的兴趣(为内容的战略家们更多好消息!)
• 增加了作者能力和内容战略家作为用户体验设计师和机器人开发人员
• 甚至更多的投资在所谓的“用户生成内容”,创意社区、论坛等。
• 更多的会话/自然语言形式(目前,形式是产品设计的基本单位——2017年,我们可能会看到,范式转变从形式到对话)欧宝体育在线首页
• 试图从网上评论部分的污水转变成“接触”和新内容的字体——一个已经开始的工作珊瑚项目

希望这持续的对机器人的兴趣和AIs将帮助他们更好地理解到底我们讨论。

15。打击假新闻

2016年美国总统竞选教会了我们所有人很多网络如何影响社会政治现实,其中一个最重要的教训是:

错误信息是快速,简单,和廉价的生产;超级盈利;和能够严重影响公众的候选人。

显然不是(我们大多数人)创建和分发兴奋地看到显示网页内容。

但是每个问题代表了一个机会。一如既往,网页设计师,产品设计师和开发人员全世界都欣然接受这个机会欧宝体育在线首页解决这个特殊的破窗效应。这里只是一个小抽样:

• Facebook的马克•扎克伯格称为假新闻的比例相对较小,“但轮廓Facebook正在帮助对抗错误7步骤。
• 一群大学生了一个叫做FiB Chrome插件新闻故事,标签为“验证”或“未经证实的”在Facebook的用户界面。
• 谷歌和Facebook都表示,他们会限制流向虚假新闻网站的广告收入通过他们的广告工具。
• 流行的Twitter帐户保存你点击启动剥离救你一个诡计识别假新闻故事。

最终,更多的编程方法和货币方法提出的Facebook, Google和FiB团队将被证明是最可伸缩的和有效的。但是更人性化的方法更致力于新闻伦理和工具和资源,旨在帮助人们更好的读者无疑将是必要的。

因为对于任何试图控制信息的流动,总有控制被执行的可能性错误的的方式。这意味着这是最终我们停止的创造和传播错误信息。

16。更窥探里面的设计(和内容)

在2016年,许多设计团队创建和推广自己的博客作为一种提供见解的过程,也许,人性化的品牌在一定程度上。

内容这样过去主要集中在招聘,吸引新员工传达的是什么样的设计,或工程师,或写在一个特定的公司。

但在2016年,重点似乎转变3新方向:

• 品牌
• 人性化
• 乐于助人

这三个菌株可以很难解开,和这些设计中最受欢迎的博客做所有三个用华丽。他们还往往这有一个特别关注区分多”牌X的设计团队的博客。“但是,这并不总是显而易见的。

成功的设计和内容的博客后,准备2017年更多的:

Facebook.design

焦点:过程和工具

几个人打字

焦点:松弛、工作效率和内容策略欧宝体育在线首页

谷歌的设计

焦点:谷歌、流程、工具

Shopify用户体验

焦点:用户体验(即。、设计、内容、开发研究)

17所示。一个新的设计师交付-代码中创建的新方法

TechCrunch在他的文章“前端开发设计的未来卡森,”米勒写道:

编码在未来看起来截然不同。事实上,设计和开发的界限可能不再存在。

本文讨论涌现在推特上,奥斯汀骑士说:

许多设计师和开发者,我知道希望视觉工作,但是工作代码的需要。

这背后有很多司机新兴现实,包括

• 需要快速迭代的产品开发欧宝体育在线首页
• 用户需要更多的输出和输入之间的相等(即。大多数画家不油漆,代码)
• 日益成熟的无代码设计工具

因为Webflow的最后,我们都在这个未来。

18岁。在网络上虚拟现实…

鉴于我们已经坚定地建立倾向于认为web作为一种替代的现实,这是有点inception-y。但不可否认,虚拟现实将会影响网络在很大程度上在2017年——即使浏览器不会准备支持它。如果你想试一试,看看网络虚拟现实网站。

准备好做你的一部分定义2017年网页设计吗?

然后开始与Webflow建立网站!开始它是免费的,你会喜欢它给你创造自由。