and單詞圖片素材

Banner廣告無處不在。從網站首頁頁頭的內容推薦到側邊欄,從文章內到圖庫列表中,你會在幾乎所有內容存在的地方找到他們的影子。通常情況下,它們看起來漂亮,略顯浮誇,還會蠶食你的網路瀏覽體驗,盡管我們在想盡一切辦法降低它們給用戶的負面影響,但是壞名聲總是不可避免地同它們綁定到了一起。

實際上,Banner廣告對於用戶的影響是巨大的,合理的運用,肯定是事半功倍的。那麼到底要如何打造不讓人生厭、轉化率可觀的優秀的的Banner廣告呢?

空泛的理論或許不夠接地氣,不妨從下面50個案例中,來學習Banner廣告的設計技巧。

1、風格化的圖文排版

這是DearMissModern所製作的一組Banner廣告,每張圖片在文本和圖片素材上都保持了氣質和風格上的一致性。字體的形式感和圖片素材中圖像和圖形的搭配讓整個廣告Banner給人的感覺更加強烈。如果圖片並非是這種強風格化的,而是更加微妙的話,應當採用更加經典、耐看的字體來進行搭配,道理是一樣的。

2、營造層次

Visa的節日廣告Banner就充分運用了層次結構的優勢。照片的挑選就是有景深有層次的美食,讓人第一時刻會被它吸引,而文字排版則覆蓋在虛化的遠景上,確保了可讀性,也增加了一個層次,傳遞出信息,確保不會混亂。按鈕的位置正好置於美食之上,文字之下,恰到好處地吸引人來點擊。

3、使用相關圖標

這個來自Google的廣告Banner通過手繪的圖標給人帶來一種個人化的體驗。

圖中每一個手繪的圖標都非常易於識別,雖不復雜,但是給人營造出一種仿若在世界中穿行的感覺。這種難以描述但是令人觸動的感覺讓這個廣告不再只是一個廣告。

4、增加出人意料的元素

一個招聘廣告應該怎麼做?谷歌的這個招聘廣告也算的上是出人意表了,沒有高大上的說明和漂亮的妹子,而是用形同小區布告欄的手寫小廣告一樣的塗鴉手寫廣告。這種廣告不復雜,但是卻出人意料,這種熟悉的感覺也足夠令人觸動。

5、加入插畫

這個案例同樣是谷歌的廣告圖,插畫的加入讓整個廣告圖充滿了童真和趣味,加上扁平化的元素,整體看起來也比較統一。這種插畫實現起來不難,看起來可能有點粗糙,但是確實很友好。插畫和攝影圖片不同,它能賦予設計以後者無法企及的氣質,當然,你得用好才行。

6、布局適配

FatCow的這個廣告圖是由EnvatoStudio所設計的,為了適配不同的廣告位,整個廣告製作了多個不同尺寸的版本。將最常用的廣告圖設計出來之後,將其中的元素進行二次編輯,製作成能夠適配其他廣告位的尺寸,其中某些元素需要調整,移除或者新增,這樣就可以實現了。

7、使用絢麗的色彩

這個GoogleMusic的廣告採用了活力十足的粉色,搭配的是同樣高飽和度的藍色,兩者形成鮮明的對比,也給人留下深刻的影響。和普通單色調為主的Banner相比,這種色彩絢麗的多色搭配更加抓人眼球,不過使用的時候需要多加註意,確保可讀性和協調性。

8、保持簡約

如果說有可口可樂有什麼做的非常突出,那麼保持簡約的設計絕對是諸多優點之中最值得學習的一個。這個可口可樂的廣告Banner設計很好的延續了這一傳統:產品圖LOGO宣傳語標志性配色。雖然內容不多,但是效果很贊。

一個塞滿全部信息的Banner廣告圖對你而言不會有啥好處,因為用戶壓根不會去看。將最重要的信息呈現出來,這就夠了。

9、關注潮流

