Sketch untuk Pemula: Mendesain Buletin Email yang Berani

Pada tutorial ini kita akan belajar cara membuat template buletin email yang sederhana dan berani menggunakan Sketch.

Singkat

Jika kamu terlibat dalam mengirimkan buletin email, mereka harus dianggap sebagai poin kunci dalam strategi pemasaranmu. Mereka memberi kita kontak langsung dengan pelanggan potensial, tetapi kita harus memperhatikan bagaimana kita merancang mereka untuk berkomunikasi dengan baik, menarik perhatian dan (yang paling penting) memenuhi tujuan kita.

Inilah briefing di balik latihan desain ini: mari bayangkan bahwa kita adalah perusahaan yang menawarkan sumber belajar online. Kami ingin menghubungi pelanggan potensial kita, mengungkapkan manfaat menggunakan platform kita. Dalam situasi ini kita dapat mulai dengan membuat buletin email yang bersih namun efektif menggunakan Sketch untuk memenuhi kebutuhan kita.

Kita akan mulai sepenuhnya dari awal, menggunakan tool paling umum yang kita miliki di Sketch untuk membuat template kita. Kamu akan kagum betapa mudahnya!

Pemanasan

Agar berhasil menyelesaikan tutorial ini, kamu harus mengunduh lampiran yang tersedia. Di file zip kamu akan menemukan beberapa teks dan gambar yang akan kita gunakan dalam langkah-langkah berikut.

Saya akan menggunakan Helvetica Neue sebagai font default tetapi jika kamu tidak memilikinya, coba dengan Helvetica atau Arial.

Catatan: ingatlah untuk menjadi desainer yang bertanggung jawab! Maksud saya: ingatlah untuk mengganti nama layermu menggunakan nama deskriptif, kelompokkan layer dan atur konten. Rekan kerjamu akan berterima kasih untuk itu, percayalah.

Apakah kamu siap? Mari kita mulai!

1. Mengatur Artboard

Langkah 1

Mari kita mulai dengan membuat artboard baru. Menuju ke Insert > Artboard (A) dari menu utama atau toolbar. Sekarang klik dan seret ke dalam kanvas Sketch untuk membuat artboard 620 x 3000px. Jika kamu merasa sulit, ingat kamu dapat memodifikasi nilai-nilai ini melalui Inspector di sebelah kanan layar. Kamu juga dapat mengubah nama artboard dari Layer List di sisi kiri layar.

Tip: Pendekatan umum saat merancang template email adalah memulai dengan lebar dokumen sekitar 550-650px. Pelajari lebih lanjut tentang pemasaran email dalam artikel hebat ini oleh Nicole Merlin.

Langkah 2

Sekarang mari kita buat beberapa panduan yang akan kita gunakan sebagai referensi untuk menempatkan elemen kita dengan benar, menghasilkan desain yang seimbang dan berkesan. Di mana kita harus meletakkan panduan? Mari kita berpikir sedikit:

Template email dapat dirancang dengan berbagai cara. Salah satu yang paling umum adalah hanya membuat tata letak 1-kolom. Tata letak ini memungkinkan kita memandu pengguna dengan cara yang lebih mudah, menggunakan aliran vertikal blok konten, satu demi satu. Selain itu, merancang dengan struktur satu kolom dalam pikiran, memberi kita kesempatan untuk dengan mudah menyesuaikannya dengan perangkat yang berbeda.

Namun, untuk keperluan latihan ini, kita di sini berlatih sedikit lagi sehingga kita akan membuat tata letak 3 kolom. Maaf!

Aktifkan aturan dan mulai membuat panduan. Menuju ke View >  Show Rulers (^R). Sekarang klik pada penggaris horizontal di 30px, 200px, 225px, 395px, 420px dan akhirnya di 590px. Kamu dapat memindahkan penggaris dengan menyeret dan memindahkannya. kamu juga dapat memindahkan panduanmu sendiri dengan cara yang sama. Untuk menghapus panduan, seret mereka ke luar penggaris.

2. Mendesain Header

Header email kita sangat penting. Itu adalah kontak pertama yang kita miliki dengan pengguna dan karenanya kita harus mengomunikasikan proposisi utama kita. Juga merupakan keputusan yang bagus untuk menampilkan nama perusahaan dan slogan yang bagus diikuti oleh tombol CTA yang mendorong pendaftaran atau mendapatkan lebih banyak info tentang kita.

