Vrei sa faci un banner pentru magazinul tau online

Poate fi vorba de banner pentru prima pagina, pentru categorii, bannere principale sau secundare etc.

Sau vrei sa stii ce informatii sa ii dai designer-ului astfel incat sa reuseasca sa iti faca un banner bun?

Perfect.

Pentru ca astazi iti arat 15 elemente cheie si exemple de bannere, din care sa te inspiri pentru magazinul tau online. 

via GIPHY

Cuprins Cum faci un banner pentru site:

  1. Pentru ce faci un banner? Obiectiv.
  2. Dimensiuni
  3. Ierarhia informatiei
  4. Grafice si imagini
  5. Schema de culori
  6. Mesaj / USP
  7. Beneficii
  8. Call-to-action
  9. Link – catre ce duce banner-ul
  10. Directie
  11. Contrast
  12. Spatiu negativ
  13. Dimensiunea fisierului
  14. Carusel sau un singur banner?
  15. De ce sa NU pastrezi acelasi banner mereu

Sfaturi pentru banner in:

Bannere principale

Bannere secundare

Pagina de categorie

Adevarul e ca bannerele cu care intampini clientii vor seta dispozitia acestora si ii vor ghida direct catre locurile cu putere de vanzare din site-ul tau.

Daca le faci corect. 

15 Elemente cheie de care tii cont atunci cand faci un banner

1. Pentru ce faci un banner? Obiectiv.

Inainte sa incepi efectiv lucrul la banner, intreaba-te… de ce il faci?

Scopul banner-ului si locul in care il plasezi dicteaza dimensiunea acestuia, modul in care vei alege sa transmiti informatia si celelalte elemente despre care urmeaza sa vorbesc.

Asadar, faci banner-ul pentru:

  • Caruselul de pe Homepage, pentru a transmite USP-ul firmei si a ghida clientii spre o pagina cu potential de vanzare?
  • Homepage, dar banner principal sau secundar prin care transmiti informatii importante?
  • Pagina de categorie, pentru a prezenta vizual tipurile de produse din categoria respectiva?
  • In pagina de cos, pentru a prezenta de exemplu un cod de reducere valabil intr-o anumita perioada?
  • Pagina de finalizare comanda, pentru a prezenta de exemplu un testimonial sau alta dovada de incredere care sa linisteasca clientul?
  • Pagina de multumire, dupa finalizarea comenzii, pentru a multumi clientului sau a-l invita sa faca o anumita actiune (sa te urmareasca pe Social Media, sa descarce un material suplimentar, sa isi completeze contul cu informatiile necesare etc.)?

Inainte de toate, stabileste care este obiectivul banner-ului. Asa iti va fi mai usor sa iti dai seama ce ai de facut in continuare.

2. Dimensiuni

Cand nu esti sigur de ceva, te ajuta platforma Gomag 🙂 .

Vezi tu, in functie de locul de plasare a banner-ului, trebuie sa respecti anumite dimensiuni astfel incat imaginea sa se afiseze corect si sa arate bine.

In caz contrar, imaginea ar putea fi prea intinsa, neclara, super pixelata sau afisata prost. Asa ca te rog sa folosesti dimensiunile propuse de noi.

In modulul Bannere din Continut, ai dimensiunile exacte pentru fiecare banner din site:

dimensiuni-bannere-magazin

  • 1920 px X 580 px – pentru banner-ul / bannerele din Homepage Carousel (pont: incearca sa folosesti o singura imagine aici, numarul de click-uri scade cu cat sunt mai multe slidere)
  • 410 px X 560 px – pentru bannerele principale din Homepage (cele care se afiseaza sub icon-urile de trust)
  • 410 px X 560 px – pentru bannerele secundare din Homepage (in cazul in care vrei sa transmiti informatii suplimentare, mai jos in pagina)
  • 1920 px X inaltime cat doresti tu – pentru bannerele afisate in cosul de cumparaturi
  • 600 px X  inaltime cat doresti tu – pentru bannerele afisate in pagina de finalizare comanda