關注流行文化和正在風靡的趨勢,對你設計banner廣告而言,非常有用。Campbell就是這樣,它很好的利用了星球大戰電影這個IP,推出相關主體的產品,吸引星球大戰的粉絲前來購買產品。合理的藉助正在流行的趨勢和話題來宣傳對應的產品,絕對事半功倍。

10、使用紋理

Campbell的這個廣告是運用紋理提升質感的典範。筆刷式參差的邊緣讓整個廣告的視覺效果更加微妙,廣告圖中其他的元素談不上有多突出,但是紋理的加入如同點睛之筆,使得整體的效果都提升上去了。

11、藉助利基

利基是指針對企業的優勢細分出來的市場。廣告通常需要針對目標人群來投放,這樣才能達到最好的效果。

Target的嬰幼兒系列產品的廣告主要是針對母親們投放的,那麼還有什麼比一個粉色的、可愛的場景更容易吸引到她們呢?

12、用圖展示,而非語言

Zarbee的維生素廣告banner在圖片的使用技巧上就相當突出,水果來置換維生素,強化概念,而非用語言來描述,巧妙而直觀。

13、清晰的聚焦點

當廣告有明確清晰的聚焦點之後,品牌和用戶之間的溝通就更加直接了。這個Banner廣告圖也是為Target設計的,品牌LOGO從位置到顏色都足夠顯眼,加上美女的姿勢在結構上的引導,Target的品牌LOGO無疑是整個廣告圖的焦點。

14、使用意象做引導

麥當勞的這個廣告就是很典型的使用意象替代文字來傳遞信息,咖啡這一單詞被相應的圖片所替代,傳遞信息的同時,還讓整個廣告圖不再單調,變成圖文混排。單純的文字和圖片都能夠傳遞出信息,但是混合使用則顯得更加有趣,走心。

15、讓產品發聲

在這個廣告圖當中,麥當勞的McFlurry無疑是核心,不論是意義上的,還是視覺上的。灰色的背景讓色彩鮮艷的MacFlurry主體顯得足夠醒目。讓產品本身在廣告中突出展現,可以讓整個Banner表現力和針對性都更強。

16、創造角度

奧迪的這個廣告圖通過分割空間來呈現不同的信息,但是最引人矚目的是小幅扭轉的角度給人帶來的獨特視覺體驗。這種調整讓特定的信息更加矚目,配合圖片中車體本身的角度,使得整個廣告圖更加富有活力。

17、使用遮蓋

使用特定色彩的半透明層來遮蓋背景圖,可以讓前景的文字內容信息脫穎而出。這種設計手法現在並不鮮見,它讓背景信息從遮蓋中透出,同時讓文本內容可讀性更強,整體層次感增強。

18、設置場景

Tiffany&Co珠寶的廣告圖的設計,稱得上是有趣好玩,旋轉的雞尾酒杯和漂亮的珠寶組合暗示出它們經常同時出現在同一場景,營造出高雅、精緻的感覺。通過相關的物品組合從而暗示用戶,讓他們自行腦補出場景。

19、創意字體

好的排版能夠吸引用戶的注意力,而Nike的這個廣告尤其突出,它在字體上的設計富有創意,這些被肢解的字體同樣具備強大的識別度,但是這樣的設計讓它們看起來更加輕盈,也更富有科技感。這種視覺上的強化,讓廣告和產品更加吸引人了。

20、使用風格化的插畫

插畫可以簡約,同樣也可以細節滿滿。風格化的插畫可以通過細節和風格來增加信息的厚度,講述故事,傳遞感受。這種插畫力量感十足,充滿能量,和Nike的品牌氣質相當符合。

21、使用多種元素

雖然有風險,但是合理的將多種不同的元素搭配在一個廣告圖中,可以產生不錯的形式感,就像這個ebay的廣告圖這樣。漂亮的產品圖,標准字體,手寫字體和插畫元素,協調地組合成一個廣告圖。當然,每個元素的存在都是有理由的,各司其職,並非隨機搭配,請務必記住這一點。

22、成為流行風向標

