首頁/ 家居/ 正文

【海平面】對比設計:來自設計師的 20 個技巧

關鍵詞:平面設計、創意設計、對比設計元素、字型對比設計、色彩對比設計、構圖對比設計、版式設計、封面設計、平面設計、海空設計、設計公司

【海平面】對比設計:來自設計師的 20 個技巧

對比:

它不僅僅是黑白或大小的對立面。

事實上,對比是一個重要的設計原則,應該是每個設計專案都要考慮的一部分。為什麼?對比有助於組織設計並建立層次結構——它簡單地顯示設計的哪些部分是最重要的(並提示受眾關注那些部分)。但除了強調設計的焦點,良好的對比應用可以增加視覺興趣。一切都相同大小、形狀或顏色的佈局看起來很枯燥無趣——但是對比會增加趣味性。

然而,與大多數設計概念一樣,對比應該以平衡的方式應用;過多的對比可能與沒對比一樣糟糕,並可能導致設計混亂或視覺上不和諧。如果你把所有的設計元素都做對比,結果是沒有視覺焦點,也就沒有什麼能脫穎而出。

那麼,以增強專案的方式進行對比設計的秘訣是什麼?說真的,沒有神奇的公式。當你建立設計時,這個過程通常會在潛意識中就開始發生了。如果你認為這聽起來像是設計師保留的某種秘而不宣的技能,請不要灰心。對比是一種設計工具,任何人都可以使用它來組織設計專案併為其新增視覺興趣,因此請繼續閱讀以瞭解如何使用吧~

如何給設計增加對比

01

深、淺色對比

【海平面】對比設計:來自設計師的 20 個技巧

色值只是一個術語,指的是顏色的明暗,純黑和純白是最終的對比值。但你當然不必堅持使用黑白調色盤來建立高對比度設計。將較淺和較深的顏色相互分開是增加對比度,並使設計的某些部分更加突出的最簡單方法之一。

舉個簡單的例子,假設深色文字在淺色背景上——或者反之亦然,就像下圖這個設計一樣。雖然照片上的小字型可能很難讀懂,但這裡的值對比(亮白色字型在深紫色和藍色陰影上)使它起作用。

【海平面】對比設計:來自設計師的 20 個技巧

02

色相對比

【海平面】對比設計:來自設計師的 20 個技巧

色相是藝術家對特定顏色的術語,傳統上是色輪上的12種顏色之一。但是色彩理論對圖形和網頁設計師也很有用。我們可以從幾個世紀以來畫家一直使用的色輪中提取出許多經典的調色盤來創作高對比度的作品。一些選項包括:

互補:

色輪上相反的顏色,如紅/綠或藍/橙;互補色是高對比度和高強度的顏色。

下圖徽章使用簡單、互補的配色方案,既具有視覺衝擊力又實用有效,因為它將設計的各個部分分開並組織成多個部分。

【海平面】對比設計:來自設計師的 20 個技巧

分色互補:

色輪上的任何顏色加上其互補色兩側的兩種顏色;這種方案仍然具有強烈的視覺對比,但不如互補色組合那麼引人注目。

三色:

在色輪上均勻間隔分佈的任何三種顏色。

請記住,你不必以最純淨、最明亮的形式使用這些色調(如上面色輪圖表中看到的那些,有時會發生衝突)。讓顏色變亮、變暗或變暗可能對現實設計環境更實用,但仍然可以為設計提供一些很好的對比。

03

色溫對比

【海平面】對比設計:來自設計師的 20 個技巧

所有顏色都可以根據它們的溫度分為幾組:暖色、冷色或中性色。紅色、橙色和黃色被認為是暖色,而藍色和綠色是冷色。黑色、白色和灰色是中性色(米色和棕色也可以歸入這一類,具體取決於它們的使用方式)。在設計中混合色溫——尤其是暖色和冷色——可以產生戲劇性的對比。

例如,下圖網頁佈局的特點是以明亮的藍、黃色做色溫對比。這有助於號召性用語按鈕和主影象特別突出。另外,因為這兩種顏色都傾向於偏冷的方向(帶有綠色調),即使它的對比度非常高,這種組合也具有凝聚力的外觀。

