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

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

Banner是什麼?

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

BANNER-Photo by Iraj Beheshti on Unsplash

那為什麼要有banner?

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

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

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

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

哪種的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

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

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

那些軟體可以製作?

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

另一個你也有資本可以選擇,那就是CorelDRAW使用,不過相較之下許多人會選擇Adobe illustrator因為太強大了又專業。

延伸閱讀:《讓我們來看看設計人都在用的Adobe軟體,它是什麼樣的公司?

那…沒錢的?沒關係,這世界上還是有好人存在,可以選擇Inkscape這套免費軟體使用,這也能達到你要的。

那…不想耗電腦資源?這也沒關係,你可以去網路上搜尋Fotojet這個網站,它裡面有各式各樣的Banner,只是都是基本的也是制式化,像臉書封面、YouTube頻道封面或者縮圖等等,不過還有另一個缺點它無法支援中文字體,大多著重於英文字體,這一點還需要斟酌一下。

不過好處是它擁有免費模板提供給你,這對於新手來說這是一個很棒的工具。


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

在〈“Banner是什麼?3步驟透過Banner吸引消費者觀看”〉中有 8 則留言

  1. 我覺得版主提供的banner尺寸還蠻重要的,常常會搞不清楚到底要用多大才適合,透過這樣的說明之後就有點了方向了

  2. 橫幅廣告真的很重要,好得很吸睛 糟糕的只想避開(反射性動作) 文章中的線上設計網站蠻不錯的,對我來說很容易操作,感謝分享

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *