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

   网页设计领域的业界良心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


  2、Material Design 的理论与工具

  随着Material Design的流行,基于Material Design 风格的配色工具也逐渐多起来了。

  完美配色: Material Design 如何让配色更轻松

  这是一个视频教程,被发布在Youtube上,所以毫无疑问你得自备梯子翻越伟大的墙来观看视频……

  Material Design 用色准则 : 色彩应该充满活力而意想不到


  这篇用色相关的文章是Material Design官方文档的配色部分的内容,当然,它在Google的服务器上,你知道该怎么做了……

  Material Colors


  Material Palette


  Material UP: Colors


  3、创建配色方案的常用工具

  创建配色方案的常用工具绝对是设计师的日常必备工具之一。

  Coolors


  Coolors 是一款直观的配色工具,你可以以更加简单的方式创建色彩组合,还可以生成不同的格式,比如SVG、PDF或者SCSS。

  Stylify me


  Stylify me 是一个帮你创造设计风格指南的网站,包括颜色、字体、大小和间距等基本元素。

  Adobe Color CC


  经典配色工具Color CC,它的前身一直是以Kulor而存在。现在的Color CC 已经覆盖了各大系统平台,云端同步,还有支持社区。

  Paletine


  Paletine 是一个用来协同制作配色方案的工具。

  Color-Hex


  Color-Hex 是一个有趣的工具,不论是要配单色、近似色还是三色的配色方案,它都能帮你搞定。Color Hex可以根据需求生成不同色彩模式的方案,RGB、HSL和HSV和CMYK都不在话下。为了方便网页设计师,Color Hex 还可以生成CSS代码。

  结语

  厚重的色卡、海量的网站、大把的工具,即使你拥有良好的品味,制作优秀的配色方案依然是个体力活儿。这些优秀的工具和素材使得配色方案的来源丰富用法多多,用好它们,好配色方案肯定是可以搞出来的……

时间: 2024-12-11 06:14:47

2015年最优秀的20款网站配色方案的相关文章

5款免费的优秀网站配色方案工具

网站的配色方案决定了访问者对网站的第一印象,有很多工具可以帮助选择合适的配色方案,本文为网站设计者介绍五款免费的优秀网站配色方案工具. 1. Kuler Kuler是一款倍受专业网页设计人员喜爱的工具,它在配色方案中增加了社会化媒体和网络因素,设计人员使用Adobe注册账号登陆后可以创建调色板并且互相分享,也可以根据自己的需求修改别人的调色板.颜色显示格式包括RGB,CMYK,LAB和HSV. 2. Color Palette Generator 创作灵感有时候来的很突然,也许偶然在网上看到的一

管理类网站配色方案解析

管理类网站所面对的用户是广大客户,因此,在网页设计上,最重要的是迎合大多数用户的审美要求.接下来我们来讲解有关配色方案解析,它要具有先进.严肃.结构分明等特点,与其他商业网站有很大的不同.因此,设计者要充分了解网站的实质内涵,这样才能设计出合适的管理网站配色方案. 一.管理类网站的特点 管理类的网站多用于用品的推广.介绍.专题等多方面的咨询,要突出它的开放性.易用性.实用性和安全性.因此,对设计者来说,要制作符合大众审美观念的管理网站,就要规划合理的配色方案. 色彩搭配清新 根据管理网站的性质和

自然风格的网站配色方案解析

自然风格的网站通常是由日常用品的颜色或自然界中的色彩搭配而产生的,利用红色的落叶.绿色的树叶.蓝色的天空和大海等颜色来配色非常重要;接下来我们来讲解有关自然风格的网站配色方案解析,带有红霞的黄色还能给人温暖.安定的感觉. 一.自然风格网站的典型案例解析 网站背景采用浅绿色,配上树叶及流水的自然景观搭配,给人宁静.和谐.自然的感觉. 网站整体使用了轻快的绿色,主题部分使用白色,整体清爽.自然. 网站使用了自然的绿色,展现宁静.和谐的环境与自由空间. 二.自然风格网站的配色方案推荐 自然风格网站的配

网站如何配色及网站配色方案

