Banner圖設計之商品圖該怎麼玩?(上集)

2021-02-19 做設計的麵條

寫在前面;

為了更好的閱讀體驗,我將這篇文章分為上下集以圖文的形式重新發布一遍,沒看過的可以繼續往下看,看過的麵粉可以選擇再複習回顧一遍或者直接無視哈~,接下來進入正題:

一、拿到一個banner設計需求後,我們該怎麼做

接到一個banner圖的設計需求,第一件事情應該是去了解以下幾個方面點:

 

1、banner圖是針對什麼活動、什麼目的而設計的

我們需要知道做這個的原因,為誰而做,比如是為了某個節日專題活動還是針對某一個單品的預售,是走高端大氣上檔次路線,還是走促銷親民熱鬧路線等等,因為這些關係到banner圖設計風格的選擇(不妨問一下需求人看他有什麼參考圖可以提供給你,不要害羞~)

 

2、主副標題、利益點等文案信息的確認

一般來說我們可以從文案中尋找靈感確定設計方向,為了避免設計方向錯誤,所以需要確認好了才好動手,其次就算只是簡單的文字排版,萬一後續又有文案的改動或字數的增減,就麻煩了。

 

3、這個banner圖是放在哪個位置投放的

這個主要是考慮banner圖與周圍的關係,比如首頁banner圖背景色避免和左側導航背景同色,如果投放的位置周圍都是熱鬧的圖,那這個時候你可以試一下安靜的,大面積留白的,與周圍形成對比反差。

 

4、與需求人溝通聽下ta的看法或建議

我們作為設計師在視覺方面可能是要專業些,但是不防也聽取一下運營或需求方的看法或經驗,因為點擊數據掌握在他們那裡,他們可能比我們更了解用戶喜歡什麼,需要什麼,同時他們往往是拍板說ok的人啦,但不是說完全聽他們的,我們自己要有判斷能力,對於他們的意見或看法適當引導和取捨(這個過程可以展現設計師的專業素養,增加好感,從而比較容易過稿)。

 

5、什麼時候交稿

這個大家都知道,好的設計是需要時間的,假設有幾個設計方向可以選擇,如果時間充裕當然選擇那個最優方案,如果時間比較趕,那就選那個不出錯的、能快速實現的方案咯。

 

二、了解以上幾點信息之後,腦海中應該會出現一些風格定位關鍵詞:

促銷、熱鬧、大牌、簡約、可愛、穩重,時尚、文藝、一些特定元素(節日、季節),好嘛,其實這些關鍵詞往往是一個或多個同時出現在一個banner廣告裡的,下面我們看些案例:


關鍵詞:大牌、穩重

說到大牌,我們觀察感受一下,就是:

(1)、背景大量留白。

(2)、色彩單一,常見黑、白、灰作為主色(因為這些是無彩色,它的存在只是為了凸顯主體而已)。

(3)、商品或模特一定要夠大(不是指字體或logo哦),截取部分細節展示(因為就是這麼自信)。

(4)、不需要太多文案描述,有時只需一個logo擺在那就好了(仿佛在說:你愛買不買咯)。

(5)、需要說明的是,這種高冷的比較適用於數碼電子產品,奢侈品牌等,彰顯bigger。

 

關鍵詞:時尚、品質感、促銷(時尚感大於促銷感)

平時是不是經常遇到別人給你說既要大牌又要促銷的無理要求?下次糾正一下吧,是既時尚又促銷,不是既大牌又促銷,就像你說一個人他穿的好時尚啊,因為時尚不一定非要花大價錢才可以達到,而大牌是真的需要很多錢才可以達到的,而促銷代表打折,低價,熱鬧,這與大牌是相違背的。

 

這種分析一下會發現有以下幾點:

(1)、注重排版,文字規整排版,比如左對齊右對齊,居中對齊,不會去做一些怪異的字體變形,而是有一個著重突出的文字信息放大形成 一個面,壓住全局,適當留白。

 

(2)、色彩不會太多,3種至多(如果商品本身就是五顏六色的就另當別論了),配色參照商品本身或鄰近色來提取,只有某一個需要突出的文字信息才會用對比反差比較大的顏色,比如折扣信息或重要的功能信息。

 

(3)、商品角度要好看,品質要高(常見商品角度:45°角,俯拾,平視,可別整出個仰視了。。。)

 

