關於網頁Banner的四種類型

閱讀時間約 4 分鐘

和網站有關的設計工作中,除了網頁設計、網頁前端切版這類工作之外,也有專門在為企業機關管理、維護網站的工作。

在這樣的團隊,通常會和行銷企劃和廣告文案領域的人才互相配合,分工合作產出年度的廣告計劃、活動企劃,設計師在裡面的角色除了製圖之外,也需要對產出的圖片內容具有傳達目標的觀念。

以下是我個人將收到的Banner需求分成常見的四個類型,在和同事配合時,若雙方都有著資訊傳達的共識,那會有更好的設計效率,並盡量降低來回修改的可能性。


▉ 常見的四種Banner類型

一、形象類

這類型的Banner會需要吸引人的圖片和引人入勝的文案標題,需要在短短幾句話讓人印象深刻,別讓人覺得「就是放張圖打段文字」就考驗著設計師的功力。


當圖片需要處理過才能使用時,設計師可以試著:

簡單加上一層遮罩,讓文案標題更明顯。
讓圖片的左右稍稍變暗,這能營造視覺集中的氛圍。
不需要被關注的圖片內容可以打模糊,讓文字明顯之外也能營造氛圍。
讓圖片整體的色調和網站一致,才不會讓網站有種拼接縫補的感覺。


二、商業廣告類

產品介紹、特價促銷、會員專享,這類Banner的引導性較為明顯,很有可能會出現將按鈕做在圖上的狀況。

除了商品本身,「價格與優惠資訊」在這類型Banner的閱讀順序中,也會有一定的重要性,在執行設計時就可以找一些主從關係明顯有差別的範例,和對方窗口確認想要的呈現方向,才不會繞一圈後發現對方根本不打算放商品,只想放大大的價格呀!


三、節慶祝賀類

為網站增添節氣氛圍、活動宣傳、隨檔期更新,有些會單純祝賀客戶,有些則會放上一些折扣訊息或商品資訊。在處理這種類型的Banner時,可以試著選擇很好延伸運用的向量元素,這樣在製作成其他平台需要的尺寸時,可以更有效率節省時間。


四、資訊宣導類

新聞公告、活動宣傳、最新消息,這類可以做得很文藝,也能做得有鄉土感。

整張的資訊重點可能會放在「時間」相關的編排。

別只是把日期無聊地放上,請試著去找找年、月、日的編排表現方式有哪些吧。


延伸閱讀

設計師需要考慮到不同平台和裝置的設計需求,包括桌機、筆電、平版和手機。

確保 Banner 在不同設備上都能夠呈現出最佳的效果。



▉ 建立蒐集資料的習慣

設計美感無法一步登天,需要靠日積月累的習慣。


滑手機時將不錯的廣告存起來、在路上看到貼近喜好的設計時將它拍下來,這些都是和日常有關的「蒐集資料」,當您將設計賞析變成日常,就能時刻訓練自己的美感。


而在將參考資料右鍵保存時,您也能參考先利用這幾個方式做分類:

  1. 依照「顏色」來區分。
  2. 依照「字體」來區分。
  3. 依照「設計手法」來區分。
  4. 依照「產業別」來區分。


將蒐集資料變成習慣後,試著加入一點能讓自己工作更便利的分類吧!


若和網頁設計產業有關,我們甚至還會用「區塊」做分類,比如關於簡介、企業沿革、服務項目之類,讓不同的設計師所製作的區塊設計,能成為下一個案子的數據養份,灌溉到其他人的靈感花園裡。


一個設計師的腦內資料庫不會只有以上四種分類方式,不管是想用圖書館的分類或者經濟部產業分類,或只是先用自己喜歡的分類去蒐集資料也很好,只要能將這件事情變成習慣,觀察力、美感、眼界就會有所提升。






