Bültenler

Bülten Tasarımı: Etkileyici E-posta Düzenleri İçin En İyi Uygulamalar

Düzen en iyi uygulamaları, tipografi ipuçları ve görsel stratejilerle bülten tasarımında ustalaşın. Profesyonel görünen ve etkileşim sağlayan e-posta bültenleri oluşturun.

Set Noa
Set Noa
Güncellendi
0 ziyaret · 7 gün
newsletter design
Bülten Tasarımı?

Bülten tasarımı okunabilirliği, mobil duyarlılığı ve görsel tutarlılığı önceliklendirmelidir. Bu rehber, abonelerin okumak isteyeceği bültenler oluşturmak için düzen stratejilerini, tipografiyi, renk kullanımını, görsel optimizasyonunu ve tasarım araçlarını kapsar.

Daha fazla bilgi

Bülten tasarımı, abonelerin içeriğini okuyup okumayacağını ya da silip silmeyeceğini belirleyen görünmez bir mimaridir. İyi tasarlanmış bir bülten, gözü başlıktan içeriğe ve eyleme doğal biçimde yönlendirir. Kötü tasarlanmış bir bülten ise içeriğin ne kadar değerli olduğundan bağımsız olarak okuyucuları uzaklaştıran görsel bir kaos yaratır.

İyi haber şu ki etkili bülten tasarımı için profesyonel bir tasarımcıya gerek yok. Birkaç temel ilkeyi anlayıp tutarlı biçimde uygulamak yeterli. Bu rehber, bültenleri ilgi çekici ve okunabilir kılan düzen stratejilerini, tipografi kurallarını ve görsel teknikleri ele alıyor.

Dört şablon, çalışır hâlde

Bu bölümün altındaki her şey düzen hakkında bir iddia ve düzen hakkındaki iddialar ucuzdur. İşte bu yüzden dört bülten, çalışır hâlde.

Her biri gerçek bir genişlikteki çerçevede duruyor ve kendi HTML'ini gösteriyor. Genişliği 375 px'e indirin, hangi sütunların alt alta dizildiğini ve hangilerinin direndiğini görün. Paneller bu sayfayı okuduğunuz temayı izler: koyu modda her şablonun gerçek koyu bloğunu görürsünüz, bir yaklaşımını değil. Kaynak kod her panelin altında.

Tajo şablonları

Dört düzen, çalışır hâlde

Aşağıdaki her panel, şablonun kendi gerçek e-posta HTML'i; gerçek bir genişlikteki çerçevede duruyor. Genişliği 375 px'e indirin ve sütunların nasıl alt alta dizildiğini izleyin.

Temanızı izler — diğerini görmek için üst çubuktan değiştirin.

The Letter şablonunun HTML'ini oku 6 KB, derleme adımı yok 
<!DOCTYPE html>
<html lang="tr" 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;">Not uygulamanızda sakladığınız alıntı, içerik takviminizden daha çok çalışıyor.</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="Meridian Press başlığı: çapraz bir bantla kesilen eşmerkezli mavi yaylar" 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 · Sayı 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;">Arşiv ürünün kendisi</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Üç hafta önce 2019'da yazdığım bir metni aradım ve bulamadım. Ne sitede, ne dışa aktarmada, ne de platformun kendi aramasında. Bin iki yüz sayı ve çalışan tek dizin benim hafızamdı.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Altı yıl bülten çıkarmanın kimsenin anlatmadığı kısmı bu. Göndermek kolay. Saklamak değil.</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;">Yayımladığınız her şey bir yatırımdır. Çekimi neredeyse kimse kurmuyor.</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;">Bu yüzden bu hafta eski sayıları gerçek bir arşive dönüştürdüm: etiketler, tam metin arama ve kalıcı adreslerle. Dokuz gün sürdü. Abone sayısı kıpırdamadı. Sitede geçirilen süre üçe katlandı.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Hepsi aşağıda, işe yaramayan kısımlar dâhil.</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;">Tüm sayıyı oku &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;">Her perşembe elle yazılır. Yanıtlayın, okuyorum.</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;">Abonelikten çık</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Tarayıcıda görüntüle</a></p>
      </td></tr>

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

