印证渐变复兴的20个网站

扁平化设计的时代正在终结,或许不会一蹴而就,却的确在逐渐衰亡。最有力的证明就是这种崭新的渐变潮流正在兴起。相比在web 2.0时代见到的那种渐变,它们更加细致微妙。

坦白说吧,渐变再度盛行了!下面列出了20个主打渐变形式的崭新网页设计。其中有些非常微妙,另一些则极度鲜艳;不论哪种,渐变都是一种为你设计添彩的有趣手法。

VO2 Group

VO2新网站的欢迎页面采用了非常规的设计,大量不同元素层层叠加。树洞般的设计造就了这个网站!很有意思,与众不同。背景元素之一——三角形——呈现了轻微的渐变。就此而言,它为三角形元素增添了视觉吸引力。

Melanie F – Look Book

Melanie的look book采用的布局方式,在时尚类网站中愈发流行,其中文字置于图片之上,两者却不粘连。在本例中,介绍文字呈现在网站页头的矩形上方。矩形中填充了绿色与紫色的渐变,很显然,它有助于吸引视线。

Adoratorio

这家设计机构以特别的方式运用渐变,将它用在了文字区域上。独具一格,相当酷炫。这种方法确实能巧妙地将文字风格化,非常管用。

Qards

甚至我们Designmodo Qard的着陆页也展现了多种渐变。大多页面都被分割成小块,背景填充了不同的渐变色。截图中的页面用的是橙色,其他页面则用了由浅到深的蓝色或绿色渐变。渐变的背景为网站设计增添一种独特的格调。

Symodd

Symodd的首屏,或者说介绍部分,主打由橙色到粉色的全屏渐变背景。这种渐变相对细微,因为这两种色调差异不大,赏心悦目。

Inc

Inc也在首屏区域使用了渐变。但是稍微有点不同,他们将蓝紫色渐变叠加在照片上。此处的渐变也没有太强烈,蓝色与紫色是非常接近的色调,将它置于照片之上效果很好。

Pho

又是一个蓝紫色渐变。它是这个案例集中相对柔和的一款,不过所选的两种颜色相当华丽——它们饱和度低,但对比强烈,看起来令人非常愉悦!

Impossible Bureau

Impossible Bureau的页面采用了非常鲜明、反差强烈的渐变色!很酷的是,每当页面加载完成,其他元素在上方出现,页面的浓烈与戏剧性并没有被冲淡。

Customeed

Customeed选择极度罕见的绿色渐变。出于某些原因,蓝色、紫色、粉色渐变非常盛行。但是绿色渐变也没有问题,它看起来令人愉快,与Customeed的网站配合良好。

Webflow

Webflow并没有大篇幅展示渐变——至少不像本文中其他网站那样。他们在网站首页用了一小片粉、紫、蓝的渐变点缀。这种激动人心的渐变在各处小范围运用,营造了很棒的格调。

Product to Profit

着陆页的渐变色很淡——略微有水洗的感觉。无论如何,它看起来的确很棒,因为并没有刻意突出。淡蓝淡紫色的渐变叠在照片上,效果很好。唤起这个网站一种友好的氛围。

Table Hero

Table Hero的主页遍布友好的小花样,说小花样是指各处的点缀。在1像素宽的按钮边框上,或是极细的标题文字上透出一丝渐变。这种方法很有意思,在设计中融入渐变来增添深度和多样性,却不会让渐变走火入魔。

GoGoRo

GoGoRo的焦点区域采用了极简设计,但绝对够抓眼球。除了巨大的文字“go”、小摩托的照片和少量小字,别无他物。文字本身很细,但由于字号够大,使它表现出一定的厚度。网站的设计师将欢快的蓝绿渐变作为文字的颜色。

Segment

Segment用了深色设计,通常整个区域都采用深灰色背景。但是为了给它添彩——或者说点亮它——他们用了很多明亮的霓虹绿色来提亮设计。某些区域的绿色渐变颇具吸引力,使整个设计引人注目。

Mapbox

进入Mapbox的主页,你会看到一个非常棒的首屏。轮播图中有些采用了微妙的渐变背景,为整个设计增加了纵深感和清晰度。

Gradients, motherfucker.

