Newsletteri

Dizajn newslettera: najbolje prakse za privlačne e-mail rasporede

Ovladaj dizajnom newslettera uz najbolje prakse rasporeda, savjete o tipografiji i vizualne strategije. Kreiraj e-mail newslettere koji izgledaju profesionalno i potiču angažman.

Set Noa
Set Noa
Ažurirano
0 posjeti · 7 d
newsletter design
Dizajn newslettera?

Dizajn newslettera trebao bi dati prednost čitljivosti, mobilnoj responzivnosti i vizualnoj dosljednosti. Ovaj vodič pokriva strategije rasporeda, tipografiju, korištenje boja, optimizaciju slika i alate za dizajn za stvaranje newslettera koje pretplatnici žele čitati.

Saznajte više

Dizajn newslettera je nevidljiva arhitektura koja određuje čitaju li pretplatnici tvoj sadržaj ili ga brišu. Dobro dizajnirani newsletter prirodno vodi pogled od naslova do sadržaja do akcije. Loše dizajnirani stvara vizualni kaos koji odbija čitatelje, bez obzira na to koliko je sadržaj vrijedan.

Dobra vijest: učinkovit dizajn newslettera ne zahtijeva profesionalnog dizajnera. Zahtijeva razumijevanje nekoliko ključnih principa i njihovu dosljedno primjenu. Ovaj vodič pokriva strategije rasporeda, pravila tipografije i vizualne tehnike koje čine newslettere privlačnima i čitljivima.

Četiri predloška u pogonu

Sve ispod ovog odjeljka tvrdnja je o rasporedu, a tvrdnje o rasporedu su jeftine. Zato evo četiri newslettera, u pogonu.

Svaki sjedi u okviru stvarne širine i pokazuje vlastiti HTML. Smanjite širinu na 375 px i pogledajte koji se stupci slažu, a koji to odbijaju. Ploče prate temu u kojoj čitate ovu stranicu: u tamnom načinu vidite pravi tamni blok svakog predloška, a ne njegovu približnu inačicu. Izvorni kod je ispod svake ploče.

Tajo predlošci

Četiri rasporeda u pogonu

Svaka ploča ispod pravi je HTML e-pošte predloška, u okviru stvarne širine. Smanjite širinu na 375 px i gledajte kako se stupci slažu jedan ispod drugoga.

Prati vašu temu — promijenite je u zaglavlju da vidite drugu.

Pročitaj HTML predloška The Letter 6 KB, bez izgradnje 
<!DOCTYPE html>
<html lang="hr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Citat koji čuvate u aplikaciji za bilješke radi više od vašeg kalendara sadržaja.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Zaglavlje Meridian Pressa: koncentrični plavi lukovi presječeni dijagonalnom trakom" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Broj 47</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">Arhiva je proizvod</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Prije tri tjedna tražio sam tekst koji sam napisao 2019. i nisam ga našao. Ni na stranici, ni u izvozu, ni u tražilici same platforme. Tisuću dvjesto brojeva, a jedino kazalo koje je radilo bilo je moje pamćenje.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">To je dio koji vam nitko ne kaže o šest godina newslettera. Slati je lako. Čuvati nije.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Sve što objavite je uplata. Isplatu gotovo nitko ne gradi.</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Zato sam ovaj tjedan stare brojeve pregradio u pravu arhivu, s oznakama, punim pretraživanjem teksta i trajnim adresama. Trebalo je devet dana. Broj pretplatnika se nije pomaknuo. Vrijeme na stranici se utrostručilo.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Sve je ispod, uključujući dijelove koji nisu uspjeli.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Pročitaj cijeli broj &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Pisano rukom svakog četvrtka. Odgovorite i pročitat ću.</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Odjava</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Prikaži u pregledniku</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Ovi su predlošci naši. Osmislili smo ih za ovaj članak, zajedno s grafikom koju stvara deterministička geometrijska skripta koja živi u istom repozitoriju kao i ova stranica — bez fotografija iz baza i bez snimki tuđe galerije predložaka. Ta razlika teži više nego što zvuči: vodič za dizajn e-pošte koji se ilustrira tuđim porukama traži da mu vjerujete na riječ.

