全部课程

全部课程分类

培训乐帮返利流程

渐变的艺术!20个精巧微妙的渐变色网页设计

2015-07-25 12:04    发布者:梁老师    评论:0    浏览:120
摘要:在扁平化刚刚兴起的时候,纯色的运用似乎将纹理和渐变都打入了设计的冷宫。然而在随后的发展中,这种“纯粹的扁平”似乎并不理想,纹理、阴影、渐变正在一点一滴地回归并坚定地占据着属于他们自己的位置。

在这些曾经被打上“拟物”标签的设计手法中,渐变是上一个时代中运用的最广泛也最有代表性的一种。那么在设计风格愈发现代,简约大行其道的今天它是否还有市场呢?下面的20个微妙而有趣的案例会告诉你它回归的理由。

VO2 Group

VO2是一个典型的例子,简约的风格很典型,充满力度的鲜艳字体,灰色的背景和动态的人物动作,装饰性的三角形元素采用的渐变的色彩,令整个设计层次梯度都展现出来了。

Melanie F – Look Book

使用不完全对称的非衬线体来作为标题是目前时尚类网站中越来越流行的手法。而字体下方的彩色背景使用了绿色到蓝紫色的渐变,不仅消解了单调感,而且让文字标题更加容易被注意到。

Adoratorio

这家设计机构对渐变的运用截然不同,他们将渐变色用作文字而与纯白的背景形成对比,炫酷而创新。

Qards

Designmodo 所推的设计工具Qards在其子页面的着陆页上也同样采用了渐变色的设计。不同的板块使用不同的渐变色作为背景,而图中所示的渐变橙色中,还在底色中加入了一些图形元素,整体显得更加饱满。

Symodd

Symodd的介绍页也同样使用了由橙过度到粉色的渐变色背景,由于色调控制得非常微妙,确保了可读性的同时还非常令眼睛讨喜。

Inc

Inc 在渐变色的使用上和其他的几个案例稍有不同,蓝紫渐变色叠加到背景图片上,营造出融入感十足的设计,色彩变化幅度微妙,与图片的融合毫无违和感。

Pho

蓝紫色渐变似乎非常为设计师所青睐,这个网站采用了相似的设计。低饱和度的色彩和鲜艳的文字构成明显的对比,视觉效果挺不错的。

Impossible Bureau

Impossible Bureau 使用了极为鲜艳的色彩来构建这个过渡色彩的对比。而这个页面最酷的地方在于,页面其他的元素都加载完成之后,过渡色彩就逐渐变的不那么晃眼了。

Customeed

Customeed 的整体设计给人感觉非常舒服,页面的背景渐变色使用的绿色,这样的渐变色使用并不多见,相比之下,更多的网站设计师会选择蓝色、紫色和红色。

Webflow

相比于其他的网站,Webflow并未将渐变用作主要的设计,黑色背景使用了lowpoly效果,视觉上并不单调,作为注册/登录的表单背景,由紫到蓝的渐变背景条和整个大背景形成了对比,效果不错。

Product to Profit

这个页面的着陆页使用了微妙的渐变色,采用的也是色彩和背景图叠加的手法。这在做法最大的特色是让整个页面氛围更令人舒适。

Table Hero

如果你不仔细看,可能会觉得这个页面的背景是纯色的,实际上只是它的色彩变化梯度并不太明显而已。有意思的是,这在设计配合着1px宽的细线构成的字体和图标,使得背景更有质感。

GoGoRo

这个页面使用了典型的极简设计,白色的背景上一辆摩托车的侧面特写配合一个硕大的“GO”,文字很简单且单薄,但是设计师将渐变色彩叠加到文字之后,使得整个页面鲜亮起来了。

Segment

深灰色的背景被用作上半部分的背景,显得特别沉稳,而下半段如同霓虹一般的绿色让整个设计亮了起来。

Mapbox

简约的设计,直观的布局,微妙的渐变蓝色,清爽而令人舒适,你还想要什么呢?

Gradients, motherfucker.

这其实是一个非常搞笑的文章,如果你英文够好的话。当你滚动页面的时候,它的渐变背景会逐渐改变,看起来非常炫酷。

Pitney Bowes

这个网站的设计其实也挺大胆的。渐变的背景加上了水波纹纹理,和白色的文字形成对比。