【海平面】對比設計:來自設計師的 20 個技巧

04

色度對比

【海平面】對比設計:來自設計師的 20 個技巧

顏色的強度也被稱為飽和度。最純淨、最明亮的顏色是100%飽和的;越接近灰色,飽和度就越低。使用明亮或柔和的顏色(單獨或一起使用)可以是在設計中建立高對比度或低對比度位置的戰略方法。明亮的顏色總是能吸引注意力,尤其是在黑色的襯托下。謹慎使用它們來突出設計的重要部分。

下圖網頁設計就是這樣做的,在柔和的森林綠上放置飽和的橙紅色字型。這不僅是一種互補的配色方案(已經很搶眼),而且還使用對比飽和度來增強戲劇效果。

【海平面】對比設計:來自設計師的 20 個技巧

05

形狀對比:有機與幾何

【海平面】對比設計:來自設計師的 20 個技巧

大多數形狀可以分為幾何(矩形、三角形、圓形等)或有機(流體,自然啟發)。幾何形狀的角度均勻性可以很好地與通常彎曲的、不對稱的有機形狀形成對比。

在下圖中,標籤設計結合了有機的、幾乎抽象的形狀,補充並增強了字型選擇的、簡潔清爽的直線條。

【海平面】對比設計:來自設計師的 20 個技巧

06

形狀對比:稜角

【海平面】對比設計:來自設計師的 20 個技巧

在設計中巧妙使用形狀的另一種方法是在設計元素的邊角上使用形狀,無論是字型、框或按鈕,還是其他功能性的元素。更圓的形狀通常有更柔軟、隨和或友好的外觀,而更尖的形狀看起來更有序和利落清晰。你可以將這些品質相互對比,就像下面的設計以非常字面的方式佈局字型排版。

【海平面】對比設計:來自設計師的 20 個技巧

07

紋理對比

【海平面】對比設計:來自設計師的 20 個技巧

就像形狀一樣,當紋理的特徵非常不同時(粗糙與光滑、堅硬與柔軟、凸起與扁平),它們可以相互疊加,形成對比。除非你使用特殊的印刷效果或其他物理技術,否則你應用的任何紋理都將是純視覺的——從各種設計程式提供的功能和你可以在網上找到的免費紋理和資源來看,可能性是很多的。

下圖中,一些粗糙的紋理給原本線條清晰的標識賦予了一些復古特色。紋理或仿舊是使設計看起來有點破舊或新增一些質樸或復古/復古品質的好方法。

【海平面】對比設計:來自設計師的 20 個技巧

08

比例對比

【海平面】對比設計:來自設計師的 20 個技巧

除了為設計增添視覺趣味外,對比還有助於在不同設計元素之間建立關係並確定其優先順序。如果設計中的每個物件的大小大致相同,則不會有太多層次結構。受眾將如何判斷首先要看什麼,或者什麼最重要?有效地使用比例不僅從實用的角度來看很重要,而且也是建立動態、有趣的佈局,併為設計增添戲劇性的最簡單方法之一。

這本雜誌的封面設計有一個巨大的照片強調主題,但它沒有搶奪其他設計元素。事實上,字型的大小、形狀和顏色可以增強攝影焦點。

【海平面】對比設計:來自設計師的 20 個技巧

09

視覺權重對比

【海平面】對比設計:來自設計師的 20 個技巧

與比例一樣,視覺權重是指向設計的另一種方式,並表示“這部分很重要!”視覺權重指的是一個元素在設計中脫穎而出的方式,換句話說,它是高對比度的。設計中最具視覺分量的部分(最可能是焦點)不一定是頁面上最大的東西。你也可以用顏色、質地、形狀或任何其他特徵讓某樣東西“很重”或更顯眼,讓它與眾不同,吸引眼球。

舉個例子,看看這一系列宣傳辛辛那提市文化場所的明信片。建築插圖當然是每張卡片上最大的元素,但“享受更多”的標語吸引了你的眼球,因為它以重黑色呈現出來。

【海平面】對比設計:來自設計師的 20 個技巧

10

間距和空白對比

【海平面】對比設計:來自設計師的 20 個技巧