Četiri predloška nisu četiri stila. To su četiri odgovora na četiri različita zadatka:

  • The Letter je za pisca kojemu je sva vrijednost tekst. Jedna slika, margine od 88 px, tekstna poveznica umjesto gumba. Gumb u osobnom pismu čita se kao oglas.
  • The Digest je za pregled koji se prelijeće. Numerirani retci, vrijeme čitanja prije svakog naslova i jedan poziv na akciju na dnu umjesto šest.
  • The Storefront je za izlazak kolekcije. To je jedini raspored u kojem je početi slikom ispravno, a ipak je izgrađen tako da slika smije zakazati.
  • The Brief je za brojke. Tri pokazatelja iznad svega ostalog i stupčasti grafikon od ćelija tablice umjesto od PNG-a.

Zajednički im je onaj dio koji vrijedi prepisati. Jedan stupac od 600 px. Tekst najmanje 16 px. Jedna naglasna boja i tinta za sve ostalo. Svaka slika nosi alternativni tekst, a svaki raspored ima smisla i s blokiranim slikama. Deklarirana shema boja i izričit tamni blok, jer je zadano ponašanje u tamnom klijentu da vašu poruku obrne algoritam koji nikad nije vidio vaš brend.

Jedan od njih prvi smo put napravili krivo i baš njega vrijedi imenovati. The Digest je isprva slagao retke s tekstovima na mobitelu — točno onako kako savjetuje svaki vodič za responzivnu e-poštu. Slaganje je tri sličice od 112 px pretvorilo u tri ukrasne slike preko cijele širine visoke 335 px, a pregled od šest tema postao je listanje. Taj je redak sada jedini dvostupčani raspored u skupu koji se ne slaže. Pravila o slaganju govore o stupcima sadržaja. Sličica nije stupac sadržaja.

Kako jedan od njih izgraditi u Brevu

Nijedan od četiri predloška iznad ne treba razvojnog inženjera za sastavljanje. Svaki zaslon ispod isti je predložak na Brevovom platnu za povlačenje i ispuštanje, s jednim odabranim blokom.

Počnimo od glavnog gumba jer je to blok s najviše postavki:

Brevo

The Storefront na platnu

Brevov uređivač e-pošte s povlačenjem i ispuštanjem: predložak The Storefront na platnu, odabran glavni gumb i njegove postavke oznake, poveznice, boje, zaobljenja i razmaka u desnoj ploči
Lijevi stupac: blokovi koje povlačite. Desni stupac: sve o odabranom bloku. Na platnu je poruka široka 600 px unutar klijenta širokog 680 px — zato se mobilni raspored ne pojavljuje: pri točno 600 px pokrenula bi se vlastita prijelomna točka predloška i uređivali biste telefonsku inačicu dok preklopnik kaže Računalo.

Svaki blok u lijevom stupcu odgovara nečemu u predlošcima iznad. Tekst, Slika, Gumb, Razdjelnik i Razmak za strukturu. Proizvod za redak trgovine. HTML za sve što uređivač ne modelira — i upravo je tako izgrađen grafikon u The Brief:

Brevo

Grafikon u kojem nema nijedne slike

Brevov uređivač e-pošte s predloškom The Brief na platnu, odabranim stupčastim grafikonom i desnom pločom koja pokazuje da je izgrađen od ćelija tablice bez slike
Grafikon izvezen kao PNG gubi svoje brojke zbog blokiranja slika, obrtanja u tamnom načinu i svakog čitača zaslona. Četiri retka tablice s obojenom ćelijom i tekstnom oznakom ne gube nijednu i ne teže ništa.

Tipografija radi jednako. Odaberite tekstni blok i ploča vam daje pismo, veličinu, prored i razmake — što je cijeli alat koji The Letter treba:

Brevo

Citat je tekstni blok s crtom sa strane

Brevov uređivač e-pošte s predloškom The Letter na platnu i odabranim citatom: Georgia 19px na 30px, kurziv, s lijevom crtom od 3px
Nikakva posebna komponenta. Tekstni blok, lijeva crta od 3 px u naglasnoj boji i 20 px unutarnjeg razmaka. U dobrom newsletteru većina onoga što izgleda kao dizajn po mjeri standardni je blok s dva promijenjena svojstva.

I slike imaju vlastitu ploču, gdje alternativni tekst stoji na vrhu, a ne na dnu popisa postavki:

Brevo

Alternativni tekst je polje, a ne naknadna misao

Brevov uređivač e-pošte s predloškom The Digest na platnu i odabranom sličicom teksta, gdje se vide njezin alternativni tekst, veličina prikaza 112px, izvor 480px i težina 17 KB
Veličina prikaza 112 px, izvor 480 px — upravo taj omjer 2× drži sličicu oštrom na retina zaslonu. Alternativni tekst je prvi jer je to dio slike koji će većina pretplatnika stvarno dobiti.