5.5K會員
33內容數
二寶媽用瑣碎的時間來寫寫字,紀錄工作和興趣。
留言0
查看全部
發表第一個留言支持創作者!
筱涵|Hannah的沙龍 的其他內容
Resize是一種設計手法,設計師在設計的過程中,為設計品調整尺寸與內容,確保設計品在不同的環境中,都能夠呈現最佳的樣子,讓整體看起來更有一致性。
畢業後的設計系學生,若選擇到職場上尋找自己的設計舞台,通常都會利用人力銀行網站進行求職,若才華與人脈都富有深厚的資源,也是有一畢業就能自行創立設計工作室的人,但這相對少數。 以前在新竹時,聽過學校老師開玩笑說道:「想做廣告或行銷類的設計,就往台北跑;想做網站或找印刷類的設計,就往台中找。」 自己
在回到母校授課的期間,有些同學會因為我的分享而對網頁設計產生興趣,有些則是好奇為何我會從CMYK的領域改為投入RGB的世界,這時候我都會與他們分享自己從前某次的嚴重印製錯誤事件,在那次的經驗讓我慶幸自己一直以來都有請人校稿必簽名的習慣,也深刻體會到印刷品的不可逆,堅持自己的工作原則真的是很重要的一件
今年的9/08起,我回到校園與學弟妹們分享的一些職場點滴,並與他們分享了一些版面設計、專題製作的方法。 高中生們所帶來的青春活力滿滿,同學們將心力全部投注於圖畫紙張,帶著顏料與筆墨,在校園內忙碌奔走——這些設計相關科系的學生,大概有一半是因為喜歡畫圖、喜歡漫畫而進到該科系的吧。然後在高中三年中,匆
Resize是一種設計手法,設計師在設計的過程中,為設計品調整尺寸與內容,確保設計品在不同的環境中,都能夠呈現最佳的樣子,讓整體看起來更有一致性。
畢業後的設計系學生,若選擇到職場上尋找自己的設計舞台,通常都會利用人力銀行網站進行求職,若才華與人脈都富有深厚的資源,也是有一畢業就能自行創立設計工作室的人,但這相對少數。 以前在新竹時,聽過學校老師開玩笑說道:「想做廣告或行銷類的設計,就往台北跑;想做網站或找印刷類的設計,就往台中找。」 自己
在回到母校授課的期間,有些同學會因為我的分享而對網頁設計產生興趣,有些則是好奇為何我會從CMYK的領域改為投入RGB的世界,這時候我都會與他們分享自己從前某次的嚴重印製錯誤事件,在那次的經驗讓我慶幸自己一直以來都有請人校稿必簽名的習慣,也深刻體會到印刷品的不可逆,堅持自己的工作原則真的是很重要的一件
今年的9/08起,我回到校園與學弟妹們分享的一些職場點滴,並與他們分享了一些版面設計、專題製作的方法。 高中生們所帶來的青春活力滿滿,同學們將心力全部投注於圖畫紙張,帶著顏料與筆墨,在校園內忙碌奔走——這些設計相關科系的學生,大概有一半是因為喜歡畫圖、喜歡漫畫而進到該科系的吧。然後在高中三年中,匆
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 一、為什麼想轉職? 初次踏入網頁設計這一行,是在我26歲時。 為什麼想轉行呢? 在這之前,我是個畢業於化學工程學系,每天在實驗室中跟檢體搏鬥的化驗員。你以為實驗室化驗員薪水很高嗎?並沒有,起薪23k而已,你做好幾年把考核...
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第49天 明明想說今天應該要好好思考與規劃 但躺在床上沒多久又起來做點事情 卡住時又回床上躺,重複循環
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第48天 經營自媒體可以用很多種方法 而我現在嘗試使用IG、FB、YT、Dcard 方格子、部落格,以及電子報
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第46天 突然一個新血來潮加上貴人相助 我的網站好像變得有點樣子了 於是決定打鐵趁熱,用SEO外掛寫篇文
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第23天 跟著 網站帶路姬 一步步開始架設網站 網站架著架著覺得跟裝潢房間一樣好玩
Thumbnail
近年來,隨著網路文學風靡,許多網路作家透過自出版或透過網路文學平台等管道發表作品,獲得了廣大的追隨者和讀者。這些網路作家的作品也逐漸地在商業和市場上受到關注。以下是針對「網路作家跟商業和市場面的關聯」的回答: 首先,在商業和市場層面,網路文學作品已經開始走向商業化,成為出版社和影視公司的重要搬運工。
Thumbnail
我們一般小老百姓購屋買房,就是為了求一個安身立命的處所,滿足一個對於建構家的想像。然而,買房標的的品質好壞絕對不能靠感覺或運氣來決定你未來生活起居的品質,最好的方法就是依靠專業的施作人員、科學化的儀器來鑑定。 此文討論「專業驗屋」的三個目的,以及要不要驗的判斷標準。
Thumbnail
「人生難免有高有低、有輸有贏 但重要的是知道自己怎麼輸怎麼贏」 這句在教室中聽到的一句話 我用兩年的時間去體驗 「面對」跟「總結」我的結果 而這裡就是分享我的成長過程 從小阿嬤這樣告訴我 「阿文耶(台語) 現在認真念書考好學校 將來進大公司存錢買房 以後吃老(台語)才會像個人」 聽阿嬤話的我
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 一、為什麼想轉職? 初次踏入網頁設計這一行,是在我26歲時。 為什麼想轉行呢? 在這之前,我是個畢業於化學工程學系,每天在實驗室中跟檢體搏鬥的化驗員。你以為實驗室化驗員薪水很高嗎?並沒有,起薪23k而已,你做好幾年把考核...
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第49天 明明想說今天應該要好好思考與規劃 但躺在床上沒多久又起來做點事情 卡住時又回床上躺,重複循環
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第48天 經營自媒體可以用很多種方法 而我現在嘗試使用IG、FB、YT、Dcard 方格子、部落格,以及電子報
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第46天 突然一個新血來潮加上貴人相助 我的網站好像變得有點樣子了 於是決定打鐵趁熱,用SEO外掛寫篇文
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第23天 跟著 網站帶路姬 一步步開始架設網站 網站架著架著覺得跟裝潢房間一樣好玩
Thumbnail
近年來,隨著網路文學風靡,許多網路作家透過自出版或透過網路文學平台等管道發表作品,獲得了廣大的追隨者和讀者。這些網路作家的作品也逐漸地在商業和市場上受到關注。以下是針對「網路作家跟商業和市場面的關聯」的回答: 首先,在商業和市場層面,網路文學作品已經開始走向商業化,成為出版社和影視公司的重要搬運工。
Thumbnail
我們一般小老百姓購屋買房,就是為了求一個安身立命的處所,滿足一個對於建構家的想像。然而,買房標的的品質好壞絕對不能靠感覺或運氣來決定你未來生活起居的品質,最好的方法就是依靠專業的施作人員、科學化的儀器來鑑定。 此文討論「專業驗屋」的三個目的,以及要不要驗的判斷標準。
Thumbnail
「人生難免有高有低、有輸有贏 但重要的是知道自己怎麼輸怎麼贏」 這句在教室中聽到的一句話 我用兩年的時間去體驗 「面對」跟「總結」我的結果 而這裡就是分享我的成長過程 從小阿嬤這樣告訴我 「阿文耶(台語) 現在認真念書考好學校 將來進大公司存錢買房 以後吃老(台語)才會像個人」 聽阿嬤話的我