Pont!

La bannerele pentru cos si checkout ai doar o dimensiune specificata, pentru latimea banner-ului. Inaltimea o stabilesti dupa cum doresti tu, in functie de cat spatiu ai nevoie pentru a transmite informatiile dorite.

  • 570 px X 370 px – pentru bannerul din comanda finalizata (pagina de multumire)
  • 1080 px X 300 px – pentru bannerele din paginile de categorie
  • 330 px X 420 px – daca vrei sa afisezi anumite informatii pentru vreo subcategorie din meniul principal
  • 40 px X 40 px – Icon-urile de trust – unde afisezi de exemplu, perioada de retur, daca ai transport gratuit, ce oferi in plus, costul fix de transport daca e cazul etc.

3. Ierarhia informatiei

Prin ierarhia informatiei in banner ma refer la doua aspecte, care trebuie sa se regaseasca in orice hero image:

  • Ideea principala (mesajul principal) – intotdeauna sa iasa in evidenta. Titlu si / sau subtitlu, scris la dimensiuni diferite.
  • Call to action – de obicei, sub forma unui buton

+ Grafice / imagini 

+ Spatii albe / negative

exemplu-banner-magazin

Citeste si: Ce au in comun prima pagina din magazinul tau Gomag, conversiile si palinca

4. Grafice si imagini

Pentru bannerele din magazin, vei folosi cel mai probabil imagini cu produsele tale.

Si cand spun asta, majoritatea se gandesc sa puna la propriu produsul (fara background) pe banner, fara sa ii ofere un context.

Dar iata ce te invit sa faci:

  • Mergi mai departe de primul sens – creeaza un context pentru prezentarea ta si a produselor / categoriilor tale.
  • Prezinta-ti produsele in timp ce sunt folosite – vinzi pantofi barbatesti? Foloseste imaginea unui barbat aratos, imbracat impecabil, incaltat cu pantofii tai, in timp ce este admirat de o femeie. Vinzi mobilier pentru living? Arata o familie fericita in living sau o persoana care se relaxeaza pe canapea. Imaginile chiar pot trezi o stare in clientii tai!
  • Nu ai timp sau bani de investit in poze profesionale? Ia-ti o licenta pentru poze stoc sau, mai bine, colaboreaza cu un designer care te poate ajuta sa creezi materiale de efect, originale.

imagini-bannere-magazin-online

Citeste si: Cum Sa Pregatesti Fotografiile De Produs Pentru Magazinul Tau Online

Pont: vezi aici o lista cu site-uri in care gasesti fotografii profesionale, gratuite:

Si un tool pentru eliminarea unui fundal din imagine: remove.bg. 

5. Schema de culori

Stii deja ca fiecare culoare este asociata, la modul general vorbind, cu anumite senzatii, mesaje sau stari. 

Evident, acest lucru depinde si de cultura catre care te adresezi asa ca daca, de exemplu, vinzi international, iti recomand sa studiezi semnificatia culorilor in tarile pe care le targetezi (sa nu faci vreo boacana 🙂 ).

In principiu, foloseste culorile de brand, dar nu iti fie teama sa variezi, folosind culori specifice anumitor sezoane, de exemplu.