不知道你是否还记得这个网站,Visual Idiot在2012年发布的。不过随着屏幕滚动,你会发现它的渐变真是切中要害。这个网站相当简单,而且非常滑稽。展现了一系列难以置信的渐变,取自彩虹的颜色,例如粉色、蓝色、绿色、橙色。

Pitney Bowes

又是个大胆的案例。这个网站的设计相当平滑,白色文字在紫色为主体的渐变上显得鲜亮。文字看上去的确很棒。这个渐变其实是均匀线性的,但是得益于上面的蓝色圆形纹理,这种视错觉让它显得有点圆润。很酷,对不对?

Stripe

Stripe近期更新了他们的网站,他们也用了渐变!有些首屏轮播图用了非常漂亮的渐变,你在截图中看到的就是其中第一张。由深色的海军蓝过渡到绿色的渐变,色彩丰富,作为暗色调背景非常好。

One John St

这是Brooklyn DUMBO一个公寓群的着陆页。这个网站令人惊奇的地方,是渐变色会在一天中随着时间改变深度。这个设计非常有趣。

Wake

最后一个案例展现了最流行的蓝紫色渐变,这种配色正如日中天。Wake的网站遍布这种渐变色,因为这是他们应用品牌色一部分。

结论

可以看出,渐变是一项有趣的设计决策。它们造就了这种欢快、激动人心的设计。总体来说,渐变并不差——从来都没有差过——只是我们对太极端的渐变感到厌烦。尽管这些案例中有部分对比很强烈,也有一些呈现了它柔和的一面。希望这一系列能在你未来的设计中激发你的灵感。

作者:Paula Borowska

文章转自:可乐橙

(0)

相关推荐

  • 纯干货 . 推荐20个大气新颖灵感类网站

    今天要推荐的这20个网站不仅排版大气,而且交互和动效新颖,最主要的是适配也完美,无论大屏小屏界面都很舒适.我相信肯定能够给你们灵感. 设计不光要做,审美也要提上来,你的设计水平取决于你的审美!知道你们 ...

  • 2016年新鲜出炉的20款网页开发工具推荐

    越来越多的移动端和桌面端应用开始使用HTML.CSS和JS来开发了,而网页设计 更是离不开这些语言.正是这种局面使得许多新的网页技术成为了可能,也催生了许多诸如React.js.Angular和Nod ...

  • 高并发量网站解决方案

    操作方法 01 一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网 ...

  • 将网站访客转化为客户的三大方法

    当纽约的某位爱美人士在网上搜索"肉毒杆菌"或"激光除毛"时,很容易搜索到Verve美容的网站.这家公司官网更大的亮点在于它的客户转化率很高.但之前却不是这样. ...

  • 无线局域网的组建环境与过程

     无线局域网(WLAN)产业是当前整个数据通信领域发展最快的产业之一。因其具有灵活性、可移动性及较低的投资成本等优势, 无线局域网解决方案作为传统有线局域网络的补充和扩展,获得了家庭网络用户、中小型办 ...

  • 教你如何制作表情包赚钱,附详细步骤图

    操作方法 01 一.制作表情包 关于表情包如何制作,听上去很难,其实做起来并没有那么难.就连年轻人极度嫌弃的中老年表情包获得的打赏都比一般的卡通表情包要多得多.通过这个数据我们不难发现,要想通过表情包 ...

  • 重现江湖的网页渐变色

    小编:今天就和大家一起看看重新回归的网页渐变色,设计师以多种形式运用了回归后的渐变,同时视觉效果超赞的!它并不存在任何明确的使用规则,所以我们可以充分的去发挥,千万不要简单的ctrl C.ctrl V ...

  • 阿里巴巴全球旺铺装修教程

    阿里巴巴全球旺铺装修设计思路整合 操作方法 01 尺寸定格局 1.  首先我们来学习的第一步是整个旺铺首页究竟是什么尺寸比较合适,背景和每个板块之间能够和谐融合,不会出现错位. 02 2.  首页整个 ...

  • 百度关键词优化的37个细节

    操作方法 01 1.网站域名时间超过2年以上,最好是3年.如果新域名,联系人信息一定要公布,均为新信息. 2.网站设计大方,美观 3.网站导航采用文字导航. 4.最重要的关键词放在标题首位,依次类推. ...