關於網頁Banner的四種類型

更新於 2024/03/31閱讀時間約 4 分鐘

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

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

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


▉ 常見的四種Banner類型

一、形象類

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


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

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


二、商業廣告類

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

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


三、節慶祝賀類

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


四、資訊宣導類

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

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

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


延伸閱讀

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

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



▉ 建立蒐集資料的習慣

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


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


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

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


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


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


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






avatar-img
6.3K會員
34內容數
二寶媽用瑣碎的時間來寫寫字,紀錄工作和興趣。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
筱涵|Hannah的沙龍 的其他內容
Resize是一種設計手法,設計師在設計的過程中,為設計品調整尺寸與內容,確保設計品在不同的環境中,都能夠呈現最佳的樣子,讓整體看起來更有一致性。
畢業後的設計系學生,若選擇到職場上尋找自己的設計舞台,通常都會利用人力銀行網站進行求職,若才華與人脈都富有深厚的資源,也是有一畢業就能自行創立設計工作室的人,但這相對少數。 以前在新竹時,聽過學校老師開玩笑說道:「想做廣告或行銷類的設計,就往台北跑;想做網站或找印刷類的設計,就往台中找。」 自己
在回到母校授課的期間,有些同學會因為我的分享而對網頁設計產生興趣,有些則是好奇為何我會從CMYK的領域改為投入RGB的世界,這時候我都會與他們分享自己從前某次的嚴重印製錯誤事件,在那次的經驗讓我慶幸自己一直以來都有請人校稿必簽名的習慣,也深刻體會到印刷品的不可逆,堅持自己的工作原則真的是很重要的一件
今年的9/08起,我回到校園與學弟妹們分享的一些職場點滴,並與他們分享了一些版面設計、專題製作的方法。 高中生們所帶來的青春活力滿滿,同學們將心力全部投注於圖畫紙張,帶著顏料與筆墨,在校園內忙碌奔走——這些設計相關科系的學生,大概有一半是因為喜歡畫圖、喜歡漫畫而進到該科系的吧。然後在高中三年中,匆
Resize是一種設計手法,設計師在設計的過程中,為設計品調整尺寸與內容,確保設計品在不同的環境中,都能夠呈現最佳的樣子,讓整體看起來更有一致性。
畢業後的設計系學生,若選擇到職場上尋找自己的設計舞台,通常都會利用人力銀行網站進行求職,若才華與人脈都富有深厚的資源,也是有一畢業就能自行創立設計工作室的人,但這相對少數。 以前在新竹時,聽過學校老師開玩笑說道:「想做廣告或行銷類的設計,就往台北跑;想做網站或找印刷類的設計,就往台中找。」 自己
在回到母校授課的期間,有些同學會因為我的分享而對網頁設計產生興趣,有些則是好奇為何我會從CMYK的領域改為投入RGB的世界,這時候我都會與他們分享自己從前某次的嚴重印製錯誤事件,在那次的經驗讓我慶幸自己一直以來都有請人校稿必簽名的習慣,也深刻體會到印刷品的不可逆,堅持自己的工作原則真的是很重要的一件
今年的9/08起,我回到校園與學弟妹們分享的一些職場點滴,並與他們分享了一些版面設計、專題製作的方法。 高中生們所帶來的青春活力滿滿,同學們將心力全部投注於圖畫紙張,帶著顏料與筆墨,在校園內忙碌奔走——這些設計相關科系的學生,大概有一半是因為喜歡畫圖、喜歡漫畫而進到該科系的吧。然後在高中三年中,匆
你可能也想看
Google News 追蹤
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
在今日數位世界中,良好設計的網站已經成為必需品。 瞭解網站設計的重要性,特別是對於第一印象和信任度。 這篇文章提供了選擇網站設計服務的實用指南,包括網站設計的重要性,基礎知識和選擇服務提供者的提示。
Thumbnail
好的品牌視覺系統,不僅讓你每一次的行銷設計都事半功倍! 也能無形之間為你的品牌不斷行銷,來了解如何透過系統化設計完善你的品牌接觸點吧!
Thumbnail
在網頁設計中,排版是傳達信息和增強用戶體驗的關鍵。一個良好的排版不僅能使網站看起來專業,還能指引用戶高效地獲取信息。以下是網頁設計排版中需要注意的細節。
Thumbnail
在建立網站的過程中,網頁設計和網頁開發這兩個術語經常被提及。它們雖然密切相關,但各自涵蓋了網站建設的不同方面,從創造視覺吸引力到實現網站的互動功能。
Thumbnail
UIUX 設計師們,是否時常尋找新的靈感來豐富你的網頁設計?以下介紹三個寶藏網站,將為你的創作之路帶來耳目一新的風景。
Thumbnail
網頁設計包含著眾多不同元素和技術,這篇文章列舉了網頁設計的主要組成部分,包括網頁佈局、視覺設計、響應式設計、導航、互動元素、圖像和視頻、動畫和特效,以及SEO優化。
Thumbnail
透過瞭解客戶獨特的需求和目標,以及專業的故事講述和引人入勝的內容,我們將為客戶重新打造一個影響力的網站,符合現今的潮流並具備長久的適用性。
Thumbnail
專業網頁設計服務能夠提升企業形象,增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
在今日數位世界中,良好設計的網站已經成為必需品。 瞭解網站設計的重要性,特別是對於第一印象和信任度。 這篇文章提供了選擇網站設計服務的實用指南,包括網站設計的重要性,基礎知識和選擇服務提供者的提示。
Thumbnail
好的品牌視覺系統,不僅讓你每一次的行銷設計都事半功倍! 也能無形之間為你的品牌不斷行銷,來了解如何透過系統化設計完善你的品牌接觸點吧!
Thumbnail
在網頁設計中,排版是傳達信息和增強用戶體驗的關鍵。一個良好的排版不僅能使網站看起來專業,還能指引用戶高效地獲取信息。以下是網頁設計排版中需要注意的細節。
Thumbnail
在建立網站的過程中,網頁設計和網頁開發這兩個術語經常被提及。它們雖然密切相關,但各自涵蓋了網站建設的不同方面,從創造視覺吸引力到實現網站的互動功能。
Thumbnail
UIUX 設計師們,是否時常尋找新的靈感來豐富你的網頁設計?以下介紹三個寶藏網站,將為你的創作之路帶來耳目一新的風景。
Thumbnail
網頁設計包含著眾多不同元素和技術,這篇文章列舉了網頁設計的主要組成部分,包括網頁佈局、視覺設計、響應式設計、導航、互動元素、圖像和視頻、動畫和特效,以及SEO優化。
Thumbnail
透過瞭解客戶獨特的需求和目標,以及專業的故事講述和引人入勝的內容,我們將為客戶重新打造一個影響力的網站,符合現今的潮流並具備長久的適用性。
Thumbnail
專業網頁設計服務能夠提升企業形象,增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。