色塊分割
以上banner采用不同比例大小的色塊組成Banner的背景,加上人物與文案,這種表現形式適用於突出產品,如家居,服裝,電子產品等。界面感簡而不白,能快速提取到有價值的信息,註意選色的時候要註意整體的色感。
幾何邊框
簡約,常常會給人以冷酷、幹凈、現代的感覺。設計中使用的形狀、元素簡潔;使用的配色方案統壹、整體,用色克制。質感體現上較為細膩;結構上經常使用留白、簡短/準確/有核心價值、有“氣質”的留白,框起來的是焦點,幾何圖形是永恒的裝飾品哦～.～
2.5D
空間幾何這種風格,通過建造壹個空間體,用幾何來營造氛圍,空間感代入感強。這類稍微研究壹下還是可以做出來的,關鍵是創意想法的表達,這個就要多費心思了
2.5D風格在電商設計中很流行,其風格新穎、實用,可以放置很多內容,有動有靜,可以很好的與二屏三屏連貫起來,受到壹些大型促銷活動的青睞,經常能看到這種風格的首屏海報。
扁平插畫
簡潔而不簡單,去掉繁瑣的裝飾效果,展現主體的核心表達。用文字以外的圖形或者人物等來幫助banner帶來更直觀的感受,文字稍微處理變形壹下加圖形或人物可以讓banner更有活力更有感覺。這種類型的banner,金融、教育、旅遊用的偏多,當然插畫能力OK的話,各個行業運用起來都不是問題
色彩疊加
較為流行、多變,整體視覺會相對年輕,使用的元素相對更直接、明確、結構直白;整體有給人幹凈、明朗、和諧的感覺。突出文字,用簡單的圖形裝飾烘托氣氛。可用純色,漸變色來進行背景色彩疊加處理,選大圖的時候要註意哦,整體的意境要靠色調和明暗調出來,當然最簡單的還是選用幹凈不雜亂的底圖。
色彩是有情感的,不同的配色會帶給人完全不同的心裏感受。所以我們在做圖的時候需要根據主題來進行配色,合理、舒適,讓banner圖整體和諧。所以我們需要考慮想要表達什麽樣的情感,想讓用戶看的時候有什麽樣的感受,所表達的情感與主題是否相符合,基於這些點來做配色就更加的有目的性了。
漸變紋理
微妙的漸變已經作為已經設計趨勢回歸了。漸變的背景,甚至漸變的疊加,都能讓妳的Banner設計風格化,搭配圖片、紋理和文字,漸變能給人多種多樣的體驗。色彩濃郁是其特點
和UI設計不同,在電商和廣告Banner的設計當中,紋理壹直都存在,甚至是非常常用的元素。紋理能夠很好的提升整個Banner
的信息量和整體的質感。當然,在使用紋理的時候千萬不要讓紋理喧賓奪主。
盤點banner設計組成要素/類型/風格/設計步驟大全banner對於壹個設計師來說,肯定不是壹個陌生的詞語啦,在目前的各個行業領域中基本都涉及到banner的需求,不管是web端還是移動端我們處處都能看到banner的影子,所以掌握banner的設計是我們每壹個設計師必備的技能啦!
banner(及橫幅廣告)是網絡廣告最早采用的形式,也是目前最常見的形式。橫幅廣告又稱旗幟廣告,它是橫跨於網頁上的矩形公告牌,當用戶點擊這些橫幅的時候,通常可以鏈接到廣告主的網頁。是表現商家廣告內容的圖片,放置在廣告商的頁面上,是互聯網廣告中最基本的廣告形式!
下面我們會從這幾個方面講解banner:
壹:banner的組成要素
二:banner的類型
三:banner的風格選擇
四:banner的設計步驟
壹:banner的組成要素
banner的主要組成要素我這裏簡單的總結了幾點:
以及banner主要的元素是:文案+元素+背景
元素又可以細分為:元素=商品+模特+logo+點綴(這裏的元素是需要根據banner的實際情況選擇要素,可有可無)
如圖:
(來源於花瓣)
二:banner的類型
banner的類型我這裏總結的主要分為:
01:產品宣傳類banner(新產品、熱銷產品)
02:活動類banner(節日活動促銷、產品促銷)
這裏簡單的將banner分為了兩種類型,因為對於不壹樣的banner需要實現的效果和目的是不壹樣的,所以我們需要設計出不壹樣的風格的banner
對於產品宣傳的banner我們最主要的就是要突出產品的特征,所以我們對於banner的設計,需要的最主要的元素就壹定是產品,以及簡短的文案介紹,至於點綴的元素我們也可以根據實際產品的特征選擇合適的元素,也可以不用元素的點綴,背景肯定也是必不可少的!
01:產品宣傳類banner:
產品+文案+背景
例如:
(來源於花瓣)
上面的案例都是對於產品宣傳類的banner的設計樣式,他們有壹個***同的特征就是產品放大放大再放大,盡顯產品的特點,簡潔的文案介紹和大量的留白更加凸顯產品的特征,使用戶的目光不由自主的被產品本身所吸引
產品宣傳banner:
產品+文案+元素+背景
例如:
(來源於花瓣)
這類banner的特點就是除了產品本身外,都添加了壹些其它的元素作為banner的壹個點綴效果,使畫面顯得更加飽和,或使畫面帶有動感的效果!
那麽問題來了
什麽情況下產品banner設計添加元素好?什麽情況下不添加元素好呢?
第壹:對於需要極度顯示產品的特征的時候我們最好選擇不添加元素幹擾產品,
第二:對於簡約產品,我們最好也不要添加元素做裝飾,大量的留白更加適合簡約產品的風格,
02:活動類banner
產品+文案+元素+背景
例如:
(來源於花瓣)
對於活動類的banner設計我們大多數都會選擇顏色鮮艷多彩的,並且畫面飽和具有沖擊力的,營造出壹種熱鬧的氛圍,對於元素的添加也是必不可少的壹點,因為對於活動類的banner設計,畫面越熱鬧活動力度就會顯得越大,才會更加吸引用戶,對於活動的標題也要盡量的凸顯!
二:banner的風格選擇
對於banner的風格也是多種多樣的,但是對於不同性質的banner選擇的風格肯定也是不壹樣的,不同的banner搭配不同的風格給人的視覺效果是完全不壹樣的,合適的搭配才能使banner更好的表現其特征和目的
例如:
01:簡約產品家居banner的宣傳banner,就比較適合簡約大氣幹凈的風格
(來源於花瓣)
02:高端科技產品banner,就選擇具有科技感氣質的風格
(通過科技感的圖形和顏色等來體現)
(來源於花瓣)
03:時尚服飾類的banner,就適合選擇時尚畫面的風格
(通過獨特的造型和風格圖形以及色彩等來體現)
(來源於花瓣)
04:高端奢侈品牌類banner,就適合高端大氣的風格搭配
(通過高檔色彩黑紅配,黑金配等來體現)
(來源於花瓣)
05:少女\兒童可愛風banner,就適合可愛風元素搭配的選擇
(通過可愛元素:插畫、線條、氣球、愛心、圓潤的字體、活力的色彩等來體現)
(來源於花瓣)
06:國風/文化/節日類banner,就比較適合選擇帶有文化氣質的元素搭配
(通過中國風毛筆字、中國古有的元素:印章,中國山水畫,墨跡,扇面,剪紙,園林窗格,古紋樣,祥雲,京劇,卷軸等等)
(來源於花瓣)
二:banner的設計步驟
01:了解和確定banner的設計需求
02:明確banner設計的目的
03:根據得到的banner設計需求確定banner的設計風格
04:選擇合適的banner設計版式結構
05:選擇匹配的元素裝飾banner的整體效果(根據實際需求添加)
06:色彩搭配選擇
01:了解和確定banner的設計需求
對於這了解設計需求壹點來說,不管是做什麽設計的前提都是必不可少的壹步,也是最關鍵的壹步,如果妳連設計的需求都不明確那麽做出來的設計結果肯定就不會符合實際的需求
那麽對於banner的設計需求我們具體需要明確那壹些呢?
第壹點:確定banner設計文案
文案對於設計師來說也是壹個很重要的點,設計師可以根據文案信息從中找到設計靈感,並且也可以知道大致的設計風格的走向
第壹點:確定banner設計尺寸和投放平臺
文案確定後我們還需要知道banner的投放平臺和位置,尺寸大小,以及是否需要適配各個平臺的展示,
02:明確banner設計的目的
對於設計壹張banner,肯定是想要達到某壹種目的才會設計這壹張banner,所以在設計banner之前壹定要了解清楚這壹張banner設計的目的是什麽,例如:是想要宣傳產品還是想要促銷產品,兩者的性質是完全不壹樣的,
03:根據得到的banner設計需求確定banner的設計風格
banner的設計風格我們可以從banner文案需求中找到關鍵詞進行定位,比如:全語音智能操作的車載支架A5
從這壹句主題文案中我們能夠提出的關鍵詞就有:全語言、智能
對於這樣的關鍵詞的理解我們肯定第壹就會想到科技感智能化時代的畫面,所以這裏的風格我們也就有所選擇啦!
04:選擇合適的banner設計版式結構
banner的設計版式結構我們可以大致分為:
居中結構、左對齊結構、右對齊結構
不同需求banner的結構就需要根據實際情況選擇啦!
05:選擇匹配的元素裝飾banner的整體效果(根據實際需求添加)
對於banner的裝飾元素我們也是需要根據實際情況和產品banner的特征采取合適的選擇,比如簡約產品的banner就不需要裝飾元素更好,而活動類banner或少女兒童等可愛類的banner設計就需要選擇裝飾元素更加適合,並且不同形狀banner的裝飾元素選擇也是不同的(前面做了簡單的介紹,這裏就不再重復啦)
06:色彩搭配選擇
色彩的選擇也是很關鍵的,不同性質的banner選擇的顏色搭配也是不壹樣的,適當的顏色搭配會使產品更加凸顯或者使畫面更加顯眼突出,並且給人的感覺也是不同的,
例如:
*黑金配和黑紅配就會給人壹種高級感
*藍,黑色,紫等冷色搭配,畫面給人硬朗,空間感,速度和力量的感覺更加適合科技感
*紅、橙、黃、紫搭配,就會營造出壹種熱烈的氛圍,更加適合時尚和活動類
*黑、白、灰的搭配就會給人壹種高冷不宜接近的感覺,更加適合大牌的風格選擇
*白、灰的搭配會給人壹種寧靜、文藝、氣質、素雅的感覺,更加適合簡約產品的選擇
實操案例:
文案需求:
全語音智能操作的車載支架A5
揮手聽話的語音支架
使用訊飛AIUI人機交互解決方案,智能駕乘張口即來
設計尺寸:1920x650px
設計的目的:根據需求我們得到的banner設計的目的是宣傳新產品車載支架A5
第壹步:我們將文案信息以及提供的產品放入畫布中
第二步:明確我們的主標題“全語音智能操作的車載支架A5”
所以我們將主標題放大處理,凸顯主標題
第三步:選擇banner的風格,因為這裏我們需要體現的是產品的智能化,所以我們的風格就可以定義為科技感的
第四步:選擇版式結構,我們這裏就選擇簡單的左右結構吧!
第五步:選擇裝飾元素,裝飾元素也要根據科技感的效果選擇,以及可以從文案中提取,例如這裏我們可以提取:科技感線條和圖形、語音圖形等
第六步:整體位置調整和色彩搭配,對於文字大標題我們也處理成不壹樣的具有層次結構的,使其更加凸顯,小標題文案也根據整體風格畫面做微小的處理,使文案和畫面更加和諧統壹,包括產品周圍由於受到光的影響,也需要做處理
最終我們就得到上面的banner效果啦!壹個簡單的科技感banner就設計完成啦!
好啦!今天的知識有點多,也有點全面!希望妳們喜歡吧!
往期好文推薦
—
版式設計——簡單7種圖片排版方式
10張創意線條圖形海報設計
2招教妳配色技巧,擺脫配色困難癥!
創新海報設計思路
插畫藝術風格有哪些1.扁平插畫
。扁平插畫相對來說有很強的通用性,因為它簡約又直觀、弱化了細節和透視,識別度和上手度也相對更快,契合了年輕人對可愛和萌趣的審美要求,是最容易讓畫面出整體效果的技法;通常會運用規則的幾何圖形或不規則的
矢量圖形
去保留物體原有的辨識度形態,搭配大塊面的色塊,用簡約的圖形去讓主體形態更加抽象或者簡約化,運用的範圍比較廣闊,常見的有海報、包裝、banner、App閃屏、遊戲界面等。
2.漸變插畫。
漸變插畫的特點是大量運用低
飽和度
的漸變手法,且在用色上壹般采取近似色;其細節豐富而細膩、畫面風格偏寫實、視覺穩重大氣,讓畫面很有視覺
沖擊力
和層次感。其中,漸變插畫裏面又細分雙色漸變、半透明漸變、網格漸變、漸變模糊等形式。
3.MBE插畫
。這種插畫風格的特點是:簡潔、圓潤和可愛,壹般都帶有特粗的深色描線、Q版化卡通形象、圓潤的線條、矢量繪制的線條+面組合的設計風格,整體很清新、可愛的調性,壹般運用在圖標和空白界面的提醒等方面。
4.肌理插畫。
肌理插畫壹般是在基於扁平畫的基礎上,最後融入肌理效果,最後呈現出有質感,且有光影效果的畫面;這種畫法壹般沒有描邊線,大多都是通過色塊的明暗來區分每個元素;通過增加質感、雜色等,來增加插畫的層次和立體感,可以有效的刻畫作品的細節;給人很樸實的感受,比較輕松隨意;肌理中的顆粒感增加了畫面細節,也更耐看,同時也更有個人風格。
5.立體插畫。
立體插畫能夠二維的空間裏表現三維的事物,為畫面帶來透視感和空間感,更好地傳達信息。
6.描邊插畫
。描邊插畫可以簡單理解為眾多
線面
結合圖標組合在壹起,互相呼應而組成壹個大畫面,多帶有描邊的處理;多運用線條和描邊,畫面整體比較幹凈整潔,常用於H5/App;在應用時要註意描邊的粗細對比,要衡量是否符合常規。
7.剪紙插畫。
剪紙風格插畫就是用剪紙的方式制作插畫,通過切割,堆疊分層剪紙來營造不同的內容。與傳統的平面插畫相比,剪紙插畫可以使畫面更具層次感和立體感,形式上也更加新奇有趣。
8.國潮插畫。
國潮在近幾年備受推崇,簡言而知,國潮就是以
中國文化
和傳統為基調,集時尚、格調和腔調於壹身,是傳統與現代的文化思潮碰撞,更是東方美學的淋漓展現。因此插畫融合了國潮文化,加速畫面的傳播力度,更具時尚感;同時也賦予了品牌更多的符號和文化價值。品牌可以借此迸發出無限的魅力和營銷潛力。
9.光影插畫。
光影插畫能利用光線和陰影結合,將畫面的氛圍烘托到極致,是壹場想象與現實的完美碰撞。通過明暗和陰影層次變化,讓視覺上更有立體感,以此形成固象,讓畫面更加有吸引力和視覺空間感。
10.手繪型插畫。
手繪插畫是插畫
表現手法
中最原始的壹種,很考驗創作者的形體和繪畫功底;通過運用手繪的肌理和圖形來直觀地傳遞情感的藝術設計語言,可以讓觀眾更直接的接受情感,極具直觀的形象和真實的生活感以及快速的情感感染力,比其他的插畫形式多了壹種人情意蘊。多用於藝術性的活動或者動漫、海報設計,整體張揚又隨意,帶著諸多的生活氣息,很有
親和力