Pertama-tama kita harus menambahkan preheader, tautan teks sederhana yang memungkinkan pengguna untuk mengakses versi web buletin kita jika klien email mereka tidak memungkinkan mereka untuk melihatnya dengan benar.

Langkah 1

Pilih Text tool (T) dan klik di mana saja di kanvas untuk memasukkan layer teks. Perhatikan bagaimana Inspector telah berubah untuk menunjukkan kepadamu semua properti layer teks. Mulai ketik “Problem viewing this email? View it online”.

Ubah warnanya menjadi #8FA6B3 dan atur Size ke 11px. Sekarang pilih hanya pada bagian "View it online" dan ubah warnanya ke #FF736D. Tetap terpilih. Klik ikon Options di sebelah Color dan klik opsi Decoration kedua untuk menggarisbawahi teks.

Pindahkan objek dari bagian atas artboard dengan margin 30px.

Langkah 2

Buat persegi panjang 620x500px menggunakan tool Rectangle (R) dan letakkan tepat di bawah tautan teks, tinggalkan 30px di antaranya. Pilih persegi panjang dan ubah warnanya ke #F5F7F8 menggunakan panel Inspector. Hapus centang opsi border untuk menghapusnya.

Langkah 3

Buka file "icons" svg yang terlampir pada tutorial ini. Pilih semua ikon, salin dan tempel ke dalam dokumen template yang kita desain. Kitaakan menggunakannya untuk menghias latar belakang header kita.

Saya telah menempatkan grup ikon di X= -50 dan Y = 0 (cari properti Position di Panel Inspector) tetapi merasa bebaslah untuk beradaptasi sendiri.

Tips: Kamu akan melihat bahwa beberapa bagian ikon kita berada di luar artboard dan Sketch menyembunyikannya secara otomatis. Tidak ada yang salah. Program ini memahami bahwa kamu menggunakan artboard untuk membatasi area desainmu sehingga menyembunyikan bagian-bagian elemen yang diposisikan antara area artboard dan bagian kanvas lainnya. Cobalah untuk memindahkan seluruh grup di luar artboard untuk melihatnya sepenuhnya. Kamu lihat? Jangan lupa untuk memindahkannya kembali ke posisi semula!

Langkah 4

Pada Layer List pilih folder 'icons' dan persegi panjang yang sebelumnya kamu buat. Kelompokkan mereka menggunakan salah satu opsi yang tersedia di Sketch. Misalnya, gunakan ikon Group di Toolbar atau gunakan pintasan keyboard (⌘-G) untuk melakukannya. Pindahkan grup ke bawah pada Layer List, ubah nama menjadi sesuatu seperti "Background" dan gunakan panah kecil di sebelah kiri untuk mengungkapkan isinya.

Pilih persegi pankjang dan menuju ke Layer > Use as Mask. Tunggu keajaibannya. Sketch akan menggunakan kotak untuk menutupi setiap layer di atasnya pada Layer List. Jika sebelumnya kita mengelompokkan konten yang ingin ditutup dan disatukan, kita tidak akan memengaruhi elemen di luar grup. Tips yang sangat berguna!

Sekarang kamu harus memiliki ikon yang sudah ditutup seperti gambar berikut:

Langkah 5

Buka file "logo" svg dan salin logotype ke dokumen kita. Saya tahu ini terlalu besar, jadi buka Inspector Panel untuk mengubah dimensinya menjadi 90 x 31px. Pindahkan ke X = 265, Y = 100.

Langkah 6

Buat layer teks baru dan atur lebarnya menjadi 560px. Pindahkan ke X = 30 dan Y = 220. Sekarang edit teks dan ubah menjadi "Your place to discover real world skills". Atur propertinya ke Weight = Bold, Color = #424242, Size = 48, Line = 45 dan Alignment = Center. Pilih hanya kata "real" dan ubah menjadi italic.

Langkah 7

Sekarang kita akan merancang tombol aksi utama kita. Gambar persegi panjang 220x45px. Buka panel Inspector dan atur Radius ke 30. Ubah Fill ke #D92B2B. Pindahkan di bawah teks slogan, sisakan sekitar 50px di antara kedua objek.

Langkah 8

