MODUL 7

Desain Publikasi

Desain Publikasi Digital Desain Publikasi

Tim Kelas Desain

Banyak karya desain hari ini tidak pernah dicetak. Ia hidup di layar ponsel dan dibagikan lewat internet. Materi ini membekali murid merancang publikasi digital: memahami ukuran piksel dan format file, mengatur warna dan huruf agar terbaca di layar, menata letak yang aman untuk berbagai tampilan, membuat publikasi interaktif, hingga memproduksi dan mengunggahnya secara etis. Isinya selaras dengan elemen Karya Desain dan Proses Produksi Desain pada Capaian Pembelajaran Desain Komunikasi Visual Fase F, serta kompetensi desain media sosial dan publikasi interaktif yang juga muncul pada dokumen LKS SMK bidang desain grafis.

Mengenal Publikasi Digital

Definisi

Publikasi digital adalah media komunikasi visual yang dirancang untuk ditampilkan dan dibagikan lewat layar dan jaringan internet, seperti konten media sosial, e-book, infografis, banner, dan presentasi. Desainer perlu memperhatikan ukuran piksel, warna layar, perangkat pembaca, dan cara orang berinteraksi dengan karyanya.

Jenis Publikasi Digital

•Media sosial: postingan feed, carousel, story, dan sampul reel.

•E-book dan PDF: buku, majalah, atau brosur digital yang dibaca di layar.

•Infografis: informasi atau data yang disajikan secara visual.

•Banner dan iklan digital: gambar promosi pada situs atau aplikasi.

•Presentasi dan newsletter: slide untuk menyampaikan gagasan dan surat berkala lewat email.

Cetak dan Digital: Apa Bedanya

•Warna: layar membentuk warna dari cahaya (RGB), cetak dari tinta (CMYK).

•Ukuran: digital memakai piksel dan rasio aspek, cetak memakai milimeter dan ukuran kertas.

•Perangkat: layar sangat beragam dan sering dilihat dari jarak dekat di ponsel.

•Kemampuan: bisa interaktif, beranimasi, dan direvisi cepat. Hasil cetak bersifat tetap.

Pengaplikasian

Yang tetap sama adalah dasarnya: brief, riset audiens, hierarki, dan prinsip desain. Pilih media digital dari tujuan, audiens, dan tempat audiens biasa membaca.

Ukuran Piksel dan Format File

Definisi

Di layar, ukuran karya ditentukan oleh jumlah piksel (lebar × tinggi) dan rasio aspeknya, bukan oleh milimeter. Salah ukuran membuat karya terpotong, tampil kecil, atau buram, sehingga spesifikasi harus dicek sebelum mulai mendesain.

Ukuran yang Umum Dipakai

•Feed vertikal: 1080 × 1350 piksel (4:5), format yang banyak disarankan untuk postingan dan carousel.

•Feed persegi: 1080 × 1080 piksel (1:1).

•Story dan reel: 1080 × 1920 piksel (9:16).

•Slide presentasi: 1920 × 1080 piksel (16:9).

•Thumbnail video: 1280 × 720 piksel (16:9).

Angka di atas adalah acuan umum yang dapat berubah. Selalu cek panduan platform terbaru atau brief proyek.

Format File

•JPG: untuk foto, ukuran file kecil, tanpa latar transparan.

•PNG: untuk grafis, teks, dan logo, mendukung latar transparan.

•SVG: vector untuk web, tetap tajam di ukuran apa pun.

•GIF dan MP4: animasi dan video. MP4 umumnya lebih ringan untuk animasi yang panjang.

•PDF dan ePUB: untuk dokumen dan e-book. PDF menjaga tata letak tetap, ePUB menyesuaikan ukuran layar.

Pengaplikasian

Gunakan mode warna RGB (sRGB), ekspor sesuai ukuran piksel yang diminta, dan kompres file agar cepat dimuat serta tidak melewati batas ukuran platform. Untuk layar, angka ppi pada file tidak menentukan ketajaman. Yang menentukan adalah jumlah pikselnya.

Warna dan Huruf agar Terbaca di Layar

Definisi

Karya digital sering dilihat sekilas pada layar kecil, di bawah cahaya yang berbeda-beda. Karena itu warna, kontras, dan huruf harus dirancang agar pesan tetap terbaca dengan cepat oleh sebanyak mungkin orang.

Warna dan Kontras