Bunlar bizim. Bu yazı için tasarladık; görseller dâhil — onları bu sayfayla aynı depoda yaşayan deterministik bir geometri betiği üretiyor. Ne stok fotoğraf var, ne de başkasının şablon galerisinden ekran görüntüsü. Bu ayrım kulağa geldiğinden ağır basar: kendini başkalarının e-postalarıyla resimleyen bir e-posta tasarım rehberi, her söylediğine inanmanızı istiyor demektir.

Dört şablon dört üslup değildir. Dört farklı işe verilmiş dört yanıttır:

  • The Letter, tüm değeri metin olan bir yazar için. Tek görsel, 88 px boşluklar, düğme yerine metin bağlantısı. Kişisel bir mektuptaki düğme reklam gibi okunur.
  • The Digest, göz gezdirilen bir derleme için. Numaralı satırlar, her başlıktan önce okuma süresi ve altıya bölünmüş değil, en altta tek bir eylem çağrısı.
  • The Storefront, bir çıkış için. Görselle başlamanın doğru olduğu tek düzen bu ve yine de görsel yüklenmese de çalışacak biçimde kurulmuş.
  • The Brief, sayılar için. Her şeyin üstünde üç metrik ve PNG yerine tablo hücrelerinden yapılmış bir çubuk grafik.

Ortak yanları, kopyalanmaya değer olan kısım. Tek bir 600 px sütun. En az 16 px gövde metni. Bir vurgu rengi, gerisi mürekkep. Her görselin alternatif metni var ve her düzen görseller engellendiğinde de anlamını koruyor. Bildirilmiş bir renk şeması ve açıkça yazılmış bir koyu blok; çünkü koyu bir istemcide varsayılan davranış, e-postanızın markanızı hiç görmemiş bir algoritma tarafından ters çevrilmesidir.

Bunlardan birini ilk denemede yanlış yaptık ve asıl anılmaya değer olan o. The Digest başlangıçta haber satırlarını mobilde alt alta diziyordu — her duyarlı e-posta rehberinin önerdiği şey. Dizilme, 112 px'lik üç küçük görseli 335 px yüksekliğinde tam genişlikte üç dekoratif görsele çeviriyordu ve altı konuluk bir derleme kaydırmaya dönüşüyordu. O satır artık setteki alt alta dizilmeyen tek iki sütunlu düzen. Dizilmeyle ilgili kurallar içerik sütunlarıyla ilgilidir. Küçük görsel bir içerik sütunu değildir.

Bunlardan birini Brevo'da kurmak

Yukarıdaki dört şablonun hiçbiri kurulmak için geliştirici gerektirmiyor. Aşağıdaki her ekran, aynı şablonun Brevo'nun sürükle bırak tuvalindeki hâli; tek bir blok seçili.

Ana düğmeyle başlayalım; en çok ayara sahip blok o:

Brevo

Tuvaldeki The Storefront

Brevo'nun sürükle bırak e-posta düzenleyicisi: tuvalde The Storefront şablonu, seçili ana düğme ve sağ panelde etiket, bağlantı, renk, köşe yarıçapı ve iç boşluk ayarları
Sol sütun: sürüklediğiniz bloklar. Sağ sütun: seçili blokla ilgili her şey. Tuvalde 680 px'lik bir istemci içinde 600 px'lik bir e-posta var; mobil düzenin görünmemesinin nedeni bu — tam 600 px'te şablonun kendi kırılma noktası devreye girer ve anahtar Masaüstü derken siz telefon sürümünü düzenliyor olurdunuz.

Sol sütundaki her blok, yukarıdaki şablonlarda bir şeye karşılık geliyor. Yapı için Metin, Görsel, Düğme, Ayırıcı, Boşluk. Mağaza satırı için Ürün. Düzenleyicinin modellemediği her şey için HTML — The Brief'in grafiği de böyle kurulmuş:

Brevo

İçinde hiç görsel olmayan bir grafik

