Kalau tim sudah punya palet warna, aturan font, beberapa template, dan skala jarak, sebenarnya kamu sudah punya bahan design system. Yang belum ada hanyalah satu tempat yang merangkum semuanya, sehingga setiap anggota tim, termasuk anggota baru semester depan, mengambil keputusan desain yang sama.
Design system di perusahaan besar bisa berisi ratusan halaman. Untuk akun media sosial prodi, versi mini dengan lima sampai sepuluh halaman sudah sangat membantu.
Tiga lapis design system
Logikanya seperti menyusun bangunan: fondasi adalah bahan, komponen adalah batu bata, dan pola adalah bangunan yang sudah jadi.
Lapis 1: Fondasi
Catat keputusan dasar dalam bentuk tabel yang mudah disalin.
| Fondasi | Isi | Contoh |
|---|---|---|
| Warna | Kode HEX dan perannya | Utama #204ECB, aksen #FCDB5E, teks #0E1B4D |
| Tipografi | Font, ketebalan, ukuran per peran | Judul tebal 96 px, isi reguler 32 px |
| Jarak | Skala jarak tetap | 8, 16, 32, 48, 80 px |
| Sudut | Kelengkungan sudut kotak | 24 px untuk kartu, 999 px untuk label |
| Ikon | Satu gaya ikon | Ikon garis dengan ketebalan sama |
| Foto | Gaya foto | Cahaya alami, orang sedang beraktivitas, tanpa filter berat |
Contoh di atas memakai fondasi Masarin Unpam. Ganti dengan fondasi prodimu sendiri.
Panduan terkait untuk mengisi bagian ini: warna, tipografi, dan jarak.
Lapis 2: Komponen
Komponen adalah bagian kecil yang muncul berulang di banyak desain. Membuatnya sekali lalu menyalinnya jauh lebih cepat dan konsisten daripada membuat ulang setiap kali.
Di Canva, kumpulkan semua komponen dalam satu desain berjudul KOMPONEN. Anggota tim tinggal menyalin komponen ke desain mereka. Kalau tim memakai Canva berbayar, komponen ini juga bisa disimpan di Brand Kit.
Lapis 3: Pola
Pola adalah susunan lengkap yang siap pakai, yaitu template yang dibahas di panduan Membuat Template Canva yang Bisa Digunakan Satu Tim. Di design system, setiap pola diberi penjelasan singkat:
- Kapan dipakai. Misalnya: poster kegiatan untuk acara dengan pendaftaran.
- Komponen apa saja yang ada di dalamnya.
- Contoh yang benar dan yang salah, berupa tangkapan layar desain sungguhan.
Kode warna untuk jenis konten
Salah satu keputusan yang paling terasa di grid adalah warna per jenis konten. Contoh:
| Jenis konten | Warna label | Kesan di grid |
|---|---|---|
| Informasi akademik | Biru utama | Resmi dan tenang |
| Edukasi | Kuning aksen | Menarik untuk disimpan |
| Kegiatan dan prestasi | Foto dominan, label putih | Hidup |
| Promosi prodi | Biru tua | Kuat |
Dengan pola ini, pengikut bisa mengenali jenis postingan dari warnanya, bahkan sebelum membaca judulnya.
Dokumentasikan dengan sederhana
Design system yang tidak dibaca tidak ada gunanya. Jaga tetap ringkas:
- Buat satu dokumen Canva atau Google Slides berjudul Design System Medsos Prodi.
- Satu halaman untuk setiap fondasi, satu halaman untuk komponen, satu halaman untuk setiap pola.
- Lebih banyak gambar contoh, lebih sedikit kalimat.
- Tulis tanggal pembaruan terakhir di halaman pertama.
Siapa yang merawat
Tunjuk satu orang sebagai penanggung jawab design system. Tugasnya menerima usulan perubahan, memutuskan bersama koordinator, lalu memperbarui dokumen dan template. Tanpa penanggung jawab, design system akan perlahan tertinggal dari desain yang benar-benar dipakai tim.
