Ilustrasi

Ilustrasi membantu menjembatani pesan yang kompleks agar lebih mudah dipahami oleh semua pengguna.

Dengan visual yang jelas, relevan, dan inklusif, ilustrasi menjadi sarana untuk menghadirkan komunikasi publik yang lebih dekat dan bermakna.

Prinsip Ilustrasi

Prinsip ilustrasi digunakan untuk menjaga konsistensi visual, meningkatkan penampilan, memperjelas konteks, memperkuat pesan, serta membantu pengguna memahami informasi dengan cepat.

Berikut adalah prinsip-prinsip yang dipegang oleh ilustrator untuk merancang bahasa visual yang efektif.

Tepercaya

Ilustrasi merepresentasikan nilai lembaga publik yang tepercaya, tertata, dan bertanggung jawab. Gunakan bentuk yang rapi, komposisi stabil, serta ekspresi positif yang tidak berlebihan.

Jelas dan Sederhana

Setiap ilustrasi berfungsi menjelaskan pesan atau proses administratif secara ringkas dan mudah dipahami.

Humanis dan Hangat

Ilustrasi menampilkan sisi manusiawi dari pelayanan publik. Gestur, ekspresi, dan interaksi karakter menggambarkan empati, kerja sama, dan semangat melayani.

Inklusif

Ilustrasi mencerminkan keberagaman budaya, gender, usia, dan latar belakang masyarakat Indonesia secara adil dan proporsional.

Konsisten namun Adaptif

Sistem ilustrasi ini menjaga keseragaman gaya visual di seluruh produk, sekaligus memungkinkan adaptasi lintas lembaga dan branding.

Gaya Ilustrasi

Gaya ilustrasi menggabungkan bentuk geometris dasar dengan sentuhan organik. Bentuk-bentuk ini dirancang untuk mudah di-scale dan memiliki potensi untuk dikembangkan menjadi grafis interaktif, bertujuan untuk mendukung pengalaman ilustrasi yang lebih natural dan humanis.

Style yang digunakan memadukan bentuk geometris dan organik untuk menciptakan visual yang fleksibel dan natural.

Elemen dengan sudut membulat dan gaya line art menghadirkan tampilan yang ringan, ramah, serta selaras dengan elemen antarmuka pengguna (UI).

Fitur-fitur dengan sudut membulat menghadirkan suasana aplikasi yang ringan, ramah, mudah diakses, dan tidak melelahkan secara visual. Sementara sentuhan line art membantu menyelaraskan ilustrasi dengan elemen UI, menciptakan kesatuan visual yang harmonis.

Ilustrasi Hero

Ilustrasi State

Ilustrasi Spot

Nada dan Emosi Ilustrasi

Setiap ilustrasi dikembangkan untuk menampilkan emosi yang hangat dan alami. Ekspresi, gestur, dan warna dipilih untuk membangun rasa kedekatan dengan pengguna tanpa berlebihan.

Tujuannya agar ilustrasi tidak hanya menarik secara visual, tetapi juga mampu menyampaikan empati dan membangun hubungan positif dengan pengguna.

✅ Disarankan

Gunakan analogi yang mudah dipahami dan terasa dekat bagi pengguna saat menjelaskan konteks.

❌ Dihindari

Hindari penyampaian konteks yang terlalu gamblang atau terlalu teknis.

✅ Disarankan

Gunakan metafora yang relevan dengan keseharian dan pengalaman pengguna.

❌ Dihindari

Hindari ilustrasi yang menyampaikan konteks secara abstrak atau acak.

✅ Disarankan

Komunikasikan konteks melalui gestur, ekspresi, dan interaksi karakter yang menggambarkan empati, kerja sama, dan semangat melayani.

❌ Dihindari

Hindari penyampaian konteks yang terkesan galak, kaku, atau mengintimidasi.

Penyesuaian dan Pengembangan

Sistem ilustrasi dikembangkan dengan prinsip satu bahasa visual yang konsisten namun adaptif di berbagai konteks. Setiap lembaga, kementerian, atau instansi dapat menyesuaikan tampilannya sambil tetap mempertahankan identitas masing-masing, menjadikannya landasan visual lintas lembaga yang efisien, inklusif, dan berkelanjutan.

Elemen dengan sudut membulat dan gaya line art menghadirkan tampilan yang ringan, ramah, serta selaras dengan elemen antarmuka pengguna (UI).

Untuk menjaga konsistensi visual di berbagai tema, pewarnaan elemen ilustrasi dibagi menjadi dua metode.

