關於網頁Banner的四種類型

筱涵|Hannah-avatar-img
發佈於網頁一角 個房間
更新於 發佈於 閱讀時間約 4 分鐘

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

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

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


▉ 常見的四種Banner類型

一、形象類

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


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

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


二、商業廣告類

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

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


三、節慶祝賀類

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


四、資訊宣導類

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

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

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


延伸閱讀

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

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



▉ 建立蒐集資料的習慣

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


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


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

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


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


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


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






留言
avatar-img
留言分享你的想法!
普普文創-avatar-img
2024/03/18
很不錯!可以多討論這一類的議題。
筱涵|Hannah-avatar-img
發文者
2024/03/18
普普文創 謝謝~ 我正在試著能像您一樣,將寫文章變成每日習慣 哈哈!
整理得很棒!
筱涵|Hannah-avatar-img
發文者
2024/03/27
冰兒 謝謝冰兒!
avatar-img
筱涵|Hannah的沙龍
9.2K會員
42內容數
二寶媽用瑣碎的時間來寫寫字,紀錄工作和興趣。
2025/03/14
在設計完成之後,提供的檔案格式都會因為情況而有不同,認識到差別,才能掌握到設計之外的細節,本篇文章將簡單介紹最常見的 6 種圖像格式,以及其他檔案交付格式、瀏覽器相容性查詢工具Can I use。
Thumbnail
2025/03/14
在設計完成之後,提供的檔案格式都會因為情況而有不同,認識到差別,才能掌握到設計之外的細節,本篇文章將簡單介紹最常見的 6 種圖像格式,以及其他檔案交付格式、瀏覽器相容性查詢工具Can I use。
Thumbnail
2025/01/02
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
2025/01/02
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
2024/12/13
2024/12/13
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
這篇文章主要討論了行銷人與設計人溝通的重要性,並針對以商業目的為主的設計提出了一些設計風格呈現、視覺重點、露出設計的地點和閱讀者為誰等方面的建議。
Thumbnail
這篇文章主要討論了行銷人與設計人溝通的重要性,並針對以商業目的為主的設計提出了一些設計風格呈現、視覺重點、露出設計的地點和閱讀者為誰等方面的建議。
Thumbnail
好的品牌視覺系統,不僅讓你每一次的行銷設計都事半功倍! 也能無形之間為你的品牌不斷行銷,來了解如何透過系統化設計完善你的品牌接觸點吧!
Thumbnail
好的品牌視覺系統,不僅讓你每一次的行銷設計都事半功倍! 也能無形之間為你的品牌不斷行銷,來了解如何透過系統化設計完善你的品牌接觸點吧!
Thumbnail
在數碼時代,企業的網頁設計扮演著關鍵的角色。它不僅代表著企業在網絡世界的形象,也能提升公司的認受性,塑造良好的第一印象,並在線上建立存在感。此外,網頁也是推廣宣傳的基地,能介紹公司和產品資訊,吸納潛在客戶。
Thumbnail
在數碼時代,企業的網頁設計扮演著關鍵的角色。它不僅代表著企業在網絡世界的形象,也能提升公司的認受性,塑造良好的第一印象,並在線上建立存在感。此外,網頁也是推廣宣傳的基地,能介紹公司和產品資訊,吸納潛在客戶。
Thumbnail
自媒體(內容創作者)運營綱領4包含了搜尋引擎優化、內容生產、市場研究和知識付費相關的建議。
Thumbnail
自媒體(內容創作者)運營綱領4包含了搜尋引擎優化、內容生產、市場研究和知識付費相關的建議。
Thumbnail
本文深入探討不同網站類型(形象官網、電商、型錄式、Blog)之間的差異和相關費用,並提供選擇適合網站類型的建議。重點包括網站的目標和需求、預算和成本、目標受眾。
Thumbnail
本文深入探討不同網站類型(形象官網、電商、型錄式、Blog)之間的差異和相關費用,並提供選擇適合網站類型的建議。重點包括網站的目標和需求、預算和成本、目標受眾。
Thumbnail
做Banner的前置工作,用製作類型讓設計溝通更有共識,也讓設計師能確認執行的方向。
Thumbnail
做Banner的前置工作,用製作類型讓設計溝通更有共識,也讓設計師能確認執行的方向。
Thumbnail
瞭解如何設計一張能夠吸引潛在客戶並傳達訊息的宣傳單。包括目標受眾、吸引標題和圖片、簡潔明瞭的訊息、產品或服務的價值強調、提供聯絡方式以及適當的色彩和字體選擇。
Thumbnail
瞭解如何設計一張能夠吸引潛在客戶並傳達訊息的宣傳單。包括目標受眾、吸引標題和圖片、簡潔明瞭的訊息、產品或服務的價值強調、提供聯絡方式以及適當的色彩和字體選擇。
Thumbnail
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要,他們擁有豐富的經驗和技能,以提升客戶的在線存在感和業務成果。
Thumbnail
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要,他們擁有豐富的經驗和技能,以提升客戶的在線存在感和業務成果。
Thumbnail
透過瞭解客戶獨特的需求和目標,以及專業的故事講述和引人入勝的內容,我們將為客戶重新打造一個影響力的網站,符合現今的潮流並具備長久的適用性。
Thumbnail
透過瞭解客戶獨特的需求和目標,以及專業的故事講述和引人入勝的內容,我們將為客戶重新打造一個影響力的網站,符合現今的潮流並具備長久的適用性。
Thumbnail
商品標題怎麼下?商品敘述文案怎麼描述?市面上已經有很多社群行銷文章都在教怎麼寫廣告文案,而這篇會分享過往我在行銷產業運用的「廣告文案排列組合」,用「從規格到情境,再從情境到特色」的公式來拆解標題文案寫法。
Thumbnail
商品標題怎麼下?商品敘述文案怎麼描述?市面上已經有很多社群行銷文章都在教怎麼寫廣告文案,而這篇會分享過往我在行銷產業運用的「廣告文案排列組合」,用「從規格到情境,再從情境到特色」的公式來拆解標題文案寫法。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News