這套網頁設計,看你能偷走多少排版技巧
當我們收集的靈感圖越多,越難回頭整理、查看,趁著這段時間,我仔細研究了每天在社群發布的“網頁設計”靈感部分。
發現這些作品之所以受大家所喜愛,是因為它們都具有美觀、統一、真實等特性。
而在 PPT 中想要出街,則需要再加一個關鍵詞:邏輯。
下面,來看今天的主角,一套介紹油漆的網頁設計靈感圖:
以深藍色和灰白色為主,橙色作為點綴,整體非常舒適。
那么,思考一下,我們可以從這套網頁中學到什么內容呢?
01. 內容排版
先來看里面的文字排版:
雖然和中文排版有些區別,但也有很多互通之處。
無論在視覺上還是實際對齊都是一致的,仔細觀察,行間距是小于段間距的。
另外,在文字的層級上,也做了大小、粗細區分。
線條輔助視線引導:
橙色虛線引導,逐漸消失變成灰色,引導閱讀視線和方向。
這也是 PPT 制作中,非常容易被忽略掉的細節。
02.?風格統一
在大家的打卡作業中,經常能看見一些不合場景的素材,比如圖文不符、圖標樣式不統一、裝飾元素混用等。
而在這份靈感圖中,可以看到所使用的素材都是貼合主題的:
添加了油漆素材作為頁面背景,既豐富了頁面又不會干擾上方的圖文內容。
此外,介紹每個小點的內容時,加上了墨跡素材,也剛好和油漆滴濺的狀態吻合。
配色上還利用人的“刻板印象”,大面積使用深色作為主色調,搭配淺灰色,再加以橙色點綴,使人可以快速知曉所在行業和產品。
同類的“刻板印象”還有商務藍、科技藍、黨政紅、地產黑金等,不過現在逐漸出現一些新的搭配,比如科技紅。
除元素貼合主題外,里面的圖片處理也值得一提:
為了不使純色塊直接放在頁面上顯得單調,在色塊底部疊加了一層油漆圖,并將原圖顏色調成色塊同色調,最后調整透明度并疊加。
我們在做 PPT 的時候,也可以用這樣的思路,比如這一頁 PPT:
不僅背景上疊加了圖片,還在每個色塊之上分別做了蜂窩形狀進行疊加。
03.?素材組合
有時候客戶提供的圖片少、質量不高,設計師拿到圖片后無法下手,經常會出現圖文不符、素材亂飛的情況。
這時候不妨試試將圖片中的主體拿出來,和其他素材組合使用:
如果是在 PPT 里,可以這樣用:色塊與鞋子穿插,再使用云朵裝飾,最后給色塊加上陰影即可。
當然,組合使用也可以克制一些,比如只截取素材的一部分:
如果甲方不同意更換素材,那就加色塊將其裝進去,將圖片與容器組成一個新的整體:
根據這張靈感圖,可以做出這樣的 PPT 頁面:用半透明色塊作為圖片容器,只呈現關鍵點和圖片。
當然,也可以用樣機做個包裝,這樣不僅弱化了圖片,還提升了整體的層次效果:
04.?氛圍強烈
風格和素材講完了,接下來聊聊氛圍感。
這套網頁中有很多亮點,比如首屏的大圖:
背景使用藍灰漸變,對比純白色的背景,整體看起來很干凈舒適。
人物左側添加了橙色光暈效果,同時標題的漸變方向也是根據光暈的照射角度來做的,而人物的陰影則是超右,整個頁面的光影、漸變非常統一。
產品介紹部分,則不遺余力地突出優點,綠色環保:
對部分綠植進行虛化墊底,結合實景綠植素材,同時再加點淡淡的發光效果,數字的漸變方向也和光的照射方向一致。
這些,我們統稱為:細節!
另外整套網頁展示出來時,是被包裝過的。
包裝的長圖上,加了很多與裝修相關的物品,比如油漆滾、鏟刀、美工刀等。
這樣處理,也是為了進一步強化氛圍感,使整體看起來更統一、美觀,大家在 包裝自己的 PPT 作品集時,也可以借鑒這個思路。
寫到這里,這套網頁已經被分析得差不多了,咱們最后總結一下:
① 內容排版
注意排版細節,段落與行間距關系,以及容易被忽略的視線引導線;
② 風格統一
使用的素材貼合主題,盡可能將行業配色、圖片等要素融到頁面中;
③ 素材組合
摳出圖片主體和其他素材組合使用,或添加容器與圖片組成新主體;
④ 氛圍強烈
借用光影與虛化,結合主體素材增強頁面氛圍,同時調整文字的漸變。
以上,就是今天分享的全部內容,希望對大家有所啟發~
作者 | Junmeng
來源 | 自律的音律(id: yinlvPPT )
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。