跳到主要内容

2018年12大网页设计趋势

使用代码在优质图像上节省15%15 ISTOCK

2017年最大的网页设计趋势是什么?2018年会有什么大变化?随着去年即将结束,我们要求领先的设计师和工作室负责人分享他们的观点,观点和预测。

正如我们带给你的那样2018年10大图形设计趋势,这不是关注创意群体:它是关于评估行业现在的位置。因此,无论您是否遵循这些趋势,了解它们是什么都很有用......

01.网络动画

“动画可以在创意和界面更容易理解方面发挥重要作用,”互动设计师说克里斯甘农。 “在一个人人匆忙,时间短暂的世界里,动画可以在很短的时间内传达出复杂的想法,同时又能吸引人并提供信息。”

Bruno La Versa,高级数字设计师莱特福,同意。 “讲故事和个性是新老品牌正在努力吸引用户注意力的事情,动画开始在这方面发挥更大的作用,”他说。 “动画已经展示并将继续展示该品牌在我们的数字世界中的实力,为品牌赋予强烈的个性,使其更少静态和更具活力,”La Versa说。

Web animation of a fan rotating and blowing

这部由Chris Gannon拍摄的动画是Twitter官方GIF应用程序的一部分

那么具体的动画是什么,我们会在2018年看到更多?动画徽标是一个明显的趋势,它为公司提供了进一步提升品牌的大好机会。但是,做到正确是一项重大责任。 “这是一个在狭小空间内公司的直观表现,如果它是一个很好的标识,它包含了很多意义,”Gannon解释说。

我们也看到了回归GIF- 部分归功于基本的动画GIF几乎可以被任何东西读取。 “似乎世界已准备就绪(并且确实在呼喊着)所有事物的动画,无论是猫从桌子上掉下来的喜剧圈,还是在电子邮件签名中为徽标增添了一种乐趣,”Lee Fasciani说道。地区项目

GiFs – such as this one by Chris Gannon – are back in favour

GiFs--比如Chris Gannon这样的人 - 重新受到支持

是什么导致了这种对动画的热情?那么,现在可供设计师使用的创作工具的数量起了很大作用。 “这些工具中的许多都是针对设计师,开发人员或其他非动画师的,并且具有旨在简化构建它们的复杂性的接口,”Gannon说。

“这为越来越多的人开辟了竞争环境,并允许他们尝试动画。这是非常巨大的,因为历史上非动画师已经避开了项目的动画部分。”

Mireia Lopez,数字创意机构的创意总监,还注意到这些工具如何帮助模糊设计和开发之间的界限。 “我们看到设计团队动画,原型设计和学习整齐编码以使用更复杂的东西原型制作工具为了向客户传达概念并向开发人员解释数字旅程,“她说。

当您将这些工具的可用性与浏览器改进结合起来时,很容易理解为什么动画在2018年会变得很大。今天的浏览器超过60fps,即使在SVG和移动等矢量格式上也是如此。

与任何趋势一样,重要的是不要为了包含它而包含它 - 它必须适合您的项目。 “我们都有责任让观众选择何时何时不使用动画,”Gannon警告说。

“它是否会增强或以其他方式积极地为体验做出贡献?当客户接近我说他们想要'在我们的应用程序上喷洒动画'时,我的心就会沉沦。因为动画没有任何目的,动画到设计中的很少见除了刺激。“

但是没有争论 - 当它做得好的时候,动画可以把一个好项目变成一个好项目。要了解趋势,请查看我们的掌握网页动画的5个步骤Chris Gannon创作的10个精彩网页动画。

02.更具冒险色彩

“在过去的一年里,我们看到在数字平台上使用大胆色彩的使用有所增加,”James Bearne,创意总监Kagool。一个很好的例子就是DesignStudio对英超联赛2016/2017赛季的新品牌推广计划。

“与以前的身份有一种自信的背离,引人注目的视觉处理并没有停留在网站或其应用程序上;它随着广告牌,社交媒体等而咆哮着。”

Premier League website, using a deep royal purple with a bright splash of neon yellow

Design Studio为英超联赛的工作充满了大胆的色彩