Tombol kita tidak masuk akal jika kita membiarkannya kosong! Kita membutuhkan teks ajakan untuk bertindak, beberapa kata yang fokus pada proposisi utama dan menarik perhatian pengguna. Saya ingin berbicara lebih banyak tentang pemasaran semacam ini, tetapi untuk mempercepat sedikit kita akan cukup membuat layer teks, lalu ketik "Join us form 10$/month".

Ubah properti menjadi Weight = Bold, Color = #FFFFFF dan Size = 15. Pindahkan ke X = 225, Y = 375, tepat di dalam persegi panjang bulat kita.

Kita akan menggunakan tombol ini lagi nanti, jadi ide yang baik untuk menyimpannya sebagai simbol. Kelompokkan teks dan layer persegi panjang dan klik opsi Create symbol dari toolbar utama. Perhatikan bagaimana warna folder pada Layer List telah berubah dari biru menjadi ungu.

Langkah 9

Saya pikir kita perlu sedikit lebih kontras antara konten latar depan dan gambar latar belakang jadi mari kita buat perubahan kecil Buka Layer List, perluas folder Backgrounf dan duplikat persegi panjang yang kamu gunakan untuk menutupi ikon latar belakang. Pindahkan ke bagian atas grup, buka panel Inspector dan ubah Blending menjadi Lighten dan Opacity menjadi 50%. Pada akhirnya kamu harus mendapatkan sesuatu seperti ini:

Header kita telah selesai!

3. merancang blok "Who we Are"

Sekarang setelah kita memiliki perhatian pengguna, kita perlu sedikit berbicara tentang diri kita dan layanan kita. Siapa kita? Apa yang kita lakukan? Kita harus menjawab pertanyaan-pertanyaan ini dengan cara langsung dan ringkas, mencoba menunjukkan beberapa manfaat tambahan tentang penggunaan platform kita.

Langkah 1

Buat dua layer teks baru. Atur width menjadi 480px. Kamu dapat mengetik apa pun yang kamu inginkan, tetapi saya telah menggunakan teks yang akan kamu temukan di dalam file teks terlampir.

Selesai? Sekarang gunakan posisi dan properti berikut:

Langkah 2

Gambarlah garis lebar 100px (Insert > Shape > Line) dan atur Thickness ke 2px dan border color ke #E24A4A. Letakkan antara dua layer teks, sisakan jarak 25px antara setiap elemen. Ingat: jika kamu menekan tombol Alt saat menggerakkan kursor, kamu dapat melihat jarak dalam piksel antara elemen yang dipilih.

Langkah 3

Kita akan meniru struktur sebelumnya beberapa kali sepanjang tutorial ini. Tetapi untuk sekarang, pilih baris dan layer teks dan kelompokkan. Ingatlah untuk teratur dan memberikan nama. Saya telah menggunakan "first-block".

Pilih layer teks "Search for online...”, buka Panel Inspector dan buat Text Style baru dengan mengklik "No Text Styles", lalu Create New Text Style. Lakukan hal yang sama dengan layer teks kedua. Sekarang setiap layer yang terhubung dengan style-style ini akan diperbarui sekaligus ketika kamu mengedit propertinya.

Catatan: pertimbangkan bahwa Sketch tidak dapat menyimpan Text Styles dengan beberapa font-weight yang diterapkan pada layer yang sama. Dengan itu, saya tidak akan menggunakan style untuk tutorial ini. Jika kamu ingin belajar sedikit lebih banyak tentang style, lihat panduan Sketch dari A sampai Z kami.

Langkah 4

Buka file svg "highlight-icons". Salin tiga ikon yang akan kamu temukan ke dalam dokumen dan tempelkan di desainmu. Gunakan panduan yang sudah kamu miliki untuk menyelaraskannya seolah-olah kamu menggunakan tata letak 3-kolom, tepat di bawah blok sebelumnya. Jangan letakkan mereka terlalu dekat dengan blok itu, sisakan ruang kosong sekitar 40px. Jika kamu memerlukan bantuan, cukup periksa gambar berikut:

Langkah 5

Buat tiga layer teks lebar 170px menggunakan Helvetica Neue Bold, Size = 15, Line = 18, Color = #424242 dan Alignment = Center. Letakkan elemen-elemen ini sekitar 30px di bawah ikon menggunakan panduan dan mulai mengetik–atau salin teks dari file terlampir!

Satu lagi blok telah selesai!

Mendesain Blok "New lessons"