Vezi si emotiile pe care le evoca de obicei, anumite culori:

  • Rosu – pasiune, viteza, dragoste, entuziasm, urgenta, violenta, agresiune, putere. Foloseste-o totusi cu moderatie.
  • Galben – optimism, energie, speranta, viata, buna dispozitie, fericire. Galbenul atrage atentia rapid.
  • Portocaliu – creativitate, prietenie, entuziasm, caldura, bucurie. Nu acapareaza omul la fel ca rosul, insa poate fi culoarea potrivita pentru un buton de call-to-action.
  • Violet – regalitate, lux, intelepciune, status, demnitate, mister. In general, are un efect linistitor asupra oamenilor.
  • Roz – feminitate, romantism, calm, grija. Este asociat in general cu produsele pentru femei sau pentru bebe, insa poate fi folosit intr-o multime de nise, in functie de intensitatea culorii.
  • Verde – crestere, renastere, natura, prosperitate, abundenta, sanatate. Nu “zgarie” retina.
  • Albastru – putere, liniste, incredere, responsabilitate, maturitate, masculinitate. 
  • Maro – natura, lemn, piele, relaxare, lux, seriozitate. Ofera echilibru cand e folosit in combinatie cu alte culori.
  • Alb – echilibru, puritate, inocenta, curat, simplitate, eficienta, minimalism. 
  • Negru – indrazneala, putere, incredere, rafinament, mister, lux. 
  • Gri – neutralitate. 

exemplu-banner-culoare

Sigur ca nu vei folosi doar o culoare in banner. Atentie insa la modul in care combini culorile, tinteste sa creezi o compozitie armonioasa.

Pont! Pentru background-ul unui banner aliniaza culoarea folosita cu o alta culoare din grafice sau imagini. 

Citeste si: Impactul Culorilor In Reclamele Din Facebook Ads

6. Mesaj / USP

Pentru bannerul din homepage in special, textul folosit poate face diferenta – daca omul intelege din prima secunda cine esti si ce ai de oferit, sau daca il adanceste si mai tare in confuzie.

  • Foloseste un text scurt. 
  • Foloseste un font citet, la o dimensiune usor de citit si de la 3 pasi de ecran (nu folosi fonturi cursive sau prea inguste)
  • Daca ai mai multe de transmis, poti sa spargi textul in titlu si subtitlu (font de dimensiuni diferite).
  • Nu folosi un slogan abstract, care are sens doar pentru tine.
  • Spune-i clar omului ce ii poti da tu – dupa ce banner-ul e gata, trimite-l unei cunostinte care nu se pricepe la ce faci tu si vezi daca intelege din prima ce vrei sa ii transmiti.
  • Spune-le din text oamenilor pentru cine sunt produsele tale.
  • Daca vrei sa indemni oamenii sa faca o actiune, foloseste diateza activa si verbe de actiune: descopera, ia, comanda, vezi etc.

mesaj-banner-exemplu

7. Beneficii

Bannerele sunt cel mai potrivit loc in care sa atragi atentia asupra beneficiilor principale ale afacerii / produselor tale. Uite cateva sfaturi:

  • Scoate beneficiile in evidenta: fie le notezi text, fie le reprezinti grafic incadrate diferit fata de celelalte elemente din banner.
  • Beneficiile pot fi generate de natura produselor (ex. ce fac ele pentru client) sau pot fi ceva extra, pe care il oferi tu ca afacere (ex. o reducere, un pachet, serviciu de impachetare, ambalare speciala, consultanta la alegerea produsului, demo etc.)
  • Creeaza bannere principale si / sau secundare pentru fiecare beneficiu in parte pe care il oferi.

beneficii-banner-exemple

8. Call-to-action

Ai aflat deja ca orice banner trebuie sa contina un buton de call-to-action, de obicei sub forma unui buton. Uneori, exceptie fac bannerele de categorie 🙂 .

Uite cateva exemple de texte CTA pe care le poti folosi in bannerele din magazinul tau:

  • Comanda acum
  • Vezi oferta
  • Descopera
  • Vezi toate
  • Adauga in cos (atunci cand e un singur produs)
  • Alege [produs specific]
  • Alege
  • Vezi mai multe
  • Vezi detalii
  • Vezi produsele

Testeaza sa vezi daca un CTA specific te ajuta mai mult decat unul general (gen vezi detalii). De obicei o face, insa cel mai ok e sa testezi.

  exemplu-banner-cta

