Buletin

Desain Newsletter: Praktik Terbaik untuk Tata Letak Email yang Menarik

Kuasai desain newsletter dengan praktik terbaik tata letak, tips tipografi, dan strategi visual. Buat newsletter email yang terlihat profesional dan mendorong keterlibatan.

Set Noa
Set Noa
Diperbarui
0 kunjungan · 7 hari
newsletter design
Desain Newsletter?

Desain newsletter harus memprioritaskan keterbacaan, responsivitas mobile, dan konsistensi visual. Panduan ini mencakup strategi tata letak, tipografi, penggunaan warna, optimasi gambar, dan alat desain untuk membuat newsletter yang ingin dibaca pelanggan.

Pelajari selengkapnya

Desain newsletter adalah arsitektur tak terlihat yang menentukan apakah pelanggan membaca konten Anda atau menghapusnya. Newsletter yang dirancang dengan baik memandu mata secara alami dari judul ke konten ke tindakan. Yang dirancang buruk menciptakan kekacauan visual yang mengusir pembaca, terlepas dari seberapa berharga kontennya.

Kabar baiknya: desain newsletter yang efektif tidak memerlukan desainer profesional. Ini memerlukan pemahaman beberapa prinsip inti dan menerapkannya secara konsisten. Panduan ini mencakup strategi tata letak, aturan tipografi, dan teknik visual yang membuat newsletter menarik dan mudah dibaca.

Empat templat yang berjalan

Semua yang ada di bawah bagian ini adalah klaim tentang tata letak, dan klaim tentang tata letak itu murah. Maka inilah empat buletin, berjalan.

Masing-masing duduk dalam bingkai berlebar sungguhan dan menampilkan HTML-nya sendiri. Tarik lebarnya ke 375 px dan lihat kolom mana yang menumpuk dan mana yang menolak. Panel-panelnya mengikuti tema yang Anda pakai membaca halaman ini: dalam mode gelap Anda melihat blok gelap asli tiap templat, bukan pendekatannya. Kode sumbernya ada di bawah tiap panel.

Templat Tajo

Empat tata letak yang berjalan

Setiap panel di bawah adalah HTML email asli dari templat, dalam bingkai berlebar sungguhan. Tarik lebarnya ke 375 px dan lihat kolom-kolomnya menumpuk.

Mengikuti tema Anda — ganti di bagian atas untuk melihat yang satunya.

Baca HTML The Letter 6 KB, tanpa langkah build 
<!DOCTYPE html>
<html lang="in" 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;">Kutipan yang Anda simpan di aplikasi catatan bekerja lebih keras daripada kalender konten Anda.</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="Kepala surat Meridian Press: busur biru sepusat yang dipotong pita diagonal" 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 · Edisi 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;">Arsip itulah produknya</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Tiga minggu lalu saya mencari tulisan yang saya buat pada 2019 dan tidak menemukannya. Tidak di situs, tidak di hasil ekspor, tidak di pencarian platformnya sendiri. Seribu dua ratus edisi, dan satu-satunya indeks yang berfungsi adalah ingatan saya.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Itulah bagian yang tak seorang pun ceritakan tentang enam tahun menjalankan buletin. Mengirim itu mudah. Menyimpan tidak.</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;">Semua yang Anda terbitkan adalah setoran. Nyaris tak ada yang membangun penarikannya.</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;">Maka minggu ini saya membangun ulang arsip lama menjadi arsip sungguhan: dengan tag, pencarian teks penuh, dan alamat permanen. Butuh sembilan hari. Jumlah pelanggan tidak bergerak. Waktu kunjung di situs naik tiga kali lipat.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Semuanya ada di bawah, termasuk bagian yang gagal.</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;">Baca edisi lengkapnya &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;">Ditulis tangan setiap Kamis. Balas saja, saya membacanya.</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;">Berhenti berlangganan</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Lihat di peramban</a></p>
      </td></tr>

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