Brevo e-posta düzenleyicisi: tuvalde The Brief şablonu, seçili çubuk grafik ve sağ panelde grafiğin görselsiz tablo hücrelerinden yapıldığını gösteren bilgiler
PNG olarak dışa aktarılan bir grafik, sayılarını görsel engellemeye, koyu mod ters çevirmesine ve her ekran okuyucusuna kaptırır. Renkli bir hücre ve metin etiketi taşıyan dört tablo satırı hiçbirini kaybetmez ve hiçbir ağırlık getirmez.

Tipografi de aynı şekilde çalışıyor. Bir metin bloğu seçin; panel size yazı tipini, punto boyutunu, satır yüksekliğini ve iç boşluğu verir — The Letter'ın ihtiyaç duyduğu tüm takım budur:

Brevo

Alıntı, kenarında çizgi olan bir metin bloğudur

Brevo e-posta düzenleyicisi: tuvalde The Letter şablonu ve seçili alıntı; 30px satır yüksekliğinde 19px Georgia, italik, 3px sol çizgiyle
Özel bir bileşen yok. Bir metin bloğu, vurgu renginde 3 px'lik sol çizgi ve 20 px iç boşluk. İyi bir bültende özel tasarım gibi görünen şeyin çoğu, iki özelliği değiştirilmiş standart bir bloktur.

Görsellerin de kendi paneli var; alternatif metin ayar listesinin sonunda değil, en üstte duruyor:

Brevo

Alternatif metin bir alandır, sonradan akla gelen bir şey değil

Brevo e-posta düzenleyicisi: tuvalde The Digest ve seçili bir haber görseli; alternatif metni, 112px görüntüleme boyutu, 480px kaynağı ve 17 KB ağırlığı görünüyor
Görüntüleme boyutu 112 px, kaynak 480 px — küçük görseli retina ekranda net tutan şey bu 2× oranı. Alternatif metin ilk sırada, çünkü abonelerin çoğunun gerçekten alacağı kısım görselin o kısmı.

Tajo kullanan şirketler için aynı bölümler dinamik olarak doldurulabilir: abone davranışına göre ürün önerileri ve kişiselleştirilmiş içerik, her gönderimde elle seçilmek yerine burada dizdiğiniz blokların içine işlenir.

Bülten Tasarımının Temelleri

Tasarım İçeriğe Hizmet Eder

Bülten tasarımındaki en önemli ilke şudur: tasarım, içeriği tüketmeyi daha kolay hale getirmeli, asla daha zor değil. Her tasarım kararı şu soruyu yanıtlamalıdır: Bu, okuyucumun aradığı bilgiyi bulmasına ve özümsemesine yardımcı oluyor mu?

İyi bülten tasarımının işaretleri:

  • Okuyucular bültenin tamamını 10-15 saniyede tarayabilir
  • En önemli içerik hemen göze çarpar
  • Her bölümün net bir başlangıcı ve sonu vardır
  • Harekete geçirici mesaj, rahatsız edici olmadan öne çıkar
  • Bülten, tesadüfi değil kasıtlı görünür

Kötü bülten tasarımının işaretleri:

  • Okuyucular ana içeriği hızlıca bulamaz
  • Birden fazla tasarım stili dikkat çekmeye çalışır
  • Metin hiçbir cihazda okunması zordur
  • Düzen mobil ekranlarda bozulur
  • Görsel ara olmayan yoğun metin blokları

Görsel Hiyerarşi İlkesi

Görsel hiyerarşi, okuyucuların bilgiyi hangi sırayla işlediğini kontrol eder. Bültenlerde hiyerarşiyi şunlarla oluştur:

Hiyerarşi SeviyesiÖğeTasarım Yaklaşımı
BirincilAna başlıkEn büyük font, kalın, üst konum
İkincilBölüm başlıklarıOrta font, zıt renk
ÜçüncülGövde içeriğiStandart font, okunabilir boyut
DestekleyiciMeta veri (tarihler, yazarlar)Küçük font, açık renk
EylemCTA butonları/bağlantılarıZıt renk, buton stili

Düzen Stratejileri

Tek Sütunlu Düzen

Tek sütunlu düzen, bültenler için altın standarttır ve çoğu yayıncı için önerilen yaklaşımdır.

