色彩驅(qū)動(dòng)排版布局讓你的網(wǎng)頁設(shè)計(jì)作品注入個(gè)性

時(shí)間：2023-09-21 23:42:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-21 23:42:01 來源：網(wǎng)站運(yùn)營

色彩驅(qū)動(dòng)排版布局讓你的網(wǎng)頁設(shè)計(jì)作品注入個(gè)性：有一種版式布局叫做色彩驅(qū)動(dòng)排版布局。巴西設(shè)計(jì)大師Daniel Snows給我們分享他在排版布局方面的創(chuàng)意高級(jí)技巧。





01

-

飽和度對(duì)比＋傾斜切割布局















高飽和度的紅色和藍(lán)色，同飽和度最低的黑白色調(diào)，在色彩飽和度上構(gòu)成清晰的對(duì)比，在傾斜切割布局之下，保持整體結(jié)構(gòu)上的統(tǒng)一，又在視覺上制造了沖突。




02

-

色相對(duì)比＋黑白輔助色黃藍(lán)















兩色在色輪上處于相對(duì)位置，黃色為主的風(fēng)景圖作為背景，前景則使用對(duì)比強(qiáng)烈足夠醒目的藍(lán)色，讓整個(gè)視覺顯得頗為突出。黑白色調(diào)的圖片和色塊穿插其間，不僅豐富了細(xì)節(jié)，還強(qiáng)化了布局視覺。




03

-

黑白對(duì)比＋紅色提亮















由于產(chǎn)品是以經(jīng)典的黑白兩色為主，點(diǎn)綴紅色，頁面也采用了近乎一致的色彩對(duì)比，傾斜分割的布局和鞋的方向保持一致，而最核心的產(chǎn)品名則借助紅色成為頁面中最抓人眼球的部分。




04

-

明度對(duì)比＋輪播圖















作為視覺重心的魚是明度較高的藍(lán)色，而背景則采用了明度較低的深藍(lán)，中間穿插白色的標(biāo)題文本作為說明。整個(gè)頁面可以通過底部的預(yù)覽圖快速切換，保持簡約的同時(shí)，功能性、視覺都兼顧到了。




05

-

CG 插畫＋文字剪貼效果















色彩豐富的 CG 插畫為整個(gè)頁面貢獻(xiàn)了豐富的信息量，左側(cè)的側(cè)邊工具欄使用模糊效果來營造前景的層次，右側(cè)則直接在前景蓋上了一層白色，這都是為了創(chuàng)造信息量上的對(duì)比。文字剪貼效果讓背景信息透出來，增加融入感。




06

-

單色為主＋文字穿插效果















整個(gè)頁面的主色調(diào)是黃色，背景通過漸變營造微妙的過渡，前景的視覺主體也是以黃色為主。超大的白色文本標(biāo)題和視覺主體穿插呈現(xiàn)，在平面上創(chuàng)造出立體感，強(qiáng)對(duì)比的黑色讓頁面顯得更加豐富不單調(diào)。




07

-

經(jīng)典紅白＋圓形背景色塊













紅白配色無疑是兼顧了魔聲本身的品牌用色，紅白搭配對(duì)比就足夠強(qiáng)烈，加入黑色增加豐富度。大面積的紅色圓形色塊呼應(yīng)了耳機(jī)本身的圓形結(jié)構(gòu)，也在形狀上和矩形元素構(gòu)成對(duì)比，和而不同，保持了足夠的協(xié)調(diào)。




08

-

紅色為主＋綠色提亮















這個(gè)案例同樣使用了典型的對(duì)比色，紅色和綠色，占比較小的側(cè)邊欄使用了黑色，白色標(biāo)題字體纖細(xì)，是很好的點(diǎn)綴，提亮的綠色使得作為視覺主體的辣椒極為顯眼，整個(gè)頁面色彩統(tǒng)一，主次分明。




09

-

低飽和度對(duì)比色＋文字穿插效果















圖片中大面積的藍(lán)色和底部用來強(qiáng)調(diào)的粉紅都是飽和度相對(duì)較低的色彩，兩者在視覺上同樣構(gòu)成了對(duì)比。全屏背景中，山丘是最抓人眼球的視覺主體，手寫字體并非完全覆蓋在其上，而是有部分筆觸穿插隱藏在山后，層次感強(qiáng)。