9个参考网站,让你的网页设计不再千篇一律【设计资源38】

举报 2016-03-28

9个网站可供参考,让你的网页设计不再千篇一律【设计师资源38】

素材来源:可乐橙
原文:SMASHING MAGAZINE

对于网页设计来说,现在可能已经陷入了一种趋同化的尴尬境地,这主要归咎于以下几个原因:1、有限的布局创意;2、响应式网页设计;3、网页设计框架;4、原型工具和设计流程抑制创造力;5、高清免费图片;6、设计趋势;7、设计师自身。总而言之,许多所谓的简化工具和设计规范在方便设计师工作的同时也设定了更多的条条框框。

想要改变这样的现状,可以参考下面这些网站:

1、Curious Space

网站地址:http://www.curiousspace.com/

Curious Space里的网格有些天然随性的感觉,操作这个网站时,你会注意到许多不错的小设计细节。例如,鼠标悬停会影响图片的层叠顺序。而且,滚动时还有点小趣味,但至少不会打乱操作,也与网站随性的视觉主题相吻合。logo开始是一堆混乱的字母,随着页面滚动,它们各自归位,在导航条中组成了“Curious Space”。

Curious Space


2、Le Temps D’un Trajet

网站地址:http://letempsduntrajet.com/

Le Temps d’un trajet也是一个有趣的例子。我们在此又看到了非标准的网格,但它的布局不是零星分散的,而是刻意聚集而成。排列中的每个方块都是一张静止图片,鼠标悬停则变成一则短视频。但是最酷的地方,是网格随着焦点流畅地变化。

Le Temps D’un Trajet


3、Built By Buffalo

网站地址:http://builtbybuffalo.com/

Built By Buffalo用了六边形的布局。这种图片集的设计对于移动端不太友好,所以他们索性在某个断点处变成了矩形。这个例子完美诠释了在适当时机做出独特的设计,同时了解何处是界限,应该收敛一点,给用户提供最佳体验。

Built By Buffalo


4、Anakin Design Studio

网站地址:http://www.anakin.co/en

Anakin Design Studio不仅布局漂亮、出乎意料,它用到的形状都远远超出你的预期。如你所见,巨大、遮罩式的文字让人印象深刻。但除此之外,随着页面往下滚动,还能看到他们最近的作品。许多设计师都会在这里放几排简单的矩形缩略图完事,但Anakin则在形状上玩了花样,使它更加吸引人。它们仍是矩形图片,却用白色背景营造出了多种形状的错觉。

Anakin Design Studio


5、Mathilde Jacon

网站地址:http://www.mathildejacon.com/

Mathilde Jacon将所有页面融合在一个类似飞镖盘的设计里,随着鼠标移动,滑块经过的区域颜色会加深,而其他区域则变淡,点击即进入详情页面。

Mathilde Jacon


6、For Better Coffee

网站地址:http://forbetter.coffee/

For Better Coffee结合了插画与天然元素,密密麻麻的布局创造出了强烈、令人印象深刻的体验。随着页面滚动,跟随咖啡豆亲历整个咖啡制作过程。体验非常流畅,页面也不会固定到特定位置,滚动变成了讲述故事的一项特色。

For Better Coffee


7、HappyFunCorp

网站地址:http://happyfuncorp.com/#home

HappyFunCorp是一个典型的插画型网站,起初它看起来就像是个带有动画的普通网站,当你开始操作,主页的场景是其他所有页面的基础,当你点击链接,不会加载一个全新页面,而是放大查看场景中的某处细节。

HappyFunCorp


8、Vasilis van Gemert

网站地址:https://vasilis.nl/

Vasilis van Gemert不仅使用了独特的层叠式方块布局,它也会为每个访客呈现不同的配色。这个极具创意的特征,也延伸到了所有子页面中。

Vasilis van Gemert


9、dConstruct 2015

网站地址:http://2015.dconstruct.org/

dConstruct 2015营造出了复古未来的氛围。网页字体通过简单的CSS倾斜来改变方向,斜线贯穿运用于整个网站,有助于设计的统一性与创意。这个网站完美诠释了响应式设计也未必就无聊。布局给人感觉并非四四方方或典型布局,但它仍然做到了各种尺寸适配良好。

dConstruct 2015

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)