网页设计中的彩色滤镜效果

标签: 网页设计 彩色 滤镜 | 发表时间:2014-08-24 04:08 | 作者:可乐橙
出处:http://colachan.com/

[国外设计第54期]

Lovedays

在当今这个充斥着先进的特效和精妙风格的世界中,谁曾料到,像纯色和渐变这样简单的手法,竟能够催化出创造力,并极大提升网站的美学水准?现代网页设计师们,证明了优雅的插画、精致的图形和壮丽的照片,都能在彩色滤镜效果下很自然地得到强调。气氛焕然一新,网站开始变得光彩夺目。的确,它有助于解决某些问题。

首先,彩色滤镜能给网站耳目一新的外观,却不会增加负担 。其次,它通过搭配传递各种情绪的色彩,很好地丰富了设计。第三,作为一层低透明度的遮罩,它不会掩盖主背景的魅力,对于想要轻微淡化轮播图或视频区域,却仍希望其吸引力不减的人 ,这点尤其有用。最后,它为前面的内容提供了坚实的基础,兼顾了可读性。

参考: 最佳实践:一流的品牌与推广网站

这种方案能非常协调地与各种元素协作:提供强烈反差的白色、极受欢迎的扁平风格元素,还有为项目增添精致微妙感的轮廓式图形。

这里有些杰出的网页设计,示范了如何正确地运用这项技巧。

Zimya

Zimya

着陆页带有一层美妙的半透明渐变,立刻唤起积极温暖的感觉。从紫红色到橙黄色,遮罩层华丽的颜色令人着迷。

Red Collar

Red Collar

平滑的半透明渐变极大地丰富了背景图——这家机构的视觉象征。它增添了几分独特,不仅与整个场景形成互补,也形成了热情洋溢的氛围。

Ingram Cole and Land

Ingram Cole and Land

这个网站基于一些非常棒的赏心悦目的效果,这不仅指它的动画,还有成功贯穿整个网站设计的照片处理手法。从紫色到粉色,温暖而微妙的渐变,使欢迎页面看起来相当美妙奢华。

Adopt Wales

Adopt Wales

设计师在视频背景上覆盖了一层迷人的粉色渐变,营造了亲切友好的氛围。颜色与透明度的选择很好地突出了上面的元素。

Snippet App

The Snippet App

对于更喜欢创造冷静与便捷的整体感观的人而言,蓝与白的结合是非常有用的。设计师实际上用了三种色调,不过这两者占据主要地位。

Joyce Van Herck

Joyce Van Herck

Joyce Van Herck是名高端艺术家,她的在线作品集网站嵌入了优美的几何图形。甜美的半透明渐变使斜线拥有活力,加强了这种愉悦的氛围。

Electric Mainline

Electric Mainline

和前面提到的Snippet App很像,设计师运用了蓝白混合。不论如何,低透明度的遮罩层,使用户欣赏其背后那张扮演主角的背景图。

Solid Giant

Solid Giant

使用粉色是为了解决几个问题。首先,它能有效地突出标语、logo、导航和微妙的白色幽灵按钮;其次,它建立了一种轻松的氛围;最后,它体现了品牌特征。

Invelab

Invelab

同样,设计师试图在背景与前景之间营造完美的对比,同时也将注意力引向工作室的图片。明亮的紫色有效地与白色形成互补。

M2B

M2B

欢快的半透明渐变强化了网站的视觉表现。正由于采用了这种方式,全新的色彩使得背后的图片陡然增色。而白色被用作一种补充色,使内容看起来醒目。

Lovedays

Lovedays

设计师在欢迎页面上运用了扁平风格 。极简设计只包含了几个轮廓式元素、简洁的字体、朴素的按钮,还有城市背景图。后者与半透明的蓝色相配合,增加了可读性。

Numero Neuf

Numero Neuf

首页的特色是大量基于图片的导航,每一项都覆盖了一层黑色半透明滤镜。这种方式很常用:如果你想为文字营造完美的对比,并淡化菜单项,很自然就应该将注意力引向某个选中的项。

Evoluzione Telematica

Evoluzione Telematica

绿色使人联想到正能量,此处就是这么用的。明亮的色调与白色共同建立了一种积极的形象。

The Place

The Place

这位设计师借极简主义的方式重现了优雅。所选的颜色反映了网站的个性,统一了视频样式。

Obbaki Foundation

The Obbaki Foundation

