设为首页 - 加入收藏 泰安香港财神报(0538Zz.Com)- 专业服务于站长和网站的信息平台,全力为中小站长和网站提供最全面及时的站长资讯、互联网动态、创业经验等!
热搜: Linu 站长之家 荣耀6Plus
当前位置: 首页 > 运营中心 > 网站设计 > 佳作 > 正文

2015年最优秀的20款网站配色方案

发布时间:2016-10-09 04:38 所属栏目:[佳作] 来源:优设网
导读:副标题#e# 编者按:网页设计领域的业界良心Awwwards除了每天推荐好网站,定期做评比之外,还会在博客里面推荐各种网页设计的技巧和总结,今天的这篇文章最初是源于一个探索性的项目,项目结果炫酷然而乍一看并没有什么卵用,不过,如果将这个项目同最近选出

编者按:网页设计领域的业界良心Awwwards除了每天推荐好网站,定期做评比之外,还会在博客里面推荐各种网页设计的技巧和总结,今天的这篇文章最初是源于一个探索性的项目,项目结果炫酷然而乍一看并没有什么卵用,不过,如果将这个项目同最近选出的20个配色优秀的网站相互印证,足以看出时下配色的大趋势。当然,好人做到底,作者干脆把时下流行的基于Material Design 的配色工具连同常用而经典的配色工具一同推荐给你,这也构成了今天文章的三大部分。OK,正文开始~

几周以前,供职于 Jam 3 的图像开发者 Matt DesLauriers (@mattdesl)向我们展示了Awwwards 平台上的一个有趣的发展趋势。正如同你所看到的,Awwwards 从 2009 年开始就专注于搜集网络上最有修的网站,而这些网站就是网页设计趋势分析的重要素材和来源。

“这个项目始于一个实验:当时我刚刚开始学习Node,正打算在Awwwards上挖掘一些数据可视化的案例。”

Matt 开发了一个工具,它可以抓取每一个Awwwards的获奖网站的元数据,比如站点名称、开发者、日期、URL、缩略图,等等等等。这个工具还会分析每个网站缩略图的配色,生成一套相对粗略、包含三个主色的配色方案。

网站配色方案 网站配色 颜色配色方案

如果将其按照日期和亮度来进行排序的话,会得到下面的图:

网站配色方案 网站配色 颜色配色方案

获取配色方案的数据之后,工具将每个网站的三色配色方案用饼状图呈现出来,在Canvas2D的渲染下生成上方的图片。在这个过程中,Matt还使用了Node.js、d3.js、Cheerio,Browserfy 等开源工具。

由于采样巨大,信息量惊人,想一眼洞见规律并不容易,但是仔细观察你会看到配色方案演进还是隐隐遵循着某种趋势和规律的。

1、20个配色最佳的“每日一站”

Awwwards 每天推荐的网站都是设计技术俱佳的优质案例,由于评选过程中网站的不同属性都会被打分,因此配色优劣在这里也是被量化的。所以,文章这一部分是从最近几个月的每日一站中精选的20个配色顶尖的优质网站。如果你需要现成的配色方案,直接借鉴下面的方案吧。

Créations Namale?By Phoenix The Creative Studio

网站配色方案 网站配色 颜色配色方案

LEVEL?By Vide Infra

网站配色方案 网站配色 颜色配色方案

Brdr. Krüger?By Relax, we are the good guys

网站配色方案 网站配色 颜色配色方案

Dream Team Katarzyna Konkowska?By BrightMedia

网站配色方案 网站配色 颜色配色方案

L’Avenir, Dental Clinic?By Phoenix The Creative Studio

网站配色方案 网站配色 颜色配色方案

QED Group?By madeo

网站配色方案 网站配色 颜色配色方案

Quay Restaurant?By Pollen

网站配色方案 网站配色 颜色配色方案

Teye?By denkwerk

网站配色方案 网站配色 颜色配色方案

Weber – BBQ Cultures?By UncleGrey & MediaMonks

网站配色方案 网站配色 颜色配色方案

Tens Sunglasses?By Elegant Seagulls

网站配色方案 网站配色 颜色配色方案

Helbak Ceramics?By Anders Bergh

网站配色方案 网站配色 颜色配色方案

Crea Carte?By Dataveyes

网站配色方案 网站配色 颜色配色方案

Suspended Animations 2015?By Baptiste Briel & Flavinsky

网站配色方案 网站配色 颜色配色方案

Pablo The Flamingo?By Pascal van der Haar & Nathan Gordon

网站配色方案 网站配色 颜色配色方案

Baku 2015 – Follow the flame?By Steven Delcourt

网站配色方案 网站配色 颜色配色方案

Bonhomme?By Bonhomme

网站配色方案 网站配色 颜色配色方案

Austrian Summer Moments?By Loop

网站配色方案 网站配色 颜色配色方案

Reebok: Be More Human Experience?By Venables Bell & Partners, welikesmall

网站配色方案 网站配色 颜色配色方案

BRANDTS – Museum For Art & Visual Culture?By Stupid Studios

网站配色方案 网站配色 颜色配色方案

Anton & Irene?By Anton & Irene, Oleg Chulakov Studio

(编辑:泰安香港财神报 0538Zz.Com)

网友评论
推荐文章