將潮流和趨勢融入到Banner的設計當中來,讓它成為廣告和用戶之間的紐帶。這個來自ebay的廣告就是這么做的。將「HotlineBling」替換成「HauteLineBling」之後更好地解讀了時下流行的這種文化,從而吸引更多關注這一時尚的用戶。

23、自由舒展

並不是每一個廣告Banner都必須藉助柵格,讓每個元素都精準地對齊排列,自由舒展的設計同樣有效。Yoplait的廣告就是這樣設計的,這樣顯得更加有趣、富有童真。當然,這樣的設計是否合適要看它的產品的氣質和特色。

24、創建聯系

在設計的過程中,讓你的廣告圖中的圖片和文字之間保持足夠的關聯是非常重要的。Talbots的廣告圖中圖片和文字的氣質就非常接近。

25、製造對比

對比是吸引用戶注意力的有效手段,而ESPN的這個廣告Banner的設計就是深諳這一技巧。深紅色的背景下,白色的文字就顯得相當突出了。字體挑選的也是銳利而輕盈的類型,這樣一來,信息的傳遞有效度就更高了。

26、對稱設計

對稱式的設計可以很好地平衡廣告中的元素,設計師們可能經歷了深入的思考才有此設計,但是輸出卻是非常迅速的。這則來自蘋果的廣告也不復雜,黑白的音樂家照片基本上圍繞著AppleMusic呈軸對稱,同時保持了一定的錯落美。這種簡約的設計簡單但是主次分明,走心。

27、目標用戶的生活指南

就像Chegg這個廣告一樣,如果你想吸引特定的用戶群體,不妨站在他們的立場,在廣告中注入針對他們的生活方式指南。站在特定用戶的立場上來表述、展現產品,能夠更容易獲得共鳴,從而得到更多的點擊。

28、使用動效

在靜態的頁面中,最容易吸引人注意力的無疑是動態的元素。如果使用動效來呈現你要表現的廣告內容,可以讓你的內容更快被用戶獲取到。當然,前提是設計要足夠簡潔明了,這樣可以避免內容瑣碎,更容易被用戶Get到。

29、鋒銳而鮮明

吉列剃須刀的廣告在視覺上稱得上是鋒銳而鮮明的典範,銳利的角度,深色背景上鮮明的剃須刀圖片,稜角分明的字體和強對比的配色方案,這一切都讓這個廣告圖在視覺上足夠清晰醒目,令人慾罷不能。

30、製造視覺深度

Honda的這個廣告圖設計並不復雜,它的特色在於背景上黃色的線條筆觸。原本彷彿懸浮於空中的汽車在線條的襯托下彷彿落在地面之上。並不需要太過復雜的設計,就可以為廣告圖製造視覺深度,讓人留下印象。

31、使用獨特的字體

在廣告Banner圖當中使用個性化十足的字體也同樣可以有效地吸引用戶的注意力。百事的這個廣告所用的字體富有個性的同時,還清晰可讀,給人玩鬧有趣的感覺,又不影響信息的傳達。

32、使用多樣漂亮的排版

對於漂亮的文字排版,絕大多數的用戶還是很吃這一套的。這個CaliforniaPizzaKitchen的廣告就是是McGrathCreative為他們精心設計的,不止排版設計頗為精緻,而且富有創意地同Pizza本身結合起來。

33、使用簡單的圖片

簡約直觀的圖片在網站上非常實用,它們通常會更為高效地展現內容,讓廣告Banner的信息傳遞的跟加直觀。目前設計師們通常會使用扁平風的簡約插畫來襯托主體、增加信息量,就想Coda的這個廣告圖。

34、使用紋理增加視覺深度

阿迪達斯的廣告圖在視覺上非常有意思,背景的紋理並不繁復,但是規律而富有科技感的線條不僅增加了視覺深度,而且營造出和品牌氣質貼合的速度感。

35、使用品牌色

