trendy-web-color-palettes-1

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

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

“這個項目始于一個實驗:當時我剛剛開始學習Node,正打算在Awwwards上挖掘一些數據可視化的案例?!?/p>

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

color-palettes-big-cover

如果將其按照日期和亮度來進行排序的話,會得到下面的圖:

color-palettes-matt-2

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

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

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

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

Créations Namale By Phoenix The Creative Studio

1

LEVEL By Vide Infra

2

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

2

Dream Team Katarzyna Konkowska By BrightMedia

2

L’Avenir, Dental Clinic By Phoenix The Creative Studio

2

QED Group By madeo

2

Quay Restaurant By Pollen

2

Teye By denkwerk

2

Weber – BBQ Cultures By UncleGrey & MediaMonks

2

Tens Sunglasses By Elegant Seagulls

2

Helbak Ceramics By Anders Bergh

2

Crea Carte By Dataveyes

2

Suspended Animations 2015 By Baptiste Briel & Flavinsky

2

Pablo The Flamingo By Pascal van der Haar & Nathan Gordon

2

Baku 2015 – Follow the flame By Steven Delcourt

2

Bonhomme By Bonhomme

2

Austrian Summer Moments By Loop

2

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

2

BRANDTS – Museum For Art & Visual Culture By Stupid Studios

2

Anton & Irene By Anton & Irene, Oleg Chulakov Studio

2

2、Material Design 的理論與工具

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

完美配色: Material Design 如何讓配色更輕松

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

Material Design 用色準則 : 色彩應該充滿活力而意想不到

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

Material Colors

color-palettes-MATERIAL-2

Material Palette

color-palettes-MATERIAL-3

Material UP: Colors

color-palettes-MATERIAL-4

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

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

Coolors

color-palettes-tools5

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

Stylify me

color-palettes-tools1

Stylify me 是一個幫你創造設計風格指南的網站,包括顏色、字體、大小和間距等基本元素。

Adobe Color CC

color-palettes-tools4

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

Paletine

color-palettes-tools3

Paletine 是一個用來協同制作配色方案的工具。

Color-Hex

color-palettes-tools2

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

結語

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

2015流行的設計趨勢:

原文地址:awwwards
優設譯者:@陳子木

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

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

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

sdcweixin

點贊
收藏 1

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