2024年非常优秀的20款网站配色方案

2016-02-16 20:07 175 1 收藏

图老师小编精心整理的2015年非常优秀的20款网站配色方案希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - 平面设计 】

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

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

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

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

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

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

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

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

Créations Namale By Phoenix The Creative Studio

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

LEVEL By Vide Infra

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Dream Team Katarzyna Konkowska By BrightMedia

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

L’Avenir, Dental Clinic By Phoenix The Creative Studio

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

QED Group By madeo

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Quay Restaurant By Pollen

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Teye By denkwerk

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Weber – BBQ Cultures By UncleGrey & MediaMonks

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Tens Sunglasses By Elegant Seagulls

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Helbak Ceramics By Anders Bergh

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Crea Carte By Dataveyes

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Suspended Animations 2015 By Baptiste Briel & Flavinsky

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Pablo The Flamingo By Pascal van der Haar & Nathan Gordon

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Baku 2015 – Follow the flame By Steven Delcourt

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Bonhomme By Bonhomme

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Austrian Summer Moments By Loop

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

BRANDTS – Museum For Art & Visual Culture By Stupid Studios

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Anton & Irene By Anton & Irene, Oleg Chulakov Studio

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

2、Material Design 的理论与工具

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

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

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

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

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

Material Colors

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Material Palette

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

Material UP: Colors

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

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

Coolors

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

Stylify me

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

Adobe Color CC

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

Paletine

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

Color-Hex

2015年非常优秀的20款网站配色方案,PS教程,图老师教程网

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

结语

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

来源:http://www.tulaoshi.com/n/20160216/1573353.html

延伸阅读
20款最优秀的Android天气应用   对于Android用户来说,无论系统版本升级到多少、手机的配置是高还是低,在大家的桌面上有一款插件绝对是不能少的,那就是天气部件。在Google Play应用商店中,有着各种各样的天气应用和插件,满足着不同用户的需求。 今天我们就给大家推荐Android平台中20款拥有一定人气和质量的天气类桌面插件,...
选择正确的配色方案并不容易,因为这是网站设计的关键。网页布局设计应包含合适的文字和正确的配色方案,以确保可见性和凝聚力。下面我们收集一些大胆的设计案例,看看如何混合黄色和橙色设计出有范儿的网站。 Studiobema Barcampomaha Kurkawolna Bopgun We Inspire Fitness Mito Swim Wear Fantasyposters Benb...
可能是出于语言的障碍,当我们发掘、浏览国外网站之时,更多看的是欧美那些以英语为住的网站,至少我所浏览的日本网站大多来自于朋友的推荐。 日本的网页设计向来自成一体,别有风味。和谐,但是追求错落,宁静,也隐含躁动。所以,它令人着迷也不是没有原因的。 这些设计精良的日本网站同样会使用那些极尽奢华的视觉元素,炫酷而现代的动态...

经验教程

282

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部