Fitur umum dalam buletin adalah mengirimkan artikel atau konten terbaru yang menarik bagi pembaca. Jadi setelah CTA utama dan bagian di mana kita berbicara sedikit tentang diri kita, mari buat blok di mana kita menampilkan pelajaran terbaru yang tersedia di platform pembelajaran kita.

Langkah 1

Mulailah dengan menduplikasi "first-block" yang sudah kamu lakukan. Letakkan di bawah blok sebelumnya, margin 40px, dan gunakan konten di dalam file .txt untuk memodifikasi lapisan teks. Seharusnya seperti ini:

Langkah 2

Buka folder "lessons" di file sumber dan impor semua gambar ke dokumenmu melalui Insert > Image. Sekarang kamu memiliki tujuh gambar, lebar 620px. Kita akan menggunakan salah satunya dengan ukuran penuh dan mengubah ukuran sisanya agar sesuai dengan tata letak 3 kolom kita.

Langkah 3

Mari tambahkan beberapa teks untuk gambar besar kita. Masukkan tiga layer teks, gunakan file teks sekali lagi dan atur properti dan posisinya sebagai berikut:

Langkah 4

Kita membutuhkan beberapa lapisan teks lagi untuk pelajaran lain yang kita tampilkan. Mari kita lakukan lagi; masukkan tiga lapisan teks, ketik apa pun yang kamu inginkan atau salin teks dari file yang disediakan. Tetapkan properti dan posisinya menggunakan gambar berikut sebagai referensi dan ulangi proses lima kali untuk menyelesaikan sisa pelajaran yang kamu perlihatkan.

Satu lagi blok telah selesai. Luangkan waktu sejenak untuk mengatur layermu, lalu lanjutkan ke bagian selanjutnya!

Proposisi Utama, Lagi

Saya tahu bahwa template email kita ... panjang. Tapi itu tidak masalah jika kita tahu bagaimana menghadapinya! Pengguna harus menggulir sepenuhnya ke bawah melalui kontemu sehingga merupakan ide bagus untuk menawarkan akses mudah ke ajakan lain untuk bertindak tanpa harus menggulir sepenuhnya ke belakang email.

Langkah 1

Apakah kamu ingat "first-block" yang kamu duplikasi sebelumnya? Lakukan lagi, pindahkan di bawah "lessons block" dengan margin sekitar 40px dan ubah isinya sebagai berikut:

Langkah 2

Masukkan persegi panjang 620x243px dan isi dengan #F5F7F8. Sekarang tambahkan layer teks dan ubah konten dan propertinya menggunakan gambar berikut sebagai referensi:

Langkah 3

Menuju ke Insert > Symbols dan pilih tombol CTA yang kamu buat sebelumnya. Letakkan di bawah paragraf sebelumnya.

Kita hampir selesai!

Mendesian Footer

Oke, Kita memiliki blok utama dan ajakan untuk bertindak. Selanjutnya, kita menambahkan beberapa pesan sekunder dan sedikit lebih banyak konten. Kemudian, kita berbicara lagi tentang proposisi utama kita, mengulangi seruan untuk bertindak. Sekarang saatnya merancang footer dan menyelesaikan template kita!

Langkah 1

Buat persegi panjang 620x130px. Isi dengan #555E68 dan letakkan di bawah blok CTA. Selanjutnya, buat persegi panjang 620x45px lainnya dan isi dengan #383E44. Kamu seharusnya berakhir dengan sesuatu seperti ini:

Langkah 2

Impor file “logo-white” ke dalam dokumenmu dan pindahkan ke X = 265 dan Y = 2787.

Langkah 3

Mari kita tambahkan teks terakhir. Masukkan tiga layer teks dan atur properti dan posisinya sebagai berikut:

Itu tidak perlu, tetapi kamu dapat menyesuaikan ketinggian artboard agar hanya sesuai dengan ruang yang benar-benar kamu butuhkan. Kamu dapat melakukannya dengan memilihnya pada Layer List dan mengubah ketinggiannya pada panel Inspector. Saya telah mengubahnya ke Height = 2937px.

Kamu sudah selesai!

Beginilah tampilan produk akhir.

Saya harap kamu menikmati tutorial ini. Beri tahu saya jika kamu mengalami masalah atau kamu perlu meminta sesuatu. Apakah kamu punya ide untuk tutorial saya selanjutnya? Tinggalkan komentar! Saya berharap dapat melihat bagaimana kamu berkembang!