業界良心!2015年最優秀的20款網站配色方案(附配色工具) - 優設網 - UISDC

業界良心!2015年最優秀的20款網站配色方案(附配色工具)

2015/08/03 95537評論區

trendy-web-color-palettes-1

云南体彩网編者按:網頁設計領域的業界良心Awwwards除了每天推薦好網站,按期做評比之外,還會在博客里面推薦各種網頁設計的技巧和總結,今天的這篇文章最初是源于一個探索性的項目,項目結果炫酷然而乍一看并沒有什么卵用,不過,如果將這個項目同最近選出的20個配色優秀的網站相互印證,足以看出時下配色的大趨勢。當然,好人做到底,作者干脆把時下流行的基于Material Design 的配色工具連同常用而經典的配色工具一同推薦給你,這也構成了今天文章的三大部分。OK,正文開始~

幾周以前,供職于 Jam 3 的圖像開發者 Matt DesLauriers (@mattdesl)向我們展示了Awwwards 平臺上的一個有趣的發展趨勢。正如同你所看到的,Awwwards 從 2009 年開始就專注于搜集網絡上最有修的網站,而這些網站就是網頁設計趨勢分析的重要素材和來源。

“這個項目始于一個實驗:其時我剛剛開始學習Node,正盤算在Awwwards上挖掘一些數據可視化的案例。”

Matt 開發了一個工具,它可以抓取每一個Awwwards的獲獎網站的元數據,好比站點名稱、開發者、日期、URL、縮略圖,等等等等。這個工具還會分析每個網站縮略圖的配色,生成一套相對粗略、包含三個主色的配色方案。

color-palettes-big-cover

云南体彩网如果將其依照日期和亮度來進行排序的話,會獲得下面的圖:

color-palettes-matt-2

云南体彩网獲取配色方案的數據之后,工具將每個網站的三色配色方案用餅狀圖涌現出來,在Canvas2D的渲染下生成上方的圖片。在這個過程中,Matt還使用了Node.js、d3.js、Cheerio,Browserfy 等開源工具。

云南体彩网由于采樣巨大,信息量驚人,想一眼洞見規律并不容易,但是仔細觀察你會看到配色方案演進還是隱隱遵循著某種趨勢和規律的。

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

云南体彩网Awwwards 每天推薦的網站都是設計技術俱佳的優質案例,由于評選過程中網站的分歧屬性都邑被打分,因此配色優劣在這里也是被量化的。所以,文章這一部分是從最近幾個月的每日一站中精選的20個配色頂尖的優質網站。如果你需要現成的配色方案,直接借鑒下面的方案吧。

By Phoenix The Creative Studio

1

By Vide Infra

2

By Relax, we are the good guys

2

By BrightMedia

2

By Phoenix The Creative Studio

2

By madeo

2

By Pollen

2

By denkwerk

2

By UncleGrey & MediaMonks

2

By Elegant Seagulls

2

By Anders Bergh

2

By Dataveyes

2

By Baptiste Briel & Flavinsky

2

By Pascal van der Haar & Nathan Gordon

2

By Steven Delcourt

2

By Bonhomme

2

By Loop

2

By Venables Bell & Partners, welikesmall

2

By Stupid Studios

2

By Anton & Irene, Oleg Chulakov Studio

2

2、Material Design 的理論與工具

云南体彩网隨著Material Design的流行,基于Material Design 風格的配色工具也逐漸多起來了。

云南体彩网這是一個視頻教程,被發布在Youtube上,所以毫無疑問你得自備梯子翻越偉大的墻來觀看視頻……

這篇用色相關的文章是Material Design官方文檔的配色部分的內容,當然,它在Google的服務器上,你知道該怎么做了……

color-palettes-MATERIAL-2

color-palettes-MATERIAL-3

color-palettes-MATERIAL-4

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

創建配色方案的常用工具絕對是設計師的日常必備工具之一。

color-palettes-tools5

Coolors 是一款直觀的配色工具,你可以以更加簡單的方式創建色彩組合,還可以生成分歧的格式,好比SVG、PDF或者SCSS。

color-palettes-tools1

云南体彩网Stylify me 是一個幫你發明設計風格指南的網站,包含顏色、字體、巨細和間距等基本元素。

color-palettes-tools4

云南体彩网經典配色工具Color CC,它的前身一直是以Kulor而存在。現在的Color CC 已經覆蓋了各大系統平臺,云端同步,還有支持社區。

color-palettes-tools3

云南体彩网Paletine 是一個用來協同制作配色方案的工具。

color-palettes-tools2

云南体彩网Color-Hex 是一個有趣的工具,豈論是要配單色、近似色還是三色的配色方案,它都能幫你搞定。Color Hex可以根據需求生成分歧色彩模式的方案,RGB、HSL和HSV和CMYK都不在話下。為了方便網頁設計師,Color Hex 還可以生成CSS代碼。

結語

云南体彩网厚重的色卡、海量的網站、大把的工具,即使你擁有良好的品味,制作優秀的配色方案依然是個體力活兒。這些優秀的工具和素材使得配色方案的來源豐富用法多多,用好它們,好配色方案肯定是可以搞出來的……

2015流行的設計趨勢:

原文地址:
優設譯者:

本文由優設網原創翻譯,請尊重版權和譯者結果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量99萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

sdcweixin

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/trendy-web-color-palettes

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
云南体彩网 2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里