留意新趋势!个性鲜明风格迥异的双色网页设计

编者按:我们过去印象中的双色配色的设计,多是复古而有情怀的,非常的“80年代”。但是今天的双色配色的范畴已经远超越了复古,它可以柔媚也可以冷硬,可以前卫也可以个性,双色配色有多强大,也许取决于你脑洞。

双色配色方案并不是简单的两种色彩搭配到一起,这两种色彩通常是两种对比明显的色彩。而我们所常见的双色配色的图片则主要突出中间色调和高光,蓝色、棕色、红色和黄色是这种配色中最常见的色调。然而,对于网页设计师而言,双色配色则很少受到这样的限制,色调的选取更加自由,搭配方式也更加多样而个性,你会发现原来双色配色也同样可以打开新世界的大门。

如果你需要可以立刻上手的工具,那么下面的这些应该能帮到你:

·jQuery Duotone;
·Duotone Colorschemes;
·Colofilter.

接下来,我们一起看看那些将双色配色玩儿得出神入化的优秀网页设计,看看这个令人着迷的设计趋势,到底有着怎样的魅力。

Adidas Football

留意新趋势!个性鲜明风格迥异的双色网页设计

作为一个运动品牌,设计师通过一系列时尚而现代的高素质图片来体现它的特质,而统一的深蓝/明黄配色则让整个网站的气质和氛围保持了高度的一致,个性也得以凸显。

Mirage Festival

留意新趋势!个性鲜明风格迥异的双色网页设计

Mirage Festival 的红蓝搭配看起来略显怪异,但是两种略显疏离的色彩反而营造出独特的美感,尤其是同主流的白底黑字进行对比的时候。

Fjord Trend

留意新趋势!个性鲜明风格迥异的双色网页设计

Fjord Trend 的首页中,不同图片的背景图被设计成了双色配色。设计师所选取的色彩秉承了传统意义上双色调图片的配色风格,色彩沉稳现代,柔和而不具侵略性,但是作为主要的色调,两者又有着明显的对比。

Triple 9

留意新趋势!个性鲜明风格迥异的双色网页设计

经典的红黑色被Triple 9的首页用作双色配色的主色调,两种情绪浓烈的色彩让这里的视频和图片都带有微妙的情绪。与此同时,色调的选取还让网站隐隐散发出暴力和野蛮的感觉,个性十足。

La Marine Nationale on Board Careers

留意新趋势!个性鲜明风格迥异的双色网页设计

网站的首页被设计成为四个全屏的轮播图,每个都有着漂亮的双色调背景,我们所看到的蓝色背景的图片是海军招募主题的页面。背景的色彩选取同时也让前景的内容和元素凸显出来,让用户更容易获取。

Heroes and History

留意新趋势!个性鲜明风格迥异的双色网页设计

Heroes and History 同样也是一个双色配色网站,主要的色调是红色,作为网页主要视觉要素的插画也同样是如此。和其他的页面不同,双色搭配中的另外一种是白色,除了网站的文本之外,插画的外轮廓和少数几个元素使用的是白色,让插画的风格和特色更加明显。

Holm Marcher & Co

留意新趋势!个性鲜明风格迥异的双色网页设计

虽然同样是使用的双色配色,但是Holm Marcher & Co 的页面从配色到结构都给人一种严肃务实的感觉,沉稳的色调给网站奠定了专业和强力的基调。

MailChimp

留意新趋势!个性鲜明风格迥异的双色网页设计

MailChimp 的回顾页面的配色也可以称得上绚烂,火热的红和冰冷的蓝合二为一。为了保证统一性和体验的一致性,设计师将背景图片也转化为和两种主色调一致的色彩。

Year in Review by Atomic.io

留意新趋势!个性鲜明风格迥异的双色网页设计

Atomic.io 的设计师则将网站的视频和图片都转化为典型的双色配色,强力的视觉冲击力和典型的模块化布局让它简单而一致。