Tvrtkama koje koriste Tajo iste se sekcije mogu puniti dinamički: preporuke proizvoda i personalizirani sadržaj vođen ponašanjem pretplatnika, iscrtani u blokove koje ste ovdje rasporedili umjesto ručnog biranja pri svakom slanju.

Osnove dizajna newslettera

Dizajn služi sadržaju

Najvažniji princip u dizajnu newslettera: dizajn treba olakšati konzumiranje sadržaja, nikada ga otežati. Svaka odluka o dizajnu trebala bi odgovoriti na pitanje: pomaže li ovo mom čitatelju pronaći i apsorbirati informacije koje je došao potražiti?

Znakovi dobrog dizajna newslettera:

  • Čitatelji mogu pregledati cijeli newsletter za 10-15 sekundi
  • Najvažniji sadržaj odmah je vidljiv
  • Svaka sekcija ima jasan početak i kraj
  • Poziv na akciju ističe se bez agresivnosti
  • Newsletter izgleda namjerno, ne slučajno

Znakovi lošeg dizajna newslettera:

  • Čitatelji ne mogu brzo pronaći glavni sadržaj
  • Višestruki stilovi dizajna natječu se za pažnju
  • Tekst je teško čitati na bilo kom uređaju
  • Raspored se lomi na mobilnim zaslonima
  • Gusti blokovi teksta bez vizualnih pauza

Princip vizualne hijerarhije

Vizualna hijerarhija kontrolira redoslijed kojim čitatelji obrađuju informacije. U newsletterima, uspostavi hijerarhiju kroz:

Razina hijerarhijeElementTretman dizajna
PrimarnoGlavni naslovNajveći font, podebljano, gornja pozicija
SekundarnoNaslovi sekcijaSrednji font, kontrastna boja
TercijarnoSadržaj tijelaStandardni font, čitljiva veličina
PratećegMetapodaci (datumi, autori)Manji font, svjetlija boja
AkcijskoCTA gumbi/linkoviKontrastna boja, stilizacija gumba

Strategije rasporeda

Raspored u jednom stupcu

Raspored u jednom stupcu je zlatni standard za newslettere i preporučeni pristup za većinu izdavača.

Prednosti:

  • Savršeno se prikazuje na svakom uređaju i veličini zaslona
  • Stvara prirodan tijek čitanja od vrha do dna
  • Pojednostavljuje odluke o dizajnu
  • Smanjuje probleme prikazivanja na raznim e-mail klijentima
  • Odgovara načinu čitanja na mobitelu (vertikalno skroliranje)

Idealno za: Newslettere usredotočene na tekst, osobne newslettere, edukativni sadržaj, dubinsku analizu

Struktura:

  1. Zaglavlje (logo, broj izdanja, datum)
  2. Uvod ili osobna napomena
  3. Sekcija glavnog sadržaja
  4. Sekcije sekundarnog sadržaja (odvojene razdjeljnicima)
  5. CTA ili poziv na angažman
  6. Podnožje

Raspored temeljen na karticama

Organiziraj sadržaj u različite vizualne kartice, svaka sa vlastitim rubom, pozadinom ili sjenom.

Prednosti:

  • Jasno odvajanje sadržaja
  • Dobro funkcionira za uređeni sadržaj i pregledne linkove
  • Svaka kartica može imati svoju sliku i CTA
  • Vizualno privlačno bez preopterećenja

Idealno za: Pregledni sadržaj, kurirani linkovi, prikazi proizvoda, newslettere s više tema

Savjeti za dizajn kartica:

  • Koristi dosljedne dimenzije i razmake kartica
  • Maksimalno 2 kartice po redu (složi na 1 na mobitelu)
  • Uključi suptilni rub ili boju pozadine za definiranje kartica
  • Zadržavaj dosljedno punjenje unutar svake kartice

Hibridni raspored

Kombiniraj primarni stupac sadržaja s užim bočnim panelom za dodatni sadržaj.

Prednosti:

  • Prima više sadržaja bez povećanja duljine e-maila
  • Funkcionira za newslettere s primarnim i sekundarnim sadržajem
  • Poznati format iz tradicionalnih publikacija

Ograničenja:

  • Mora se sažeti na jedan stupac na mobitelu
  • Složenije za izgradnju i održavanje
  • Može izgledati pretrpano ako nije dobro organizirano

Idealno za: Poslovne newslettere, medijskog stila publikacije, formate s puno sadržaja

Tipografija za newslettere

