Skip to content

Banner是什麼?3步驟透過Banner吸引消費者觀看

  • 8 Comments

如果你從事的是網頁設計師或者有接觸網站設計之領域都會了解什麼是banner,這是在亞洲比較常見放於網站的部分,相對來說banner主要透過圖、文穿插提供價值的一種。


設計師都在使用Illustrator來製作Banner設計!

如果你做Banner需要用圖片,這裡推薦三家好用圖庫平台:

Adobe旗下圖庫:Adobe stock

知名好用多到爆圖庫:Shutterstock

CP值高素材圖庫:envato element

#如果想了解以上更多圖庫平台資訊,可以查看之前寫過的文章們


Banner是什麼?

它在中文意義裡有著旗幟之意,一般比較常聽到用於網站的廣告類型居多,但是現實生活上的布條也可以這麼稱呼。

BANNER-Photo by Iraj Beheshti on Unsplash

那為什麼要有banner?

這邊講網路的部分,其實這是一種行銷方式,當一個網站越多人觀看有些就會安插廣告觀看。

這樣的目的一方面業主可以接觸更多客群;另一方面網站經營者可以獲取廣告放置於顯現部分,然後方得賺取收入,就很像包租公、包租婆一樣。

聯盟行銷(Affiliate Marketing)就是一個非常好的例子,消費者看到這是我有興趣的東西並在網路上購買,給錢給業主後,把一開始講好的分配傭金比例給網站經營者,如此一來這樣就能達到雙贏效果,互相擁有價值。

像這種例子來說banner業主可以提供給你去貼放於你要的位置;又或者可以自己設計,對於學過設計的人來說,當然偏向於後者居多。

延伸閱讀:如何有技巧的設計Banner?12個設計技巧使人忍不住點擊

哪種的banner會立馬跳過?

前面說banner是圖文並茂以達到行銷的一種,所以banner在設計裡就變得非常重要,縱然你不想點擊,目的只是為了多花一點時間在這個廣告上。

有時候在製作banner困難點在於行銷與視覺平衡。通常會讓人跳過的banner大多是以下幾點:

  1. 東西太多太雜沒有重點
  2. 顏色使用不恰當
  3. 文案標題太過無聊
  4. 文案與產品不符
  5. 內容的元素互相打架
  6. 背景紋路過於繁雜
  7. 字體沒有大小之分
  8. 去背沒有去乾淨(這點身為學過設計的我來說,很糾結這件事)
像這個banner用到黑白讓視覺單純,再來動線也非常明確〈來自博客來官網

如何製作好的banner以達到更多點擊?

尺寸

首先你必需要先知道你會應用的尺寸範圍,就好像一個畫布,你要有東西應用才能下手,所以尺寸一定是必須的。

先知道尺寸後還須要考量到進手機後的管道以及動線,一般國際尺寸的banner分為這8種:

  1. 120X120像素,一般這種會是新聞廣告頁或者產品顯示呈現
  2. 120X90像素,可能用於大型LOGO
  3. 120X60 像素,用於LOGO上的商業圖示
  4. 125X125像素,使用於照片型台演示
  5. 234X60像素,會用在左右其中一方有產品;另一方有文字以及按鈕連結(CTA),這會比較常見。
  6. 392X72像素,有些人會把它用在網站的頁眉或者頁尾部分,它可以呈現較多圖片。
  7. 468X60像素,一樣可以用於頁眉或者頁尾部分。
  8. 88X31像素,有些人會用在小型LOGO或者連接部分。

目前這還只是冰山一角,據美國網路廣告服務商DoubleClick資料顯示,這樣的banner廣告類型尺寸呈現約有一萬多種,所以以上的國際尺寸只是參考,還需要依照當時的情況呈現。

以前通常都是給客戶挑選幾種尺寸,現在則是上萬種,又加上互聯網興起我猜尺寸樣式可能更多。

風格

知道了尺寸後,接下來你要去定義風格,講一個最簡單的例子,今天要去跑步運動,你會穿著一件日系質感襯衫嗎?當然不會。

所以運用到Banner也是一樣,是運動產品的話可以製作較熱血一點的風格,但是在設計風格不要太強過於網站本身,如果一家網站它的主色系可能是紫色、綠色這種,這時候就想辦法融入網站,如此一來不會顯得突兀。

細節

已經知道你要去運動了,所以會穿運動衣、布鞋、短褲這些基本底都有了,接著有人就會注重細節部分,像是衣服顏色、鞋子該穿哪雙布鞋等等。

Photo by Alexander Redl on Unsplash

在這裡頭會注重排版、文案、顏色、圖片,一般來說你可以從文字開始去做對齊然後背景不要太繁雜、產品的內容放大化、文案達到吸睛、圖片去背去乾淨、再來這些都弄好後你可以去做留白動作,接著重要的一點就是配色,顏色太亮會不舒服反效果(除非你要做很ㄎㄧㄤ的風格)

延伸閱讀:《美感的意義,新手如何運用美感七大法則元素進而創造視覺?

那些軟體可以製作?

Illustrator

你可以使用最強大的軟體Adobe illustrator你可以自由使用設定尺寸,不過需要付費的,如果你願意付出資本在廣告上可以考慮考慮。

類型影音/多媒體向量繪圖
好處從0開始的踏實感,ˊ掌控所有小細節。
如何付費?訂閱制

CANVA

除了Illustrator付費以外,其實也可以利用Canva來做Banner來做,與Illustrator的差別在於,Canva有模板來使用,就不需要一個個燒腦設計。

延伸閱讀:【Banner設計教學】用不到5分鐘Canva就能快速搞定廣告橫幅設計

Canva: Aprenda o que é e como usar
類型影音/多媒體向量繪圖
好處可以從他人的Banner模板來讓你進行修正
如何付費?免費/訂閱制

Banner在網路媒體佔著重要的環節,以前都需要固定客群銷售(現在依然也需要XD),現在擁有更擴大的範圍行銷受眾客群又變多了,回頭複習一下,製作banner所需的三大步驟:尺寸→風格→細節,希望有在做Banner設計的人可以讓觀眾多看幾秒!


本站有部分連結與商家有合作關係,若透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明及使用條款


如果你經常大量使用圖片的話,本網站推薦三個好用的平台:

  • 重度Adobe使用者,不需要把圖片下載到桌面,直接線上儲存:Adobe stock
  • 目前全球最知名專業的圖庫平台,若你只需要圖像來使用的話:Shutterstock
  • CP值高的素材平台,每月付一次錢就可以下載各式各樣素材:Envato element

看更多素材文章內容....


如果我的文章對你有幫助,也歡迎贊助我一杯咖啡

coffee

文章引用請來信索取授權,否則將保留法律追訴權。

8 thoughts on “Banner是什麼?3步驟透過Banner吸引消費者觀看”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。