如果廣告banner中沒有使用PayPal標志性的藍色,僅是圖中的圖片並不會讓你留下深刻的印象,但是恰恰是品牌色的使用,讓圖片和品牌綁定到了一起,互相促進,令你記住。

36、不要只想著促銷宣傳

廣告Banner圖是用來促銷的,這沒問題,但是有的時候並不需要做的那麼明顯。這個來自FreePeople的廣告鼓勵用戶不要只是買買買,而是多看多逛多對比,雖然這樣同樣可以促進銷售,但是看起來更像是站在用戶角度來提建議。

37、使用大膽的色彩

I,Anna的廣告圖配色稱得上是大膽而飽滿,紅色充滿活力而醒目,而黃色的加入,則讓整個配色更加協調,更容易吸引用戶的注意力。

38、來個簡單的插圖

有的時候,精緻的插畫並不一定符合你的品牌或者想要表達的東西,星巴克的這個廣告就是這種情況下誕生的,細膩精緻的圖並不符合他們的需求,反而是扁平而略顯拙稚的插圖來的更加簡單到位。它呈現出新款飲品的成份構成,這個廣告圖讓你彷彿有身在星巴克看著菜單的感覺。

39、引入動效

這個來自星巴克的廣告圖,在小小的一塊區域當中展現了相當引人注意動態的元素。波紋從中央出發,向外發散,當用戶看到這個廣告圖的時候,會不由自主地被它吸引到。

40、完全動起來

如果你對於動效的運用足夠熟練,不妨讓整個廣告Banner中的元素都運動起來,這樣更容易脫穎而出。設計師將應用在平板當中的使用流程藉助動效完全展現出來,短短幾秒讓你獲取到靜態Banner圖所無法企及的信息量,體驗優秀。

41、使用幾何紋理

Corona的這個廣告圖很好地將之前所流行的Low-Poly元素運用到橙子這個意象當中,這種幾何紋理賦予橙子以一種冰爽剔透的感覺,讓你不由得對Corona的啤酒產生興趣。

42、用有趣的圖形分割空間

Brightgreen的這個個廣告圖使用菱形割裂為兩個不同的空間,這樣使得廣告圖形成了自然的兩個層次,留白的部分承載文字信息,而綠色部分則承載著圖片,讓整個圖片主次分明,又充滿質感。

43、加入陰影

長陰影是之前流行過很長一段時間的設計趨勢,而Webckdesign所創造的這個廣告則是相當不錯的一個使用案例。如果沒有陰影,那麼整個圖片會顯得相當單調,長陰影的加入讓它看起來不在那麼扁平,擁有了層次。

44、將圖案作為紋理

和微妙細膩的圖案不同,將特定的圖案作為紋理疊加在背景上,可以營造出特定的氛圍。AnneSophieHostert所設計的這個廣告圖利用雪糕和菠蘿的圖案紋理給人營造出夏天的感覺。

45、使用色塊分割

如果你不想將手頭的圖片僅僅只是用到廣告圖中作為背景,那麼不妨將它分割成不同的部分,同單色色塊結合到一起使用,整個廣告圖的形式感顯得更強了。

46、使用線條裝飾

廣告圖絕大多數時候都是圖片和文字組成的,但是適當的加入一些裝飾會讓廣告圖看起來更加飽滿。相比於各種高光,線條的裝飾性也不弱,而且更加自由,效果也頗為不錯。

47、講述故事

廣告的終極目標是賣出產品,而最有效的方式還是講述真實用戶的使用體驗。這個廣告是為亞馬遜的飲品電子書APPAudible所設計的,圖片中的場景旨在宣傳他們的產品在許多場景下都能無干擾的使用。

48、幽默一點

幽默的展示通常會比強勢的推銷更有效果,他們更願意看到引人發笑的內容。

49、使用簡單的字體搭配

不用進行繁復的排版設計,將幾種風格一致、簡單易於識別的字體搭配到一起,就像必勝客的這個廣告一下,同樣可以達到增加信息量、令人愉悅的效果。

50、使用簡單的圖形來強調