Bearne预测,这在2018年不会放缓。 “使用新工具Khroma帮助我们找到更有趣的使用颜色的方法,似乎我们会看到更多设计师探索如何使用颜色来提供卓越的体验。

“有趣的是,如何在定制和个性化的同时使用颜色,为消费者创造真正独特的体验,同时勾选多个盒子。”

03.创造性的排版

在眼球争夺战中,排版是一种强有力的武器,今年它在网络上的使用范围已经扩大,内容战略高级经理凯利莫尔说。99designs。 “排版很强大,越大越好。因此,虽然像Helvetica这样的新奇怪的无衬线样式仍然流行,但设计师正在分支,转向各种各样的字体。“

她预测,2018年将会看到衬线返回到屏幕,以及越来越多的网站配对衬线和无衬线字体(执行得非常漂亮)通用电器)创建动态用户体验。

The Discover Danbury website with cutout letters

丹伯里网站上的排版抠图趋势

设备分辨率越来越高,增加了易读性因素,这也为自定义字体的增加打开了大门。 “设计师们选择的印刷术具有大量的个性,不仅是为了强调,也是为了美学效果。所有这一切,再加上超大字体所提供的戏剧,都表明2018年并非都是微妙的,我们可以期待看到大胆的趋势继续发展。“

工作室经理Gee Guntrip发现了另一种类型相关的趋势炒作营销,是排版剪纸。 “这项技术使用了一块色彩,而不是通过清晰的字体出现的静止或动态图像,”她说。 “选择合适的字体并限制字母数量对于完成这项工作至关重要。

“例如,丹伯里使用明亮的文字剪辑将用户的注意力吸引到其视频上,这样做非常好。Comedie Francaise在文本悬停上使用排版效果。和培养数字通过信件展示视频。“

04.数据讲故事

“2017年是设计的重要一年,”高级数据可视化设计经理Craig Taylor说伊藤世界。 “我们目睹了动画可视化的热潮以及从3D角度对数据表示的兴趣增加。但是这些数据有什么用途,无论是美观的还是其他的,如果它不易消化并最终可用?“

输入Taylor称之为信息讲故事者的内容。 “现在,人们非常重视通过设计进行有效的讲故事,将复杂的信息尽可能简单地传达给各种观众,”他解释道。 “设计师正在开箱即用新的,定制的创作 - 旧的柔和调色板倾向于充满活力的色彩过渡,搭配简约而大胆的排版。”

那么2018年的信息设计是什么呢?泰勒认为,“更多地使用新技术无疑将会增加使用动画作为讲故事手段的设计师数量。”

“随着AR和VR的进步,我们开始模拟虚拟模型的探索,重要的是我们要记住将信息和数据放在我们工作的核心位置。如果我们做到了这一点,数据科学和设计的重叠领域将允许越来越多的信息,基础和清晰的数据可视化示例。“

AR app shows IKEA furniture in place in a user's living room

宜家和苹果最近合作开发了一款增强现实家居设计应用程序

Lee Fasciani同意AR和VR可以提供更多的东西。 “技术使我们能够更加轻松地将现实世界与基于屏幕的世界融为一体,”他说。 “我们越来越希望将视频添加到我们的数字体验中;不久以前无法实现的深度和丰富性。

“混合现实将我们牢牢地带入'新',大型科技公司致力于AR的创新,未来的设计需要从四个方面考虑我们的世界。我们看到流行游戏中这种混合现实的开始以及更多功能应用,如宜家广场。“

Mike Brondbjerg's work – such as these Proximity Studies – visualise data in new ways

Mike Brondbjerg的工作 - 例如这些邻近研究 - 以新的方式可视化数据

对于希望开始探索更简单的数据可视化的初学者,可以使用大量新工具。 “像D3.JS这样的图书馆很棒,但对于非开发人员来说可能有点吓人,”数据可视化专家说Mike Brondbjerg。 “但是现在有很多平台可以导入,可视化和托管你的数据项目。平台就像Datawrapper非常适合轻松制作一系列标准图表,以及繁荣用新闻,讲故事的风格可视化来做很棒的事情。“