Templat ini milik kami. Kami merancangnya untuk artikel ini, termasuk ilustrasinya, yang dihasilkan skrip geometri deterministik yang tinggal di repositori yang sama dengan halaman ini — tanpa foto stok dan tanpa tangkapan layar galeri templat orang lain. Perbedaan itu lebih berat daripada kedengarannya: panduan desain email yang mengilustrasikan dirinya dengan email orang lain sedang meminta Anda percaya begitu saja.

Empat templat bukan empat gaya. Ini empat jawaban untuk empat pekerjaan berbeda:

  • The Letter untuk penulis yang seluruh nilainya adalah teks. Satu gambar, margin 88 px, tautan teks alih-alih tombol. Tombol dalam surat pribadi terbaca seperti iklan.
  • The Digest untuk rangkuman yang dipindai. Baris bernomor, waktu baca sebelum tiap judul, dan satu ajakan bertindak di bagian bawah alih-alih enam.
  • The Storefront untuk peluncuran. Ini satu-satunya tata letak yang benar bila dibuka dengan gambar, dan tetap dibangun agar gambarnya boleh gagal.
  • The Brief untuk angka. Tiga metrik di atas segalanya, dan diagram batang yang dibuat dari sel tabel, bukan dari PNG.

Yang mereka bagi adalah bagian yang layak disalin. Satu kolom 600 px. Teks isi minimal 16 px. Satu warna aksen, sisanya tinta. Setiap gambar membawa teks alternatif, dan setiap tata letak tetap masuk akal saat gambar diblokir. Skema warna yang dideklarasikan plus blok gelap yang eksplisit, karena bawaan di klien gelap adalah email Anda dibalik oleh algoritme yang belum pernah melihat merek Anda.

Satu di antaranya kami buat salah pada percobaan pertama, dan justru itulah yang layak disebut. Semula The Digest menumpuk baris artikelnya di ponsel — persis seperti yang disarankan setiap panduan email responsif. Penumpukan mengubah tiga gambar kecil 112 px menjadi tiga gambar hias selebar penuh setinggi 335 px, dan rangkuman enam topik berubah jadi gulungan panjang. Baris itu kini satu-satunya tata letak dua kolom di set ini yang tidak menumpuk. Aturan soal menumpuk berbicara tentang kolom isi. Gambar kecil bukan kolom isi.

Membangun salah satunya di Brevo

Tak satu pun dari keempat templat di atas memerlukan pengembang untuk dirakit. Setiap layar di bawah adalah templat yang sama pada kanvas seret dan lepas Brevo, dengan satu blok terpilih.

Mari mulai dari tombol utama, karena itulah blok dengan paling banyak pengaturan:

Brevo

The Storefront di atas kanvas

Penyunting email seret dan lepas Brevo dengan templat The Storefront di kanvas, tombol utama terpilih, serta pengaturan label, tautan, warna, kelengkungan sudut, dan jarak dalam di panel kanan
Kolom kiri: blok yang Anda seret masuk. Kolom kanan: segala hal tentang blok yang dipilih. Kanvasnya menampilkan email 600 px di dalam klien 680 px — itu sebabnya tata letak ponsel tidak muncul: tepat pada 600 px titik putus milik templat akan aktif dan Anda akan menyunting versi ponsel padahal sakelarnya berkata Desktop.

Setiap blok di kolom kiri berpadanan dengan sesuatu di templat-templat di atas. Teks, Gambar, Tombol, Pemisah, dan Spasi untuk strukturnya. Produk untuk baris toko. HTML untuk apa pun yang tidak dimodelkan penyunting — dan begitulah diagram The Brief dibangun:

Brevo

Diagram tanpa satu gambar pun di dalamnya

