Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)
Kita baru-baru ini mendesain kembali seluruh email yang kita kirim di Envato Tuts+; newsletters, various digest, email kampanye pemasaran, dan admin emails-nya. Dalam seri studi kasus singkat ini kita akan menjelaskan cara kami melakukannya!
Kenapa?
Hingga pendesainan kembali, kita memiliki koleksi email yang agak terputus-putus tanpa tim utama yang memperhatikannya. Ini menjadi jelas bahwa kita bisa menyederhanakan beberapa hal dan membuatnya lebih ekonomis, sehingga kami memutuskan untuk memindahkan usaha kita ke akun utama di Campaign Monitor. Sepaket tema utama akan bisa digunakan melintasi papannya dan kita telah memastikan mereka didesain dan dibangun dalam cara yang dapat mewakili apa yang kita perjuangkan di Envator Tuts+.
Audit
Tahap pertama dari operasinya adalah menyusun aneka email yang kita kirimkan ke masa. Ini berarti mempelajari dengan teliti MailChimp kami yang telah ada dan membongkat apa yang kita miliki di Exact Target.
Setelah kita tahu apa yang kita cari, kita bisa mengambil elemen-elemen umum dan mengategorikan semua yang siap untuk tahap desain.
Kita merebus semuanya ke:
Admin
- akun baru
- konfirmasi pendaftaran email
- kehilangan password dan lainnya
Pemasaran
- aneka promo
Berita
- monthly digest
- weekly digest
- translator newsletter
- contributor newsletter
Kebutuhan
Apa prioritas kita untuk desain ulang ini? jika didaftar, kita membutuhkan:
- Sebuah desain responsif
- Branding dan tipografi yang cocok dengan Tuts+
- Sesuatu yang mewakili Envato sebagai kesatuan
- Panggilan jelas ke tindakan jika dibutuhkan
Dan kita menginginkan:
- Tipografi yang jelas dan bisa dibaca
- Tak lekang oleh waktu; suatu gaya yang tidak akan dengan cepat menunjukkan umurnya
- Diferensiasi antara aneka macam email
Sketsa
Waktunya untuk membuat visualnya! Saya menggunakan Sketch untuk proses desain karena kecocokkannya untuk UI design. Tahap pertamanya adalah meletakkan sebuah artboaard bersama dan bekerja dengan beberapa dimensi grid.
Saya menggunakan opsi layout Sketch (View > Canvas > Layout Setting..) untuk mengatur grid 640px, denan 8 kolom. Artboard saya jauh lebih besar dari itu, untuk memberi saya ruang bernafas. Dengan menekan Center, offsetnya akan di hitung secara otomatis, pada kasus ini menjadi 280px. Maka gridnya akan diposisikan 280px dari pinggir artboard.
Sebuah kolom berukuran 62px terikat dengan gutters 20px, memberi saya suara dari permulaan titik horizontal.
Saya ingin baris juga sehingga saya mencentang kotak Rows. Font saya akan bekerja dari dasar 16px, jadi saya menggunakannya sebagai rudimentary vertical grid.
Layout
Tim pemasaran di kantor meminta kita membuat ketentuan untuk beberapa bagian hero; sesuatu yang mengizinkan mereka menggunakan grafik mencolok jika mereka butuh.
Saya tidak ingin itu mrnjadi standad di semua jenis email, tapi dia memberi saya titik permulaan yang bagus. Menggunakan blok, saya mulai membuat sebuah layout dasar.
Dengam sebuah herp, area konten utama, dan off-white canvas, panggungnya telah siap. Saya memutuskan untuk bermain dengan layer dan membuat area konten menimpa hero-nya sedikit. Saya menyadarinya ini bisa membuat Nicole (yang telah membuat semuanha) sedikit pusing, tapi saya tahu dia akan memahaminya-dia adalah penyihir.
Varians dari penayaan ini bisa hadir dalam bentuk:
- Warna blok hero (yang tua berada di atas)
- Image splash hero (yang oranye sebagai contoh)
- Hero Transparan (kiri bawah)
- Tidak ada hero sama sekali (kanan bawah)
Ponsel
Sagu keuntungan dari layout sederhana ialah keresponsifan yang lebih mudah dicapai. Saat diperas ke viewport yang lebih kecil, kita meruntuhkan dua kolom jika dibutuhkan, dan menapakkan area konten melawan ujung viewport, memberi kita sapaket bagian-bagian tanpa saling menimpa.
Di Sketch, saat kkta mrmbutuhkan dua pengaturan kolom yang berbeda, kita membutuhkan laman kedua. Layout grid apapun yang kita definisikan ditedapkan ke semua artboard di halaman yang sama, dan kita membutuhkan banyak grid yang lebih sederhana untuk tampilan kecil di ponsel.
Yang kita butuhkan di sini sangat sederhana, faktanya, kita hanya membutuhkan sebuah kolom utama dengan sebuah gutter (kita akan menggunakan 20px untuk kedua sisi). Sketch tidak bisa membuat sebuah grid hanya dari satu kolom, sehingga kita harus menggunakan dua.
Tipografi
Kita menggunakan Roboto di Envato, sehingga keputusannya telah dibuatkan untuk saya. Warna juga sangat ditentukan oleh gaya Envsto juga, sehingga saya memiliki sebuah palet untuk memilih warnanya. Saya harus menentukan mana yang akan digunakan untuk badsn, kepala, tautan, teks apapun yang tidak ditekankan dsn "calls to action".
Prioritas saya adalah:
- Teks hsrus bisa dibaca, oleh karenanya saya menggunakan 16px untuk badan, dengan line-height 24px (1.5).
- Heading harus jadi lebih berat, tapi tidak terlalu jauh lebih besar, dan menggunakan warna yang sama untuk menyugestikan hubungan antara mereka.
- Tautan harus digsrisbawahi (ini sedikit obsesi saya, namun saya tidak melihat aladan untuk tidak melakukannya).
- Daftar item akan menggunakan bullets.
- Teks tidak akan dipaksa di ruang yang sempit!
- Tautan dan "calls to action" akan menggunakan warna biru yang sama saat mungkin, membantu pembaca fokus ke semua item yang memiliki aksi.
Karena Sketch membuat banyak hal jadivlebi mudaj, text styles hanya membutuh satu kali klik. Memberi haya bagian dari teks yang kamu inginkan, menyimpannya sebaga text style, lalu mengscu kemnali padanya jika kamu mrmbutuhkannya.
Digests
Envato Tuts+ adalah media yang memakai banyak visual, kita menggunakan thumbnails di banyak tempat. Beberapa umpan balik dari tim menyarankan penataan kartu yang digunakan di beranda kami akan menjadi cara terbaik untuk menampilkan panduan di digest email. Pembaca akan bisa membaca koneksinya, memahami dengan apa dia berurusan, dan pada kasus kapapun dia adalah cara yang jelas untuk menyampaikan informasi.
Kursus sedikit berbeda, saya ingin memberi mereka penekanan tambahan: Tiap bagian topik pertama akan menunjukkan kursus yang tersedia, dengan detil yang sedikit lebih banyak ketimbang panduan, beserta grafik tombol play ditumpangkan di atas thumbnail. Ini akan menyorot perbedaan antara kursus dan panduang dan menstimulasi pembaca untuk mengklik (tombol play bagus untuk itu)
Memiliki tombol play diletakkan secara dinamis di atasnya akan menjadi aneh, sehingga kamu mendesain ulang untuk meletakkan grafik tombol secara manual ke thumbnail (dengan Photoshop, contohnya). Sedikit pekerjaan tambahan (maaf Cameron) tapi berharga menurut saya.
Ad Block
Kita juga ingin suatu cara untuk menampilkan ad blocks; tidak harus iklan dari pihak ketiga, tapi sesuatu untuk memberikan kita kesempatan mengenai hal baru dan menarik. Saya menambahkan sebuah banner opsional di atas layout, sangat mirip dengan apa yang terkadang kamu lihat di situs.
Lalu saya memutuskan untuk membagi semua konten ke blok-blok, mengizinkan kita untuk menata mereka dalam urutan yang kita pilih dan juga membuat perbedaan yang jelas antar-bagian.
Beginilah tampilan ad block, dengan dua bagian digest di kedua sisi.
Footer
Footer adalah bagian universal di antara semua email. Saya tidak ingin banyak informasi terkubur di sini, tapi yang piilih adalah untuk meletakkan di sana, saya ingin kejelasan (saya tidak paham kenapa beberapa perusahaan membuat footer mereka hampir tidak terlihat, dengan tautan "unsubscribe" tersembunyi di sana)
Jadi, dengan beberapa tautan sosial media, sebuah area teks untuk menjelaskan mengapa seseorang bisa menerima email ini, tautan berhenti berlangganan, dan alamat kantor Envato, kita telah siap.
Newsletters
Sekarang kita telah memiliki elemen dasar yang kita butuhkan, memberikan kita blok-blok terbangun untuk tiap jenis email.
Newsletters biasanya tidak membutuhkan graphic hero atau semacamnya, jadi saya menggunakan kepala yang sederhana namun menyolok untuk memulainya. gaya tipografi yang telah kita tentukan bisa melayani untuk kebanyakan konten yang mungkin ada.
Perbedaan antara newsletter dan digest dibuat dengan memberikan newsletter sebuah transparent hero yang membuatnya lebih ... seperti koran.
Admin Emails
Yang paling sederhana dari semua email kita (di samping versi plain text) adalah pesan admin. Pada kasus mereka, tentu saja tidak ada gaya tambahan yang diperlukan; cukup berikan poinnya secara cepat dan sederhana. Hero transparan dan menghilangkan heading yang besar membuat kesan admin terasa lebih baik di sini. Sissany tetap sama termasuk, mungkin, tombol CTA. Berikut adalah tampilan desktop dan ponsel:
Pengantaran
Dengan konsep dan desain yang telah selesai, ini adalah waktunya untuk mengirimnya ke Nicole. Dia akan mengambil ide ini dan membuat berkas HTML statis darinya. Saya perlu memastikan dia paham pilihan yang telah diambil, dan memiliki semua aset yang diperlukan untuk membangun emailnya.
InVision mengizinkan anotasi sangat singkat pada dokumen grafis dan kamu bisa mengunggah berkas Sketch secara langsung. Koleksi dari visual dengan komentar dan pointer adalah cara bagus untuk mengkomunikasikan semua ide.
Mengenai pengiriman aset, Sketch membuat proses ekspor semua berkas yang dibutuhkan menjadi sangat mudah. Bukan hanya menyediakan semua asetnya (Seperti logo, tombol media sosial dan lainnya.) tapi saya juga bisa mengirimnya dalam ukuran yang berbeda, melingkupi layar dengan densitas piksel yang berbeda-beda. Pelajari cara Skecth mengekspor asetmu:
Dengan semua berkasnya beserta beberapa petunjuk di Dropbox, Nicole telah memiliki semua yang dia butuhkan untuk melakukan sihirnya:
Yang akan datang..
Pada bagian selanjutnya dari studi kasus ini saya akan menggiringmu ke Nicole untuk pembuatannya. Dia akan menyelesaikan cara dia membuat fondasi responsif untuk email, dan menyelesaikan masalah yang biasanya terjadi dalam pengembangan.
Jangan ragu untuk mengambil berkas Sketch demo-nya dari repo di GitHub, dan lihat email yang telah sekarang sendiri: subscribe di bawah!
