Cum sa faci un banner – 15 Idei si Exemple bannere pentru Magazin Online

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. 
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:
 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
 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.

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:
 Pixabay
 Pexels
 Unsplash
 Graphic Burger
 Pikwizard
 PicJumbo
 Freerange
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. 
 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.


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.

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.
  

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.


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.
 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.

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. 
 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.


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

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!

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.

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.