(4)、一般都會有主標題、副標題、利益點這幾個文案信息,利益點要大大大。

 

(5)、這種一般比較適用於與時尚相關的美妝護膚、男女鞋箱包、配飾,食品、母嬰也會有。

 


關鍵詞:可愛、熱鬧、親合力

這種比較適合食品、可愛服飾,母嬰品類,因為這些屬性跟這些品類的特點是相符的,要給人可愛、可口、甜美、親和力的感覺。

 

這種分析一下會發現有以下幾點:

(1)、商品很多,畫面會比較滿,會有很多小色塊,手繪圖形什麼的點綴。

(2)、色彩豐富,配色柔和,偏暖,給人熱情的感覺

(3)、會有某一個特別突出的信息,但是整體畫面又注重比例的和諧(後面我會具體講到這塊)

總之,整體畫面感覺是不會有攻擊性的,是友好熱情的

 


關鍵詞:素雅、安靜、大面積留白、文藝,簡約

這種比較適合家居、茶藝、布藝、棉麻森女系、文藝、日系服飾鞋包(在這個浮躁的社會就是需要有人去做那個安靜的美女子,來保證社會的和諧和多樣性,你說是不是呀)

 

這種分析一下會發現有以下幾點:

(1)、超級大面積留白,東西都小小的(這一點跟前面講的大牌是截然相反地,雖然都是大面積留白)

(2)、色彩單一,以淺灰、淡藍白、米白、棕色,飽和度和純度低的綠色等色彩居多

(3)、文案要麼很少,要麼很多,但都是打動人小情緒的一些文字,並且小小的放置在畫面裡

 

總之,如果你們身邊有這樣的女子,你觀察一下她你就知道了,就是這樣子的安靜素雅,不愛說話,淡淡的猶如一陣清風吹過)

 


關鍵詞:促銷,形式感佳(促銷甩貨目的更大)

這種比較適合尾貨大清倉、綜合賣場促銷活動,適合任何品類(那種常見的路邊攤設計我就不舉例了,大家有興趣可以自己去找,一大堆哦)

 

這種分析一下會發現有以下幾點:

(1)、要麼文案超級多,要麼商品種類超級多,要麼文案和品類都超級多

(2)、色彩多樣、留白較少,注重排版,選品需要注意顏色和形狀的選擇(這個我稍後會提到)

(3)、醒目大大的sale 或價格信息,就是要告訴全天下人我現在很便宜啊快來買我啊(就是這麼熱情咧~)

 

總之,它就像一個熱情的促銷員,同時打扮的很nice,拿著喇叭喊:全場清倉大甩賣啦,快來看快來瞧啊,你買了不吃虧,你買了不上當啊--)

 

關鍵詞:促銷(比較diao的促銷)

這種比較適合商家店鋪banner圖或者實體店促銷招牌,因為banner圖上沒有任何商品,要不是因為你本身就處在這個店鋪裡面,鬼才曉得你要賣什麼咯。

 

這種分析一下會發現有以下幾點:

(1)、形式感,大大的sale和大紅背景告訴你,恩,人家是來促銷的~

(2)、哼~就不告訴你我要促銷什麼,你來猜啊,你來點我點我啊我才告訴答案哦(傲嬌吧~~)

總之,這種要麼是為了吸引有點好奇心的消費者,要麼是吸引已經是老顧客的消費者,運用在實體店比較常見。

(更多SALE排版的玩法可以看這篇文章【Banner設計排版】SALE招牌設計可以怎麼玩?~)

 

寫到這裡就算是把「Banner圖設計之商品圖該怎麼玩」(上集)講完了,由於內容比較多,剩下的內容我放到下集再講,所以,我們下次再見咯。

----這裡是麵條分割線---

本文為TTTing原創,轉載須註明以下信息

公眾號:做設計的麵條 微信號:TTTink-D

我就想看看,

等我寫夠999篇的時候

會遇見什麼。

