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

2016/04/14 18206

duotone-website-design-1

编者按:我们过去印象中的双色配色的设计,多是复古而有情怀的,非常的“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
优设译文:@陈子木

yestone-uisdc-1

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

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

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/duotone-website-design

素材 界面设计 交互设计师 好文 UI 设计流程 转场动效 用户体验设计 设计师专访 设计师 排版布局 扁平化设计 素材下载 视觉设计 职场 设计规范 产品设计 配色 web前端开发 设计趋势 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里