网站设计只要懂一点点网页编辑的人我想都可以制作网站了,但一个网站制作的好坏就必须从多方面去考量了,一个是用户体验度,还有一个就是网页美工了,而网页美工特别讲究的就是网站配色方案,网页设计师策划一个网站需要经过反复多次的思考,而在决定网页配色方案时同样需要经过再三的思量.网站如何配色呢?一个成功的配色方案可以完美地体现出网站的主题及表达出网站的信息,更能表现出这个网站的内涵,当然,感觉是设计师的灵魂,没有感觉的设计师就如同一个没有灵魂的躯壳.但光凭感觉也不能够得到好的结果,所以就必须有一个科学合理

活泼风格的网站配色方案解析

活泼风格网站的颜色,其轻重感和明亮度之间的关系最为密切,鲜艳的高明亮度色彩给人轻快的感觉,但若过多使用,会让人略感烦闷枯煤;下面我们来讲解有关活泼风格的网站配色方案解析,若应用在狭小的空间,则可以达到延伸空间的效果;若同时再加上白色,还能增添清洁.明亮的感觉. 一.活泼风格网站的典型案例解析 网站采用灰色的背景,给人轻快的感觉,配上粉.绿.蓝等明亮的颜色,使页面活泼起来. 网站采用浅灰色为背景,给人轻松的感觉,蓝色的线条和淡淡的紫色.粉色搭配,增强页面的活泼感. 网站使用白色和灰色为背景,给人明

医疗保健类网站配色方案解析

由于生活水平的提高,人们对自身健康也越发重视,再加上网络的普及,人们随时都可以上网查询或学习医学和健康方面的知识.今天我们赤讲解有关医疗保健类网站配色方案,当然,众多的医药.生物科技公司.医院或个人也会将相关的知识发布到网络上,所以医疗保健方面的网站也越来越多. 一.医疗保健类网站的特点 医疗保健网站主要用于医疗.保健.生技等单位发布和宣传有关医学.健康方面的知识.网站的具体功能包括通过网络发布医疗保健咨询.医患互动交流.企业客户咨询回馈.健康资讯查询等.不同的医疗保健机构因为服务项目不同,所建

网站颜色论:创建属于自己的网站配色方案

在颜色论系列的前两部分,我们主要讨论了 颜色背后的意义 和关于 颜色的术语.尽管这些信息非常重要,但我相信很多人都非常想知道什么时候才开始进入讨论创建一些实质的配色方案. 好吧,本文,也就是本系列的第三部分将介绍这个问题.我们将从头开始讨论创建属于你自己的配色方案的方法.我们还将讨论传统的配色方案模式(例如单色设计,类比设计,互补设计等),以及如何创建自定义的并不严格基于一种模式的方案.在本文最后,你将学会使用工具和技巧为自己的设计项目创建漂亮的调色板.提高技能的最好方法是实践,因此为自己设定一

综合类网站配色方案解析

综合类网站是集新闻.娱乐.搜索引擎等多元内容于一身的大型网站,例如雅虎.新浪网等都属于综合型的入口网站,接下来我们来讲解有关配色方案解析 ,入口网站的概念最早源于搜索引擎Yah00.InfoSeek等大型入口网站,这些入口网站作为一种渠道,帮助Web用户快速寻找和猎取丰富的网络资源.随着科技的发展,综合网站广泛地应用于政府.中小企业.教育.图书馆等各个领域. 一.综合类网站的特点 从技术角度而言,综合类的入口网络是一种网络服务,通过检索.资讯提示等技术,从各类散布的资源中猎取所需要的内容,以固定

绿色风格网站配色方案实例讲解

绿色在黄色和蓝色(冷暖)之间,属于较中庸的颜色,这样使得绿色的性格最为平和.安稳.大度.宽容.是一种柔顺.恬静.满足.优美.受欢迎之色.也是网页中使用最为广泛的颜色之一. 绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春活力,绿色象征着和平与安全.发展与生机.舒适与安宁.松弛与休息,有缓解眼部疲劳的作用. 它本身具有一定的与自然.健康相关的感觉,所以也经常用于与自然.健康相关的站点.绿色还经常用于一些公司的公关站点或教育站点. 绿色能使我们的心情变得格外明朗.黄绿