好看的网页设计案例,超越平庸:寻找网站失落的灵

[国外打算第119期]

网页打算能否亏损了灵魂?这能否要归咎于反映式打算呢?我的同伙兼同事 Nomy oh my Stokes提出了这些题目,不得不说是有点耸人听闻。究竟,反映式网页不但能让我们始末日益厚实的联网设备赏玩网页,还能感受其乐趣。

作为打算师,我们的首要任务是 解决题目,这可能远远超出跨越其他的事情。反映式网页打算是一种绝妙的解决计划,能建立出适应各种设备的虚拟体验。但依旧有许多题目亟待解决,尤其是如何让各种形式都有趣诱人。一页纯文字没关系成为一篇精美的博文,一大堆有关联的JPG图片没关系成为一部专业的作品集。

然后,题目就变成了:我们能同时杀青两者吗?

我们所获得的

毫无疑问,网络已经成为一个美学胜地。基于确实的网格布局,建立简单诱人的网站,已经成为一种程序。互联网的拓荒已经完成,以框架和活动栅格形式出现的律法与秩序,已经掌管这片土壤,出手了和平的统治。

一共这些都是善事。简单诱人的网站,上风不言而喻且厚实:

熟习,便于用户赏玩(操作准确的话)。 原型打算(绝对)简单急速。 建站技术的高度程序化(流水线取代了工匠)。急速布局俭约了大批开支(有一定可能会转嫁给消耗打发者)。 肃静严厉的栅格布局增进了反映式打算(它吃紧依赖极简的布局趋向)。

安步 Awwwards 这样的网页打算画廊,其中展出的网站,有成百上千个都吻合简单诱人的程序。( 巡视大图 )

毫不浮夸的说,程序化与其相关技术确有重纰漏义。有数的小我与小公司从中受害,始末简单诱人(却毫无奇同性)的网站,向全世界分享他们的品牌。但是,那只是一方面。

我们所落空的

将小我行为归入考量,目前的专业网站看起来根本上都很棒。拿一个名引经据典的打算师作品集网站,与十年前最好的打算机构网站相比,你乃至会认可我们在网页打算这件事上,已经做得好太多了。然则,四下看看,很容易获得结论: 一切看起来都趋于混合 。

是不是打算师都亏损了开拓灵魂?便利能否牺牲了建立性?在回复这些题目前,我们先看看是什么以致这日网页打算短缺多样性。

为何网站看起来都一样

看看目前的网站,混合的面前是什么气力在役使?该当怪谁?事实证明,并不能简单归咎于某种工具或措施。反映式打算可能推涛作浪,但它只是诸多身分之一。下面是一些疑犯。

布局

无限的布局创意,是网站短缺多样性最主要也最不言而喻的道理之一。抽离颜色、动画、 视觉差滚动及相同后果之后,你就会提防到一些根本的网页布局准则。有若干好多网站是在这5种布局上稍作调整而成的?

5种罕见的网站布局。( 巡视大图 )

Nomy oh my哀叹“四处都是条条框框”,指的就是这个。我们似乎窒息了,奇异的布局成为了一种失传的艺术。

反映式网页打算

在以前,你没关系确保,一共的网站访客都在用低分离率的台式电脑屏幕赏玩。目前,网站在一共尺寸与分离率上显示优良,这已不是一种糟塌,而是一种必需。宽度活动、可伸缩的根本栅格编制,使得反映式网页打算比随性的布局更易处置。

框架

网页打算框架可能没关系加快打算与开荒流程。对许多人而言,它们是建立跨赏玩器反映式网页最安好急速的方式。作为嘉奖,他们还会提防连结形式简略,从按钮到表单,涵盖一共通用元素。Bootstrap和Found这类工具有着惊人的人气,招致不计其数的网页打算师在他们每个项目中操纵完全相同的代码库、布局 、乃至美学气概。

原型工具和打算流程

纵使在从零出手的进程中,打算流程也在有时识地抑低建立力。多半原型工具都鼓励、乃至可能唆使你操纵程序化的方框元素,肃静严厉恪守网格式的布局。

