公司新闻

将想法与观点,与您一起分享~

开发案例插画 插画-树 插画-树

打破平淡魔咒的网页设计案例

润雪科技 时间:2018-07-31 09:54 浏览量:2121

网页设计发展到今天,虽然短短不过二十年,就已有人喊出网页设计已死的呼叫。不管这种呼声是否有现实意义,笔者不得已也悄悄发现目前网站有着看似雷同的弊病。扁平化、网格式卡片、大图背景……也许你仍然觉得这是时髦设计的元素,但是作为设计师们却为此苦恼。因为设计师最讨厌的就是时髦!设计师也许是走在最前沿的那群人,但当他在前沿之时,正是还没有得到大众认可的时候。这有些像登高望远的那群人,总是很远就看到有人走过来,但是原地的人仍然觉得是空无一人。

扁平化有他的好处,针对响应式设计的需要,几乎解决了大部分网站的结构繁冗的问题。少即是多也让很多人沉迷在乔布斯为我们创造的现代神话里。但是我们大部分精力已经忙于应付如何简化网站,却忘记了网站的另一个功能,那就是吸引。没错,媚俗!你能说媚俗不好吗?大部分嗤之以鼻的招引态度,其实每个人内心深处也跃跃欲试。难道我们做网站就是为了孤芳自赏吗?

网站设计不是艺术品创作,但它也并不是独立于艺术而存在。找到其中的平衡点可不是件简单的活。能带给用户全新流畅的体验,我们可以为此谈上大半本书,但是这种调子太多,只会让我们行动上不知从何处开始。

除了把我们的创造力磨练得更为敏锐以外,我们可以从国外一些成功俘获了用户芳心的网站上吸取一点实战经验。你可以从这些设计师的作品里看到他们做出的改变现状的努力,一起来打破平平淡淡的魔咒!

1、Phasesmag

略显静态,但绝对反规则。界面依然简洁,细节却已经让人耳目一新,比如侧转90度的文字。很多人觉得文字必须清晰易读,但如果当文字旁辅佐的图片成为主角时,你可以试试用不一样的呈现文字的方式,降低它的辨识度也许也不失为一种好办法。


image.png


2、Curiousspace

除了页面中对图片重重叠叠的范式外,我还特别看中网页的标识设计,几个随机摆放的字母,等你往下拖动鼠标时,文字就各就各位变得归正。背景纹理的运用让网站整体风格趋于华丽,但不会凌乱。


image.png


3、Letempsduntrajet

从网站的登陆页开始,网站就以动态的效果示人,惊喜连连。


image.png


4、Builtbybuffalo

在考虑抛弃传统的网格卡片式图片,这个网站显然是想从形状上对图片加以改变。虽然每个图片占比不大,但是作为缩略图吸引用户点击,已经足够了。而且值得一提的是,这个网站在手机上显示时,就放弃了蜂巢式的图片展示效果,而以传统的两列卡片式样展示。这是为了PC网站的风格独特性而做出的小调整。


image.png


5、Anakin

用超大号字母来隐显下方的图片,让人眼前一亮。特别是网站下方展示图片的设计,对缩略图稍加修饰,不再拘泥于四四方方的形态,让它们各具特色,然而在整体上又不失和谐,这真是个亮点!


image.png


6、Fixate

让网站独一无二的方式,还可以运用插画。下面几个网站都是运用插画来设计网页的例子。插画让网站更具个性,当然也投入更多的时间和人力。

网站得搭梯子。


image.png


7、Forbetter coffee


image.png


8、Happyfuncorp

这个插画的首页咋一看去没什么特色,但是当你点击插画的其中一个部分,比如风车,这时就会出现一些让你意想不到的效果。这让网页充满玩乐的趣味。


image.png


image.png


9、Dconstruct

这个网页的插画带着怀旧风格,还保留整体倾斜的一种律动感。


image.png


image.png


10、Objetorocha

一个内容非常少的网站,只有几张图片和一个链接。设计师将网页处理得非常精细,抛弃了常规的图片展示方式,每张图片甚至能根据鼠标的移动而呈现出不同角度的阴影。这点让人印象深刻。


image.png


image.png


11、Sa-studio

展示图片的方式比较特别,在空间上增加了层次,给图片更多想象空间。


image.png


12、Neiouma

配色和图片搭配得很巧妙,而且笔者最喜欢的是设计师巧具匠心的把下一个图片的文字背景露出一小部分作为提示也可以点击,同时,还加强了色彩的对比,让画面更加丰富。


image.png


13、Vo2-group

有时候,在展示出动感效果的时候,仅仅只是需要一些简单而大胆的用色,和一个大号字母,也许就能扭转乾坤。


image.png


来源声明:本文【打破平淡魔咒的网页设计案例】由润雪科技编辑原创或采编整理,如需转载请注明来自润雪科技。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系。

TAG标签:网站开发 网站设计

相关文章
如果您感觉我们的案例非常不错,请与我们取得联系~
立即咨询
获取方案及报价 023-6288-5285
网站建设流程 需求沟通
网站建设流程 签订合同
网站建设流程 项目开发
网站建设流程 上线/运营维护

张经理

186-9655-6121

邹经理

188-1980-6503

润雪科技二维码
电话咨询 在线咨询 微信咨询