Avantajları:

  • Her cihazda ve ekran boyutunda mükemmel görüntülenir
  • Yukarıdan aşağıya doğal bir okuma akışı oluşturur
  • Tasarım kararlarını basitleştirir
  • E-posta istemcilerinde görüntüleme sorunlarını azaltır
  • Mobilde insanların okuma biçimiyle (dikey kaydırma) uyumludur

En uygun: Metin odaklı bültenler, kişisel bültenler, eğitim içerikleri, uzun analizler

Yapı:

  1. Başlık (logo, sayı numarası, tarih)
  2. Giriş veya kişisel not
  3. Ana içerik bölümü
  4. İkincil içerik bölümleri (ayırıcılarla ayrılmış)
  5. CTA veya etkileşim daveti
  6. Alt bilgi

Kart Tabanlı Düzen

İçeriği her biri kendi kenarlığı, arka planı veya gölgesi olan ayrı görsel kartlar halinde düzenle.

Avantajları:

  • Net içerik ayrımı
  • Küratörlü içerik ve bağlantı derlemeleri için iyi çalışır
  • Her kartın kendi görseli ve CTA’sı olabilir
  • Bunaltıcı olmadan görsel açıdan ilgi çekici

En uygun: İçerik derlemeleri, küratörlü bağlantılar, ürün vitrini, çok konulu bültenler

Kartlar için tasarım ipuçları:

  • Tutarlı kart boyutları ve aralıklar kullan
  • Satır başına en fazla 2 kart koy (mobilde 1’e indir)
  • Kartları tanımlamak için hafif bir kenarlık veya arka plan rengi ekle
  • Her kartın içinde tutarlı dolgu boşluğunu koru

Hibrit Düzen

Tamamlayıcı içerik için birincil içerik sütununu daha dar bir kenar çubuğuyla birleştir.

Avantajları:

  • E-posta uzunluğunu artırmadan daha fazla içerik sığdırır
  • Hem birincil hem ikincil içerik barındıran bültenler için uygundur
  • Geleneksel yayınlardan tanıdık bir format

Sınırlılıkları:

  • Mobilde tek sütuna daraltılmalıdır
  • Oluşturması ve sürdürmesi daha karmaşıktır
  • İyi organize edilmezse karmaşık hissettirilebilir

En uygun: Şirket bültenleri, medya tarzı yayınlar, içerik yoğun formatlar

Bültenler İçin Tipografi

Tipografi, metin ağırlıklı herhangi bir e-postadaki en etkili tasarım öğesidir. Fontları doğru seç ve geri kalanı yerli yerine oturur.

Font Seçimi

E-posta istemcilerinin sınırlı font desteği vardır. Birincil seçim olarak web güvenli fontları kullan:

FontStilEn Uygun
ArialTemiz, modern sans-serifGenel amaçlı, iş
HelveticaRafine sans-serifPremium markalar
GeorgiaZarif serifEditoryal, uzun form
Times New RomanKlasik serifGeleneksel, resmi
VerdanaGeniş, okunabilir sans-serifKüçük metin, mobil
Trebuchet MSModern sans-serifYaratıcı, gündelik

Web fontları: Open Sans veya Lato gibi web fontlarını web güvenli yedeklerle belirtebilirsin. Apple Mail, iOS Mail ve bazı Android istemcilerinde görüntülenirler ancak Outlook ve eski Gmail’de güvenli alternatiflere geri dönerler.

Font Boyutlandırma

ÖğeMinimum BoyutÖnerilen Boyut
Gövde metni14px16px
Bölüm başlıkları20px22-24px
Ana başlık24px28-32px
Altyazılar/meta veri12px13-14px
CTA buton metni14px16px
Ön başlık metni12px14px

Satır Aralığı ve Okunabilirlik

  • Satır yüksekliği: Gövde metni için 1,4-1,6 (16px font boyutunda 24-26px)
  • Paragraf aralığı: Paragraflar arası 16-24px
  • Satır uzunluğu: Satır başına 50-75 karakter (göz yorgunluğunu önler)
  • Harf aralığı: Gövde metni için varsayılan, küçük metin için hafifçe artırılmış