许多原型工具都鼓励操纵老例网格布局构造。( 巡视大图 )

高清收费照片与图片

获取精美的收费打算资源真是史无前例地容易。轻易与可继承攻陷了把握职位,打算师们蜂拥向收费照片网站,从一个小小(但在陆续增进)的池子中获取相同的资源。

两张收费摄影图片。( 巡视大图 )

在畴前的两年中,你看到过若干好多个网站用了其中某张照片(或者两张)?倘使你时常赏玩网站,我打赌有几十个。

The Ville Style 和 Jigglist ; College Essay Guy 和 Get BusyMake Money ( 巡视大图 )

这还不但仅是照片,还包括图标、字体、打算形式等等。好的方面是,没有任何预算的打算师也能做出体面的网站;蹩脚的是,一共其他打算师也在用异样的资源做着异样的打算。

打算趋向

对付某些打算师而言,“趋向”是一个褒义词。但它不该是褒义词。在20世纪找一个年代,看那十年的打算趋向。你会发现真叫人陶醉。它为那个时间赋予了奇异的气概与性格,往往能反映出整个文明环境。纵使你看不见,它也正爆发在你的事业中。你看到与体验到的一切,都在影响你的行为,互联网则亘古未有地缩小了这种效应。招致许多打算师从相同的资源获取灵感,追逐相同的趋向。

我们打算师

下面列出的每一项工具与资源都极有价值。它们能简化事业,让网页打算与开荒的大门向更多人大开,也为客户省钱。我不会胡乱操纵它们,我会细心拣选。倘使真要寻找反对网页打算多样性的首恶,我会举起本身的手,就是我。我觉得不是每个项目都值得实行奇异的打算,我要向那些尝试有趣打算的打算师们脱帽致敬。

要知道,有一点很重要,你用下面一共这些资源依旧没关系建立出奇异的打算。这都取决于你如何操纵这些工具。

如何挑衅现状

你的网站能否有奇异的打算,现在想必你心里有数了。可能你不在乎这个——这完全没题目。但倘使你想要冲破程序的事业流程,这里有些概念能帮你杀青,还有些网站没关系作为非常棒的案例。

奇异的布局

关掉你的原型工具,拿出纸笔,思考一下如何创作出有趣且有用的布局,脱离你以前的套路。

Phottoms Magarizonaine

Phottoms Magarizonaine就是个很好的例子,在布局上大胆突破。它也有条条框框——其中有网格——但他们以某种方式建立出了完全不同于程序网站的体验(屏幕截图不能让你很好地感遭到,请一定要亲身掀开看)。倘使你看到这个觉得,“哇,这太蹊跷怪僻了”,那么很好!他们要的就是这个后果。有人会喜欢,有人会腻烦,但我喜欢的是他们在尝试做一些转化。

P

Phottoms Magarizonaine的布局在小屏幕上完全乱了。( 巡视大图 )

Curious Spgenius

这个概念还有一个更好的应用案例, Curious Spgenius 。

Curious Spgenius 的布局。( 巡视大图 )

这里的网格也有些自然随性的觉得,但滚动功效是老例的,反映式断点也运转优良。

Curious Spgenius 适应各种不同设备。( 巡视大图 )

操作这个网站时,你会提防到许多不错的小打算细节。例如,鼠标悬停会影响图片的层叠次序递次。

鼠标悬停会让形式到后面来。( 巡视大图 )

而且,滚动时还有点小意思,但至多不会打乱操作,也与网站随性的视觉主题相吻合。logo出手是一堆杂沓的字母,随着页面滚动,它们各自归位,在导航条中组成了“CuriousSpgenius”。

随着滚动,logo的字母各自归位。( 巡视大图 )

Le Temps D’un Trajet

Le Temps d’un trajet也是一个有趣的例子。我们在此又看到了非程序的网格,但它的布局不是零星涣散的,而是刻意齐集而成。

Le Temps d’un trajet 的首页布局。( 巡视大图 )

