--- title: "Dizajn biltena: Najbolje prakse za angažujuće email rasporede" description: "Savladajte dizajn biltena uz Najbolje prakse rasporeda, savete za tipografiju i vizuelne strategije. Kreirajte email biltene koji izgledaju profesionalno i pokreću angažovanost." url: https://tajo.io/sr/blog/newsletter-design-guide/ markdown: https://tajo.io/sr/blog/newsletter-design-guide.md lang: sr-Latn-RS author: "Set Noa" author_url: https://tajo.io/sr/set-noa/ published: 2026-03-26 updated: 2026-05-02 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, sl-SI: /sl/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} --- [Imejl](https://tajo.io/sr/blog/?category=email) # Dizajn biltena: Najbolje prakse za angažujuće email rasporede Savladajte dizajn biltena uz Najbolje prakse rasporeda, savete za tipografiju i vizuelne strategije. Kreirajte email biltene koji izgledaju profesionalno i pokreću angažovanost. newsletter design Šta čini dobar dizajn biltena? Dizajn biltena treba da daje prioritet čitljivosti, responzivnosti na mobilnim uređajima i vizuelnoj konzistentnosti. Ovaj vodič pokriva strategije rasporeda, tipografiju, korišćenje boja, optimizaciju slika i dizajn alate za kreiranje biltena koje pretplatnici žele da čitaju. [Saznajte više](https://tajo.io/sr/blog/newsletter-design-guide/#osnove-dizajna-biltena) Dizajn biltena je nevidljiva arhitektura koja određuje da li pretplatnici čitaju sadržaj ili ga brišu. Dobro dizajniran bilten prirodno vodi oko od naslova do sadržaja do akcije. Loše dizajniran stvara vizuelni haos koji odvraća čitaoce, bez obzira koliko je sadržaj vredan. Dobra vest: efikasan dizajn biltena ne zahteva profesionalnog dizajnera. Zahteva razumevanje nekoliko osnovnih principa i njihovu doslednu primenu. Ovaj vodič pokriva strategije rasporeda, pravila tipografije i vizuelne tehnike koje čine biltene angažujućim i čitljivim. ## Četiri šablona u radu Sve ispod ovog odeljka tvrdnja je o rasporedu, a tvrdnje o rasporedu su jeftine. Zato evo četiri newslettera, u radu. Svaki sedi u okviru stvarne širine i pokazuje sopstveni HTML. Smanjite širinu na 375 px i pogledajte koje se kolone slažu, a koje to odbijaju. Ploče prate temu u kojoj čitate ovu stranicu: u tamnom režimu vidite pravi tamni blok svakog šablona, a ne njegovu približnu verziju. Izvorni kod je ispod svake ploče. Tajo šabloni ### Četiri rasporeda u radu Svaka ploča ispod je pravi HTML e-pošte šablona, u okviru stvarne širine. Smanjite širinu na 375 px i gledajte kako se kolone slažu jedna ispod druge. Prati vašu temu — promenite je u zaglavlju da vidite drugu. Newsletter autora kome je sva vrednost u tekstu i gde je svaki element dizajna koji nije tekst porez. Tekst 18px / 30px Georgia Dužina reda ~55 znakova Slike 1 (zaglavlje) Akcenat #0084d1 (linije + linkovi) Na šta gledati 1. Dužina reda je oko 55 znakova, ne punih 600 px. Margine od 88 px postoje samo zbog toga. Predugi redovi najčešća su greška čitljivosti u newsletterima koji inače izgledaju dobro. 2. Zaglavlje je jedina slika. Blokirajte je i pismo se i dalje čita od vrha do dna, bez ijednog gubitka. 3. Poziv na akciju je tekstualni link u sopstvenom redu, ne dugme. Dugme u ličnom pismu čita se kao oglas, a odziv u ovom formatu dolazi iz odgovora, ne iz klika. **Pročitaj HTML šablona The Letter 6 KB, bez izgradnje** ``` The Letter Citat koji čuvate u aplikaciji za beleške radi više od vašeg kalendara sadržaja. ͏ ͏ ͏ ͏ ͏ ``` Ovi šabloni su naši. Osmislili smo ih za ovaj članak, zajedno sa grafikom koju stvara deterministička geometrijska skripta koja živi u istom repozitorijumu kao i ova stranica — bez fotografija iz baza i bez snimaka tuđe galerije šablona. Ta razlika teži više nego što zvuči: vodič za dizajn e-pošte koji se ilustruje tuđim porukama traži da mu verujete na reč. Četiri šablona nisu četiri stila. To su četiri odgovora na četiri različita zadatka: - **The Letter** je za pisca kome je sva vrednost tekst. Jedna slika, margine od 88 px, tekstualni link umesto dugmeta. Dugme u ličnom pismu čita se kao oglas. - **The Digest** je za pregled koji se preleće. Numerisani redovi, vreme čitanja pre svakog naslova i jedan poziv na akciju na dnu umesto š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 sme da zakaže. - **The Brief** je za brojeve. Tri pokazatelja iznad svega ostalog i stubičasti grafikon od ćelija tabele umesto od PNG-a. Zajednički im je onaj deo koji vredi prepisati. Jedna kolona od 600 px. Tekst najmanje 16 px. Jedna akcentna boja i mastilo za sve ostalo. Svaka slika nosi alternativni tekst, a svaki raspored ima smisla i sa blokiranim slikama. Deklarisana šema boja i izričit tamni blok, jer je podrazumevano ponašanje u tamnom klijentu da vašu poruku obrne algoritam koji nikada nije video vaš brend. Jedan od njih smo prvi put uradili pogrešno i baš njega vredi imenovati. The Digest je isprva slagao redove sa tekstovima na telefonu — tačno onako kako savetuje svaki vodič za responzivnu e-poštu. Slaganje je tri sličice od 112 px pretvorilo u tri ukrasne slike preko cele širine visoke 335 px, a pregled od šest tema postao je listanje. Taj red je sada jedini dvokolonski raspored u skupu koji se ne slaže. Pravila o slaganju govore o kolonama sadržaja. Sličica nije kolona sadržaja. ### Kako jedan od njih izgraditi u Brevu Nijedan od četiri šablona iznad ne treba programera za sastavljanje. Svaki ekran ispod isti je šablon na Brevovom platnu za prevlačenje i puštanje, sa jednim izabranim blokom. Počnimo od glavnog dugmeta jer je to blok sa najviše podešavanja: ![Brevov uređivač e-pošte sa prevlačenjem i puštanjem: šablon The Storefront na platnu, izabrano glavno dugme i njegova podešavanja oznake, linka, boje, zaobljenja i razmaka u desnoj ploči](https://tajo.io/_astro/email-builder-storefront.CFyFSzLz_2wMLlw.webp) *The Storefront na platnu. Leva kolona: blokovi koje prevlačite. Desna kolona: sve o izabranom bloku. Na platnu je poruka široka 600 px unutar klijenta širokog 680 px — zato se mobilni raspored ne pojavljuje: pri tačno 600 px pokrenula bi se sopstvena prelomna tačka šablona i uređivali biste telefonsku verziju dok prekidač kaže Računar.* Svaki blok u levoj koloni odgovara nečemu u šablonima iznad. Tekst, Slika, Dugme, Razdelnik i Razmak za strukturu. Proizvod za red prodavnice. HTML za sve što uređivač ne modeluje — i upravo je tako izgrađen grafikon u The Brief: ![Brevov uređivač e-pošte sa šablonom The Brief na platnu, izabranim stubičastim grafikonom i desnom pločom koja pokazuje da je izgrađen od ćelija tabele bez slike](https://tajo.io/_astro/email-builder-brief.ton7ClBD_2jhqG.webp) *Grafikon u kojem nema nijedne slike. Grafikon izvezen kao PNG gubi svoje brojeve zbog blokiranja slika, obrtanja u tamnom režimu i svakog čitača ekrana. Četiri reda tabele sa obojenom ćelijom i tekstualnom oznakom ne gube nijedan i ne teže ništa.* Tipografija radi isto. Izaberite tekstualni blok i ploča vam daje pismo, veličinu, prored i razmake — što je ceo alat koji The Letter treba: ![Brevov uređivač e-pošte sa šablonom The Letter na platnu i izabranim citatom: Georgia 19px na 30px, kurziv, sa levom linijom od 3px](https://tajo.io/_astro/email-builder-letter.Dm38LK9Y_ZViw3u.webp) *Citat je tekstualni blok sa linijom sa strane. Nikakva posebna komponenta. Tekstualni blok, leva linija od 3 px u akcentnoj boji i 20 px unutrašnjeg razmaka. U dobrom newsletteru većina onoga što izgleda kao dizajn po meri standardni je blok sa dva promenjena svojstva.* I slike imaju sopstvenu ploču, gde alternativni tekst stoji na vrhu, a ne na dnu spiska podešavanja: ![Brevov uređivač e-pošte sa šablonom The Digest na platnu i izabranom sličicom teksta, gde se vide njen alternativni tekst, veličina prikaza 112px, izvor 480px i težina 17 KB](https://tajo.io/_astro/email-builder-digest.BeJKSiLx_1dRJG3.webp) *Alternativni tekst je polje, a ne naknadna misao. Veličina prikaza 112 px, izvor 480 px — upravo taj odnos 2× drži sličicu oštrom na retina ekranu. Alternativni tekst je prvi jer je to deo slike koji će većina pretplatnika stvarno dobiti.* Kompanijama koje koriste Tajo iste sekcije mogu da se pune dinamički: preporuke proizvoda i personalizovani sadržaj vođen ponašanjem pretplatnika, iscrtani u blokove koje ste ovde rasporedili umesto ručnog biranja pri svakom slanju. ## Osnove dizajna biltena ### Dizajn služi sadržaju Najvažniji princip u dizajnu biltena: dizajn treba da olakša konzumiranje sadržaja, nikad ne otežava. Svaka dizajnerska odluka treba da odgovori na pitanje: da li ovo pomaže čitaocu da pronađe i apsorbuje informacije koje traži? **Znakovi dobrog dizajna biltena:** - Čitaoci mogu skenirati ceo bilten za 10-15 sekundi - Najvažniji sadržaj je odmah vidljiv - Svaka sekcija ima jasan početak i kraj - Poziv na akciju se ističe bez ometanja - Bilten izgleda namerno, ne slučajno **Znakovi lošeg dizajna biltena:** - Čitaoci ne mogu brzo pronaći glavni sadržaj - Više dizajnerskih stilova takmiči se za pažnju - Tekst je teško čitati na bilo kom uređaju - Raspored se kvari na mobilnim ekranima - Guste blokove teksta bez vizuelnih pauza ### Princip vizuelne hijerarhije Vizuelna hijerarhija kontroliše redosled kojim čitaoci obrađuju informacije. U biltenima, uspostavite hijerarhiju kroz: | Nivo hijerarhije | Element | Dizajnerski tretman | | --- | --- | --- | | Primarni | Glavni naslov | Najveći font, podebljan, gornja pozicija | | Sekundarni | Naslovi sekcija | Srednji font, kontrastna boja | | Tercijarni | Sadržaj tela | Standardni font, čitljiva veličina | | Prateći | Metapodaci (datumi, autori) | Manji font, svetlija boja | | Akcija | Dugmad/linkovi poziva na akciju | Kontrastna boja, stil dugmeta | ## Strategije rasporeda ### Raspored u jednoj koloni Raspored u jednoj koloni je zlatni standard za biltene i preporučeni pristup za većinu izdavača. **Prednosti:** - Savršeno se prikazuje na svakom uređaju i veličini ekrana - Stvara prirodan tok čitanja od gore prema dole - Pojednostavljuje dizajnerske odluke - Smanjuje probleme prikazivanja kroz email klijente - Odgovara načinu čitanja na mobilnim uređajima (vertikalno skrolovanje) **Idealno za:** Biltene fokusirane na tekst, lične biltene, edukativni sadržaj, dubinsku analizu **Struktura:** 1. Zaglavlje (logo, broj izdanja, datum) 2. Uvod ili lična napomena 3. Sekcija s glavnim sadržajem 4. Sekundarne sekcije s sadržajem (odvojene razdjelniku) 5. Poziv na akciju ili podsticaj za angažovanost 6. Podnožje ### Raspored zasnovan na karticama Organizujte sadržaj u zasebne vizuelne kartice, svaka sa sopstvenom granicom, pozadinom ili senkom. **Prednosti:** - Jasno odvajanje sadržaja - Dobro funkcioniše za kurirani sadržaj i preglede linkova - Svaka kartica može imati sopstvenu sliku i poziv na akciju - Vizuelno angažujući bez preterivanja **Idealno za:** Preglede sadržaja, kurirane linkove, predstavljanje proizvoda, višetematske biltene **Saveti za dizajn kartica:** - Koristite konzistentne dimenzije i razmake kartica - Maksimalno 2 kartice po redu (složite u 1 na mobilnom) - Uključite suptilnu granicu ili boju pozadine za definisanje kartica - Održavajte konzistentan razmak unutar svake kartice ### Hibridni raspored Kombinujte primarnu kolonu s sadržajem i užom bočnom trakom za dopunski sadržaj. **Prednosti:** - Staje više sadržaja bez povećavanja dužine emaila - Funkcioniše za biltene i s primarnim i s sekundarnim sadržajem **Ograničenja:** - Mora se srušiti na jednu kolonu na mobilnom - Složeniji za izgradnju i održavanje ## Tipografija za biltene Tipografija je element s Najvećim uticajem u bilo kojoj tekstualno intenzivnoj poruci. Ispravite fontove i sve ostalo pada na svoje mesto. ### Odabir fonta Email klijenti imaju ograničenu podršku za fontove. Koristite veb-sigurne fontove kao primarni izbor: | Font | Stil | Idealno za | | --- | --- | --- | | Arial | Čist, moderni sans-serif | Opšta namena, poslovni | | Helvetica | Prefinjen sans-serif | Premium brendovi | | Georgia | Elegantni serif | Uređivački, dugačka forma | | Times New Roman | Klasični serif | Tradicional, formalni | | Verdana | Široki, čitljivi sans-serif | Mali tekst, mobilni | | Trebuchet MS | Moderni sans-serif | Kreativni, ležerni | ### Veličine fonta | Element | Minimalna veličina | Preporučena veličina | | --- | --- | --- | | Tekst tela | 14px | 16px | | Naslovi sekcija | 20px | 22-24px | | Glavni naslov | 24px | 28-32px | | Opisi/metapodaci | 12px | 13-14px | | Tekst dugmeta poziva na akciju | 14px | 16px | | Tekst pretpregleda | 12px | 14px | ### Razmak linija i čitljivost - **Visina linije:** 1,4-1,6 za tekst tela (24-26px pri veličini fonta 16px) - **Razmak paragrafa:** 16-24px između paragrafa - **Dužina linije:** 50-75 znakova po liniji (sprečava umor oka) - **Razmak slova:** Podrazumevani za tekst tela, blago povećan za mali tekst ## Strategija boja ### Izgradnja palete boja biltena Ograničite bilten na 3-4 boje: | Uloga boje | Upotreba | Primer | | --- | --- | --- | | Primarna | Naslovi, dugmad za akciju, akcenti | Plava brenda | | Tekst | Tekst tela, podnaslovi | Tamno siva (#333333) | | Pozadina | Telo emaila | Bela (#FFFFFF) ili svetla siva (#F5F5F5) | | Akcent | Linkovi, isticanja, sekundarni akcioni pozivi | Sekundarna boja brenda | ### Dostupnost boja - Održavajte minimalni omjer kontrasta 4,5:1 između teksta i pozadine - Ne oslanjajte se samo na boju za prenošenje informacija - Testirajte paletu simulatorima daltonizma - Osigurajte da su linkovi razlikovani od regularnog teksta ## Korišćenje slika u biltenima ### Kada koristiti slike Slike treba da dodaju vrednost koju tekst sam ne može pružiti: - **Fotografija proizvoda:** Prikažite proizvode u kontekstu - **Vizualizacija podataka:** Grafikoni i infografike - **Snimci ekrana:** Demonstrirajte alate, funkcije ili procese - **Portreti:** Izgradite lični kontakt s autorima ili timom - **Ilustracije:** Podržite ličnost i ton brenda ### Optimizacija slika | Specifikacija | Preporuka | | --- | --- | | Format | JPEG za fotografije, PNG za grafike | | Širina | Standardnih 600px, 1200px za retina | | Veličina datoteke | Ispod 200KB po slici | | Ukupna veličina emaila | Ispod 100KB bez slika | | Alt tekst | Opisni, 125 znakova ili manje | | Omjer aspekata | 2:1 za hero slike, 1:1 za sličice | ### Omjer slika i teksta - **60:40 tekst prema slici** je preporučeni omjer - Emailovi koji su uglavnom slike imaju više stope spama - Uvek uključite tekstualne verzije ključnih informacija, a ne samo u slikama ## Dizajn biltena za mobilne uređaje ### Zahtevi za mobilni dizajn S preko 60% otvaranja biltena na mobilnim uređajima, mobilni dizajn nije opcija. **Pravila mobilnog rasporeda:** - Maksimalna širina sadržaja: 600px - Minimalna ciljna površina dodira: 44x44 piksela za dugmad i linkove - Minimalna veličina fonta: 16px za tekst tela na mobilnom - Raspored u jednoj koloni koji se prirodno slaže - Dugmad za akciju pune širine na mobilnom - Dovoljan razmak između elemenata koji se mogu kliknuti ## Checklista za dizajn biltena Pre slanja biltena, verifikujte: **Raspored:** - Raspored u jednoj koloni ili pravilno responsivna više kolona - Širina sadržaja je 600px ili manje - Jasna vizuelna hijerarhija od zaglavlja do podnožja - Sekcije su jasno odvojene **Tipografija:** - Tekst tela je 16px ili veći - Visina linije je 1,4-1,6 - Naslovi stvaraju jasnu strukturu sadržaja - Tekst linka je opisni (ne “klikni ovde”) **Slike:** - Sve slike imaju alt tekst - Slike su optimizovane za veličinu datoteke - Bilten je čitljiv bez slika - Retina slike su dostupne za ekrane visoke rezolucije **Mobilni:** - Testirano na iPhone-u i Androidu - Dugmad za akciju su pune širine na mobilnom - Veličine fonta su čitljive na malim ekranima - Ciljna površina dodira je minimalno 44px **Pristupačnost:** - Kontrast boja ispunjava omjer 4,5:1 - Sadržaj je strukturisan s pravilnim naslovima - Nijedna informacija nije preneta samo bojom **Brend:** - Boje odgovaraju paleti brenda - Logo je ispravno dimenzioniran i pozicioniran - Ton i glas su konzistentni s brendom - Podnožje uključuje sve zahtevane pravne elemente ## Razvijanje dizajna biltena Dizajn biltena nije jednokratan projekat. Razvijajte dizajn na osnovu podataka o performansama i povratnih informacija pretplatnika: - **Pratite dubinu skrolovanja:** Da li čitaoci dolaze do dna biltena? - **Pratite karte klikova:** Koje sekcije dobijaju najviše klikova? - **Anketirajte pretplatnike:** Godišnje pitajte o dizajnerskim preferencijama - **A/B testirajte rasporede:** Poredite rasporede s karticama vs. linearni, pozicioniranje slika i stilove akcijskih poziva Najbolji dizajni biltena su nevidljivi. Pretplatnici ne primećuju dizajn, primećuju sadržaj. To znači da dizajn savršeno radi posao: uklanja trenje, usmerava pažnju i čini iskustvo čitanja beznaporno. Počnite jednostavno, ostanite dosledni i usavršujte se na osnovu podataka. Dizajn biltena treba da se razvija s publikom, a ne pre nje. ## Često Postavljana Pitanja **Šta čini dobar dizajn biltena?** Dobar dizajn biltena koristi jasnu vizuelnu hijerarhiju, konzistentan brending, čitljivu tipografiju (minimum 16px), raspored u jednoj koloni za kompatibilnost s mobilnim uređajima i strateško korišćenje belog prostora. Vodi pogled čitaoca od naslova do sadržaja do poziva na akciju. **Da li bilteni treba da budu pretežno tekst ili slike?** Idealna ravnoteža zavisi od vrste sadržaja, ali većina biltena funkcioniše Najbolje s omjerom teksta prema slikama 60/40. Dizajni fokusirani na tekst osiguravaju čitljivost kada su slike blokirane i poboljšavaju isporučivost. Koristite slike za podršku sadržaju, a ne kao zamenu za njega. **Koji je Najbolji raspored biltena?** Raspored u jednoj koloni je najefikasniji za biltene jer funkcioniše na svim uređajima, lako se skenira i usmerava pažnju linearnim tokom. Koristite jasne razdjelnike sekcija i konzistentno formatiranje za organizovanje sadržaja unutar jedne kolone. ## Povezani članci ### [Priručnik za dizajn imejla: raspored, mobilni prikaz, pristupačnost i provera šablona (2026)](https://tajo.io/sr/blog/email-design-best-practices/) 8\. mar 2026. · 11 min čitanja 4,5:1 običan tekst ### [7 Najboljih Alata za Dizajn Email-ova](https://tajo.io/sr/blog/the-7-best-email-design-tools/) 15\. jan 2025. · 6 min čitanja Samostalni alat za dizajn → Platforma za slanje ### [Besplatni šabloni za newsletter: 15 najboljih dizajna za svaku industriju](https://tajo.io/sr/blog/free-newsletter-templates/) 26\. mar 2026. · 9 min čitanja 7 odeljaka