Finesse Design Atelier

留意新趋势!个性鲜明风格迥异的双色网页设计

大量专业领域和机构的华丽照片填满了网站,有些照片还保留着原样,但是有的则进行了有趣的调整。在典型的双色配色之下,这些图片呈现出不同凡响的美感和独特设计感。

jonkopingssodra

留意新趋势!个性鲜明风格迥异的双色网页设计

黄色和绿色的双色配色并不常见,这种独特的配色也让这个页面显得风格独树一帜,不同于传统的双色调图片的那种沉稳,这个网页的色调看起来更加活泼。

Year in Review by Tumblr

留意新趋势!个性鲜明风格迥异的双色网页设计

Tumblr 的年度总结在色调上更加复古怀旧,抽象的动画和海报式的界面元素更是强化了这种感觉。略显脏乱的用色让整个页面充满了80年代的风情,但是卡片式设计的加入,又没有让这种配色毁了整个设计,反而成功地让它显得更加条理化了。

Campaign by Lois Jeans

留意新趋势!个性鲜明风格迥异的双色网页设计

Lois Jeans 的这个页面设计,能量和情绪几乎都要浓烈得溢出来一样。虽然只是简单的文字+图片的排版,但是粉色+蓝色的搭配让页面呈现出一种层次感,协调而惊艳。

New Deal Design

留意新趋势!个性鲜明风格迥异的双色网页设计

虽然这样的配色很少见,但是你并不会觉得New Deal Design的页面难看,你更多会感觉它很有个性。粉红色和黄色的搭配让整个网站显得明亮非凡,充满戏剧性。这种明亮而友好的配色会给人传达出一种正向的情绪。

Year in Music by Spotify

留意新趋势!个性鲜明风格迥异的双色网页设计

Spotify 的这个页面是一定要推荐的。作为年度音乐总结页面,Spotify选取去年最有影响力、蜚声国际的真正音乐潮人作为主题。设计师使用着两年流行的双色调设计来调整精选的艺人照片,营造出独特的氛围。动态设计和层次丰富的美感让页面的风格更加先锋,也更有特色。

Majorette Events

留意新趋势!个性鲜明风格迥异的双色网页设计

首页的设计透露出一种兴奋的情绪,几乎所有的元素被紫红色染透了,屏幕上每个元素浸透在一种俏皮有趣的氛围当中。

The Art of Travel

留意新趋势!个性鲜明风格迥异的双色网页设计

网页设计师对于现代风格的驾驭力很强,页面干净而平衡,和前面其他的案例不同,整个网站呈现出一种严肃的气息,但是同时又不失魅力和艺术感染力。蓝黑色调之间的过渡自然,白色的文本和按钮有与之构成对比,恰到好处。

Lois Jeans Campaign

留意新趋势!个性鲜明风格迥异的双色网页设计

这是Lois Jeans 的另外一个设计作品,网页主题是春夏装,整个页面的设计相对更加谨慎,蓝黑的色调更加冷峻,整个页面呈现出一种冷的情绪,白色的点缀可以说是点睛之笔。页面的过度效果精心设计过,令人侧目。

Wheels and Bearings

留意新趋势!个性鲜明风格迥异的双色网页设计

网页中的双色调图片很好的创造出一种年代感,优雅而漂亮。淡雅的色调于深沉的褐色结合起来共同创造出怀旧的氛围,图片主题也同样会唤醒大家对于80年代的回忆。

Standby

留意新趋势!个性鲜明风格迥异的双色网页设计

Standby 的页面设计走的是极简的路线,整体结构也相对更加优雅。深浅两种蓝色相互搭配,有趣的字体和巧妙的插画恰如其分地丰富了整个设计的细节。

【技多不压身的设计师才有高薪资!】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:designshack
原文作者:Nataly Birch
优设译文:@陈子木

留意新趋势!个性鲜明风格迥异的双色网页设计

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

收藏 9
点赞 2

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。