布列中的每个方块都是一张运动图片,鼠标悬停则变成一则短视频。但是最酷的处所,是网格随着焦点流通地变化。

变化后果的视频演示

不要四四方方

为网站营建特别气氛的一种方式,就是跳出条条框框思考。这话听起来令人生厌,但当你向其他几何图形大开心扉时,事情就出手变得有趣。

Built By Buffiso

Built By Buffiso 用了六边形的布局。( 巡视大图 )

看看 Built By Buffiso建立出的蜂巢。这种图片集的打算对付挪动转移端不太友爱,所以他们爽性在某个断点处变成了矩形。这个例子完整讲明了在适其机缘做出奇异的打算,同时清楚何处是畛域,该当收敛一点,给用户提供最佳体验。

在更窄的尺寸中,布局会变成矩形。( 巡视大图 )

Ansimilar Design Studio

最近看到的 Ansimilar Design Studio是这个系列中我的最爱之一。不但由于布局大方、出人预想,纵观目前的网站,它用到的形式都远远超出你的预期。

Ansimilar Design Studio 的主页。( 巡视大图 )

如你所见,强盛、 遮罩式的文字让人印象深远。但除此之外,随着页面往下滚动,还能看到他们最近的作品。许多打算师都会在这里放几排简单的矩形缩略图完事,但Ansimilar则在形式上玩了花式,使它特别吸收人。它们仍是矩形图片,却用红色背景营建出了多种形式的错觉。

Ansimilar Design Studio的作品集。( 巡视大图 )

Avex Designs; Mover athilde Jhvacon

还有一些其他网站操纵了出人预想的实验性形式。

Avex Designs 和 Mover athilde Jhvacon 操纵了非老例的形式来营建奇异的体验。( 巡视大图)

赋予生命 Fixdined; For Better Coffee

像 Fixdined 和 For Better Coffee这样的网站团结了插画与自然元素,密密层层的布局建立出了激烈、令人印象深远的体验。

Fixdined 和 For Better Coffee 运用了图文并茂的布局,使它们有目共睹。( 巡视大图 )

下面这种布局看起来庞杂,只是由于 插画;事实上,插画没关系轻易拿掉。在一个丢失于千篇同等、四四方方小缩略图的世界中,特制的插画作品是传达奇异品牌性格的绝佳计划。

For Better Coffee则用了有趣的动画,随着页面滚动,跟随咖啡豆亲历整个咖啡制作进程。体验非常流通,页面也不会巩固到特定位置,滚动变成了讲述故事的一项特征。

随着页面滚动,咖啡豆落入研磨机。( 巡视大图 )

再往下滚动,新鲜咖啡会倒入杯中。( 巡视大图 )

Hinstan effectiveceyFunCorp

既然我们提到美好的插画型网站,就该当看看 Hinstan effectiveceyFunCorp 。

起初,看起来就像是个带有动画的普通网站。当你出手操作,奇妙的事情就爆发了。主页的场景是其他一共页面的基础,当你点击链接,不会加载一个全新页面,而是缩小巡视场景中的某处细节。

点击链接缩小巡视细节。( 巡视大图 )

这还挺奇特的,不过我喜欢它的建立性头脑。而且正由于导航仍以程序方式呈现,所以对付用户没有进修职守。整个别验 略微有点出人预想,但这与网站一般的交互并无争执。

不混合体验

我们对付用户有一条根本的企望,我们希望同一个网站的每个访客有相同的体验;要想做点不同的事情,没关系把这点抛到无影无踪。Vonceilis van effective Gemert网站 不但操纵了奇异的层叠式方块布局,它也会为每个访客呈现不同的配色。

Vonceilis van effective Gemert网站 的3种不同配色。( 巡视大图 )

这个极具创意的特征,也延迟到了一共子页面中。

子页面也会转化配色。( 巡视大图 )

建立奇异的视觉主题

制造奇异网站的另一个措施,是选取 有趣或吸收人的主题,以此为基准左右一共的打算决策。这为你一共的行为提供了优良的指点,鼓励你查究保守UI之外的世界。