Penyunting email Brevo dengan templat The Brief di kanvas, diagram batang terpilih, dan panel kanan yang menunjukkan bahwa diagram itu dibangun dari sel tabel tanpa gambar
Diagram yang diekspor sebagai PNG kehilangan angkanya karena pemblokiran gambar, karena pembalikan mode gelap, dan karena setiap pembaca layar. Empat baris tabel dengan satu sel berwarna dan satu label teks tidak kehilangan satu pun, dan bobotnya nol.

Tipografi bekerja dengan cara yang sama. Pilih satu blok teks dan panelnya memberi Anda huruf, ukuran, tinggi baris, dan jarak dalam — persis seluruh perkakas yang dibutuhkan The Letter:

Brevo

Kutipan adalah blok teks dengan garis di sisinya

Penyunting email Brevo dengan templat The Letter di kanvas dan kutipannya terpilih: Georgia 19px di atas 30px, miring, dengan garis kiri 3px
Tanpa komponen khusus. Sebuah blok teks, garis kiri 3 px dalam warna aksen, dan 20 px jarak dalam. Dalam buletin yang baik, hampir semua yang tampak seperti desain khusus sebenarnya blok standar dengan dua properti yang diubah.

Gambar pun punya panel sendiri, tempat teks alternatif berada di paling atas, bukan di ujung daftar pengaturan:

Brevo

Teks alternatif adalah sebuah bidang, bukan renungan belakangan

Penyunting email Brevo dengan The Digest di kanvas dan satu gambar kecil artikel terpilih, menampilkan teks alternatifnya, ukuran tampil 112px, sumber 480px, dan bobot 17 KB
Ukuran tampil 112 px, sumber 480 px — rasio 2× itulah yang menjaga gambar kecil tetap tajam di layar retina. Teks alternatif diletakkan pertama karena itulah bagian gambar yang benar-benar akan diterima sebagian besar pelanggan.

Bagi bisnis yang memakai Tajo, bagian-bagian yang sama bisa diisi secara dinamis: rekomendasi produk dan konten personal yang digerakkan perilaku pelanggan, dirender ke dalam blok yang Anda susun di sini alih-alih dipilih manual tiap kali mengirim.

Dasar-Dasar Desain Newsletter

Desain Melayani Konten

Prinsip terpenting dalam desain newsletter: desain harus membuat konten lebih mudah dikonsumsi, bukan lebih sulit. Setiap keputusan desain harus menjawab pertanyaan: apakah ini membantu pembaca menemukan dan menyerap informasi yang mereka cari?

Tanda-tanda desain newsletter yang baik:

  • Pembaca dapat memindai seluruh newsletter dalam 10-15 detik
  • Konten terpenting langsung terlihat
  • Setiap bagian memiliki awal dan akhir yang jelas
  • Call-to-action menonjol tanpa terkesan berlebihan
  • Newsletter terlihat disengaja, bukan kebetulan

Tanda-tanda desain newsletter yang buruk:

  • Pembaca tidak dapat menemukan konten utama dengan cepat
  • Beberapa gaya desain bersaing untuk mendapatkan perhatian
  • Teks sulit dibaca di perangkat apa pun
  • Tata letak rusak di layar mobile
  • Blok teks padat tanpa jeda visual

Prinsip Hierarki Visual

Hierarki visual mengontrol urutan pembaca memproses informasi. Dalam newsletter, bangun hierarki melalui:

Tingkat HierarkiElemenPerlakuan Desain
UtamaJudul utamaFont terbesar, tebal, posisi atas
SekunderHeader bagianFont sedang, warna kontras
TersierKonten isiFont standar, ukuran mudah dibaca
PendukungMetadata (tanggal, penulis)Font lebih kecil, warna lebih terang
TindakanTombol/tautan CTAWarna kontras, gaya tombol

Strategi Tata Letak

Tata Letak Satu Kolom

Tata letak satu kolom adalah standar terbaik untuk newsletter dan pendekatan yang disarankan bagi sebagian besar penerbit.