9. Link – catre ce pagini duci oamenii cand faci un banner

Cea mai enervanta chestie e sa ai un link pe banner-ul din homepage care duce… tot spre homepage. 

Scoate maximum din bannerele tale si intotdeauna, dar intotdeauna, sa ai un URL catre care sa trimita oamenii. De exemplu:

  • banner-ul carusel poate duce spre un landing page cu oferta actuala a magazinului tau.
  • Bannerele principale pot duce spre anumite categorii, pe care vrei sa le scoti in evidenta.
  • Bannere-le secundare pot duce spre pagini de categorie, blog sau pagini de incredere.

banner-exemple-pagini

Ofera o finalitate, altfel imaginea respectiva iti va ocupa doar spatiu pe site, fara sa aiba un rol concret. 

10. Directie

Stiai ca poti folosi grafica din banner pentru a indrepta atentia catre butonul de call-to-action?

De exemplu, poti folosi:

  • O fata umana care se uita spre buton (sau spre text)
  • Un brat intins in directia respectiva

Compozitia poate crea senzatia de miscare (cu siguranta ai vazut si tu astfel de imagini) si va scoate in evidenta cel mai important lucru.

exemple-directie-bannere

11. Contrast

Oamenii trebuie sa poata citi textele si sa distinga locul in care ii inviti sa dea click.

De aceea ai nevoie de contrast.

  • Grija mare cum colorezi textul: in general mergi pe alb, negru sau culori inchise pe fundal deschis, culori deschise pe fundal inchis. Banner-ul nu e coala de desen unde te joci cu combinatii avangardiste (ex. scris portocaliu pe fundal magenta), ci trebuie sa vanda pentru tine.
  • Alege culoarea butonului CTA in contrast cu fundalul unde il vei plasa. Vezi daca poti folosi aceeasi culoare cu cea a butonului Adauga in cos din site.
  • Nu fa risipa de grafica – daca aglomerezi banner-ul, oamenii nu vor mai intelege nimic din el si cu siguranta nu vor stii care e ideea principala pe care tu vrei sa o transmiti.

bannere-exemplu-contrast

12. Spatiu negativ

Un banner in care ingramadesti o multime de elemente ti se pare atragator?

Cred ca nu. 

De aceea, cand faci un banner ai grija sa permiti fiecarui element sa poata fi vazut / retinut din primele secunde. 

Cum? Folosind spatiul alb sau negativ (zona libera in care nu se regaseste niciun element, in afara de fundal).

Spatiul grupeaza sau separa elementele, scotand in evidenta cel mai important lucru de retinut. 

banner-exemplu-spatiu-negativ

13. Dimensiunea fisierului

In Gomag nu poti incarca bannere mai mari de 1 MB. 

De ce?

Pentru ca dimensiunea fiecarui fisier pe care il adaugi in magazinul tau are impact asupra vitezei cu care se incarca acesta.

Imaginile prea mari, fie ele bannere sau imagini de produs cresc timpul de incarcare, ceea ce inseamna ca oamenii vor pleca din site-ul tau… indiferent cat de bune oferte ai si cat de bine arata. Nu au rabdare sa astepte.

Asa ca atunci cand faci un banner, ai grija intotdeauna sa redimensionezi fisierul pentru a nu depasi 1 MB.

14. Carusel sau un singur banner?

Bannerele din carusel sau slider pe homepage sunt un mare hit, de ceva vreme. Teoretic, poti transmite din prima mai multe mesaje, sa le arati oamenilor totul despre tine.

Ce e gresit cu ele?

Pai… cam tot. Pentru ca, dupa ultimele teste de optimizare a conversiei, caruselul in homepage iti ucide conversiile, pe masura ce ai mai multe bannere una dupa alta.

  • Iti afecteaza timpul de incarcare
  • Mai multe bannere distrag atentia clientului de la primul si cel mai important lucru despre tine: USP-ul sau oferta principala.
  • Oamenii nu au rabdare sa iti parcurga toate bannerele
  • Sau, daca stau sa le vada pe toate, practic ii intarzie din timpul pe care l-ar putea petrece navigand in site si alegand produse