Warna Statik: Digunakan pada objek utama. Warna yang terpilih tidak akan mengalami perubahan meskipun ada di dalam berbagai tema.

Warna Dinamik: Digunakan pada objek pendukung. Warna yang digunakan dapat diubah dan disesuaikan dengan palet tema yang dikehendaki.

Pendekatan ini memastikan ilustrasi tetap seragam di seluruh produk digital pemerintahan, namun tetap fleksibel terhadap kebutuhan identitas dan konteks tiap lembaga.

Ilustrasi Hero

Ilustrasi hero adalah ilustrasi utama yang naratif dan aspiratif, berfungsi sebagai penarik perhatian, menyampaikan pesan utama, membangun cerita, dan menghadirkan suasana emosional.

Umumnya digunakan pada halaman onboarding, beranda, atau cover banner.

Elemen

Ilustrasi utama yang naratif dan aspiratif. berfungsi sebagai penarik perhatian, menyampaikan pesan utama, membangun cerita dan suasana emosional. biasanya ada pada onboarding page, homepage maupun cover banner.

Background: Area dasar yang membantu menyeimbangkan komposisi dan membentuk suasana visual.

Figur: Karakter hidup yang menjadi pusat perhatian.

Prop/Object: Elemen atau benda yang mendukung konteks cerita.

Attributes: Detail tambahan seperti gestur, ekspresi, atau simbol yang memperkuat pesan dan karakter.

Penggunaan

Gunakan ilustrasi hero ketika layar atau halaman perlu menyampaikan pesan besar atau membangun cerita visual yang kuat. Karena tingkat kompleksitasnya tinggi, ilustrasi jenis ini berfungsi sebagai fokus utama yang menarik perhatian dan membangun suasana emosional, seperti pada onboarding, beranda, atau editorial banner.

Feature Banner

Homepage

Editorial Cover

Dialog Banner

Komposisi

Elemen di dalam ilustrasi hero disusun dengan pendekatan sederhana dan mudah dibaca. Fokusnya menjaga kejelasan bentuk serta hubungan antar elemen tanpa kehilangan proporsi.

Dua sudut pandang utama yang digunakan adalah Front View dan Top View.

Keduanya membantu menciptakan bahasa visual yang konsisten, menjaga kesetaraan antar karakter, serta menghadirkan tampilan yang ringan, modern, dan mudah diterapkan di berbagai konteks.

Top View: Menampilkan objek dari sudut atas. memberi kesan ringkas, informatif, dan efektif untuk pesan yang bersifat sistemik.

Front View: Menampilkan object dari arah depan secara langsung tanpa perspektif titik hilang (eye level perspective). pendekatan ini membantu menjaga ekspresi, dan interaksi yang lebih personal. juga mudah di reproduksi.

Cara Penggunaan yang Disarankan

✅ Disarankan

Hindari teks di dalam gambar. Letakkan copy di luar area ilustrasi.

❌ Dihindari

Menggunakan teks sebagai bagian dari ilustrasi.

✅ Disarankan

Gunakan ilustrasi state sesuai proporsi dan ukuran yang telah ditetapkan.

❌ Dihindari

Mengubah proporsi atau ukuran ilustrasi state dari standar yang sudah ditentukan.

Ilustrasi State

Ilustrasi ini digunakan untuk menampilkan kondisi atau status tertentu pada system. Ilustrasi state digunakan untuk membantu pengguna memahami situasi dengan cepat melalui visual mudah untuk dicerna dan dimengerti.

Elemen

Ilustrasi state memiliki tingkat kompleksitas menengah. Elemen visualnya cukup untuk memperjelas konteks tanpa detail berlebih, sehingga tetap ringan dan mudah dipahami. Ada empat elemen di dalamnya, dan penggunaannya pun dapat dengan semuanya atau hanya sebagian, sesuai kebutuhan konteks.

Background: Area latar berisi container seperti bentuk, pola, atau supergraphic yang mendukung suasana visual dengan menggunakan warna dinamik.

Figur: Karakter hidup utama yang menjadi pusat cerita dan perhatian dengan menggunakan warna statik.

Prop/Object: Elemen atau benda yang mendukung konteks cerita.

Attributes: Detail tambahan seperti gestur, ekspresi, atau simbol yang memperkuat pesan dan karakter.

Penggunaan

Gunakan ilustrasi state untuk menampilkan kondisi spesifik pada sistem, misalnya saat halaman kosong, proses sedang berlangsung, atau koneksi bermasalah. Ilustrasi ini membantu mengurangi ketegangan pengguna dan memperjelas konteks dengan sentuhan visual yang humanis.