Metin Biçimlendirme

  • Kalın: Anahtar ifadeler ve vurgu için kullan, tüm paragraflar için değil
  • İtalik: Alıntılar, başlıklar veya ince vurgu için tutumlu kullan
  • Altı çizili: Yalnızca bağlantılar için ayır (altı çizili bağlantı olmayan metin okuyucuları karıştırır)
  • TÜMÜ BÜYÜK HARF: Yalnızca kısa etiketler veya butonlar için kullan, asla gövde metni için değil
  • Renk: Bağlantılar için tek bir vurgu rengi kullan, gövde metnini koyu gri (#333) veya siyaha yakın tut

Renk Stratejisi

Bülten Renk Paleti Oluşturma

Bülteni 3-4 renkle sınırla:

Renk RolüKullanımÖrnek
BirincilBaşlıklar, CTA butonları, vurgularMarka mavisi
MetinGövde metni, alt başlıklarKoyu gri (#333333)
Arka planE-posta gövdesiBeyaz (#FFFFFF) veya açık gri (#F5F5F5)
VurguBağlantılar, öne çıkanlar, ikincil CTA’larMarkanın ikincil rengi

Renk Erişilebilirliği

  • Metin ve arka plan arasında en az 4,5:1 kontrast oranını koru
  • Bilgiyi iletmek için yalnızca renge güvenme
  • Paletini renk körlüğü simülatörleriyle test et
  • Bağlantıların normal metinden ayırt edilebilir olduğundan emin ol (yalnızca renkle değil, altı çizili olarak da göster)

Karanlık Mod Değerlendirmeleri

Birçok e-posta istemcisi artık varsayılan olarak karanlık modu kullanıyor. Tasarımını karanlık mod göz önünde bulundurarak yap:

  • Saf beyaz (#FFFFFF) arka planlardan kaçın, hafif kırık beyaz (#FAFAFA) kullan
  • Karanlık öğeler içeren şeffaf PNG’ler kullanma (karanlık modda görünmez olurlar)
  • Logoları hem açık hem koyu arka planlarda test et
  • Karanlık mod renk şeması desteği için meta etiketleri ekle
  • Karanlık görsellerin görünür kalması için kenarlıklar veya dış çizgiler kullan

Bültenlerde Görsel Kullanımı

Görsel Ne Zaman Kullanılır

Görseller yalnızca metnin tek başına sağlayamayacağı değeri eklemeli:

  • Ürün fotoğrafçılığı: Ürünleri bağlam içinde göster
  • Veri görselleştirme: Grafikler, çizelgeler ve infografikler
  • Ekran görüntüleri: Araçları, özellikleri veya süreçleri göster
  • Vesikalık fotoğraflar: Yazarlar veya ekiple kişisel bağ kur
  • İllüstrasyonlar: Marka kişiliğini ve tonunu destekle

Görsel Optimizasyonu

ÖzellikÖneri
FormatFotoğraflar için JPEG, grafikler için PNG
GenişlikStandart 600px, retina için 1200px
Dosya boyutuGörsel başına 200KB’nin altında
Toplam e-posta boyutuGörseller hariç 100KB’nin altında
Alternatif metinAçıklayıcı, 125 karakter veya daha az
En boy oranıHero görseller için 2:1, küçük resimler için 1:1

Görsel-Metin Oranı

İstenmeyen posta filtrelerinden kaçınmak ve okunabilirliği sağlamak için sağlıklı bir metin-görsel oranını koru:

  • 60:40 metin-görsel önerilen orandır
  • Ağırlıklı olarak görsellerden oluşan e-postalar (yalnızca görsel içerenler) daha yüksek istenmeyen posta oranına sahiptir
  • Yalnızca görsellere değil, her zaman önemli bilgilerin metin sürümlerini ekle
  • Görsellerin engellendiği istemciler için tasarla: bültenin görselsiz de anlamlı olmalı

Mobil Öncelikli Bülten Tasarımı

Mobil Tasarım Gereksinimleri

Bülten açılışlarının %60’ından fazlası mobil cihazlarda gerçekleştiğinden, mobil tasarım artık seçenek değil zorunluluktur.

Mobil düzen kuralları:

  • Maksimum içerik genişliği: 600px (tüm cihazlarda iyi görüntülenir)
  • Minimum dokunma hedefi: Butonlar ve bağlantılar için 44x44 piksel
  • Minimum font boyutu: Mobilde gövde metni için 16px
  • Doğal olarak yığılan tek sütunlu düzen
  • Mobilde tam genişlikte CTA butonları
  • Tıklanabilir öğeler arasında yeterli boşluk (yanlışlıkla tıklamayı önle)

Duyarlı Tasarım Teknikleri

TeknikMasaüstüMobil
Çok sütunlu bölümlerYan yanaDikey yığılmış
Görsellerİçerik içinde boyutlandırılmışTam genişlik, ölçeklendirilmiş
Gezinme bağlantılarıYatayYığılmış veya gizlenmiş
CTA butonlarıSatır içi veya sağa hizalıTam genişlik
Font boyutlarıStandartHafifçe büyük
Dolgu20-40px15-20px

Mobil Görüntülemeyi Test Etme

Bülten tasarımını şunlarda test et:

  • iPhone (Safari/Mail)
  • Android (Gmail uygulaması)
  • iPad
  • Gmail (web)
  • Outlook (masaüstü ve web)
  • Apple Mail (masaüstü)

90’dan fazla e-posta istemcisinde otomatik görüntüleme testleri için Litmus veya Email on Acid gibi araçları kullan.

Bülten Bölümleri Tasarlama

Başlık

Başlığın kimliği belirler ve beklentileri oluşturur:

  • Logo: Uygun boyutlandırılmış (çok büyük değil, genellikle 150-200px genişliğinde)
  • Sayı tanımlayıcısı: Sayı numarası, tarih veya baskı adı
  • Çevrimiçi görüntüle bağlantısı: Görüntüleme sorunu yaşayan aboneler için
  • Kompakt tut: Başlık, içeriği görünümün dışına itMemeli

Bölüm Ayırıcıları

İçerik bölümleri arasındaki net ayırıcılar okuyucuların taramasına yardımcı olur:

  • Yatay çizgiler: Nötr renkte basit, ince çizgiler (1-2px)
  • Arka plan rengi değişiklikleri: Beyaz ve açık gri bölümler arasında dönüşümlü kullan
  • Ekstra boşluk: Bölümler arasında 30-40px dolgu
  • Bölüm başlıkları: Tutarlı stilize edilmiş kalın, büyük metin

Alt Bilgi

İyi tasarlanmış bir alt bilgi deneyimi tamamlar:

  • Abonelikten çıkma bağlantısı (yasal zorunluluk, kolayca bulunabilir hale getir)
  • Sosyal medya bağlantıları
  • Fiziksel posta adresi (CAN-SPAM gereği)
  • Tarayıcıda görüntüle bağlantısı
  • Arkadaşına ilet seçeneği
  • Kısa marka sloganı veya misyon ifadesi

Bülten Tasarım Araçları

Platform Editörleri

Çoğu bülten platformu yerleşik tasarım editörleri sunar:

PlatformEditör TürüTasarım EsnekliğiŞablon Kütüphanesi
BrevoSürükle-bırakYüksek40’tan fazla şablon
MailchimpSürükle-bırakYüksek100’den fazla şablon
ConvertKitBasitleştirilmiş editörOrtaSınırlı
SubstackMetin odaklıDüşükMinimal

Brevo’nun sürükle-bırak editörü, kodlama bilgisi olmadan profesyonel bülten tasarımını erişilebilir kılar. Tajo kullanan işletmeler için, abone davranışına göre bülten bölümlerini ürün önerileri ve kişiselleştirilmiş içerikle dinamik olarak doldurabilirsin.

Tasarım Kaynakları

  • Canva: Bülten başlık görselleri, sosyal grafikler ve illüstrasyonlar oluştur
  • Unsplash/Pexels: Ücretsiz stok fotoğrafçılık
  • Really Good Emails: İyi tasarlanmış e-postaların ilham galerisi
  • MJML: Özel tasarımlar için açık kaynak e-posta çerçevesi
  • Figma: E-posta eklentisi dışa aktarımlarıyla özel bülten şablonları tasarla

Bülten Tasarımı Kontrol Listesi

Herhangi bir bülten göndermeden önce şunları doğrula:

Düzen:

  • Tek sütunlu düzen veya düzgün duyarlı çok sütunlu
  • İçerik genişliği 600px veya daha az
  • Başlıktan alt bilgiye net görsel hiyerarşi
  • Bölümler açıkça ayrılmış

Tipografi:

  • Gövde metni 16px veya daha büyük
  • Satır yüksekliği 1,4-1,6
  • Başlıklar net içerik yapısı oluşturuyor
  • Bağlantı metni açıklayıcı (“buraya tıkla” değil)

Görseller:

  • Tüm görsellerin alternatif metni var
  • Görseller dosya boyutu için optimize edilmiş
  • Bülten görselsiz okunabilir
  • Yüksek DPI ekranlar için retina görseller sağlanmış

Mobil:

  • iPhone ve Android’de test edildi
  • CTA butonları mobilde tam genişlikte
  • Font boyutları küçük ekranlarda okunabilir
  • Dokunma hedefleri minimum 44px

Erişilebilirlik:

  • Renk kontrastı 4,5:1 oranını karşılıyor
  • İçerik uygun başlıklarla yapılandırılmış
  • Yalnızca renkle iletilen bilgi yok
  • Ekran okuyucuyla uyumlu

Marka:

  • Renkler marka paletiyle eşleşiyor
  • Logo doğru boyutlandırılmış ve konumlandırılmış
  • Ton ve ses markaya tutarlı
  • Alt bilgi tüm gerekli yasal öğeleri içeriyor

Bülten Tasarımını Geliştirme

Bülten tasarımı tek seferlik bir proje değildir. Tasarımını performans verilerine ve abone geri bildirimlerine göre geliştir:

  • Kaydırma derinliğini takip et: Okuyucular bültenin sonuna kadar ulaşıyor mu?
  • Tıklama haritalarını izle: Hangi bölümler en fazla tıklamayı alıyor? Benzer içerikleri öne çıkar.
  • Abonelere anket yap: Tasarım tercihleri hakkında yılda bir sor
  • A/B düzenleri test et: Kart ve doğrusal düzenler, görsel yerleşimi ve CTA stilleri karşılaştır
  • Rakipleri incele: Kendi alanındaki başarılı bültenlerde neyin işe yaradığını araştır

En iyi bülten tasarımları görünmezdir. Aboneler tasarımı fark etmez, içeriği fark eder. Bu da tasarımın işini mükemmel yaptığı anlamına gelir: sürtünmeyi kaldırıyor, dikkati yönlendiriyor ve okuma deneyimini zahmetsiz hale getiriyor.

Basit başla, tutarlı kal ve verilere göre iyileştir. Bülten tasarımın izleyicilerinle birlikte evrilmeli, onların önüne geçmemeli.

Sık Sorulan Sorular

İyi bir bülten tasarımını ne yapar?
İyi bülten tasarımı net bir görsel hiyerarşi, tutarlı markalaşma, okunabilir tipografi (en az 16 piksel), mobil uyumluluk için tek sütunlu düzen ve boş alanın stratejik kullanımını içerir. Okuyucunun gözünü başlıktan içeriğe ve harekete geçirici mesaja yönlendirir.
Bültenler metin ağırlıklı mı yoksa görsel ağırlıklı mı olmalı?
İdeal denge içerik türünüze bağlıdır, ancak çoğu bülten 60/40 metin-görsel oranıyla en iyi performansı gösterir. Metin öncelikli tasarımlar, görseller engellendiğinde okunabilirliği sağlar ve teslim edilebilirliği iyileştirir. Görselleri içeriği desteklemek için kullanın, yerine koymak için değil.
En iyi bülten düzeni nedir?
Tek sütunlu düzen, tüm cihazlarda çalıştığı, taranması kolay olduğu ve dikkati doğrusal bir akışta yönlendirdiği için bültenler için en etkili olanıdır. Tek sütun içinde içeriği düzenlemek için net bölüm ayırıcıları ve tutarlı biçimlendirme kullanın.
Bu makaleyi paylaş:
Tüm makalelere dön

Erken erişim talep edin

Adınızı ve e-posta adresinizi veya telefon numaranızı paylaşın. Tajo erişim ayrıntıları için sizinle iletişime geçeceğiz.

otomatik algılama
Brevo'yu Edinin