Ilustrasi adalah gambar buatan, bukan foto, yang memberi suasana dan membantu menjelaskan sesuatu. Visual asset adalah sebutan untuk semua file gambar yang dipakai halaman: ilustrasi, ikon, foto, logo. Bayangin papan "Penuh" yang digantung Bu Sri di pintu homestay saat semua kamar terisi. Papannya bergambar rumah kecil di bawah bulan, digambar dengan spidol hijau yang sama dengan papan fasilitas, dan di bawahnya tertulis: "Kamar penuh malam ini. Tanggal 27 Kamar Teras kosong, silakan tanya." Gambarnya membuat tamu gak merasa diusir, tapi yang benar-benar menolong adalah tulisannya. Kalau gambarnya sebesar pintu sampai tulisannya gak kebaca, papannya gagal.
🧪 Tebakan cepat: Pencarian kamar untuk 24 sampai 26 Des gak menemukan apa-apa, dan halamannya menampilkan ilustrasi setinggi 240px di atas pesan dan tombol "Lihat 27 sampai 29 Des". Di HP 360 × 640, tombol itu masih utuh di layar pertama? Jawabannya ada di bagian "Ukuran tampil: tindakannya harus kelihatan".
Kapan ilustrasi membantu
Ilustrasi menolong di momen yang jarang terjadi dan perlu dijelaskan:
- Empty state (halaman kosong): pencarian tanpa hasil, daftar favorit yang belum diisi.
- Onboarding (perkenalan pertama): tiga langkah saat Bu Sri pertama kali membuka dasbornya.
- Error page: 404 "halaman gak ketemu", layanan sedang dirawat.
- Landing page: bagian pembuka halaman promosi.
Ilustrasi mengganggu di halaman yang dipakai berkali-kali dan padat data, seperti dasbor 16 pesanan Bu Sri, dan di form, tempat tamu sedang fokus mengisi.
Empty state: gambar, pesan, tindakan
Empty state yang baik punya tiga bagian, dan yang paling penting justru bukan gambarnya:
<section class="empty">
<svg class="art" viewBox="0 0 240 160" aria-hidden="true">...</svg>
<h2>Semua kamar penuh 24 sampai 26 Des</h2>
<p>Tiga kamar Bu Sri sudah dipesan untuk tanggal itu.
Tanggal 27 sampai 29 Des, Kamar Teras dan Kamar Kebun masih kosong.</p>
<button class="book">Lihat 27 sampai 29 Des</button>
</section>
- Pesan: apa yang terjadi (semua kamar penuh), kenapa (tiga kamar sudah dipesan), dan apa yang bisa dilakukan (tanggal terdekat yang kosong). "Tidak ada hasil, coba lagi nanti" gak menjawab satu pun.
- Tindakan: tombol yang langsung membawa ke jalan keluarnya.
- Ilustrasi: hiasan, karena pesannya sudah menjelaskan semuanya. Jadi
aria-hidden="true"di<svg>, ataualt=""kalau dipasang sebagai<img>. Ilustrasi yang membawa informasi (misalnya diagram langkah onboarding) butuh teks pengganti yang menjelaskan isinya.
Satu gaya dengan ikon dan halaman
Seperti icon set, ilustrasi harus satu gaya dengan halamannya. Ilustrasi empty state Bu Sri digambar dengan aturan ikon fasilitas: garis 2 dengan ujung bulat, datar tanpa bayangan, dan warnanya dari palet halaman.
| Gaya halaman | Stok generik | |
|---|---|---|
| Garis | 2, ujung bulat, seperti ikon | tanpa garis, bentuk tebal |
| Warna | 6, semua dari palet halaman: hijau #15803d, #bbf7d0, #dcfce7, #f0fdf4, abu #94a3b8, putih |
6, lima di antaranya gak ada di halaman: ungu #a855f7, ungu muda, oranye #f97316, kuning, cyan |
| Efek | datar | gradasi dan bayangan |
| Isinya | rumah di bawah bulan dan kabut, tentang homestay ini | wajah sedih, bisa untuk situs apa saja |
Ilustrasi stok generik kurang ideal karena gambar yang sama dipakai di banyak situs lain: dia gak bilang apa-apa tentang homestay Bu Sri, dan di samping ikon garis hijau dia terlihat seperti tempelan. Kalau pakai paket stok, pilih satu paket, ganti warnanya ke palet halaman, dan pakai paket itu di semua tempat.
Ukuran tampil: tindakannya harus kelihatan
Ini posisi tombol "Lihat 27 sampai 29 Des" di HP 360 × 640, diukur di Chrome, dengan judul situs, dua kolom tanggal, dan tombol cari di atasnya:
| Tinggi ilustrasi | Tombol | Di layar 640px |
|---|---|---|
| tanpa | 369 sampai 417px | utuh |
| 80px | 465 sampai 513px | utuh |
| 160px | 545 sampai 593px | utuh |
| 200px | 585 sampai 633px | utuh, mepet |
| 240px | 625 sampai 673px | terpotong 33px |
Jadi jawaban tebakannya: gak. Dengan ilustrasi 240px, cuma 15px atas tombolnya yang masuk layar; sisanya harus di-scroll. Itu jawaban tebakannya. Gambarnya lebih besar dari yang dibutuhkan pesannya. Di HP, 120 sampai 160px sudah cukup untuk memberi suasana.
Ukuran file: SVG untuk gambar garis
Ilustrasi empty state tadi, 240 × 160, disimpan dengan beberapa cara:
| Format | Gaya halaman | Stok generik |
|---|---|---|
| SVG inline | 555 byte (305 byte setelah gzip) | 736 byte (408 byte setelah gzip) |
| PNG 2x (480 × 320, untuk layar tajam) | 10.559 byte | 29.165 byte |
| WebP 2x, kualitas 80 | 5.000 byte | 3.922 byte |
- Gambar garis dan bidang datar paling kecil sebagai SVG, dan tetap tajam di DPR berapa pun karena digambar ulang dari bentuknya.
- Gradasi dan bayangan membuat PNG membengkak (29.165 byte), sedangkan WebP justru lebih kecil untuk gambar seperti itu. Jadi jangan menebak: ukur.
- Ilustrasi yang sangat detail (ratusan bentuk) bisa lebih besar sebagai SVG daripada WebP. Untuk gambar seperti itu, pakai
<img>dengan WebP,width,height, danloading="lazy"kalau letaknya di bawah.
⚠️ Jebakan yang sering ketemu
- Ilustrasi tanpa pesan yang menolong. Gambar ramah plus "Tidak ada hasil" tetap membuat tamu buntu. Tulis apa, kenapa, dan apa selanjutnya.
- Ilustrasi kebesaran. 240px mendorong tombolnya keluar layar 640px. Gambar mendukung pesan, bukan menggantikannya.
- Gaya campur. Ilustrasi stok berwarna ungu dengan bayangan di samping ikon garis hijau. Satu gaya, satu palet.
- Ilustrasi di halaman kerja. Dasbor dan form gak butuh gambar.
TL;DR: Ilustrasi efektif di momen yang jarang dan perlu dijelaskan: empty state, onboarding, error page, dan landing page; bukan di dasbor padat data atau form. Empty state punya tiga bagian: ilustrasi (hiasan, jadi aria-hidden="true" atau alt=""), pesan yang bilang apa yang terjadi, kenapa, dan apa selanjutnya, lalu tombol tindakannya. Ilustrasi harus satu gaya dengan ikon dan halaman (garis yang sama, palet yang sama); ilustrasi stok generik dipakai di banyak situs lain, jadi gak bilang apa-apa tentang brand-nya. Jaga ukurannya: di HP 360 × 640, ilustrasi 240px memotong tombolnya, 160px masih aman. Gambar garis paling kecil sebagai SVG (555 byte lawan PNG 2x 10.559 byte), tapi ukur dulu, karena gradasi bisa lebih kecil sebagai WebP.