Contoh penggunaan pada empty state

Contoh penggunaan pada bottomsheet

Berdasarkan konteks, ilustrasi state terbagi menjadi dua diantaranya positif (seperti netral, konfirmasi, dan selebratori) maupun negatif (seperti gangguan teknis, atau ketiadaan data).

Contoh penggunaan keadaan positif

Contoh penggunaan keadaan negatif

Spesifikasi

Ukuran dari ilustrasi state adalah 280 x 210 px (proporsi 4:3). Untuk ilustrasi yang lebih kecil, gunakan jenis ilustrasi lain dengan tingkat kompleksitas yang lebih kecil.

Artboard Size

Artboard Grid

Cara Penggunaan yang Disarankan

✅ Disarankan

Hindari teks di dalam gambar. Letakkan copy di luar area ilustrasi.

❌ Dihindari

Menggunakan teks sebagai bagian dari ilustrasi.

✅ Disarankan

Gunakan ilustrasi state sesuai proporsi dan ukuran yang telah ditetapkan.

❌ Dihindari

Mengubah proporsi atau ukuran ilustrasi state dari standar yang sudah ditentukan.

Focal Point

Focal point digunakan untuk memastikan perhatian pengguna langsung tertuju pada pesan utama. Setiap ilustrasi state disusun dengan keseimbangan komposisi dan ruang kosong agar visual tetap jelas serta mudah dipahami di berbagai ukuran layar.

Golden Ratio

Rule of Thirds

Triangular Points

Leading lines

Ilustrasi Spot

Kompleksitas ilustrasi spot termasuk rendah. Ilustrasi ini menjadi bentuk komunikasi visual yang ringan dan sederhana.

Fungsinya memperkuat identitas visual tanpa menarik perhatian utama, serta membantu menjelaskan konteks dengan cepat melalui elemen pendukung yang ekspresif.

Elemen

Ilustrasi spot menggunakan elemen dengan kompleksitas rendah. Satu objek utama sudah cukup untuk menyampaikan pesan secara langsung.

Karena bersifat ekspresif, ilustrasi ini berfungsi sebagai elemen pendukung dan tidak memerlukan karakter hidup serta hanya menggunakan warna dinamik.

Spesifikasi

Ilustrasi spot umumnya memiliki rasio 1:1 dan ditempatkan sesuai kebutuhan tanpa mengganggu komponen utama antarmuka. Tujuannya adalah menjelaskan konten tanpa fungsi langsung.

Jika konteks yang ingin dijelaskan bersifat fungsional atau navigasional, terutama pada ukuran yang lebih kecil dari standar, gunakan system icon.

Aspek	Ilustrasi Spot	Ikon
Fungsi	Komunikatif dan Ekspresif. sebagai konten dan visual pendukung.	Fungsional dan sistemik sebagai elemen interaksi yang memandu pengguna.
Visual Detail	Sederhana namun organik dan ekspresif.	Sangat sederhana dan geometris, dengan stroke dan ratio yang konsisten.
Konteks	Menjelaskan konten secara langsung.	Menandai tindakan atau navigasi.
Ukuran	Umumnya 150x150 hingga 50x50.	Maksimum 48x48.

Cara Penggunaan yang Disarankan

✅ Disarankan

Pastikan ilustrasi hanya pada tempat yang dibutuhkan.

❌ Dihindari

Hindari penggunaan ilustrasi secara berlebihan di berbagai area.

✅ Disarankan

Hanya gunakan objek utama pada spot illustration.

❌ Dihindari

Hindari penggunaan karakter hidup pada penggunaan spot illustration.

✅ Disarankan

Sesuaikan kompleksitas ilustrasi dengan ukuran area. Semakin kecil areanya, semakin sederhana ilustrasinya. Pastikan jenis ilustrasi sudah disesuaikan dengan fungsinya masing-masing.

❌ Dihindari

Hindari ilustrasi dengan tingkat kompleksitas yang tidak sesuai dengan konteks atau area.

Aset Ilustrasi di Figma

Semua aset serta elemen ilustrasi dalam sistem ini tersedia dalam satu tempat untuk memudahkan proses desain lintas tim dan lembaga.

Di dalam Figma Resource Library, kamu akan menemukan kumpulan aset Spot, State, dan Hero yang dapat digunakan sesuai kebutuhan.

Setiap aset dirancang agar konsisten dengan prinsip ilustrasi dan gaya visual IDDS, namun tetap fleksibel untuk beradaptasi dengan konteks dan identitas masing-masing lembaga.

Buka Resource di Figma