但是,所有这些创新必须要谨慎。 Brondbjerg提出警告:“在假新闻时代,高质量的数据也需要清晰,透明和值得信赖。”

05.设计工具之间的标准化

2017年,如果没有来自InVision,Adobe XD,Figma,Axure,Marvel,Vectr等公司的新应用程序,工具或功能,似乎已经过去了一天。其中包括Sketch,其开放式文件格式更新,Sketch 43,是一个真正的游戏改变者。 (你可以在中了解更多相关内容本指南。)

“我们只是说,如果你仍然使用Photoshop进行UI设计,你可能需要环顾四周,”Bruno La Versa说。 “2017年是新设计工具的一年:Figma,Webflow,InVision Studio仅举几例。设计工具的爆炸式增长凸显了设计如何成为企业运营方式的核心要素。“

A screenshot shows the InVision Studio tool

InVision Studio是我们今年见过的设计工具爆炸的最新成员

然而,Bearne指出,这种趋势确实给代理商带来了特殊的挑战。 “为了成为行业的'选择工具',2017年已经出现了大量的工具,但同时,大量的产品已经变得令人沮丧,因为所有人都声称要实现巨大的期望。

“这为机构间工作带来了一个问题,即团队有不同的流程,每个流程都经过测试,以发现它是否可以取代Sketch。反过来,市场已经饱和了选项,但很少有关于如何提高效率的指导。

“InVision Studio的推出 - 定于2018年1月 - 将会很有趣,因为我们将看到它是否可以使用其协作平台最终为设计过程带来标准化。如果InVision看起来一样好,Sketch会发生什么? Photoshop的生存斗争终于结束了吗?“

要了解更多信息,请阅读我们的帖子30个网页设计工具,可在2018年加快您的工作流程

06.平面设计2.0

平面设计莫尔认为,并没有死亡,但在2018年,它必须学会适应以保持相关性。 “这种新的,所谓的平面2.0或半平面设计,依赖于为其先前的苦行僧身份增加细微差别和深度。它是怎么做到的?通过沉迷于一些设计禁忌:梯度和阴影。但别担心,这只是适度。“

Dropbox's late-2017 rebrand is testament to the enduring popularity of flat design

Dropbox 2017年末的品牌重塑证明了平板设计的持久受欢迎程度

自2007年以来,渐变已经形成了企业Powerpoint演示文稿,00s时代网页标题和日期标志设计的图像。 “但是在2018年他们又回来了,虽然已经进化了,”莫尔继续道。 “渐变现在摇滚充满活力,更新了调色板和更柔和,更微妙的过渡。”

平面设计已经对Instagram,Stripe和Apple的iOS图标等品牌产生了影响,并在像公司这样的高调重新设计中扮演主角。Dropbox的万事达

“由于网页浏览器功能取得了进展,我们也看到了阴影的复兴。像渐变一样,阴影被搁置,有利于极简主义和2D设计。现实主义和假象仍然存在,但在2018年,设计师将进行更多的实验和更多的是他们工作中更新,柔化和风格化的阴影。“

A turquoise to yellow gradient effect on a homepage background

平面设计让位于半平面设计,又名Flat 2.0

她提供了扩展网站举例来说。 “界面具有严格的最小布局,但具有柔和的过饱和渐变,并且大量使用基于阴影的微交互,”她解释道。 “不仅许多可点击的按钮突出了延长的阴影,而且阴影也强调媒体并打破了页面。深度有助于确定视觉层次结构,并可指向用户在屏幕上输入字段和号召性用语。“

平面设计与00s的skeuomorphism和hyperreality完全不同,但钟摆摆得太远了吗? “在2018年,我们将继续走向两全其美的局面,”莫尔认为,“巧妙地重新引入阴影和渐变可以增加功能和美感。”

07.顽皮的插图

A homepage features an illustration of a woman working on a laptop outside

在一个千篇一律的网站中,插图有助于品牌脱颖而出

2017年,我们在网站上看到了更多的插图,这并非巧合。 “品牌想要脱颖而出,插图是将个性注入网站的绝佳方式,”莫尔说。

