7 Langkah Mudah Membuat Email Newsletter Template

Jika Anda ingin menjangkau pelanggan potensial (yang sudah ada), newsletter email adalah cara terbaik untuk menyebarkan promosi bisnis Anda kepada para pelanggan, apapun itu, baik  itu promosi plan yang masih dikonsepkan, berita tentang perusahaan Anda, ataupun informasi terkait bisnis Anda lainnya. Cara ini juga merupakan taktik promosi yang super hemat biaya.

Dalam tutorial ini saya akan memandu Anda dengan berberapa tahap untuk membuat “7 Langkah Mudah Membuat Email Newsletter Template” di Adobe Photoshop , dan saya akan menggunakan contoh desain umum yang menurut saya sederhana namun menarik.

Baca Juga : Pengertian Plugin WordPress dan Widget WordPress

Setelah selesai tahap perancangan desainnya, Anda bisa menambahkan koding atau memberi gaya tambahan yang disukai pada template ini. Berikut ini adalah panduannya, cekidot!

Tampilan Akhir Desain

Inilah adalah sekiranya gambaran seperti apa desain email newsletter yang nanti akan dirancang :

membuat-template-email

1. Persiapan

Sebagai langkah awal, sebaiknya desain template ini menggunakan ukuran lebar layar tetap/fixed width bukan tampilan fluid/liquid layout. Tidak tahu bedanya? Saya akan beritahu fungsinya pada artikel ini, karena hal ini akan mencegah scroll bar horizontal apabila tidak menggunakan ukuran lebar layar penuh / fixed width. Langkah awalnya kita harus memperkirakan isi halaman sekitar 550-600 piksel dan pastikan informasi penting / kata-kata promosi yang nanti akan ditampilkan, terletak pada  300-500px di halaman atas template, karena biasanya ukuran rata-rata “preview panel” email klien yang tampilan didesktop, terdapat pada bagian tersebut, jadi hal ini akan memastikan akan terbaca saat pertama kali dilihat oleh pelanggan / klien.

2. Mulai Merancangnya di Photoshop

Buka Photoshop dan buat dokumen baru dengan lebar 800px dan tinggi 1000px dengan resolusi 72dpi . Pastikan mode warnanya RGB.

Untuk latar belakang saya memberikan warna dengan abu-abu terang. Saya menyediakan lebar tempat sekitar 600px untuk menampung isi konten utama. Saya nanti akan mengisinya dengan warna putih dan memposisikannya di tengah dokumen.

3. Izinkan Pengguna Melihat Email di Pilihan Browser Mereka

Saya menambahkan pemberitahuan ini di bagian atas template email dengan menggunakan font Myriad Pro, ukuran font sekitar 10pt. Penting untuk memberikan banyak pilihan kepada pengguna, untuk bagaimana cara melihat email ini secara keseluruhan, karena ada beberapa pengguna email yang mungkin tidak mendownload gambarnya dari email yang dikirim secara default. Untuk meningkatkan aksesibilitas, selalu sertakan notifikasi tambahan tersebut agar penerima email dapat melihatnya secara menyeluruh.

4. Buat Header Newsletter Email

Dalam tutorial ini saya membuat buletin email berjudul “The Pet Digest” untuk mempromosikan blog klien saya yaitu “The Pet Anthology”. Tujuannya agar pembaca tetap bersemangat mengikuti perkembangan terbaru melalui artikel mingguan diblog tersebut.

Gambar di atas adalah header yang terdapat diblog klien saya. Dan saya akan coba mempertahankan tampilan dan nuansa blog tsb dengan hanya sedikit modifikasi tambahan. Sekarang saya mulai dengan memilih dan menyeret maskot ke dalam template newsletter yang sedang dirancang ini. Di situ saya juga ambil nama, slogan dan contoh dokumen terbaru. Dengan sedikit revisi fonts yang dibuat shadow lebih tebal, maka hasilnya terlihat seperti ini:

Font yang saya gunakan adalah: Slab Tall X untuk kata-kata “Pet Digest”, Champagne & Limousines untuk kata-kata “Our Weekly Bundle”, dan Learning Curve untuk kata “The”.

5. Membuat bagian utama dari newsletter

Mulailah dengan membuat lebar sekitar 600px di bawah header dan rentangkan ke bagian bawah halaman, seperti contoh gambar dibawah.

Saya kemudian memasukkan konten yang akan ditampilkan dalam newsletter, sebagai contoh saya ambil datanya dari konten yang akan dipublish untuk minggu mendatang. Dan contoh yang akan diisikan juga akan saya ambil contohnya dari blog klien saya “The Anthology Pet”, kemudian saya membuat judul dengan menggunakan fonts : Museo Sans, lalu saya drag dan drop pada gambar utama, serta copy dan paste teks artikel tersebut ditemplate. Saya buat garis putus-putus yang ditempatkan di bagian bawah  artikel untuk menandai / memisahkan setiap bidang artikel.

Kemudian saya duplikat entri pertama dua kali dan mengubahnya dengan konten yang berbeda pada setiap bidang artikel. Contoh seperti gambar dibawah yang telah saya duplikat.

Dengan konten yang berbeda, kemudian saya isikan setiap bagian artikel konten yang tadi sudah diduplikat, kemudian saya tambahkan lagi dibawahnya, begitu seterusnya sampai artikel yang ingin diinformasikan via newsletter telah sesuai.

6. Tambahkan Link Sosial

Saya ingin menyertakan area follow di jejaring sosial dan juga ikon RSS, serta fitur untuk share ke teman-teman mereka. Saya mulai dengan membuat lebar persegi panjang 252px dan menyertakan teks untuk memikat pembaca dapat memfollow kita. Disini saya menggunakan vektor ikon jaringan sosial yang sudah tersedia di source file vektor saya, dan sedikit mengubah warna agar sesuai dengan warna background template.

Kemudian saya duplikat lagi yang persegi panjang dan meletakkannya di sebelah kanan untuk area “Share this with your freinds”.

7. Sertakan Keterangan Footer

Untuk penyelesaian, saya membuat teks footer singktat yang memungkinkan Anda untuk menghubungi saya, juga tautan yang memungkinkan Anda berhenti berlangganan newsletter pada bagian disebelah kanan. Setiap newsletter setidaknya perlu memiliki tautan atau tombol untuk memungkinkan pembaca bebas berhenti berlangganan newsletter jika mereka menginginkan.

Kesimpulan

Demikian tutorial sederhana untuk “7 Langkah Mudah Membuat Email Newsletter Template” dengan photoshop, dan untuk selanjutnya Anda dapat meneruskannya dengan metode koding agar kompetible dengan tampilan website yang sebenarnya.

Terima Kasih….

 

Original Article : crazyegg[dot]com


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

WhatsApp Chat via Whatsapp
%d blogger menyukai ini: