---
title: "Oblikovanje novičk: najboljše prakse za privlačne e-poštne postavitve"
description: "Obvladaj oblikovanje novičk z najboljšimi praksami postavitve, nasveti za tipografijo in vizualnimi strategijami. Ustvari e-poštne novičke, ki izgledajo profesionalno in spodbujajo angažiranost."
url: https://tajo.io/sl/blog/newsletter-design-guide/
markdown: https://tajo.io/sl/blog/newsletter-design-guide.md
lang: sl-SI
author: "Set Noa"
author_url: https://tajo.io/sl/set-noa/
published: 2026-03-26
updated: 2026-05-06
alternates: {en-US: /blog/newsletter-design-guide.md, bg-BG: /bg/blog/newsletter-design-guide.md, cs-CZ: /cz/blog/newsletter-design-guide.md, de-DE: /de/blog/newsletter-design-guide.md, da-DK: /dk/blog/newsletter-design-guide.md, es-ES: /es/blog/newsletter-design-guide.md, fr-FR: /fr/blog/newsletter-design-guide.md, el-GR: /gr/blog/newsletter-design-guide.md, hi-IN: /hi/blog/newsletter-design-guide.md, id-ID: /in/blog/newsletter-design-guide.md, hr-HR: /hr/blog/newsletter-design-guide.md, hu-HU: /hu/blog/newsletter-design-guide.md, it-IT: /it/blog/newsletter-design-guide.md, ja-JP: /jp/blog/newsletter-design-guide.md, ko-KR: /kr/blog/newsletter-design-guide.md, ar-SA: /ar/blog/newsletter-design-guide.md, nl-NL: /nl/blog/newsletter-design-guide.md, no-NO: /no/blog/newsletter-design-guide.md, pl-PL: /pl/blog/newsletter-design-guide.md, pt-BR: /pt/blog/newsletter-design-guide.md, ro-RO: /ro/blog/newsletter-design-guide.md, ru-RU: /ru/blog/newsletter-design-guide.md, sv-SE: /se/blog/newsletter-design-guide.md, zh-CN: /zh-cn/blog/newsletter-design-guide.md, sr-Latn-RS: /sr/blog/newsletter-design-guide.md, th-TH: /th/blog/newsletter-design-guide.md, tr-TR: /tr/blog/newsletter-design-guide.md, ur-PK: /ur/blog/newsletter-design-guide.md, vi-VN: /vi/blog/newsletter-design-guide.md, sk-SK: /sk/blog/newsletter-design-guide.md}
---

[E-pošta](https://tajo.io/sl/blog/?category=email)

# Oblikovanje novičk: najboljše prakse za privlačne e-poštne postavitve

Obvladaj oblikovanje novičk z najboljšimi praksami postavitve, nasveti za tipografijo in vizualnimi strategijami. Ustvari e-poštne novičke, ki izgledajo profesionalno in spodbujajo angažiranost.

newsletter design

Kaj tvori dobro oblikovanje novičk?

Oblikovanje novičk mora dati prednost berljivosti, mobilni odzivnosti in vizualni doslednosti. Ta vodnik zajema strategije postavitve, tipografijo, uporabo barv, optimizacijo slik in orodja za oblikovanje za ustvarjanje novičk, ki jih naročniki želijo brati.

[Izvedite več](https://tajo.io/sl/blog/newsletter-design-guide/#osnove-oblikovanja-novi%C4%8Dk)

Oblikovanje novičk je nevidna arhitektura, ki določa, ali naročniki vašo vsebino preberejo ali izbrišejo. Dobro oblikovana novička naravno usmerja pogled od naslova do vsebine do akcije. Slabo oblikovana ustvarja vizualni kaos, ki odganja bralce, ne glede na vrednost vsebine.

Dobra novica: učinkovito oblikovanje novičk ne zahteva profesionalnega oblikovalca. Zahteva razumevanje nekaj temeljnih načel in njihovo dosledno uporabo. Ta vodnik zajema strategije postavitve, pravila tipografije in vizualne tehnike, ki naredijo novičke privlačne in berljive.

## Štiri predloge v pogonu

Vse pod tem razdelkom je trditev o postavitvi, trditve o postavitvi pa so poceni. Zato so tukaj štiri e-novice, v pogonu.

Vsaka sedi v okvirju z resnično širino in kaže svoj HTML. Zmanjšajte širino na 375 px in poglejte, kateri stolpci se zložijo in kateri to zavrnejo. Plošče sledijo temi, v kateri berete to stran: v temnem načinu vidite pravi temni blok vsake predloge, ne približka. Izvorna koda je pod vsako ploščo.

Predloge Tajo

### Štiri postavitve v pogonu

Vsaka plošča spodaj je resnični e-poštni HTML predloge v okvirju z resnično širino. Zmanjšajte širino na 375 px in opazujte, kako se stolpci zložijo drug pod drugega.

Sledi vaši temi — preklopite jo v glavi, da vidite drugo.

E-novice avtorja, kjer je vsa vrednost v besedilu in kjer je vsak oblikovalski element, ki ni besedilo, davek.

Besedilo

18px / 30px Georgia

Dolžina vrstice

~55 znakov

Slike

1 (glava)

Poudarek

#0084d1 (črte + povezave)

Na kaj biti pozoren

1. Dolžina vrstice je okoli 55 znakov, ne polnih 600 px. Robovi 88 px obstajajo samo zaradi tega. Predolge vrstice so najpogostejša napaka berljivosti v e-novicah, ki sicer izgledajo dobro.
2. Glava je edina slika. Blokirajte jo in pismo se še vedno bere od vrha navzdol, brez izgube.
3. Poziv k dejanju je besedilna povezava v svoji vrstici, ne gumb. Gumb v osebnem pismu se bere kot oglas, odziv v tej obliki pa pride iz odgovora, ne iz klika.

**Preberi HTML predloge The Letter 6 KB, brez gradnje**

```
<!DOCTYPE html>
<html lang="sl" 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, ki ga hranite v aplikaciji za zapiske, opravi več dela kot vaš vsebinski koledar.</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="Glava Meridian Press: koncentrični modri loki, prečkani z diagonalnim pasom" 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 · Številka 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;">Arhiv je izdelek</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Pred tremi tedni sem iskal besedilo, ki sem ga napisal leta 2019, in ga nisem našel. Ne na spletni strani, ne v izvozu, ne v iskalniku same platforme. Tisoč dvesto številk in edini delujoči kazalo je bil moj spomin.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">To je del, ki vam ga o šestih letih e-novic nihče ne pove. Pošiljati je enostavno. Hraniti ni.</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;">Vse, kar objavite, je vloga. Dvig gradi skoraj nihče.</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;">Ta teden sem zato stare številke prezidal v pravi arhiv, z oznakami, celotnim iskanjem po besedilu in trajnimi naslovi. Vzelo je devet dni. Število naročnikov se ni premaknilo. Čas na strani se je potrojil.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Vse je spodaj, tudi deli, ki niso delovali.</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;">Preberi celotno številko &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;">Napisano na roko vsak četrtek. Odgovorite in preberem.</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;">Ogled v brskalniku</a></p>
      </td></tr>

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

Predloge so naše. Zasnovali smo jih za ta članek, vključno z grafiko, ki jo ustvari determinističen geometrijski skript v istem repozitoriju kot ta stran — brez fotografij iz baz in brez posnetkov tuje galerije predlog. Ta razlika tehta več, kot se sliši: vodnik po oblikovanju e-pošte, ki se ponazarja z e-sporočili drugih ljudi, od vas zahteva, da mu verjamete na besedo.

Štiri predloge niso štirje slogi. So štirje odgovori na štiri različne naloge:

- **The Letter** je za pisca, čigar vsa vrednost je besedilo. Ena slika, robovi 88 px, besedilna povezava namesto gumba. Gumb v osebnem pismu se bere kot oglas.
- **The Digest** je za pregled, ki se preletava. Oštevilčene vrstice, čas branja pred vsakim naslovom in en sam poziv k dejanju na dnu namesto šestih.
- **The Storefront** je za predstavitev zbirke. To je edina postavitev, kjer je začeti s sliko pravilno, in je vseeno zgrajena tako, da slika lahko odpove.
- **The Brief** je za številke. Trije kazalniki nad vsem ostalim in stolpčni graf iz celic tabele namesto iz PNG.

Skupen jim je tisti del, ki ga je vredno prepisati. En stolpec 600 px. Besedilo najmanj 16 px. Ena poudarna barva in črnilo za vse ostalo. Vsaka slika nosi nadomestno besedilo in vsaka postavitev ima smisel tudi z blokiranimi slikami. Deklarirana barvna shema in izrecen temni blok, ker privzeto vedenje v temnem odjemalcu pomeni, da vaše e-sporočilo obrne algoritem, ki vaše znamke ni nikoli videl.

Eno od njih smo v prvem poskusu naredili narobe in prav to je vredno poimenovati. The Digest je sprva vrstice s prispevki na mobilnem zlagal drugo pod drugo — točno tako, kot svetuje vsak vodnik po odzivni e-pošti. Zlaganje je tri sličice po 112 px spremenilo v tri okrasne slike čez celotno širino, visoke 335 px, in pregled šestih tem je postal drsenje. Ta vrstica je zdaj edina dvostolpčna postavitev v naboru, ki se ne zloži. Pravila o zlaganju govorijo o stolpcih vsebine. Sličica ni stolpec vsebine.

### Kako eno od njih zgraditi v Brevu

Nobena od štirih zgornjih predlog za sestavljanje ne potrebuje razvijalca. Vsak zaslon spodaj je ista predloga na Brevovem platnu za poteg in spust, z enim izbranim blokom.

Začnimo pri glavnem gumbu, saj ima ta blok največ nastavitev:

![Brevov urejevalnik e-pošte s potegom in spustom: predloga The Storefront na platnu, izbran glavni gumb in njegove nastavitve oznake, povezave, barve, zaobljenosti in odmika v desni plošči](https://tajo.io/_astro/email-builder-storefront.CFyFSzLz_2wMLlw.webp)

*The Storefront na platnu. Levi stolpec: bloki, ki jih povlečete. Desni stolpec: vse o izbranem bloku. Na platnu je e-sporočilo, široko 600 px, znotraj odjemalca, širokega 680 px — zato se mobilna postavitev ne pokaže: pri točno 600 px bi se sprožila lastna prelomna točka predloge in urejali bi telefonsko različico, medtem ko stikalo pravi Namizje.*

Vsak blok v levem stolpcu ustreza nečemu v zgornjih predlogah. Besedilo, Slika, Gumb, Ločilo in Razmik za strukturo. Izdelek za vrstico trgovine. HTML za vse, česar urejevalnik ne modelira — in prav tako je zgrajen graf v The Brief:

![Brevov urejevalnik e-pošte s predlogo The Brief na platnu, izbranim stolpčnim grafom in desno ploščo, ki kaže, da je zgrajen iz celic tabele brez slike](https://tajo.io/_astro/email-builder-brief.ton7ClBD_2jhqG.webp)

*Graf, v katerem ni nobene slike. Graf, izvožen kot PNG, izgubi svoje številke ob blokiranju slik, ob obračanju v temnem načinu in v vsakem bralniku zaslona. Štiri vrstice tabele z obarvano celico in besedilno oznako ne izgubijo nobene in ne tehtajo nič.*

Tipografija deluje enako. Izberite besedilni blok in plošča vam da pisavo, velikost, razmik med vrsticami in odmik — kar je celotno orodje, ki ga The Letter potrebuje:

![Brevov urejevalnik e-pošte s predlogo The Letter na platnu in izbranim citatom: Georgia 19px na 30px, ležeče, z levo črto 3px](https://tajo.io/_astro/email-builder-letter.Dm38LK9Y_ZViw3u.webp)

*Citat je besedilni blok s črto ob strani. Nobene posebne komponente. Besedilni blok, leva črta 3 px v poudarni barvi in 20 px notranjega odmika. V dobrih e-novicah je večina tistega, kar izgleda kot oblikovanje po meri, standarden blok z dvema spremenjenima lastnostma.*

Slike imajo svojo ploščo, kjer nadomestno besedilo stoji na vrhu in ne na koncu seznama nastavitev:

![Brevov urejevalnik e-pošte s predlogo The Digest na platnu in izbrano sličico prispevka, ki kaže njeno nadomestno besedilo, prikazno velikost 112px, vir 480px in težo 17 KB](https://tajo.io/_astro/email-builder-digest.BeJKSiLx_1dRJG3.webp)

*Nadomestno besedilo je polje, ne naknadna misel. Prikazna velikost 112 px, vir 480 px — prav to razmerje 2× ohranja sličico ostro na zaslonu retina. Nadomestno besedilo je prvo, ker je to tisti del slike, ki ga bo večina naročnikov res prejela.*

Podjetjem, ki uporabljajo Tajo, je iste razdelke mogoče polniti dinamično: priporočila izdelkov in prilagojena vsebina, vodena z vedenjem naročnikov, izrisana v bloke, ki ste jih razporedili tukaj, namesto ročnega izbiranja ob vsakem pošiljanju.

## Osnove oblikovanja novičk

### Oblikovanje služi vsebini

Najpomembnejše načelo pri oblikovanju novičk: oblikovanje mora narediti vsebino lažjo za uživanje, nikoli težjo. Vsaka odločitev pri oblikovanju mora odgovoriti na vprašanje: ali to pomaga bralcu najti in sprejeti informacije, ki jih išče?

**Znaki dobrega oblikovanja novičk:**

- Bralci lahko pregledajo celotno novičko v 10-15 sekundah
- Najpomembnejša vsebina je takoj vidna
- Vsak razdelek ima jasen začetek in konec
- Poziv k akciji izstopa brez motečega delovanja
- Novička izgleda premišljeno, ne naključno

**Znaki slabega oblikovanja novičk:**

- Bralci ne najdejo glavne vsebine hitro
- Več slogov oblikovanja tekmuje za pozornost
- Besedilo je težko berljivo na kateri koli napravi
- Postavitev se pokvari na mobilnih zaslonih
- Gosti bloki besedila brez vizualnih prekinitev

### Načelo vizualne hierarhije

Vizualna hierarhija nadzoruje vrstni red, v katerem bralci obdelujejo informacije. V novičkah vzpostavite hierarhijo z naslednjimi elementi:

| Raven hierarhije | Element | Obravnava pri oblikovanju |
| --- | --- | --- |
| Primarna | Glavni naslov | Največja pisava, krepko, zgornji položaj |
| Sekundarna | Glave razdelkov | Srednja pisava, kontrastna barva |
| Terciarna | Besedilo vsebine | Standardna pisava, berljiva velikost |
| Podporna | Metapodatki (datumi, avtorji) | Manjša pisava, svetlejša barva |
| Akcijska | Gumbi/povezave CTA | Kontrastna barva, slog gumba |

## Strategije postavitve

### Enostolpična postavitev

Enostolpična postavitev je zlati standard za novičke in priporočen pristop za večino založnikov.

**Prednosti:**

- Perfektno prikazuje na vsaki napravi in velikosti zaslona
- Ustvarja naraven tok branja od zgoraj navzdol
- Poenostavlja odločitve pri oblikovanju
- Zmanjšuje težave pri prikazovanju v e-poštnih odjemalcih
- Ustreza načinu branja na mobilnih napravah (navpično pomikanje)

**Najboljše za:** Novičke, osredotočene na besedilo, osebne novičke, izobraževalno vsebino, poglobljene analize

**Struktura:**

1. Glava (logotip, številka izdaje, datum)
2. Uvod ali osebna opomba
3. Glavni razdelek vsebine
4. Sekundarni razdelki vsebine (ločeni z ločili)
5. CTA ali poziv k vključevanju
6. Noga

### Postavitev s karticami

Organizirajte vsebino v ločene vizualne kartice, vsaka s svojo obrobo, ozadjem ali senco.

**Prednosti:**

- Jasna ločitev vsebine
- Dobro deluje za prirejeno vsebino in zbirke povezav
- Vsaka kartica ima lahko svojo sliko in CTA
- Vizualno privlačno brez preobremenitve

**Najboljše za:** Zbirke vsebine, prirejene povezave, prikaze izdelkov, novičke z več temami

**Nasveti za oblikovanje kartic:**

- Uporabite dosledno velikost in razmik kartic
- Ohranite največ 2 kartici v vrsti (na mobilnih napravah zložite v 1)
- Vključite subtilno obrobo ali barvo ozadja za definiranje kartic
- Ohranite dosledno notranje obrobje vsake kartice

### Hibridna postavitev

Kombinirajte primarni stolpec vsebine z ožjo stransko vrstico za dopolnilno vsebino.

**Prednosti:**

- Vstavi več vsebine brez povečanja dolžine e-pošte
- Deluje za novičke tako s primarno kot sekundarno vsebino
- Znan format iz tradicionalnih publikacij

**Omejitve:**

- Mora se sesuti v en stolpec na mobilnih napravah
- Bolj zapleteno za gradnjo in vzdrževanje
- Lahko se zdi nagneteno, če ni dobro organizirano

**Najboljše za:** Podjetniške novičke, medijsko usmerjene publikacije, formate z bogato vsebino

## Tipografija za novičke

Tipografija je najpomembnejši element oblikovanja v kateri koli e-pošti, bogati z besedilom. Pravilno nastavite pisave in vse ostalo pade na svoje mesto.

### Izbira pisave

E-poštni odjemalci imajo omejeno podporo za pisave. Kot primarno izbiro uporabite spletno varne pisave:

| Pisava | Slog | Najboljše za |
| --- | --- | --- |
| Arial | Čista, moderna brez serifov | Splošna raba, poslovanje |
| Helvetica | Izpopolnjena brez serifov | Vrhunske znamke |
| Georgia | Elegantna s serifi | Uredniška, dolga besedila |
| Times New Roman | Klasična s serifi | Tradicionalna, formalna |
| Verdana | Široka, berljiva brez serifov | Majhno besedilo, mobilne naprave |
| Trebuchet MS | Moderna brez serifov | Ustvarjalna, neformalna |

**Spletne pisave:** Določite lahko spletne pisave (kot so Open Sans ali Lato) z varnimi spletnimi nadomestki. Prikažejo se v Apple Mail, iOS Mail in nekaterih odjemalcih Android, v Outlooku in starejšem Gmailu pa se preklopijo na varno alternativo.

### Velikost pisave

| Element | Minimalna velikost | Priporočena velikost |
| --- | --- | --- |
| Besedilo vsebine | 14 px | 16 px |
| Glave razdelkov | 20 px | 22-24 px |
| Glavni naslov | 24 px | 28-32 px |
| Napisi/metapodatki | 12 px | 13-14 px |
| Besedilo gumba CTA | 14 px | 16 px |
| Besedilo predglave | 12 px | 14 px |

### Medvrstični razmik in berljivost

- **Višina vrstice:** 1,4-1,6 za besedilo vsebine (24-26 px pri velikosti pisave 16 px)
- **Razmik med odstavki:** 16-24 px med odstavki
- **Dolžina vrstice:** 50-75 znakov v vrstici (preprečuje utrujenost oči)
- **Razmik med črkami:** Privzeto za besedilo vsebine, rahlo povečano za majhno besedilo

### Oblikovanje besedila

- **Krepko:** Uporabite za ključne fraze in poudarke, ne za cele odstavke
- **Poševno:** Uporabite redko za citate, naslove ali subtilne poudarke
- **Podčrtano:** Rezervirajte izključno za povezave (podčrtano besedilo brez povezave zmede bralce)
- **VELIKE ČRKE:** Uporabite samo za kratke oznake ali gumbe, nikoli za besedilo vsebine
- **Barva:** Uporabite eno poudarno barvo za povezave, ohranite besedilo vsebine temno sivo (#333) ali skoraj črno

## Strategija barv

### Gradnja barvne palete novičke

Omejite novičko na 3-4 barve:

| Vloga barve | Uporaba | Primer |
| --- | --- | --- |
| Primarna | Glave, gumbi CTA, poudarki | Modra znamke |
| Besedilo | Besedilo vsebine, podglave | Temno siva (#333333) |
| Ozadje | Telo e-pošte | Bela (#FFFFFF) ali svetlo siva (#F5F5F5) |
| Poudarek | Povezave, poudarki, sekundarni CTA | Sekundarna barva znamke |

### Dostopnost barv

- Ohranite minimalno razmerje kontrasta 4,5:1 med besedilom in ozadjem
- Ne zanašajte se samo na barvo za posredovanje informacij
- Preizkusite svojo paleto s simulatorji barvne slepote
- Zagotovite, da so povezave ločljive od navadnega besedila (uporabite podčrtanje, ne samo barvo)

### Upoštevanje temnega načina

Številni e-poštni odjemalci zdaj privzeto uporabljajo temni način. Oblikujte z mislijo na temni način:

- Izogibajte se čisto belim (#FFFFFF) ozadjem — uporabite rahlo umazano belo (#FAFAFA)
- Ne uporabljajte prosojnih datotek PNG s temnimi elementi (v temnem načinu izginejo)
- Preizkusite logotipe na svetlih in temnih ozadjih
- Dodajte meta oznake za podporo barvni shemi temnega načina
- Uporabite obrobe ali obrise na temnih slikah, da ostanejo vidne

## Uporaba slik v novičkah

### Kdaj uporabiti slike

Slike morajo dodati vrednost, ki je besedilo samo ne more zagotoviti:

- **Fotografija izdelkov:** Prikažite izdelke v kontekstu
- **Vizualizacija podatkov:** Grafikoni, grafi in infografike
- **Posnetki zaslona:** Pokažite orodja, funkcije ali procese
- **Fotografije obrazov:** Vzpostavite osebno povezavo z avtorji ali ekipo
- **Ilustracije:** Podprite osebnost in ton znamke

### Optimizacija slik

| Specifikacija | Priporočilo |
| --- | --- |
| Format | JPEG za fotografije, PNG za grafike |
| Širina | Standardnih 600 px, 1200 px za retina |
| Velikost datoteke | Pod 200 KB na sliko |
| Skupna velikost e-pošte | Pod 100 KB brez slik |
| Nadomestno besedilo | Opisno, 125 znakov ali manj |
| Razmerje stranic | 2:1 za hero slike, 1:1 za sličice |

### Razmerje slik in besedila

Ohranite zdravo razmerje besedila in slik, da se izognete filtrom za nezaželeno pošto in zagotovite berljivost:

- **60:40 besedilo proti slikam** je priporočeno razmerje
- E-pošte, ki so primarno slike (e-pošte samo s slikami), imajo višje stopnje nezaželene pošte
- Vedno vključite besedilne različice ključnih informacij, ne samo v slikah
- Oblikujte za odjemalce z blokiranimi slikami: vaša novička mora imeti smisel brez slik

## Oblikovanje novičk za mobilne naprave

### Zahteve za mobilno oblikovanje

Ker se več kot 60 % odpiranj novičk zgodi na mobilnih napravah, mobilno oblikovanje ni neobvezno.

**Pravila mobilne postavitve:**

- Maksimalna širina vsebine: 600 px (dobro se prikaže na vseh napravah)
- Minimalna površina dotika: 44x44 pikslov za gumbe in povezave
- Minimalna velikost pisave: 16 px za besedilo vsebine na mobilnih napravah
- Enostolpična postavitev, ki se naravno zloži
- Gumbi CTA polne širine na mobilnih napravah
- Ustrezen razmik med elementi, ki jih je mogoče klikniti (preprečitev naključnih dotikov)

### Tehnike odzivnega oblikovanja

| Tehnika | Namizni računalnik | Mobilna naprava |
| --- | --- | --- |
| Večstolpični razdelki | Drug ob drugem | Zloženi navpično |
| Slike | Velikost znotraj vsebine | Polna širina, skalirana |
| Navigacijske povezave | Vodoravne | Zložene ali skrite |
| Gumbi CTA | Vrstičeni ali poravnani desno | Polna širina |
| Velikosti pisav | Standardne | Nekoliko večje |
| Obrobje | 20-40 px | 15-20 px |

### Testiranje mobilnega prikaza

Preizkusite oblikovanje novičke na:

- iPhone (Safari/Mail)
- Android (aplikacija Gmail)
- iPad
- Gmail (splet)
- Outlook (namizje in splet)
- Apple Mail (namizje)

Za avtomatizirane teste prikaza v 90+ e-poštnih odjemalcih uporabite orodja, kot sta Litmus ali Email on Acid.

## Oblikovanje razdelkov novičke

### Glava

Vaša glava vzpostavi identiteto in postavi pričakovanja:

- **Logotip:** Primerno velikost (ne preveliko, tipično 150-200 px širine)
- **Identifikator izdaje:** Številka izdaje, datum ali ime edicije
- **Povezava za ogled v spletu:** Za naročnike, ki imajo težave s prikazom
- **Ohranite kompaktnost:** Glava ne sme potisniti vsebine pod pregib

### Ločila razdelkov

Jasna ločila med razdelki vsebine pomagajo bralcem pri pregledovanju:

- **Vodoravne črte:** Preproste, tanke linije (1-2 px) v nevtralni barvi
- **Spremembe barve ozadja:** Izmenjujte med belimi in svetlo sivimi razdelki
- **Dodaten razmik:** 30-40 px obrobja med razdelki
- **Glave razdelkov:** Krepko, večje besedilo z doslednim slogom

### Noga

Dobro oblikovana noga zaokroži izkušnjo:

- Povezava za odjavo (zakonsko obvezna, zagotovite, da jo je enostavno najti)
- Povezave do družbenih omrežij
- Fizični poštni naslov (zahteva CAN-SPAM)
- Povezava za ogled v brskalniku
- Možnost posredovanja prijatelju
- Kratek slogan ali izjava o poslanstvu znamke

## Orodja za oblikovanje novičk

### Urejevalniki platform

Večina [platform za novičke](https://tajo.io/sl/blog/best-newsletter-platforms/) vključuje vgrajene urejevalnike oblikovanja:

| Platforma | Vrsta urejevalnika | Prilagodljivost oblikovanja | Knjižnica predlog |
| --- | --- | --- | --- |
| Brevo | Vleci in spusti | Visoka | 40+ predlog |
| Mailchimp | Vleci in spusti | Visoka | 100+ predlog |
| ConvertKit | Poenostavljen urejevalnik | Zmerna | Omejena |
| Substack | Osredotočen na besedilo | Nizka | Minimalna |

Brevo-jev urejevalnik z vleci in spusti omogoča profesionalno oblikovanje novičk brez znanja kodiranja.

### Viri za oblikovanje

- **Canva:** Ustvarite slike glave novičke, grafike za družbena omrežja in ilustracije
- **Unsplash/Pexels:** Brezplačna fotografija zalog
- **Really Good Emails:** Galerija navdiha dobro oblikovanih e-poštnih sporočil
- **MJML:** Odprtokodni e-poštni okvir za prilagojene zasnove
- **Figma:** Oblikujte predloge novičk po meri z izvozi vtičnikov za e-pošto

## Kontrolni seznam oblikovanja novičk

Pred pošiljanjem vsake novičke preverite:

**Postavitev:**

- Enostolpična postavitev ali pravilno odzivna večstolpična
- Širina vsebine je 600 px ali manj
- Jasna vizualna hierarhija od glave do noge
- Razdelki so jasno ločeni

**Tipografija:**

- Besedilo vsebine je 16 px ali večje
- Višina vrstice je 1,4-1,6
- Glave ustvarjajo jasno strukturo vsebine
- Besedilo povezave je opisno (ne „kliknite tukaj”)

**Slike:**

- Vse slike imajo nadomestno besedilo
- Slike so optimizirane za velikost datoteke
- Novička je berljiva brez slik
- Retina slike zagotovljene za zaslone z visoko gostoto pik

**Mobilne naprave:**

- Preizkušeno na iPhone in Android
- Gumbi CTA so polne širine na mobilnih napravah
- Velikosti pisav so berljive na majhnih zaslonih
- Površine dotika so najmanj 44 px

**Dostopnost:**

- Kontrastnost barv ustreza razmerju 4,5:1
- Vsebina je strukturirana z ustreznimi naslovi
- Nobena informacija ni posredovana samo z barvo
- Združljivo z bralniki zaslona

**Znamka:**

- Barve ustrezajo paleti znamke
- Logotip je pravilno velikosti in umeščen
- Ton in glas sta dosledna z znamko
- Noga vključuje vse zahtevane pravne elemente

## Razvijanje oblikovanja novičke

Oblikovanje novičk ni enkratni projekt. Razvijajte oblikovanje na podlagi podatkov o uspešnosti in povratnih informacij naročnikov:

- **Sledite globini pomikanja:** Ali bralci pridejo do konca vaše novičke?
- **Spremljajte karte klikov:** Kateri razdelki dobijo največ klikov? Spodbujajte podobno vsebino.
- **Anketirajte naročnike:** Letno sprašujte o preferencah oblikovanja
- **A/B testirajte postavitve:** Primerjajte kartice in linearne postavitve, umestitev slik in sloge CTA
- **Pregledujte konkurente:** Preučite, kaj deluje v uspešnih novičkah na vašem področju

Najboljša oblikovanja novičk so nevidna. Naročniki ne opazijo oblikovanja — opazijo vsebino. To pomeni, da oblikovanje opravlja svojo nalogo popolno: odstranjuje trenje, usmerja pozornost in naredi izkušnjo branja brez napora.

Začnite preprosto, ostanite dosledni in izpopolnjujte na podlagi podatkov. Vaše oblikovanje novičke mora rasti skupaj z vašim občinstvom, ne pred njim.

## Kam se umešča Tajo

Tajo je agentni graditelj integracij. Obdržite svoje ponudnike. Agenti povežejo vse ostalo, vi pa odobrite vsako sinhronizacijo. Tajo je v zgodnjem dostopu. [Zaprosite za dostop](https://tajo.io/sl/#early-access)

## Pogosto Zastavljena Vprašanja

**Kaj tvori dobro oblikovanje novičk?**

Dobro oblikovanje novičk uporablja jasno vizualno hierarhijo, dosleden branding, berljivo tipografijo (najmanj 16 px), enostolpično postavitev za mobilno združljivost in strateško uporabo belega prostora. Usmerja bralčev pogled od naslova do vsebine do poziva k akciji.

**Naj bodo novičke bogate z besedilom ali slikami?**

Idealno razmerje je odvisno od vrste vsebine, a večina novičk deluje najbolje pri razmerju besedilo proti slikam 60/40. Oblikovanja, ki dajejo prednost besedilu, zagotavljajo berljivost, ko so slike blokirane, in izboljšujejo dostavljivost. Slike uporabljaj za podporo vsebini, ne za nadomestitev.

**Katera je najboljša postavitev novičke?**

Enostolpična postavitev je najbolj učinkovita za novičke, ker deluje na vseh napravah, je enostavna za pregledovanje in usmerja pozornost v linearnem toku. Uporabi jasne ločila razdelkov in dosledno oblikovanje za organizacijo vsebine znotraj enega stolpca.

## Sorodni članki

### [Priročnik za oblikovanje emailov: postavitev, mobilni prikaz, dostopnost in preverjanje predlog (2026)](https://tajo.io/sl/blog/email-design-best-practices/)

8\. mar. 2026 · 10 min branja

11 razdelkov

### [7 najboljših: orodja za oblikovanje e-pošte](https://tajo.io/sl/blog/the-7-best-email-design-tools/)

15\. jan. 2025 · 6 min branja

6 razdelkov

### [Brezplačne newsletter predloge: primeri, struktura in najboljše prakse \[2026\]](https://tajo.io/sl/blog/free-newsletter-templates/)

26\. mar. 2026 · 5 min branja

10 razdelkov