Tipografija je najutjecajniji element dizajna u bilo kom e-mailu bogatom tekstom. Ispravno postavljeni fontovi, sve ostalo dolazi na svoje mjesto.

Odabir fonta

E-mail klijenti imaju ograničenu podršku za fontove. Koristi web-sigurne fontove kao primarni izbor:

FontStilIdealno za
ArialČist, moderan sans-serifOpća namjena, poslovanje
HelveticaRafiniran sans-serifPremium brendovi
GeorgiaElegantni serifUredničko, dugačak format
Times New RomanKlasičan serifTradicionalno, formalno
VerdanaŠirok, čitljiv sans-serifMali tekst, mobilni
Trebuchet MSModerni sans-serifKreativno, neformalno

Web fontovi: Možeš odrediti web fontove (poput Open Sans ili Lato) s web-sigurnim zamjenama. Prikazuju se u Apple Mailu, iOS Mailu i nekim Android klijentima, ali vraćaju na sigurnu alternativu u Outlooku i starijem Gmailu.

Veličina fonta

ElementMinimalna veličinaPreporučena veličina
Tekst tijela14 px16 px
Naslovi sekcija20 px22-24 px
Glavni naslov24 px28-32 px
Naslovi/metapodaci12 px13-14 px
Tekst CTA gumba14 px16 px
Tekst preheadera12 px14 px

Prored i čitljivost

  • Visina retka: 1,4-1,6 za tekst tijela (24-26 px pri veličini fonta od 16 px)
  • Razmak između odlomaka: 16-24 px između odlomaka
  • Duljina retka: 50-75 znakova po redu (sprečava umor očiju)
  • Razmak slova: Zadano za tekst tijela, blago povećano za mali tekst

