手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

業(yè)界良心!2015年最優(yōu)秀的20款網(wǎng)站配色方案(附配色工具)

2015-10-12    博博

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

來源:優(yōu)設(shè)網(wǎng)

trendy-web-color-palettes-1

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

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

“這個(gè)項(xiàng)目始于一個(gè)實(shí)驗(yàn):當(dāng)時(shí)我剛剛開始學(xué)習(xí)Node,正打算在Awwwards上挖掘一些數(shù)據(jù)可視化的案例?!?

Matt 開發(fā)了一個(gè)工具,它可以抓取每一個(gè)Awwwards的獲獎(jiǎng)網(wǎng)站的元數(shù)據(jù),比如站點(diǎn)名稱、開發(fā)者、日期、URL、縮略圖,等等等等。這個(gè)工具還會(huì)分析每個(gè)網(wǎng)站縮略圖的配色,生成一套相對(duì)粗略、包含三個(gè)主色的配色方案。

color-palettes-big-cover

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

color-palettes-matt-2

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

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

1、20個(gè)配色最佳的“每日一站”

Awwwards 每天推薦的網(wǎng)站都是設(shè)計(jì)技術(shù)俱佳的優(yōu)質(zhì)案例,由于評(píng)選過程中網(wǎng)站的不同屬性都會(huì)被打分,因此配色優(yōu)劣在這里也是被量化的。所以,文章這一部分是從最近幾個(gè)月的每日一站中精選的20個(gè)配色頂尖的優(yōu)質(zhì)網(wǎng)站。如果你需要現(xiàn)成的配色方案,直接借鑒下面的方案吧。

Créations Namale By Phoenix The Creative Studio

1

LEVELBy Vide Infra

2

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

2

Dream Team Katarzyna KonkowskaBy BrightMedia

2

L’Avenir, Dental Clinic By Phoenix The Creative Studio

2

QED GroupBy madeo

2

Quay RestaurantBy 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 CarteBy Dataveyes

2

Suspended Animations 2015By Baptiste Briel & Flavinsky

2

Pablo The FlamingoBy Pascal van der Haar & Nathan Gordon

2

Baku 2015 – Follow the flameBy Steven Delcourt

2

BonhommeBy Bonhomme

2

Austrian Summer MomentsBy Loop

2

Reebok: Be More Human ExperienceBy Venables Bell & Partners, welikesmall

2

BRANDTS – Museum For Art & Visual Culture By Stupid Studios

2

Anton & IreneBy Anton & Irene, Oleg Chulakov Studio

2

2、Material Design 的理論與工具

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

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

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

Material Design 用色準(zhǔn)則 : 色彩應(yīng)該充滿活力而意想不到

這篇用色相關(guān)的文章是Material Design官方文檔的配色部分的內(nèi)容,當(dāng)然,它在Google的服務(wù)器上,你知道該怎么做了……

Material Colors

color-palettes-MATERIAL-2

Material Palette

color-palettes-MATERIAL-3

Material UP: Colors

color-palettes-MATERIAL-4

3、創(chuàng)建配色方案的常用工具

創(chuàng)建配色方案的常用工具絕對(duì)是設(shè)計(jì)師的日常必備工具之一。

Coolors

color-palettes-tools5

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

Stylify me

color-palettes-tools1

Stylify me 是一個(gè)幫你創(chuàng)造設(shè)計(jì)風(fēng)格指南的網(wǎng)站,包括顏色、字體、大小和間距等基本元素。

Adobe Color CC

color-palettes-tools4

經(jīng)典配色工具Color CC,它的前身一直是以Kulor而存在?,F(xiàn)在的Color CC 已經(jīng)覆蓋了各大系統(tǒng)平臺(tái),云端同步,還有支持社區(qū)。

Paletine

color-palettes-tools3

Paletine 是一個(gè)用來協(xié)同制作配色方案的工具。

Color-Hex

color-palettes-tools2

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

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