•RGB atau sRGB: mode warna yang dipakai untuk tampilan layar.

•Rasio kontras: pedoman aksesibilitas web (WCAG) menyarankan minimal 4,5 : 1 untuk teks biasa dan 3 : 1 untuk teks besar.

•Jangan hanya mengandalkan warna: beri tanda lain seperti ikon atau tulisan, agar tetap jelas bagi orang yang sulit membedakan warna.

•Teks di atas foto: beri lapisan gelap atau blok warna supaya huruf tetap terbaca.

Huruf untuk Layar

•Jenis huruf: pilih huruf yang jelas dan tebal secukupnya, hindari huruf hias untuk teks panjang.

•Ukuran: pada kanvas 1080 piksel, teks isi umumnya mulai sekitar 30 piksel. Uji langsung di ponsel.

•Jumlah teks: sedikit kata per slide dan satu gagasan per layar.

•Hierarki: judul, isi, dan ajakan bertindak dibedakan jelas.

Pengaplikasian

Perkecil tampilan desainmu hingga seukuran layar ponsel, atau kirim ke ponsel, lalu periksa apakah pesan utamanya masih terbaca dalam sekilas.

Tata Letak Digital

Definisi

Tata letak digital mengatur teks dan gambar agar mudah dibaca pada layar yang beragam, dengan memperhitungkan bagian layar yang tertutup tampilan aplikasi, cara orang menggulir, dan tempat jari menekan.

Prinsip Tata Letak Layar

•Satu titik fokus: orang menggulir cepat, jadi pesan utama harus tertangkap sekilas.

•Ruang kosong: beri napas agar layar kecil tidak terasa sesak.

•Grid dan template: kerangka yang sama membuat serial konten rapi dan mudah dikenali.

•Zona aman: pada story 1080 × 1920, bagian atas sekitar 250 piksel dan bagian bawah sekitar 340 piksel sering tertutup tampilan aplikasi.

•Tombol dan ajakan: cukup besar untuk ditekan jari, sekitar 44 piksel, dan diberi jarak dari elemen lain.

Carousel yang Efektif

1.Slide pertama: judul atau pertanyaan yang membuat orang ingin menggeser.

2.Slide isi: satu gagasan per slide dengan gaya yang konsisten.

3.Slide terakhir: ajakan bertindak, misalnya daftar atau kunjungi.

4.Ukuran sama: semua slide memakai rasio yang sama, karena slide pertama menentukan rasio carousel.

Pengaplikasian

Buat satu template dengan zona aman tertandai, lalu pakai untuk semua konten kampanye. Angka zona aman hanya acuan, jadi cek panduan platform yang kamu pakai.

Publikasi Interaktif dan Animasi

Definisi

Berbeda dengan media cetak, publikasi digital dapat bereaksi terhadap pembacanya. Elemen interaktif seperti tautan, tombol, dan video, serta animasi singkat, membantu pembaca bernavigasi dan memahami isi.

Elemen Interaktif

•Hyperlink: tautan ke halaman lain, situs, atau formulir.

•Daftar isi dan bookmark: pembaca langsung melompat ke bagian yang dicari.

•Tombol navigasi: maju, mundur, dan kembali ke daftar isi.

•Media sisipan: video atau audio yang disisipkan atau ditautkan dalam publikasi.

Animasi yang Baik

•Singkat dan bertujuan: animasi mendukung pesan, bukan sekadar hiasan.

•Pesan tetap terbaca: teks tidak hilang terlalu cepat.

•Hindari kedipan cepat: kedipan berulang mengganggu dan tidak aman bagi sebagian orang.

Aksesibilitas Dasar

•Alt text: deskripsi singkat gambar yang dibaca pembaca layar.

•Urutan baca logis: judul, isi, lalu ajakan, mengikuti alur yang masuk akal.

•Kontras cukup: sesuai pedoman pada bagian warna.

Pengaplikasian

Ekspor publikasi interaktif dalam format yang diminta tugas, misalnya PDF interaktif, lalu uji semua tautan dan tombol sebelum dibagikan.

Produksi dan Publikasi Digital

Definisi

Memproduksi publikasi digital berarti mengerjakannya melalui tahapan yang jelas, memeriksanya sebelum diunggah, dan membaca hasilnya setelah tayang. Tahapan ini sejalan dengan praproduksi, produksi, dan pascaproduksi pada CP.