Stripe

Stripe 最近的一次更新将网站的设计更换成目前的样子,由深蓝渐变成绿色,整个色调显得深沉而富有质感,和前景的文字、手机图片形成了良好的搭配。

One John St

这是一个位于布鲁克林的公寓的网站的着陆页,这个网站的有趣的地方在于它的色彩会随着每天的时间而变化。

Wake

毫无疑问,使用流行的蓝紫渐变色是一个流行而确定可靠的设计方案。

结论

渐变色同样可以构建出有趣而令人兴奋的设计。虽然有的例子会有一些反差,可以大胆直观,也可以柔和而细腻,它们和这个时代的设计可以融入得非常好,重要的是这个度的控制。

0 顶一下
更多>>
网页设计机构推荐
更多>>
网页设计课程推荐

  ¥80 ¥80

网页设计培训精英班

最近开班: 暂无
课程介绍:【课程特色】经典创想首席主讲教师精心主讲,按照Adobe Photoshop CS6实践应用技术进行章节划分,全实战模式讲解PS全部学习内容,按照设计工作流程授课,教程包含大量的实践技巧和案例演示,紧密结合美术设计原理和图像处理和绘图技术,学员可学到Adobe Photoshop CS6的全套技术知识;培训PS图像处理和绘图高手!

学费:电询   人气:117

  ¥50 ¥50

网页建设全能班

最近开班: 网页建设全能班
课程介绍:学习B班全部课程,同时深入学习PHP动态网站开发技术。学完能胜任各类企业的网页美工职位,并能独立建站与维护网站,以及掌握现有CMS系统的应用和二次开发。

学费:电询   人气:1034

  ¥50 ¥50

高级网页设计师培训班

课程介绍:古人学习书法的方式首先以临摹为主,然后以此为基础再形成自己的风格,如果能够师从名家,经过点拨,则更快更容易在书法界有所成就。网页设计的学习与书法极为相似,在熟练掌握设计软件的基础上,全面从配色、版式布局、字体搭配入手,在临摹优秀作品之后,通过不断的尝试和创新,最终形成自己的设计风格。

学费:1980元   人气:1030

  ¥50 ¥50

商业广告品牌策划提高班

课程介绍:学习最全新的平面、网页设计软件知识,同步临摹优秀作品,进行大量的案例操作,灵活使用设计软件。熟悉掌握电脑软件操作,为设计打下创作打下基石。在各个设计项目中巧妙地应用,设计精美的广告与网页作品。

学费:电询   人气:912

  ¥50 ¥50

3个月网页美工实战班

课程介绍:首先,欢迎走近我们的网页三剑客软件强化班课堂,学习之前先了解我们的课程特色和优势,以便于你更加快速的选择适合自己学的培训课程。

学费:电询   人气:266

网页设计相关文章
软件开发难学吗
学UI设计2015年毕业大学生新选择吗
上海跑赢职场为UI设计学员定制专属课程
上海跑赢职场UI设计-让你不仅仅是网页设计师
上海比较好的UI培训有哪些呢-如何选择一家好的
上海UI设计培训适合自己的才是最好的
上海UI设计培训班带你进入UI设计师行列
上海UI设计UI设计构图法
上海UI设计-跑赢职场为你保驾护航
零基础学UI设计如何选择培训机构
大学生就业新选择-UI设计前景广阔
穿戴设备UI设计新挑战
UI设计师如何与产品经理进行沟通
90后学ui享高薪未来
手机UI设计培训-如何选择培训机构
上海UI设计-UI设计菜鸟如何快速入门
游戏UI设计的酬薪概况及其前世今生
手机ui界面设计的三个方面
如何应对游戏UI设计的错误
UI设计需要什么样的美术能力


如果您要进行评论信息,请先 登录 或者 快速注册 。
评论总数:0

网友评论

为什么选择优训网
  • 贵就赔 报名价同班最低
    差价双倍返还
  • 顾问服务 培训最怕时间和钱花了,东西没学到
    专业顾问,给你内行建议
  • 点评返利 学完后分享点评,
    不仅能帮助别人,
    还能获得返利

服务热线:400-68-12568

扫一扫 就有礼!
关注优训网新浪微博
有价值的教育培训资讯 扫一扫 收听优训网微信