雖然用盡可能多的資訊填充設計可能很誘人,但白色(即空白或負)空間在分隔和組織設計元素以實現平衡佈局方面起著重要作用。在處理紛雜或複雜的佈局時,用一些額外的空白空間(實際上不必是白色)圍繞重要元素,將引起人們對這些地方的注意,並幫助它們與設計的其餘部分形成更有效的對比。

請注意下圖網頁模型是如何有效地利用空白和細分隔線組合來組織資訊。頁面的左欄和右欄都被大量的空間包圍;產品照片更是如此,使其成為關注的焦點並吸引買家。

【海平面】對比設計:來自設計師的 20 個技巧

11

構圖選擇對比

【海平面】對比設計:來自設計師的 20 個技巧

在某種程度上,每個設計都必須兼顧平衡和張力的概念——你如何讓設計平衡而不乏味?動態但不混亂?區分兩者之間的界限(並在此過程中,在設計中實現一些良好的對比)的一種方法是做出良好的構圖選擇。要掌握如何做到這一點,瞭解藝術家和攝影師使用的經典構圖技術會有所幫助。其中一些包括:

三分法:

想象一下將佈局垂直和水平分成三份。將焦點放在這些假想線相交的四個點之一上。這是關於實現動態佈局;沒有比將所有內容都放在頁面中間使設計無聊乏味的更快的方法了。

在以下網頁設計的第一個標題影象中,玫瑰和標題字型都大致居中,其位於三分法網格的上兩個交叉點所在的位置,從而形成平衡、引人入勝的構圖。三個一組(另一種常見的組合技術)也出現在整個頁面中。

【海平面】對比設計:來自設計師的 20 個技巧

對角線:

對角線或 S 形佈局可以為設計增添一些動感,幫助引導受眾的眼睛瀏覽頁面。它通常比僅使用水平和垂直方向的傳統基於網格的設計在視覺上更有趣。

12

意料之外事物對比

【海平面】對比設計:來自設計師的 20 個技巧

以上的組合技巧之所以有效,部分原因在於它們出乎意料。它們不是直的,或者不是居中的——不典型。這種驚喜元素是在設計中創造對比的好方法。新增一些意想不到的東西——例如,在中性色設計中加入耀眼的明亮色——打破了千篇一律,保持了受眾的興趣。

在下圖網站登入頁上,字型與照片的互動方式是不同尋常的,併為原本簡單、直接的設計增添了一點額外的魅力。

【海平面】對比設計:來自設計師的 20 個技巧

13

重複、圖案對比

【海平面】對比設計:來自設計師的 20 個技巧

戰略性地應用重複的設計元素或圖案,可以以類似於剛才提到的組合技巧的方式創造焦點或視覺興趣。或者重複視覺主題可以幫助它在設計中產生更大的影響。

下圖這位平面設計師的名片設計使用一種圖案來平衡和框住字型,這是重點。作為一個很好的觸感,該圖案反映了設計師個人標識的形狀,以配合該品牌。

【海平面】對比設計:來自設計師的 20 個技巧

14

位置和方向對比

【海平面】對比設計:來自設計師的 20 個技巧

每個設計都需要某種組織結構:文字以特定方式對齊,元素分配到佈局中的特定位置,設定間距。雖然一致性是有序設計的關鍵,但以有目的、有限的方式混合可以增加一些有趣的對比。

下面的標識使用傾斜的方向,以幫助其關鍵部分的字型與圍繞它的筆直、有序的文字相映成趣。透過指令碼和無襯線字型樣式的配對實現了額外的對比度。

【海平面】對比設計:來自設計師的 20 個技巧

15

接近和分離對比

【海平面】對比設計:來自設計師的 20 個技巧

有意地將物件進行分組可以顯示它們之間的關聯,並有助於以一種便於導航的方式組織設計。同樣地,被分離物件可以幫助將設計劃分為不同的部分。對比也可以透過數量來實現:多個物件組中的單個物件(反之亦然)肯定會脫穎而出。

對於像簡歷這樣的文字繁重的設計,良好的結構是關鍵。在這裡,接近度、對齊方式和顏色都結合在一起,使資訊豐富的頁面易於導航。