Tiga Tahap Produksi

1.Praproduksi: pahami brief, susun kalender konten, siapkan template dan aset.

2.Produksi: rancang desain, tulis teks pendukung, dan periksa isi.

3.Pascaproduksi: ekspor sesuai spesifikasi, uji di ponsel, unggah, lalu pantau hasil.

Daftar Periksa Sebelum Unggah

•Ukuran dan rasio: sesuai spesifikasi dan konsisten antarslide.

•Format dan ukuran file: sesuai kebutuhan dan tidak melewati batas platform.

•Keterbacaan: teks cukup besar, kontras cukup, dan berada di zona aman.

•Isi: tanggal, lokasi, tautan, dan ejaan sudah benar.

•Alt text dan hak cipta: gambar punya deskripsi dan izin pakai.

Etika dan Keamanan

•Hak cipta: pakai gambar milik sendiri atau berlisensi, dan cantumkan sumber bila diminta.

•Izin foto orang: minta izin sebelum menampilkan wajah seseorang.

•Data pribadi: jangan menampilkan nomor pribadi atau alamat rumah tanpa izin.

•Informasi benar: pastikan fakta akurat dan tidak menyesatkan.

Pengaplikasian

Setelah tayang, pantau jangkauan (berapa akun yang melihat), interaksi (suka, komentar, bagikan), dan klik tautan. Gunakan hasilnya untuk memperbaiki konten berikutnya.

Studi Kasus: Kampanye Digital Festival

Kasus

OSIS meminta kampanye digital dua minggu untuk Festival Karya Siswa, dengan sasaran siswa SMP kelas 9 dan orang tua. Tujuannya mengajak mereka hadir. Berikut paket konten dan jadwalnya.

Paket Konten dan Spesifikasi

•Carousel 5 slide: 1080 × 1350 piksel, JPG, RGB. Berisi hook, tiga slide isi, dan ajakan.

•Story hitung mundur: 1080 × 1920 piksel, animasi singkat (MP4), teks di zona aman.

•E-flyer PDF: satu halaman, RGB, ukuran file ringan agar mudah dibagikan lewat aplikasi pesan.

•Gambar pratinjau tautan: sekitar 1200 × 630 piksel untuk tautan pendaftaran.

•Template: palet warna dan dua jenis huruf yang sama di seluruh konten.

Contoh Jadwal Tayang

•H-7: carousel pengumuman, apa itu festival dan apa yang bisa dilihat.

•H-3: story hitung mundur dengan pengingat jadwal.

•H-1: e-flyer berisi denah dan lokasi.

•Hari H: story dari lokasi dengan ajakan segera datang.

Tugas Praktik Murid

1.Ambil design brief proyekmu dan tentukan paket konten digitalnya.

2.Tulis lembar spesifikasi: ukuran, format, mode warna, dan jadwal tayang.

3.Buat template dengan zona aman, lalu rancang satu carousel dan satu story.

4.Uji di ponsel, lalu jalankan daftar periksa sebelum unggah.

5.Presentasikan hasilnya dan jelaskan rencana membaca jangkauan dan interaksi.

Rubrik Penilaian

•Kesesuaian brief dan audiens (25%): pesan dan gaya tepat sasaran.

•Visual dan keterbacaan di layar (30%): hierarki, kontras, dan huruf.

•Kesiapan teknis (25%): ukuran, format, dan zona aman.

•Etika dan hak cipta (10%): aset berizin dan informasi benar.

•Presentasi dan evaluasi (10%): alasan dan rencana pemantauan jelas.

Kesimpulan

Desain publikasi digital menuntut kepekaan terhadap layar: ukuran piksel dan format file yang tepat, warna RGB dengan kontras yang cukup, huruf yang terbaca di ponsel, tata letak dengan zona aman, serta elemen interaktif yang membantu pembaca. Prosesnya mengikuti praproduksi, produksi, dan pascaproduksi, dilengkapi pemeriksaan sebelum unggah, etika penggunaan aset, dan pembacaan hasil. Kemampuan ini sejalan dengan elemen Karya Desain dan Proses Produksi Desain pada CP DKV Fase F.

E-Book Modul Ini

Baca ringkasan lengkap materi Desain Publikasi Digital dalam Desain Publikasi dalam format e-book yang bisa dibuka langsung tanpa perlu mengunduh.