Keunggulan:

  • Ditampilkan sempurna di setiap perangkat dan ukuran layar
  • Menciptakan aliran baca alami dari atas ke bawah
  • Menyederhanakan keputusan desain
  • Mengurangi masalah rendering di berbagai klien email
  • Sesuai dengan cara orang membaca di mobile (gulir vertikal)

Terbaik untuk: Newsletter yang berfokus pada teks, newsletter pribadi, konten edukasi, analisis panjang

Struktur:

  1. Header (logo, nomor edisi, tanggal)
  2. Pendahuluan atau catatan pribadi
  3. Bagian konten utama
  4. Bagian konten sekunder (dipisahkan oleh pembagi)
  5. CTA atau prompt keterlibatan
  6. Footer

Tata Letak Berbasis Kartu

Atur konten ke dalam kartu visual yang berbeda, masing-masing dengan batas, latar belakang, atau bayangan sendiri.

Keunggulan:

  • Pemisahan konten yang jelas
  • Bekerja dengan baik untuk konten yang dikurasi dan kumpulan tautan
  • Setiap kartu dapat memiliki gambar dan CTA sendiri
  • Menarik secara visual tanpa berlebihan

Terbaik untuk: Rangkuman konten, tautan yang dikurasi, etalase produk, newsletter multi-topik

Tips desain untuk kartu:

  • Gunakan dimensi dan jarak kartu yang konsisten
  • Maksimal 2 kartu per baris (susun menjadi 1 di mobile)
  • Sertakan batas halus atau warna latar belakang untuk mendefinisikan kartu
  • Pertahankan padding yang konsisten di dalam setiap kartu

Tata Letak Hibrida

Kombinasikan kolom konten utama dengan sidebar yang lebih sempit untuk konten tambahan.

Keunggulan:

  • Muat lebih banyak konten tanpa menambah panjang email
  • Berfungsi untuk newsletter dengan konten utama dan sekunder
  • Format yang familiar dari publikasi tradisional

Keterbatasan:

  • Harus diciutkan ke satu kolom di mobile
  • Lebih kompleks untuk dibangun dan dikelola
  • Dapat terasa berantakan jika tidak terorganisir dengan baik

Terbaik untuk: Newsletter perusahaan, publikasi bergaya media, format padat konten

Tipografi untuk Newsletter

Tipografi adalah elemen desain yang paling berdampak dalam email yang banyak teksnya. Dapatkan font yang tepat, dan segalanya akan berjalan dengan sendirinya.

Pemilihan Font

Klien email memiliki dukungan font yang terbatas. Gunakan font web-safe sebagai pilihan utama Anda:

FontGayaTerbaik Untuk
ArialSans-serif bersih dan modernTujuan umum, bisnis
HelveticaSans-serif halusBrand premium
GeorgiaSerif eleganEditorial, panjang
Times New RomanSerif klasikTradisional, formal
VerdanaSans-serif lebar dan mudah dibacaTeks kecil, mobile
Trebuchet MSSans-serif modernKreatif, kasual

Web font: Anda dapat menentukan web font (seperti Open Sans atau Lato) dengan fallback web-safe. Font tersebut dirender di Apple Mail, iOS Mail, dan beberapa klien Android, tetapi kembali ke alternatif aman di Outlook dan Gmail lama.

Ukuran Font

ElemenUkuran MinimumUkuran yang Disarankan
Teks isi14px16px
Header bagian20px22-24px
Judul utama24px28-32px
Keterangan/metadata12px13-14px
Teks tombol CTA14px16px
Teks preheader12px14px

Jarak Baris dan Keterbacaan

  • Tinggi baris: 1,4-1,6 untuk teks isi (24-26px pada ukuran font 16px)
  • Jarak paragraf: 16-24px antar paragraf
  • Panjang baris: 50-75 karakter per baris (mencegah kelelahan mata)
  • Jarak huruf: Default untuk teks isi, sedikit ditingkatkan untuk teks kecil