“它们在视觉上引人入胜,不会妨碍功能性和简单性;插图有无限的形状,大小,风格,是2018年及以后的动态元素。我们正在学习不要以简单直观的用户体验为由忽视游戏性。“

然而,这种趋势不仅仅是异想天开。 “插图可以是非常实用的方式来呈现或解释信息。没有人想要一个无聊的网站,自定义绘图是一种人性化的触摸,可以为其他干燥的内容注入活力。

“市场饱和且竞争激烈,网页设计需要在个性和功能之间取得平衡;插图是展示自己身份的完美方式,只需看看Funemployed.life“。

08.人工智能的发展

人工智能不再是科幻的问题。人工智能已通过对话界面(聊天机器人)等技术进入主流网页设计。事实上,根据eBay产品设计师Elaine Lee的说法,你可能已经在日常工作中使用AI而不知道它。

正如她解释的那样这个帖子所谓的“人工窄智能”(ANI)已经在努力为Google Home和Apple的Siri等语音助手提供支持。它还为亚马逊,Spotify和Netflix等公司提供推荐技术,更不用说智能家居设备,自动驾驶汽车和聊天机器人。

A TrainBot chatbot conversation on an iPhone

随着聊天机器人变得越来越复杂,“人工狭隘智能”正在转变为“人工智能”

“随着人们越来越习惯于与机器人交互,我们看到设计中会话接口的使用有所增加,”首席执行官兼创始人Jim Bowes说道。宣言。 “展望未来,机器学习和人工智能将被引入我们未来几年互动的许多系统中。

“作为一种媒介,设计将以多种方式适应这种情况,”他预测道。 “在某些情况下,它的目的是展示人工智能,有时候设计会使人工智能看起来更自然,更隐蔽。我认为,在实际上没有使用真正的人工智能的情况下,我们会看到大量的设计将试图表现出更高的智能。这通常可以通过在数字旅程中更好地利用环境来实现。“

如果您想了解如何创建自己的聊天机器人,请查看我们的如何构建聊天机器人界面后,如何设计聊天机器人体验提示和这些5个必要的聊天机器人学习资源

09.不对称的布局

响应式设计2010年的运动彻底改变了网页设计,使设计人员能够构建能够无缝适应不同设备的网站。 “今年,我们看到设计的增加反对了响应式设计的限制,试图更具”创造性“,”Bearne说。

Spotify kicked off this trend back in 2015, and it's been growing in popularity ever since

Spotify在2015年开始了这一趋势,并且从那时起它一直在增长

“你几乎可以听到客户的反馈,说:'它可以不那么四四方方,'设计师回应。”新技术意味着在2017年,传统的网页设计规则正在被打破左,右和中心。

但布莱恩表示,这种趋势是谨慎对待的。 “在不对称方面推动限制的设计在2015年真正脱颖而出,”他指出。 “在那一年,Spotify使用不对称设计来传递'音乐年'。在这种情况下感觉恰到好处,并增加了品牌的创造力和大胆品质。不幸的是,它最基本的形式已经开始成为一种常规方法,已经进入更多的网站,而不是更好。

“2017年强调的是不断区分和脱离规则的动力。好的设计师接受规则;他们喜欢他们,他们和他们一起工作。但他们也找到了推动它们并创造新内容呈现方式的方法。这是我希望继续进入2018年的事情。“

10.充分利用移动设备

2017年是移动网络的标志性年份,因为它的使用最终超过了桌面浏览的用途。这意味着明年和以后,网页设计师将比以往更加专注于移动受众。

“随着我们进入2018年,我希望创新能够充分利用我们在桌面上从未见过的移动功能,”莫尔说。 “2018将继续看到设计师开发出巧妙的方式来精美直观地组织信息,从而带来更复杂的用户体验,专注于图标和按钮上的微交互和手势。

“简单地说,直观的可导航网站转换得更好;G-Star的已经非常好地实践了这一点。“

An ecommerce website on a mobile phone

移动只会在2018年对网页设计师变得更加重要

Lopez提供了一个具体的例子,说明移动优先不仅仅是一个轻松的原则,而是需要融入核心设计过程的东西。正如我们前面提到的,动画现在越来越多地出现在网页设计中 - “但有时,它太多了。存在过度使用它并依赖运动来定义体验的危险。

