企業(yè)官網(wǎng)類主視覺 Slogan Deisgn 設(shè)計(jì)分享
主要分析如何巧用slogan(品牌口號(hào),廣告語(yǔ)),實(shí)現(xiàn)網(wǎng)頁(yè)banner的創(chuàng)意表現(xiàn)。slogan在banner中占據(jù)著舉足輕重的地位,slogan設(shè)計(jì)得好,可以成為廣告圖的點(diǎn)睛之筆,畫面品質(zhì)感明顯提升。設(shè)計(jì)得不好,也能毀掉整個(gè)banner。
1、 那么來(lái)了解下Slogan對(duì)Banner有多大的影響?
如果說(shuō)banner比作一個(gè)人的臉,那么標(biāo)語(yǔ)就相當(dāng)于臉上的五官,以及臉的架構(gòu)。一個(gè)人是否帥氣主要還是看她的臉的骨架和五官是否精致,同理你應(yīng)該知道標(biāo)語(yǔ)對(duì)banner視覺的影響有多大啦。
那么來(lái)看看哪些標(biāo)語(yǔ)而廢掉設(shè)計(jì)作品!
下面整體的背景和產(chǎn)品質(zhì)感都可以,但卻給用戶看著顯得狠low,是因?yàn)楸粯?biāo)語(yǔ)設(shè)計(jì)排版給破壞了。( 這里隨便選擇了一些作品,只代表個(gè)人觀點(diǎn)哦~ )
1. 標(biāo)語(yǔ)排版位置以及大小對(duì)比度不夠太過(guò)于小 所以壓不住畫面所以導(dǎo)致畫面視覺沖擊力不夠
2,英文和vi元素不搭配 文字無(wú)緊湊感,對(duì)比不夠。
3,框太細(xì),文字對(duì)比不夠,沒有品牌感。
4,文字和畫面不夠呼應(yīng),太小壓不住畫面,文字太呆板點(diǎn)綴突出設(shè)計(jì)有點(diǎn)讓人琢磨不透 層次感不夠
5,樣式過(guò)于多,色彩 大小樣式 主次關(guān)系
通過(guò)以上舉例的部分案例
我們發(fā)現(xiàn)一個(gè)banner設(shè)計(jì)的好壞,光靠質(zhì)量高的圖是達(dá)不到的,還要有一個(gè)好的Slogan設(shè)計(jì)。
那么我們?nèi)绾问褂肧logan 讓 banner變得更有設(shè)計(jì)感呢,
這次從入門到基礎(chǔ)到初級(jí)進(jìn)行分析。
入門 - 在畫面中比例位置
基礎(chǔ) - 結(jié)合圖案/圖形
初級(jí) - 改變形狀/字體樣式
01 : Slogan在畫面中比例位置
標(biāo)語(yǔ)在畫面中的構(gòu)圖常見為 左右對(duì)稱 上下對(duì)稱 對(duì)角對(duì)稱 滿屏 (Z L E )字形對(duì)稱 黃分割比位置等
主要根據(jù)畫面中為圖片主視覺元素 來(lái)定制標(biāo)語(yǔ)位置在那里。最好不能破壞畫面的 平衡感 統(tǒng)一性 可讀性等原則。
02:通過(guò)結(jié)合/圖形元素來(lái)上slogan變得具有設(shè)計(jì)感
注意 在使用的時(shí)候需要注意品牌的定位,運(yùn)用環(huán)境,以及在畫面中的比列位置等,盡量不要影響畫面構(gòu)圖。
常見的一些設(shè)計(jì)方式分為
一:Slogan/方形
方形最大的最用就是可以起到突出分割修飾等作用,可以得畫面產(chǎn)生強(qiáng)烈的對(duì)比。方形運(yùn)用的行業(yè)比較綜合,
比較中性的元素,少數(shù)使用于女性小孩行業(yè)中。
01:具有突出/分割作用
下圖中設(shè)計(jì)師突出了22 所以利用了方形進(jìn)行突出,標(biāo)語(yǔ)布局采用了對(duì)角布局的方式。
讓整個(gè)畫面視覺產(chǎn)生了平衡感。
二:Slogan/方框
01:使標(biāo)語(yǔ)更緊湊,增加層次感。
下圖中設(shè)計(jì)師為了讓兩端文案變得更整體,不被背景圖片所干擾,所以采用了方框的方式進(jìn)行設(shè)計(jì),標(biāo)語(yǔ)位置位于畫面上下左右居中位置。
02: 讓文案單獨(dú)去分并且突出出來(lái)。
作品也是采用了框型的元素使畫面中的文案彼此不被干擾。標(biāo)語(yǔ)在畫面中位于左下角位置。巧妙的平衡了整個(gè)畫面
03 : 增加層次感
此作品原本人物和圖片是緊貼在一起的設(shè)計(jì)師使用了線框的元素,巧妙的使得整個(gè)標(biāo)語(yǔ)和畫面變得具有層次感。
相同標(biāo)語(yǔ)唯一水平垂直居中位置使得畫面更加具有空間感。
這里設(shè)計(jì)師也是使用相同的處理方式,注意在使用線條的時(shí)候 一定要讓線條穿插不一樣的平面,才能給用戶傳達(dá)出前后層次的關(guān)系。
二:Slogan/三角形
其實(shí)和方形一樣三角給用戶的感受更加凌厲,主要運(yùn)用在運(yùn)動(dòng)或者器械類行業(yè)偏多,主要給用戶的目的也是起到突出吸引區(qū)分平衡畫面等作用。
01:運(yùn)動(dòng)類行業(yè)增加速度感/豐富畫面。
設(shè)計(jì)師使用了三角形的元素在畫面中,與文字結(jié)合起來(lái)。給用戶傳達(dá)出運(yùn)用的極速/凌厲的感覺。
下面作品的表現(xiàn)方式也是采用相同的設(shè)計(jì)方式。
三 :Slogan/圓形
同理圓形也是一樣起到的作用 具有突出,分隔 ,等作用,主要給用戶傳達(dá)出平滑柔性的感受,圓形主要分為圓橢圓等常用于化妝品,偏向女性化小孩等用戶群體居多。
01 : 突出分隔作用
利用圓形讓中間的標(biāo)語(yǔ)在畫面中突出出來(lái),起到吸引用戶的視覺,還能通過(guò)圓點(diǎn)讓標(biāo)語(yǔ)和背景和之間具有一定交互效果。
02:增加層次感/豐富畫面
這是一款適用于家庭行業(yè)的產(chǎn)品,設(shè)計(jì)師一樣采用啦柔性的元素橢圓形和文字搭配讓標(biāo)語(yǔ)變得具有前中后層次感,而元素上的色彩也豐富了畫面。
四:Slogan/不規(guī)則幾何圖形
不規(guī)則圖形也是一樣用具有突出,分隔 ,等作用, 常于運(yùn)用在個(gè)性化行業(yè)中,比如潮牌,個(gè)人設(shè)計(jì)師網(wǎng)站等。
01:突出分隔作用
準(zhǔn)確的說(shuō)右邊圖形兩個(gè)多邊形組成的,恰好從畫面中起到了突出作用。
02: 當(dāng)作標(biāo)簽使用
整個(gè)標(biāo)語(yǔ)排版比較活躍,設(shè)計(jì)師巧妙的將圖形運(yùn)用在標(biāo)簽上面,使得整個(gè)標(biāo)語(yǔ)變得更有設(shè)計(jì)感。
五 :不規(guī)則幾何圖形
slogan中往往提取一部分來(lái)自vi標(biāo)志中的圖形元素,會(huì)讓整個(gè)設(shè)計(jì)起到畫龍點(diǎn)睛的作用,這類設(shè)計(jì)常用在品牌網(wǎng)站中,用于傳達(dá)企業(yè)的品牌知名度。
01:直接運(yùn)用全部品牌圖形
右邊設(shè)計(jì)作品中設(shè)計(jì)師直接將品牌vi圖形元素運(yùn)用在slogan中,向用戶傳達(dá)品牌知名度。這類運(yùn)用建議挑選比較具有設(shè)計(jì)感的圖形運(yùn)用,或者具體vi的距離稍微遠(yuǎn)一些,這樣避免畫面元素重復(fù)。
下面作品也是采用了相同的設(shè)計(jì)方式
02 : 運(yùn)用品牌輪廓比例
Slogan中的圖形化形狀來(lái)源于品牌vi的外形讓畫面變得具有透氣感,同時(shí)也傳達(dá)出來(lái)了品牌感。注意盡量挑選vi 輪廓有規(guī)律的圖形來(lái)嘗試。太復(fù)雜的話會(huì)讓用戶不太理解,以及畫面的不美觀。
03 : 運(yùn)用品牌中間的色彩形狀
這里方法使用的比較多,也是比較容易的方式,右邊設(shè)計(jì)作品Sloagn設(shè)計(jì)師就采用了品牌中的幾何圖和文字進(jìn)行組合,有效的傳達(dá)出了品牌概念。注意在選取元素的時(shí)候一定要選取突出的元素進(jìn)行運(yùn)用便于用戶識(shí)別。
04 : 運(yùn)用品牌中間的圖形元素
也是一樣直接使用了品牌中的元素運(yùn)用在slogan中。做到了傳達(dá)和美感的兩不缺。
六 :Slogan/繪畫元素
使用繪畫的方式會(huì)讓整個(gè)slogan在風(fēng)格和材質(zhì)統(tǒng)一性更強(qiáng)/更有趣味性。多數(shù)適合于各種行業(yè)
01:制造環(huán)境
設(shè)計(jì)師將slogan制作成繪畫模式的,然后添加一些各種生活中的小元素進(jìn)行結(jié)合讓他們成為一體。給人趣味的感覺,注意一般做此類設(shè)計(jì)的適合切勿你添加的元素不要搶過(guò)了你的主體。
下列設(shè)計(jì)也是運(yùn)用相同的設(shè)計(jì)方法。
02:制造特殊圖形
設(shè)計(jì)師使用骷髏圖形來(lái)表達(dá)自己想要的概念,配合slogan還是比較超前的,需要注意的是 切勿讓插畫元素和slogan之間的對(duì)比不大,比如顏色空間大小等。
03:增加立體感。
這是一個(gè)設(shè)計(jì)師個(gè)人網(wǎng)站的主頁(yè),設(shè)計(jì)師設(shè)計(jì)了場(chǎng)景式的插畫和slogan結(jié)合使空間感增強(qiáng)。
注意如何作出空間感的設(shè)計(jì),確保材質(zhì)不要變得一樣。以及前后的大小的對(duì)比調(diào)整。
03 :通過(guò)結(jié)合圖片素來(lái)上slogan變得具有設(shè)計(jì)感
注意 在使用的時(shí)候需要注意品牌的定位,運(yùn)用環(huán)境,以及在畫面中的比列位置等,盡量不要影響畫面構(gòu)圖。
常見的一些設(shè)計(jì)方式分為
一 slogan/品牌圖片
相對(duì)于圖形化,圖片的結(jié)合更加具有感染力。更塊把帶你帶入情境中,主要作用還是宣傳品牌為主。多數(shù)會(huì)從品牌宣傳的元素中提取元素進(jìn)行結(jié)合,比如代言人產(chǎn)品 視頻 插畫等。
01 : 使用模特特質(zhì)作為修飾
下面設(shè)計(jì)一看模特就知道是做他是什么行業(yè)的,同時(shí)圖片在和slogan結(jié)合使用使得畫面更加具有青和力,注意選擇模特的時(shí)候一定要選擇主體明確,具有品牌特色的模特還有很多就不多舉例子了。
二 :slogan/產(chǎn)品圖片
在產(chǎn)品上增加文字能巧妙的向用戶傳達(dá)出產(chǎn)品的信息,同時(shí)拉開了節(jié)省了大量信息展示空間,又能在視覺上增加層次感主要運(yùn)用于產(chǎn)品類網(wǎng)站。
01:展示產(chǎn)品型號(hào)為主
設(shè)計(jì)師在產(chǎn)品后面增加簡(jiǎn)單而大大羅馬數(shù)字2,使得用戶清晰的理解這是第二代產(chǎn)品,同時(shí)拉開了鞋子的層次感。
同理下面作品設(shè)計(jì)師也是采用同樣的方式。使用slogan和產(chǎn)品圖結(jié)合 一樣達(dá)到了預(yù)期的效果。值得注意的是我們?cè)谠O(shè)計(jì)類似效果一定要保證用戶能看的明白字的含義,字?jǐn)?shù)不能太多,字體根據(jù)品牌或產(chǎn)品的形狀選擇。
三 :slogan/場(chǎng)景圖片或視頻
場(chǎng)景顧名思義使用和品牌相關(guān)的圖片和文字之間進(jìn)行組合起來(lái),讓字體不再單調(diào)。這里多數(shù)情況以h5方式來(lái)展示。
01 : 使用文字遮罩的效果
設(shè)計(jì)師巧妙的用文字遮罩的效果和圖片進(jìn)行結(jié)合起來(lái),避免來(lái)畫面的壓抑,又能讓用戶了解它是什么。
02 : 結(jié)合動(dòng)效更有趣
這里也是采用來(lái)相同的方法,雖然沒有展示圖片的主體部位,但是采用了動(dòng)效的方式播放,一樣可以達(dá)到預(yù)期的效果哦,注意你的文字周圍的元素一定不要強(qiáng)掉文字主體哦,一定是輔助而不是主體
03 : 模擬真實(shí)場(chǎng)景的使用
設(shè)計(jì)師為了讓文字和場(chǎng)景完美的結(jié)合,讓文字和紙張完美的結(jié)合,利用紙張和文字字母大小的前后關(guān)系打造出具有空間感的畫面。其實(shí)這里利用舉一反三的思路,可以產(chǎn)出很多設(shè)計(jì),比如書桌,書本,黑板等等...
四:slogan/圖形圖片
圖形和圖案之間結(jié)合起來(lái)會(huì)擦出怎樣的火花?會(huì)讓你的標(biāo)注變得更有art的感覺。
01 : 虛實(shí)結(jié)合,傳達(dá)出不一樣的感受
本來(lái)實(shí)物的花朵設(shè)計(jì)師使用了虛擬的手法讓花變得具有層次感,最后畫龍點(diǎn)睛將文字放在圖的后面,讓畫面空間感十足。同樣可以舉一反三,比如你想表達(dá)汽車的車燈,網(wǎng)球的球拍等都可以運(yùn)用相同的手法。
總結(jié)
無(wú)論是用圖形或者圖片和slogan結(jié)合使用,都要和行業(yè)相呼應(yīng)。
比如三角,方形,多邊形等非圓形更多運(yùn)用在運(yùn)動(dòng),機(jī)械,電器,男性化等行業(yè),傳達(dá)出 速度感,凌厲的調(diào)性。
而橢圓,圓形等曲線類形狀,更多運(yùn)用在品牌定位為女性,小孩群體的用戶比如化妝品,護(hù)膚類,幼兒園。 這類讓用戶更容易接近接受。
而照片類的使用側(cè)更容易感染用戶,更多給用戶傳達(dá)出真實(shí)感。多數(shù)使用在畫面背景干凈上面,加強(qiáng)對(duì)比度,就能展示出照片的紋理,和真實(shí)感。
04 :通過(guò)變化slogan整體的形狀讓他們變得具有設(shè)計(jì)感。
常見設(shè)計(jì)方式為
一:slogan/ 多邊形
整個(gè)slogan等外形在排版的時(shí)候往往很死板,不透氣。如果我們使用多邊形的方式,
會(huì)讓slogan具有設(shè)計(jì)感。
01 : 三角形
常見標(biāo)語(yǔ)架構(gòu)偏向有正三角,倒三角,右邊三角形這幾種形態(tài)。這里就介紹長(zhǎng)見到的正三角形的設(shè)計(jì)形態(tài)。
02 : 方形
常見表現(xiàn)方式 長(zhǎng)方形 正方形 這兩種形態(tài),主要作用使得標(biāo)語(yǔ)排版具有嚴(yán)謹(jǐn)?shù)母杏X。
03 : 圓形
常見方式有橢圓 圓形 這兩種形態(tài)這樣的排版方式,下面設(shè)計(jì)作品就是使用了圓框的元素和slogan結(jié)合使用,
注意此類設(shè)計(jì)方式的時(shí)候,得注意文字的數(shù)量,因?yàn)榧兩虡I(yè)的比較少,畢竟比較難保證它的可讀性。
04 : 六邊形
五邊形六邊形比較多運(yùn)用在于字體排版往往會(huì)使slogan變得具有層次感。設(shè)計(jì)的時(shí)候切勿不能亂用哦,一定要符合設(shè)計(jì)的本質(zhì)才能使用。
二:slogan/ 傾斜
使用傾斜的設(shè)計(jì)方式(弧形,左右傾斜,等等改變slogan整體形狀的角度)告別死板的slogan設(shè)計(jì)方式。
01 : 上弧形
球形等運(yùn)用會(huì)使得slogan外形框架更具有空間感。這里主要通過(guò)變形工具使得整個(gè)slogan形狀變得曲面化。下面的設(shè)計(jì)測(cè)采用了圓形偏上的設(shè)計(jì)手法。
02 : 上下弧形
下面作品設(shè)計(jì)也是采用上下弧度的設(shè)計(jì)方式讓slogan變得更具有空間感。
03 : 左右傾斜/旋轉(zhuǎn)
下面作品讓slogan右傾斜很有效的解決了slogan呆板性。右傾使得畫面更有緯度。
這里slogan也是采用了相似設(shè)計(jì)手法 不過(guò)是左傾斜
二 :slogan/ 豎列
slogan使用豎列的排版也能讓主視覺更加具有別具一格的感受。
此類設(shè)計(jì)更多運(yùn)用在偏向情懷文化類的產(chǎn)業(yè)中運(yùn)用。
01 :豎列
下面slogan設(shè)計(jì)使用了豎列排版的設(shè)計(jì)方式使得整個(gè)畫面具有設(shè)計(jì)感。 注意往往豎列排版給用戶的閱讀性不是很高,所以我們需要多控制文字多數(shù)量。以及主次關(guān)系。
下面也是采用了相同的設(shè)計(jì)方式。文字?jǐn)?shù)量上控制的不多。
三 :slogan/橫豎結(jié)合
橫豎排版常見于運(yùn)用在中國(guó)風(fēng)或單獨(dú)的設(shè)計(jì)中。豐富標(biāo)語(yǔ)層次感。下面slogan設(shè)計(jì)使用了橫豎結(jié)合的設(shè)計(jì)方式。設(shè)計(jì)的時(shí)候需要注意:前后關(guān)系層次,主次關(guān)系等比例。
四:slogan/字母
左邊測(cè)試z形狀布局,注意不同類型字母的比例架構(gòu)位于畫面的位置也會(huì)相對(duì)的改變。比如LE更多偏向左邊或者右邊,Z字形多數(shù)運(yùn)用在中間等。
05 :通過(guò)變化slogan中間文字的字體樣式能夠產(chǎn)生強(qiáng)烈的對(duì)比增強(qiáng)設(shè)計(jì)感。
常見設(shè)計(jì)方式為
一:slogan/豐富層次
通過(guò)改變slogan中間的部分文字的大小或者形狀,以及位置關(guān)系。能增加整體的層次感。
01 : 單獨(dú)字體尺寸
通過(guò)改變slogan字體的大小來(lái)制造出標(biāo)語(yǔ)中段落的空間感。右邊設(shè)計(jì)中就是放大數(shù)字01 讓它和其他的文字產(chǎn)生對(duì)比。
02 : 豐富背景。
下面的設(shè)計(jì)也是一樣,將slogan中的文案單獨(dú)突出出來(lái),作為背景使用。
他這邊更多表現(xiàn)的是一種修飾為主,但是同樣也讓文案保持來(lái)一定的對(duì)比。
03 : 通過(guò)改變特殊樣式
下面設(shè)計(jì)設(shè)計(jì)師通過(guò)改變slogan中的標(biāo)題的材質(zhì)使得標(biāo)題和副標(biāo)題產(chǎn)生對(duì)比制造出來(lái)空間感。
04 : 通過(guò)改變色彩/位置
右邊設(shè)計(jì)師通過(guò)改變slogan中字體的色彩和在畫面中的排版位置,有效拉出來(lái)層次感。
二 :slogan/改變字體
很多時(shí)候在slogan中給重要的文案通過(guò)字體的選擇或者變化,也可以使得slogan變得具有設(shè)計(jì)感。
01 : 給標(biāo)題選擇不一樣的字體
下面設(shè)計(jì)設(shè)計(jì)師將slogan中的主標(biāo)題采用特殊的毛筆字字體。讓標(biāo)題和段落文字產(chǎn)生了對(duì)比,使整個(gè)slogan變得具有層次感。注意這里我們選擇一個(gè)毛筆字體然后下載一些筆刷拼接。即可產(chǎn)生設(shè)計(jì)效果。
當(dāng)我們碰到畫面slogan文字信息少的時(shí)候我同樣可以采取一些特殊的字體搭配,比如毛筆字體等。注意,設(shè)計(jì)師適當(dāng)?shù)臅r(shí)候需要做一些變形等增強(qiáng)一些設(shè)計(jì)感。
02 : 進(jìn)行字體改造
在slogan中單獨(dú)提出文字出來(lái)進(jìn)行字體改造也是一種辦法。注意設(shè)計(jì)師在這里可以多研究一些字體變形設(shè)計(jì)方法。具體可以關(guān)注站酷上字體設(shè)計(jì)師的教程。
三 :slogan/其他
其他的一些方式就是利用點(diǎn)線面輔助元素和標(biāo)語(yǔ)結(jié)合,增加文字層次感,以及突出文字。
01 : 使用線條強(qiáng)調(diào)
下面設(shè)計(jì)作品slogan設(shè)計(jì)師就增加來(lái)粗線條來(lái)突出和強(qiáng)調(diào)信息。
下面的設(shè)計(jì)作品也采用了相同的設(shè)計(jì)方法。
下列設(shè)計(jì)作品加了面的元素結(jié)合到slogan中進(jìn)行輔助作用。豐富了slogan的設(shè)計(jì)感。
下面slogan結(jié)合了點(diǎn)的元素,同樣豐富了slogan的設(shè)計(jì)。
總結(jié)
在使用標(biāo)語(yǔ)進(jìn)行變形的時(shí)候,總結(jié)出來(lái)了多邊形,圓方 三角 橫豎 排列 傾斜等 或者 字體變形 增加對(duì)比作用出了我們介紹的方法不能死用。要根據(jù)品牌調(diào)性以及畫面中的比例去用。
本文地址:http://m.likemindfilms.com/tutorial/di3548.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