Pemformatan Teks

  • Tebal: Gunakan untuk frasa kunci dan penekanan, bukan seluruh paragraf
  • Miring: Gunakan dengan hemat untuk kutipan, judul, atau penekanan halus
  • Garis bawah: Khususkan untuk tautan (teks bergaris bawah bukan tautan membingungkan pembaca)
  • SEMUA HURUF KAPITAL: Gunakan hanya untuk label pendek atau tombol, jangan pernah untuk teks isi
  • Warna: Gunakan satu warna aksen untuk tautan, pertahankan teks isi abu-abu gelap (#333) atau mendekati hitam

Strategi Warna

Membangun Palet Warna Newsletter

Batasi newsletter Anda pada 3-4 warna:

Peran WarnaPenggunaanContoh
UtamaHeader, tombol CTA, aksenBiru brand
TeksBody copy, subheaderAbu-abu gelap (#333333)
Latar belakangIsi emailPutih (#FFFFFF) atau abu-abu muda (#F5F5F5)
AksenTautan, sorotan, CTA sekunderWarna sekunder brand

Aksesibilitas Warna

  • Pertahankan rasio kontras minimum 4,5:1 antara teks dan latar belakang
  • Jangan hanya mengandalkan warna untuk menyampaikan informasi
  • Uji palet Anda dengan simulator buta warna
  • Pastikan tautan dapat dibedakan dari teks biasa (gunakan garis bawah, bukan hanya warna)

Pertimbangan Mode Gelap

Banyak klien email sekarang menggunakan mode gelap sebagai default. Desain dengan mempertimbangkan mode gelap:

  • Hindari latar belakang putih murni (#FFFFFF) — gunakan putih pudar (#FAFAFA)
  • Jangan gunakan PNG transparan dengan elemen gelap (elemen tersebut menghilang di mode gelap)
  • Uji logo di latar belakang terang dan gelap
  • Tambahkan meta tag untuk dukungan skema warna mode gelap
  • Gunakan batas atau garis luar pada gambar gelap agar tetap terlihat

Penggunaan Gambar dalam Newsletter

Kapan Menggunakan Gambar

Gambar harus menambahkan nilai yang tidak dapat diberikan teks saja:

  • Fotografi produk: Tampilkan produk dalam konteks
  • Visualisasi data: Grafik, bagan, dan infografis
  • Screenshot: Demonstrasi alat, fitur, atau proses
  • Foto kepala: Bangun koneksi personal dengan penulis atau tim
  • Ilustrasi: Dukung kepribadian dan nada brand

Optimasi Gambar

SpesifikasiRekomendasi
FormatJPEG untuk foto, PNG untuk grafis
Lebar600px standar, 1.200px untuk retina
Ukuran fileDi bawah 200KB per gambar
Total ukuran emailDi bawah 100KB tidak termasuk gambar
Teks altDeskriptif, 125 karakter atau kurang
Rasio aspek2:1 untuk gambar hero, 1:1 untuk thumbnail

Rasio Gambar ke Teks

Pertahankan rasio teks-ke-gambar yang sehat untuk menghindari filter spam dan memastikan keterbacaan:

  • 60:40 teks ke gambar adalah rasio yang disarankan
  • Email yang sebagian besar berupa gambar (email hanya gambar) memiliki tingkat spam yang lebih tinggi
  • Selalu sertakan versi teks dari informasi kunci, bukan hanya dalam gambar
  • Desain untuk klien yang memblokir gambar: newsletter Anda harus dapat dipahami tanpa gambar

Desain Newsletter Mobile-First

Persyaratan Desain Mobile

Dengan lebih dari 60% pembukaan newsletter di perangkat mobile, desain mobile bukan sesuatu yang opsional.

Aturan tata letak mobile:

  • Lebar konten maksimum: 600px (ditampilkan dengan baik di semua perangkat)
  • Target sentuhan minimum: 44x44 piksel untuk tombol dan tautan
  • Ukuran font minimum: 16px untuk teks isi di mobile
  • Tata letak satu kolom yang ditumpuk secara alami
  • Tombol CTA lebar penuh di mobile
  • Jarak yang cukup antara elemen yang dapat diklik (mencegah ketukan yang tidak disengaja)

Teknik Desain Responsif

TeknikDesktopMobile
Bagian multi-kolomBersebelahanDitumpuk secara vertikal
GambarBerukuran dalam kontenLebar penuh, diskalakan
Tautan navigasiHorizontalDitumpuk atau disembunyikan
Tombol CTASejajar atau rata kananLebar penuh
Ukuran fontStandarSedikit lebih besar
Padding20-40px15-20px

Pengujian Rendering Mobile

Uji desain newsletter Anda pada:

  • iPhone (Safari/Mail)
  • Android (aplikasi Gmail)
  • iPad
  • Gmail (web)
  • Outlook (desktop dan web)
  • Apple Mail (desktop)

Gunakan alat seperti Litmus atau Email on Acid untuk pengujian rendering otomatis di 90+ klien email.

Mendesain Bagian Newsletter

Header Anda membangun identitas dan menetapkan ekspektasi:

  • Logo: Berukuran tepat (tidak terlalu besar, biasanya lebar 150-200px)
  • Pengenal edisi: Nomor edisi, tanggal, atau nama edisi
  • Tautan lihat online: Untuk pelanggan yang mengalami masalah rendering
  • Tetap ringkas: Header tidak boleh mendorong konten ke bawah lipatan

Pembagi Bagian

Pembagi yang jelas antara bagian konten membantu pembaca memindai:

  • Aturan horizontal: Garis tipis sederhana (1-2px) dengan warna netral
  • Perubahan warna latar belakang: Bergantian antara bagian putih dan abu-abu muda
  • Jarak ekstra: 30-40px padding antara bagian
  • Header bagian: Teks tebal dan lebih besar dengan gaya yang konsisten

Footer yang dirancang dengan baik melengkapi pengalaman:

  • Tautan berhenti berlangganan (diperlukan secara hukum, mudah ditemukan)
  • Tautan media sosial
  • Alamat surat fisik (persyaratan CAN-SPAM)
  • Tautan lihat di browser
  • Opsi teruskan ke teman
  • Tagline brand singkat atau pernyataan misi

Alat Desain Newsletter

Editor Platform

Sebagian besar platform newsletter menyertakan editor desain bawaan:

PlatformJenis EditorFleksibilitas DesainPerpustakaan Template
BrevoDrag-and-dropTinggi40+ template
MailchimpDrag-and-dropTinggi100+ template
ConvertKitEditor yang disederhanakanSedangTerbatas
SubstackBerfokus pada teksRendahMinimal

Editor drag-and-drop Brevo membuat desain newsletter profesional dapat diakses tanpa pengetahuan coding. Untuk bisnis yang menggunakan Tajo, Anda dapat mengisi bagian newsletter secara dinamis dengan rekomendasi produk dan konten yang dipersonalisasi berdasarkan perilaku pelanggan.

Sumber Daya Desain

  • Canva: Buat gambar header newsletter, grafis media sosial, dan ilustrasi
  • Unsplash/Pexels: Fotografi stok gratis
  • Really Good Emails: Galeri inspirasi email yang dirancang dengan baik
  • MJML: Kerangka kerja email open-source untuk desain kustom
  • Figma: Desain template newsletter kustom dengan ekspor plugin email

Daftar Periksa Desain Newsletter

Sebelum mengirim newsletter apa pun, verifikasi:

Tata Letak:

  • Tata letak satu kolom atau multi-kolom yang responsif dengan benar
  • Lebar konten 600px atau kurang
  • Hierarki visual yang jelas dari header ke footer
  • Bagian-bagian dipisahkan dengan jelas

Tipografi:

  • Teks isi 16px atau lebih besar
  • Tinggi baris 1,4-1,6
  • Header menciptakan struktur konten yang jelas
  • Teks tautan deskriptif (bukan “klik di sini”)

Gambar:

  • Semua gambar memiliki teks alt
  • Gambar dioptimalkan untuk ukuran file
  • Newsletter dapat dibaca tanpa gambar
  • Gambar retina disediakan untuk layar high-DPI

Mobile:

  • Diuji di iPhone dan Android
  • Tombol CTA lebar penuh di mobile
  • Ukuran font dapat dibaca di layar kecil
  • Target sentuhan minimal 44px

Aksesibilitas:

  • Kontras warna memenuhi rasio 4,5:1
  • Konten terstruktur dengan heading yang tepat
  • Tidak ada informasi yang hanya disampaikan melalui warna
  • Kompatibel dengan screen reader

Brand:

  • Warna sesuai palet brand
  • Logo berukuran dan diposisikan dengan benar
  • Nada dan suara konsisten dengan brand
  • Footer menyertakan semua elemen legal yang diperlukan

Mengembangkan Desain Newsletter Anda

Desain newsletter bukan proyek satu kali. Kembangkan desain Anda berdasarkan data performa dan umpan balik pelanggan:

  • Lacak kedalaman gulir: Apakah pembaca sampai ke bagian bawah newsletter Anda?
  • Pantau peta klik: Bagian mana yang mendapat klik terbanyak? Promosikan konten serupa.
  • Survei pelanggan: Tanyakan tentang preferensi desain setiap tahun
  • Uji A/B tata letak: Bandingkan tata letak kartu vs. linear, penempatan gambar, dan gaya CTA
  • Tinjau pesaing: Pelajari apa yang berhasil dalam newsletter sukses di ruang Anda

Desain newsletter terbaik tidak terlihat. Pelanggan tidak memperhatikan desainnya, mereka memperhatikan kontennya. Itu berarti desain melakukan tugasnya dengan sempurna: menghilangkan hambatan, memandu perhatian, dan membuat pengalaman membaca menjadi mudah.

Mulai sederhana, tetap konsisten, dan sempurnakan berdasarkan data. Desain newsletter Anda harus berkembang bersama audiens Anda, bukan mendahului mereka.

Pertanyaan yang sering diajukan

Apa yang membuat desain newsletter yang baik?
Desain newsletter yang baik menggunakan hierarki visual yang jelas, branding yang konsisten, tipografi yang mudah dibaca (minimal 16px), tata letak satu kolom untuk kompatibilitas mobile, dan penggunaan white space yang strategis. Desain yang baik memandu mata pembaca dari judul ke konten ke call-to-action.
Apakah newsletter sebaiknya banyak teks atau banyak gambar?
Keseimbangan ideal tergantung pada jenis konten Anda, tetapi sebagian besar newsletter berkinerja terbaik dengan rasio teks-ke-gambar 60/40. Desain yang mengutamakan teks memastikan keterbacaan saat gambar diblokir dan meningkatkan deliverability. Gunakan gambar untuk mendukung konten, bukan menggantikannya.
Apa tata letak newsletter terbaik?
Tata letak satu kolom adalah yang paling efektif untuk newsletter karena berfungsi di semua perangkat, mudah dipindai, dan mengarahkan perhatian dalam aliran linier. Gunakan pembagi bagian yang jelas dan pemformatan yang konsisten untuk mengatur konten dalam satu kolom.
Bagikan artikel ini:
Kembali ke semua artikel

Ajukan akses awal

Masukkan nama depan serta email atau nomor telepon Anda. Kami akan menghubungi Anda dengan detail akses Tajo.

deteksi otomatis
Dapatkan Brevo