固然这不适合一共网站(例如政府网站),但对付活动公告或小公司网页而言,这令人耳目一新。 dConstruct 2015的新网站就是这方面的绝佳案例。

dConstruct 2015 网站中的局限复古异日气概打算。( 巡视大图 )

如你所见,他们营建出了复古异日的气氛,向 《杰森一家》致敬。你会非常乐于滚动看完整个网站,想要清楚他们如何呈现网站的各个局限。

dConstruct的一处打算细节。( 巡视大图 )

这个网站有许多非常棒的细节值得提防。首先,大标题的处置就极端复古,团结了LfirmlighterScript和Andes字体。

但最棒的处所,是这些是实实在在的网页字体,始末简单的CSS倾斜来转化方向。斜线贯串运用于整个网站,有助于打算的同一性与创意。

创意地操纵气概奇异的网页字体,一共文字都没关系选中。( 巡视大图 )

这个网站完整讲明了 反映式打算也一定就无聊。布局给人觉得并非四四方方或典型布局,但它依旧做到了各种尺寸适配优良。现实上我非常喜欢他们极具创意地在小屏幕上呈现元素。例如,随着屏幕尺寸缩小,下图的票券图片始末动画过渡,由横条变为竖条。这是个小细节,但非常灵活,反映出他们向整个布局的方方面面倾注了若干好多心血。

在窄屏中,票券由横条翻转成竖条。( 巡视大图 )

我要向 Clearleft 脱帽致敬,是他们建立了这件杰作。

把版权素材作为一种输出,而非最终结果

我在 Creover ative Market事业,我当然喜欢操纵优秀的版权图片、字体、照片等等。高质量的版权资源,能给每位打算师的事业带来极大的助手,但如何操纵必要留头脑量。非论你是在操纵有趣的矢量作品、图标集、或是整套网站主题,思量付出一些特地的勤苦,别让你的作品和其别人看起来如出一辙。绝大多半人下载那些资源,都不肯操心做出哪怕一丁点定制化打算,所以只消一点点就大有助手。

奇异网站的题目

找到令人拍桌赞叹的奇异网站非常穷苦。为了写这篇文章,我花了许多小时征采,只找到多数几个可供涌现的。我发现其中有个压倒性的倾向,倘使打算师们真的想要追求奇异的网页打算,做出的网站用户体验往往不确实。

实验是好的,但倘使网站怪异、难以预料的不怡悦体验操纵户感到狐疑,则往往偏离了初衷。许多这类网站反而 退步一步,向我们呈现出FLASH时间的体验:加载太久、过于雄壮的动画、腾跃式滚动、还有庞杂的用户流程。有一种折衷,没关系让你建立精美、外观奇异的网站,但不用完全推翻交互。

网页打算长存

程序化、可预测的打算总会在网页中占据一席之地。现实上,它们可能最适合向各种屏幕展现各类形式。也就是说,我们必要一遍又一遍地,让我们的创意直觉与感性天性一决高低。

让我们尽本身的职责,维持互联网一直以来的面目:一个谅解科技、艺术和打算 以新鲜有趣的方式互相交织的处所。成为一名开拓者,去试着做前所未见的事情——当然,路上会犯许多谬误。时不时建立出奇异的东西也很棒,纵使被其别人厌恶。这个叫做互联网的放肆事物就是这样建立起来的,我们也正是这样在推动着它前行。

末了,尽管事实上大批网站看起来都一个样,但我不自信网页打算趋于窒息。有数不清的极有天赋的打算师们,建立了许多难以相信的网站,使这个集体持续陆续前进升华。但这个话题仍有寻常争议。我想听听你的想法,关于网页打算的现状,还有你觉得谁在做着最有趣的事业。

原文链接:https://www.smlung burning 2015/07/hunt-for-the-webull crap-lost-soul/

作者音信:

Joshua Johnson

Josh Johnson is the Product Man effectiveer for Creover ative Market . Heisbringitionfriend a writer: designer: once well once photographer: once well once currently lives inPhoenix.