Cele mai multe bannere pe care le-am vazut in aceasta zona contin informatii care ar trebui transmise mai degraba pe email sau reclame sau postari Social Media.

Gandeste-te ca, in general, cei care intra pe homepage sunt oameni aflat in primele stadii ale unui funnel – recunoastere, interes. 

Ei trebuie sa inteleaga mai intai cine esti si ce le oferi, abia dupa aceea le arati informatii specifice de care au nevoie inainte de a cumpara, propriu-zis.

Dar…

Dar daca totusi vrei neaparat carusel:

  • Nu folosi mai mult de 2-3 bannere – daca ai prea multe optiuni, oamenii nu vor mai alege niciuna. 
  • Permite-le vizitatorilor tai sa decida viteza cu care parcurg bannerele (sagetile, punctele sau thumbnail-urile de navigare)
  • Schimba continutul vizual, dar lasa acelasi CTA, catre acelasi landing page.

exemplu-banner-carusel

15. De ce sa NU pastrezi acelasi banner mereu

Pentru ca acesta nu va reusi sa converteasca la fel de bine precum, sa zicem, un banner in care arati campania de sezon.

Iti recomand sa schimbi – chiar lunar – cel putin bannerul din Homepage carousel cu:

  • Ultima campanie pe care o rulezi
  • Campanii de sezon, cu grafice specifice sezonului respectiv
  • Schimbi beneficiile prin rotatie
  • Informatii importante de transmis (un concurs, un joc in site, oferi un material gratuit, oferi un cod de reducere pe timp de weekend etc.) atunci cand e cazul

bannere-exemple-sezon

Citeste si: Plan de marketing 2020 – Calendar pentru magazinul tau online

Cate 2 sfaturi pentru banner in:

Bannere principale

  • Foloseste-le pentru a atrage atentia asupra celor mai importante pagini din site (anumite categorii sau tipuri de produse) sau pentru a transmite principalele oferte
  • Intotdeauna sa ai un link pe aceste bannere catre paginile despre care vorbesc!

banner-principal-exemplu

Bannere secundare

  • Foloseste-le pentru a trimite lumea pe pagini care castiga increderea – servicii extra, cum platesc, blog, programul de fidelitate etc.
  • Bannerele secundare sunt afisate mai jos in homepage asa ca iti recomand sa nu incarci pagina cu extrem de multe produse, mai degraba lasi bannerele sa lucreze la construirea increderii.

exemple-bannere-secundare

Pagina de categorie

  • Prezinta principalele beneficii ale categoriei sau cateva exemple de produse din categorie in context.
  • Poti adauga un link si CTA aici catre top cel mai vandut produs, sau produsul catre care vrei sa atragi atentia.

Citeste si: Cum Sa Optimizezi Paginile De Categorie In Magazinul Tau Online

Pfiuu, a iesit un material mai mare decat mi-am propus.

Insa acum ca ai acces la articol, cu siguranta bannerele tale vor arata mai bine, vor converti mai bine si isi vor indeplini scopul. 

Indiferent ca le creezi tu (cu Photoshop, Canva sau alte tool-uri), sau un designer specializat.

Acum e momentul sa treci la actiune.

Ia-ti bannerele la control si vezi cum poti sa le imbunatatesti. Evita greselile aplicand sfaturile din articol.

Iar daca ai dat de acest articol si nu esti inca unul dintre clientii nostri, iti recomand sa incerci chiar acum platforma Gomag. Ai 15 zile la dispozitie sa o testezi gratuit. 

Alege cel mai bun abonament pentru tine si hai sa te ajutam sa vinzi online!

Cosmin Daraban