Formatiranje teksta

  • Podebljano: Koristi za ključne fraze i naglasak, ne za cijele odlomke
  • Kurziv: Koristi štedljivo za citate, naslove ili suptilni naglasak
  • Podcrtano: Rezerviraj isključivo za linkove (podcrtani tekst koji nije link zbunjuje čitatelje)
  • SVA VELIKA SLOVA: Koristi samo za kratke oznake ili gumbe, nikada za tekst tijela
  • Boja: Koristi jednu naglasnu boju za linkove, zadržavaj tekst tijela tamnosiv (#333) ili gotovo crn

Strategija boja

Izgradnja palete boja za newsletter

Ograniči newsletter na 3-4 boje:

Uloga bojeKorištenjePrimjer
PrimarnaNaslovi, CTA gumbi, naglasciPlava brenda
TekstTekst tijela, podnasloviTamnosivi (#333333)
PozadinaTijelo e-mailaBijela (#FFFFFF) ili svjetlosiva (#F5F5F5)
NaglasakLinkovi, naglašavanja, sekundarni CTA-oviSekundarna boja brenda

Pristupačnost boja

  • Zadržavaj minimalni omjer kontrasta 4,5:1 između teksta i pozadine
  • Ne oslanjaj se isključivo na boju za prijenos informacija
  • Testiraj paletu sa simulatorima sljepoće za boje
  • Osiguraj da su linkovi razlikovani od regularnog teksta (koristi podcrtavanje, ne samo boju)

Razmatranja za tamni način

Mnogi e-mail klijenti sada zadano koriste tamni način. Dizajniraj imajući tamni način na umu:

  • Izbjegavaj čisto bijele (#FFFFFF) pozadine, koristi blago nečistu bijelu (#FAFAFA)
  • Ne koristi transparentne PNG-ove s tamnim elementima (nestaju u tamnom načinu)
  • Testiraj logotipe na svijetlim i tamnim pozadinama
  • Dodaj meta tagove za podršku sheme boja tamnog načina
  • Koristi rubove ili konture na tamnim slikama kako bi ostale vidljive

Korištenje slika u newsletterima

Kada koristiti slike

Slike trebaju dodati vrijednost koju tekst sam po sebi ne može pružiti:

  • Fotografija proizvoda: Prikaži proizvode u kontekstu
  • Vizualizacija podataka: Grafikoni, tablice i infografike
  • Snimke zaslona: Demonstriraj alate, značajke ili procese
  • Portretne fotografije: Izgradnja osobne veze s autorima ili timom
  • Ilustracije: Podrška osobnosti i tonu brenda

Optimizacija slika

SpecifikacijaPreporuka
FormatJPEG za fotografije, PNG za grafike
Širina600 px standardno, 1200 px za retinu
Veličina datotekeIspod 200 KB po slici
Ukupna veličina e-mailaIspod 100 KB bez slika
Alt tekstOpisni, 125 znakova ili manje
Omjer slike2:1 za hero slike, 1:1 za sličice

Omjer slika i teksta

Zadržavaj zdrav omjer teksta i slika kako bi izbjegao spam filtre i osigurao čitljivost:

  • 60:40 tekst prema slici je preporučeni omjer
  • E-mailovi koji su pretežno slike imaju više stope spama
  • Uvijek uključi tekstualne verzije ključnih informacija, ne samo u slikama
  • Dizajniraj za klijente koji blokiraju slike: tvoj newsletter treba imati smisla bez slika

Dizajn newslettera s pristupom mobile-first

Zahtjevi mobilnog dizajna

S više od 60% otvaranja newslettera na mobilnim uređajima, mobilni dizajn nije opcija.

Pravila mobilnog rasporeda:

  • Maksimalna širina sadržaja: 600 px (dobro se prikazuje na svim uređajima)
  • Minimalni cilj tapkanja: 44x44 piksela za gumbe i linkove
  • Minimalna veličina fonta: 16 px za tekst tijela na mobitelu
  • Raspored u jednom stupcu koji se prirodno slaže
  • CTA gumbi pune širine na mobitelu
  • Odgovarajući razmaci između klikabilnih elemenata (sprečavaj slučajna tapkanja)

Tehnike responzivnog dizajna

TehnikaDesktopMobilni
Višestupanjske sekcijeJedna pored drugeSložene vertikalno
SlikeVeličinom unutar sadržajaPuna širina, skalirane
Navigacijski linkoviHorizontalniSloženi ili skriveni
CTA gumbiInline ili desno poravnatiPuna širina
Veličine fontovaStandardneBlago veće
Punjenje20-40 px15-20 px

Testiranje mobilnog prikazivanja

Testiraj dizajn newslettera na:

  • iPhoneu (Safari/Mail)
  • Androidu (Gmail aplikacija)
  • iPadu
  • Gmailu (web)
  • Outlooku (desktop i web)
  • Apple Mailu (desktop)

Koristi alate poput Litmusa ili Email on Acid za automatizirane testove prikazivanja na 90+ e-mail klijenata.

Dizajn sekcija newslettera

Zaglavlje

Zaglavlje uspostavlja identitet i postavlja očekivanja:

  • Logo: Odgovarajuće dimenzioniran (ne prevelik, tipično 150-200 px u širinu)
  • Identifikator izdanja: Broj izdanja, datum ili naziv edicije
  • Link za pregled na webu: Za pretplatnike koji imaju probleme s prikazivanjem
  • Zadržavaj ga kompaktnim: Zaglavlje ne smije gurati sadržaj ispod preloma

Razdjeljnici sekcija

Jasni razdjeljnici između sekcija sadržaja pomažu čitateljima u pregledavanju:

  • Horizontalne crte: Jednostavne, tanke linije (1-2 px) u neutralnoj boji
  • Promjene boje pozadine: Izmjenjuj između bijele i svjetlosive pozadine sekcija
  • Dodatni razmaci: 30-40 px punjenja između sekcija
  • Naslovi sekcija: Podebljani, veći tekst s dosljedno stilizacijom

Podnožje

Dobro dizajnirano podnožje dovršava iskustvo:

  • Link za odjavu (zakonski obvezan, neka ga bude lako pronaći)
  • Linkovi na društvenim mrežama
  • Fizička poštanska adresa (zahtjev CAN-SPAM-a)
  • Link za pregled u pregledniku
  • Opcija prosljeđivanja prijatelju
  • Kratka oznaka brenda ili izjava o misiji

Alati za dizajn newslettera

Platformni uređivači

Većina platformi za newslettere uključuje ugrađene urednike dizajna:

PlatformaVrsta urednikaFleksibilnost dizajnaKnjižnica predložaka
BrevoPovuci i ispustiVisoka40+ predložaka
MailchimpPovuci i ispustiVisoka100+ predložaka
ConvertKitPojednostavljen urednikUmjerenaOgraničena
SubstackUsmjeren na tekstNiskaMinimalna

Brevov editor s povlači i ispusti čini profesionalni dizajn newslettera dostupnim bez znanja kodiranja. Za tvrtke koje koriste Tajo, sekcije newslettera možeš dinamički popuniti preporukama proizvoda i personaliziranim sadržajem na temelju ponašanja pretplatnika.

Resursi za dizajn

  • Canva: Kreiraj slike zaglavlja newslettera, grafike za društvene mreže i ilustracije
  • Unsplash/Pexels: Besplatna stockfotografija
  • Really Good Emails: Galerija inspiracije dobro dizajniranih e-mailova
  • MJML: Open-source e-mail framework za prilagođene dizajne
  • Figma: Dizajniraj prilagođene predloške newslettera s eksportom putem e-mail dodatka

Kontrolna lista za dizajn newslettera

Prije slanja bilo kojeg newslettera, provjeri:

Raspored:

  • Raspored u jednom stupcu ili pravilno responzivni višestupanjski
  • Širina sadržaja je 600 px ili manja
  • Jasna vizualna hijerarhija od zaglavlja do podnožja
  • Sekcije su jasno odvojene

Tipografija:

  • Tekst tijela je 16 px ili veći
  • Visina retka je 1,4-1,6
  • Naslovi stvaraju jasnu strukturu sadržaja
  • Tekst linka je opisni (ne “klikni ovdje”)

Slike:

  • Sve slike imaju alt tekst
  • Slike su optimizirane po veličini datoteke
  • Newsletter je čitljiv bez slika
  • Retina slike su pružene za visoko-DPI zaslone

Mobilno:

  • Testirano na iPhoneu i Androidu
  • CTA gumbi su pune širine na mobitelu
  • Veličine fontova su čitljive na malim zaslonima
  • Ciljevi tapkanja su minimalno 44 px

Pristupačnost:

  • Kontrast boja zadovoljava omjer 4,5:1
  • Sadržaj je strukturiran s odgovarajućim naslovima
  • Nema informacija koje se prenose samo bojom
  • Kompatibilno s čitačima zaslona

Brend:

  • Boje odgovaraju paleti brenda
  • Logo je ispravno dimenzioniran i pozicioniran
  • Ton i glas su dosljedni s brendom
  • Podnožje uključuje sve zakonski obvezne elemente

Razvijanje dizajna newslettera

Dizajn newslettera nije jednokratni projekt. Razvijaj dizajn na temelju podataka o performansama i povratnih informacija pretplatnika:

  • Prati dubinu skroliranja: Dolaze li čitatelji do dna newslettera?
  • Prati karte klikova: Koje sekcije dobivaju najviše klikova? Promoviraj sličan sadržaj.
  • Ispitaj pretplatnike: Jednom godišnje pitaj o preferencijama dizajna
  • A/B testiraj rasporede: Usporedi kartični vs. linearni raspored, postavljanje slika i stilove CTA-a
  • Proučavaj konkurenciju: Proučavaj što funkcionira u uspješnim newsletterima u tvom prostoru

Najboli dizajni newslettera su nevidljivi. Pretplatnici ne primjećuju dizajn, primjećuju sadržaj. To znači da dizajn savršeno radi svoj posao: uklanja trenje, usmjerava pažnju i čini iskustvo čitanja lakim.

Počni jednostavno, ostani dosljedan i usavršavaj na temelju podataka. Dizajn newslettera treba se razvijati zajedno s tvojom publikom, ne ispred nje.

Često postavljana pitanja

Što čini dobar dizajn newslettera?
Dobar dizajn newslettera koristi jasnu vizualnu hijerarhiju, dosljedno brendiranje, čitljivu tipografiju (minimalno 16 px), raspored u jednom stupcu za mobilnu kompatibilnost i strateško korištenje bijelog prostora. Vodi čitateljevo oko od naslova do sadržaja do poziva na akciju.
Trebaju li newsletteri biti težili tekstu ili slikama?
Idealna ravnoteža ovisi o vrsti sadržaja, ali većina newslettera najbolje radi s omjerom teksta i slika 60/40. Dizajni koji stavljaju tekst na prvo mjesto osiguravaju čitljivost kad su slike blokirane i poboljšavaju isporučivost. Koristi slike za podršku sadržaju, ne za zamjenu.
Koji je najbolji raspored newslettera?
Raspored u jednom stupcu najučinkovitiji je za newslettere jer radi na svim uređajima, lako je pregledati ga i usmjerava pažnju u linearnom toku. Koristi jasne razdjelnike sekcija i dosljedno oblikovanje za organiziranje sadržaja unutar jednog stupca.
Podijelite ovaj članak:
Natrag na sve članke

Zatražite rani pristup

Unesite ime te adresu e-pošte ili telefonski broj. Poslat ćemo vam pojedinosti o pristupu platformi Tajo.

automatsko prepoznavanje
Nabavi Brevo