“设计师需要考虑大型动画和过渡如何转化为移动设备等浏览器和设备,其中没有悬停状态和内容需要适应缩小的屏幕尺寸。”

看看这些更好的移动UX设计的10个技巧了解更多。

11.动态电子邮件

“至少在英国,人们最终只是将他们的电子邮件做出移动响应,并开始关注接下来发生的事情。”数字设计主管Rob Pellow说。Adestra

“事实上,虽然仍然有品牌向我们询问如何让他们的活动和模板移动响应,但几乎所有人都在问这样一个问题:'我们还能做什么?'”

An interactive email from Adidas

动态电子邮件正在改善像阿迪达斯这样的品牌与客户沟通的方式

他说,这是第一年,Adestra经常使用“动态”电子邮件:使用CSS3和HTML在电子邮件中创建交互性。这种趋势源于用户对移动应用和网站的UI语言非常满意,他们很高兴在其他地方看到它,包括电子邮件。

“通过这些新的机会,将单个电子邮件活动视为一个旅程的第一步; B&Q向我们介绍了另一个令人印象深刻的旋转木马,它比以往任何时候都在更多的电子邮件客户端工作,Litmus让我们能够在其峰会电子邮件中拥有一个篮子流程,而Rebel(以前的Rebelmail)现在正在销售完成整个结账过程的能力。电子邮件 - 您看到的唯一网页是最后的确认页面。

“这开始改变电子邮件对人们的意义,因为如果我们能够在这里提供这些体验,我们可以将这些事情与网站梦寐以求的个性化水平相结合。谁说电子邮件已经死了?”

12.电子商务热潮

黑色星期五。网络星期一。接下来是什么?随着越来越多的客户探索强大的电子商务平台提供的可能性,明年这一趋势将变得越来越大。

的主人道森设计有限公司克里斯托弗·道森解释说:“我们本质上是消费者。我们总是需要更多的东西......互联网上充满了各种各样的东西。像Deliveroo和Just Eat这样的网站没有餐馆,但几乎可以把任何食物送到我们家门口。亚马逊没有商店,但我们几乎可以在第二天交付任何东西。我们才刚刚开始看到电子商务的可能性,现在我们正在摆脱传统的网店商店模式。“

Ecommerce isn't just about providing a digital storefront, as services like Just Eat prove

电子商务不只是提供数字店面,就像Just Eat这样的服务证明了这一点

除了动态升级,电子邮件将继续在电子商务战略中发挥重要作用。 “这很容易跟踪,易于触发,至关重要的是2018年及以后,更容易个性化,而且我不仅仅是在谈论在模板中添加名称,”Dowson说。 “您的购物习惯将告知您收到的电子邮件类型 - 量身定制,以包含您更有可能购买的产品。甚至购物车放弃电子邮件 - 任何零售商的天赐之物 - 将在您最有可能的时候触发您接受完成订单。所有这些都取决于你购物的方式,时间和地点。“

与往常一样,您的客户将是关键,消除等待时间将是一个重要的考虑因素,特别是对于世界上最大的品牌。 “我们已经看到亚马逊在关键位置提供小时插槽,”Dowson说。 “即时满足的文化将继续渗透到零售业作为一个行业,因此期待大型零售商之间的一些交付战争 - 并利用它们!”

Tools like Facebook Pixel are bringing ecommerce to social media 

像Facebook Pixel这样的工具正在将电子商务引入社交媒体

除了电子邮件,预计社交媒体中的电子商务将成为常态。正如Dowson所说:“Facebook正在逐步推出通过Messenger购买商品的能力,而一些传统的实体零售商甚至通过FaceTime和Facebook Live提供个人购物体验。您现在可以购买饮料并将其交付在某些连锁酒吧的餐桌上,这些酒吧连锁店都有你甚至可能没有考虑的连锁效应 - 也就是说,你的朋友有更多的时间。“

要想在2018年寻找更多的网页设计趋势,请选择网络杂志302 -现在发售 

相关文章:



翻译字数超限