相關焦點

  • 手繪在banner圖設計中怎麼應用?
    關鍵字:電商設計 banner導語:過去幾年,電商頁面設計都是相對較傳統的表現形式,風格也比較單一。很多專業學習了手繪的設計師們,他們把手繪元素帶入了電商頁面設計上面,這些手繪元素令電商設計行業變得更加豐富多彩。
  • 網站首頁Banner圖設計應該注意這幾點
    首頁的Banner圖設計構思可以說是我們平時工作中最重要的一塊工作,首頁的banner圖不比大型項目,從設計方案成本費用上來說不太可能給過多的時間給產品設計師,所以這也引發了我們應該對怎樣更高效率地完成1個banner圖的思考。
  • 網站廣告banner圖如何設計?
    我們通常打開網站會看到很多長方形形狀的廣告圖片,稱之為網站banner,網站的Banner可以放在網站不同的位置,在訪客瀏覽網站的時候,吸引訪客的關注,從而獲得宣傳和銷售的效果,我們常常看到的網站百葉窗也是網站banner的一種。
  • 【乾貨】Banner設計排版參考大賞
    但是呢很多初級設計師在遇到banner設計的時頭大無從下手,不知道banner該如何去設計排版;馬上金九銀十了,為找工作高峰期,設計師找工作上機操縱是常見的事情,做banner更是最頻繁的測試題了,所以今天整理一些常見的banner版式供大家參考借鑑使用!中軸型排版
  • 網頁banner設計基礎篇
    網頁設計設計過程中,banner圖是整個網頁中,圖片面積最大,位置最顯眼的區域,甚至一個好看的網站就取決於banner的設計。banner的設計和海報設計其實可以統稱成一樣,設計的原理還是相同的,只是banner要考慮整體網站的結構,是否協調,設計上相對平面設計要簡單很多。
  • 從人性的角度,揭露電商Banner設計背後的14個秘密
    作為協助完成線上交易的其中一個環節,電商設計要做的是準確地把信息傳達給用戶,直白一點講就是通過對文字圖形的處理去傳遞某種情緒給到消費者,讓消費者產生點擊購買的欲望,banner圖的受歡迎程度直接關係到圖片的點擊率和轉化率,所以當我們在做banner圖的時候我們在做什麼呢?我們其實是在揣摩人性,我們做的banner歸根結底就是對人性的把握和理解。人性的惡而人性包括什麼呢?
  • Banner設計技巧:6招搞定點綴元素的運用
    「油鹽醬醋茶」以及「綠葉」都是可以的,主要看你的banner設計是什麼樣一個定位方向。四、點綴元素的排版形式那麼看到這裡,道理大家應該差不多都懂了吧,那麼大家最頭疼的問題來了,點綴元素該以怎麼樣一種姿態出現,又該怎麼排版呢?別急,我下面給大家總結出了一些方向,大家可以參考下:
  • 網站banner設計的技巧!
    網站設計有美麗的banner,你的網頁能吸引很多遊客的注意力。網站banner在網頁上的重量比較大,品質和美觀的banner會大幅提高你網站的品質。速推SEM網站banner的設計只是網站的設計要素之一,在整體網站的設計中,設計師沒有多少時間進行設計,所以積累了設計師平時設計網站banner的經驗有些設計師的網站banner既沒有靈感也沒有經驗,也沒有良好的品質。在多年的網站設計經驗中,總結了網站banner的製作。如果你做不出好的banner的話,按照我們說的那樣,可以感受到耳目一新。
  • 如何做好 Banner設計?我總結了這4類基礎知識
    前段時間一直在做運營類設計,banner 在其中佔了較大比重,為此就想寫一篇階段性總結。其中部分觀點參考了相關視頻教程和文章,設計新手一枚,如有不足還請大家海涵。banner 由以下五部分組成:版式,字體,顏色,背景,點綴。我就針對這幾點做些具體分析。
  • banner圖居中的兩種方法
    我們在切頁面時,遇到大的banner圖,常用的處理方法就是將其居中。但當圖片超過屏幕的最大尺寸,如寬度為1920px的大的banner圖不是定義個margin就會居中了的!下面喵喵就來個大家說說,大banner圖居中的兩種方法!
  • 平面設計——banner篇
    banner主要投放於網際網路,在網際網路廣告中發揮著重要的作用。今天要介紹的就是如何通過banner去做更好的宣傳和如何更好的提升設計水平。首先什麼是banner?翻譯成中文是「橫幅、廣告」的意思。最常用於網站的大標題,也就是網站的橫幅廣告了。在設計banner前需要先了解項目定位和需求,再確定設計風格。
  • 講解網站banner設計時有哪些要求和問題
    為了使banner合理的被客戶訪問,應該順應用戶這樣的瀏覽習慣,糟糕的設計會讓客戶無所適從,焦點隨處都是。banner圖的設計需要設計人員來操作,很多公司用戶企業裡沒有設計師,只能從外面找設計人員,通常要麼找之前做設計網站的,或設計人員來設計,要麼就會在平臺來找設計人員或者企業操作而這無一不是要勞動力費用的,都是要收費的。在網站配圖的設計中,使用倒三角已經成為一種相當常見的操作。
  • 網站設計時如何做好banner的設計?
    在網站設計的時候,關於網站banner設計,是非常考驗設計師的水平的,因為很多客戶既要求節約成本,又要效率高,短時間可以設計出出彩的作品,所以,下面給大家說下網站banner設計的幾大技巧和注意事項。3、按照客戶的閱讀習慣來設計一般人們的閱讀習慣都是從左到右、從上到下的,所以網站設計網站banner時候也要遵循這個規律,不要相反,會讓人很不舒服。4、產品展示要能激發客戶的欲望信息爆炸的時代,客戶瀏覽網頁的注意力是幾秒鐘,所以要第1時間進行產品的展示,命中主題。
  • 網站banner設計有什麼好的方法
    網站banner設計對整個網站起著非常重要的作用,以下介紹本人在目前工作中針對banner設計收集整理的一些方法。網站banner設計方法/步驟1、網頁設計設計主題要明確在banner設計之前,設計師必須與客戶溝通具體要表達的主題和要突出的重點,然後設計師根據客戶要求來設計製作banner,在與客戶溝通過程中一定要明確需求,如果客戶希望是醒目點的可以用紅色或者黃色來設計,如果客戶希望整潔舒服些的可以用白色或者淡綠色來做底色。
  • Banner設計五重奏~奏
    本期給大家banner的組成解析,也不絕對的。主要是日常中出現一些設計手法,以下講到的各個組成元素  不止是在banner中有所表現在其它方面的設計中也有,所以呢大家不要很絕對說什麼類別的設計裡面要出現什么元素。    今天我們來一起聊聊banner五重奏。os:名字起的不錯吧~~~案例來源於網絡 多有得罪請恕罪O(∩_∩)O哈!
  • 怎樣使用axure 7.0製作banner輪播圖
    那麼你知道怎麼使用Axure7.0軟體製作高大上的輪播圖效果嗎?小編來告訴你。首先,打開pc端的已經漢化完的Axure7.0版本軟體。其次,拖動左邊部件庫裡的圖片元件到右面的編輯區域。並調整好所有製作的banner圖片的大小,更改上方的長和寬數值。
  • 如何設計網頁小廣告(banner)
    【譯者的話】 網頁上的小廣告(banner)已經成為一種宣傳推廣的重要形式,但這些小廣告除了版面細小外,圖象的表現還受到象素較低等其它因素影響,給傳統的平面設計師帶來了新挑戰。如何讓你的小廣告在混亂無章的網頁中脫穎而出?
  • 從近期兩篇論文看大規模商品圖嵌入
    相比於傳統的只有一種邊或只有一種節點的圖,Attributed Multiplex Heterogeneous Network(AMHEN)中包含多種節點,多種邊,每種節點都有不同的屬性,各種類型的圖有代表性的嵌入方法如下表所示。每對節點之間可能有多種類型的邊,需要對每種關係都學習不同的表示。
  • 如何做出靠譜的Banner設計?這篇文章可以幫到你!~
    該用什麼效果、該採用哪種排版布局等;從運營的角度來說,比如什麼信息是該突出展現的,要不要放大、加粗或者用顏色等其他方式凸顯出來,而什麼信息是不那麼重要的,要不要縮小一點、顏色弱一點等等,是用小細節圖還是完整的產品圖可以更好的展示賣點等等;從色彩心理學的角度來說,比如我是用暗色調來渲染一種沉寂神秘的感覺呢?
  • 我整理了100張小破站的banner圖,快來開啟你的每日一P打卡吧!
    大家好,我是大文~歡迎來到大文PPT,這裡是一個可以讓你的PPT設計更高效的圈子 。今天為大家帶來的是設計靈感:100張B站banner圖片PPT靈感手冊。在之前的一期用PPT復刻banner的小視頻教程中,被B站的這位同學「點名」了,很感動。