颜色可以提升感观的协调程度。它丰富了网站的主题,同时轻而易举加入了一些戏剧性效果,对整体氛围有一定贡献。

Studio Up

Studio Up

这个机构通过迷人的效果展现了一个视觉差滚动的介绍页面,向普通用户证明了他们熟稔网页流行趋势。每一页都有其独特的颜色,覆盖在动态的背景上,用以突显其内容。

Hype Agency

The Hype Agency

设计师在焦点区域挥洒了一整片的橙色,为网站营造了恰当的积极的氛围。另一种颜色则是白色,非常明亮并融入其中。

Louis Currie

Louis Currie

Louis Currie不满足于单一颜色;他用了一整套不同的蜡笔色调交替展示。这个网站绝对能体现他敏锐的色彩感与协调感。

Grey Group

Grey Group

华丽的青绿色覆盖了首页,像一层没有重量的轻纱,强化了这个网站井然有序的外观。轮廓式图形和幽灵按钮很好地突出并积极配合主色调。

Papertelevision

Papertelevision

薄薄一层明亮多彩的颜色赏心悦目,伴随着每个主要部分。首页的深紫色几乎不容易注意到,但它仍然能使页面活泼有趣。

结论

彩色滤镜——这种从前在平面设计中的基本技巧,在网页设计中重获新生。虽然色彩轻微地稀释了设计,它也带来了一丝精致和特别的魅力,同时兼具功能性。

原文链接

相关 [网页设计 彩色 滤镜] 推荐:

网页设计中的彩色滤镜效果

- - 可乐橙
在当今这个充斥着先进的特效和精妙风格的世界中,谁曾料到,像纯色和渐变这样简单的手法,竟能够催化出创造力,并极大提升网站的美学水准. 现代网页设计师们,证明了优雅的插画、精致的图形和壮丽的照片,都能在彩色滤镜效果下很自然地得到强调. 气氛焕然一新,网站开始变得光彩夺目. 首先,彩色滤镜能给网站耳目一新的外观,却不会增加负担.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

网页设计的12种颜色

- chenhua - 阮一峰的网络日志
前不久,ColourLovers.com公布了一项调查结果. 他们发现,美国前100大网站的Logo,主要使用12种颜色. 其中,采用蓝色的网站最多,红色排在第二种,黄色排在第三种. 我把这12种颜色的RGB代码列出来,供将来自己做网页时参考.

网页设计师的新挑战

- changwei - 互联网的那点事
随着苹果带来的平板电脑风暴让很多设计理念得到进一步的升级. 每天都有太多的好的创意涌现出来,似乎世界的每个角落都有一群孜孜不倦的Geek在研究着新的技术,在想着好的创意. 或许他们只是用着一种自娱自乐的姿态做着自己喜欢的事情,却给很多人带来了快乐和方便,也在微妙的改变着这个时代. 下面是来自网络搜集来的30个伟大的应用程序以及字体设计,来自网页设计师和开发人员.

如何成为网页设计专家

- Desmond - 译言-每日精品译文推荐
你是否想与客户侃侃而谈让他们认真的对待你的观点,因为看上去你就是个专家. 如果你的答案是肯定的,那么恭喜你,有许多人与你一样. 如果希望有一天能真正做到,那么你需要退后一步再想想,成为专家对你来说为什么如此重要. 为什么我们都希望看上去像个专家. 我们都希望成为专家是因为我们希望我们的观点能够被其它人认真对待.

HTML5和CSS3:网页设计的框架

- 壮壮爱 - 译言-每日精品译文推荐
来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设,网页上一些元素看起来和草稿中相对应元素不完全一样,客户端会发现那些字体定位上的细微的区别.

网页设计应急小技巧

- Guan - 所有文章 - UCD大社区
工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……. 突然觉得束手无策,脑袋里一片空白,没想法了,怎么办. 下面简浅的归纳了几个快速让页面出彩的小技巧:. 1.旋转法 – 将页面的主体或局部进行旋转. 我们一般的页面版式都是方方正正,四平八稳,有点呆板.

触屏网页设计初探 (二)

- 没剑 - 信息和交互 - UCD大社区
触屏版网页应用,实现移动场景用户需求、体现少即是多的设计精髓并表现主流的触屏界面气质,可算初步达标. 在设计过程中需不断打磨细节,提升体验,令设计日臻完美. 让消息更随手,操作门槛更低 . 费茨法则(Fitts’ Law,1954)是一则人机交互法则. 它阐述了:快速移动到目标的时间是离目标距离与目标大小的函数.