【海平面】對比設計:來自設計師的 20 個技巧

16

視覺線索對比

【海平面】對比設計:來自設計師的 20 個技巧

研究表明,人們能記住他們所看到的80%,這也是為什麼設計可以成為如此強大的工具的原因之一。但注意力的持續時間可能很短,有時受眾需要在正確的方向上稍微推動一下,才能知道在設計中應該關注哪裡。這就是視覺線索可以派上用場的地方。你可以用箭頭指出一個設計元素,或者用圓圈或其他形狀突出它。或者在文字塊中,可能以下劃線、專案符號或圖示的形式出現,將所討論的概念視覺化(如下所示)。

【海平面】對比設計:來自設計師的 20 個技巧

17

複雜、簡單特徵對比

【海平面】對比設計:來自設計師的 20 個技巧

設計可以混合簡單和複雜的風格或單獨的特徵,來增加對比度。這是另一個使用對立面來加強彼此的例子。這種想法在接下來的貼紙中得到了很好的效果,華麗的花卉圖案襯托著簡潔的字型——事實上,字型和它周圍的環境是如此不同,這隻會使整體的結果更加戲劇性和吸引人。

【海平面】對比設計:來自設計師的 20 個技巧

18

字型組合對比

【海平面】對比設計:來自設計師的 20 個技巧

字型設計是大多數設計的重要組成部分,它提供了獨特的機會來增加對比度。雖然我們在這裡提到的所有增加對比度的方法基本上都可以應用到字型設計中,但在選擇和應用字型或為設計建立自定義字型設計時,還有一些特殊的注意事項需要注意。

讓我們用最後三點來看看其中的一些;第一,結合字型。如果你在設計中使用多種字型,確保選擇具有足夠的對比度將是成功設計的關鍵。字型需要在視覺上相互區分——足夠不同,以便你可以在設計中為它們分配不同的“工作”。一種字型可能用於標題或主題,另一種用於文字。但選擇過於相似的字型會讓人感到困惑或像是一個錯誤。

一個基本的經驗法則是選擇一種襯線字型和一種無襯線字型。這通常是一個互補的組合,但也有很好的對比。

下面的印刷標誌將無襯線字型與板襯線字型(加上指令碼)配對,以實現完美平衡的設計,這取決於其型別選擇的對比度。

【海平面】對比設計:來自設計師的 20 個技巧

19

謹慎字型對比

【海平面】對比設計:來自設計師的 20 個技巧

在組合字型時,你確實需要對比度,但不希望發生衝突。選擇兩種截然不同的字型可能會發生衝突——除非你在追求一種有意的樣式,否則通常看起來不太好。字型是否搭配往往取決於一種直覺或本能,而不是明確的規則;相信自己的判斷,在腦海中記下你看到的效果良好的字型組合,並不斷練習——在不知不覺中,正確字型組合似乎是第二天性一樣。

下面的資訊圖採用了幾種不同的字型,呈現出一種有趣、不拘一格的外觀(這與它的幽默基調相適應),但沒有一種字型太“吵”以至於它們發生衝突;事實上,為了實現這個設計的目的,它們可以很好地協同工作。

【海平面】對比設計:來自設計師的 20 個技巧

20

字型風格和粗細對比

【海平面】對比設計:來自設計師的 20 個技巧

許多字型都有多種選項,例如淺色、粗體、斜體、簡縮、擴充套件或小型大寫版本。這使設計工作更輕鬆一些——即使你在設計中只使用一種字型,這些替代方案也可以組織文字,並在不同的印刷特性之間形成對比。嘗試增加點的大小或顏色的變化,以增加額外的對比。

下圖設計使用了相同的無襯線字型的粗細,以獲得優美的外觀。襯線字型也可以作為浮雕效果增加額外的對比度。

【海平面】對比設計:來自設計師的 20 個技巧

好了,讀完這篇文章,你已經瞭解了一些建立對比行之有效的方法,那就去嘗試吧。

本文由海空設計翻譯整理,轉載請說明出處

ativebloq。com/art/art-negative-space-8133765

相關文章

頂部