Belajar UI Designer - Branding dalam UI

#Pendahuluan

Setelah di episode 23 kita merancang perilaku, pada episode ini kita menyatukan identitas: branding dalam UI. Warna, tipografi, dan komponen yang kita bangun sejak episode 3 bukan kumpulan keputusan teknis — mereka adalah ekspresi brand: bagaimana produk ingin dirasakan.

Mengapa UI designer harus paham branding? Karena brand tidak hidup di logo saja — ia hidup di setiap layar: cara tombol berbicara, warna yang menenangkan atau energik, ilustrasi yang hangat atau tegas. Dua aplikasi keuangan dengan fitur identik bisa terasa sangat berbeda karena UI-nya menyuarakan brand yang berbeda. Kemampuan menerjemahkan brand ke keputusan UI adalah nilai jual utama UI designer.

#Brand Personality → Keputusan Visual

Setiap brand punya kepribadian — dan kepribadian itu harus konsisten di seluruh elemen visual:

Brand trait	Warna	Tipografi	Bentuk	Ilustrasi
Tepercaya & stabil	Netral, biru	Serif/sans formal	Sudut tegas	Minimalis
Muda & energik	Saturasi tinggi	Display bold	Sudut membulat	Karakter ceria
Premium & elegan	Monokrom + aksen	Serif halus	Spasi luas	Fotografi
Hangat & ramah	Krem, pastel	Rounded, friendly	Banyak lengkung	Ilustrasi hangat

Untuk Kantongin: target gen-Z, "muda tapi tidak kekanakan" → ungu tepercaya (episode 3) + Plus Jakarta Sans yang hangat (episode 4) + sudut membulat + ilustrasi flat yang ramah (episode 7). Keputusan ini bukan selera — semuanya turunan dari kepribadian brand.

Tip

Tulislah brand personality dalam 3 kata (misal "muda, tepercaya, ringan") lalu uji setiap keputusan UI: "apakah keputusan ini mencerminkan ketiga kata itu?" Uji cepat ini mengubah diskusi selera ("aku suka ini") menjadi diskusi brand ("ini tidak terasa tepercaya").

#Tone dan Voice di UI

Voice adalah kepribadian brand yang konsisten; tone adalah penyesuaiannya per konteks. Voice Kantongin: hangat, langsung, dan tidak menggurui. Tone menyesuaikan momen:

Momen sukses — meriah tapi tidak lebay: "Target tercapai! 🎉" (gunakan emoji hemat).
Momen error — tenang dan membantu, bukan menyalahkan: "Nominal tidak valid. Coba antara Rp10.000 dan Rp100.000."
Momen kosong — mengundang, bukan kosong: "Belum ada transaksi. Mulai catat pengeluaran pertamamu."

UI designer menulis microcopy (label, error, empty state, tombol) — dan microcopy adalah brand yang paling sering dibaca pengguna. Gunakan bahasa manusia, singkat, dan sesuai tone momen.

Tone microcopy yang konsisten

Voice Kantongin: hangat, langsung, tidak menggurui
 
Empty state   : "Belum ada transaksi bulan ini.
                 Yuk catat pengeluaran pertamamu — 2 menit saja."
Error         : "Nominal melebihi saldo. Cek lagi, ya."
Sukses        : "Transaksi tercatat. Saldo terbaru sudah update."

#Konsistensi Brand di Semua Elemen

Brand harus utuh di setiap titik kontak antarmuka:

Logo & wordmark — dipakai konsisten (ukuran, jarak, area aman); jangan diperlakukan fleksibel tiap layar.
Warna — palette brand dipakai dengan peran yang jelas (episode 3), bukan "brand color" yang muncul acak.
Ikon & ilustrasi — gaya yang kita tetapkan di episode 7 adalah bahasa visual brand.
Motion — karakter gerakan (cepat/lembut) juga brand: Kantongin bergerak ringan dan cepat (episode 16).
Suara & kata — microcopy konsisten dengan voice brand di semua layar.

Sumber kebenaran: brand guidelines yang menetapkan keputusan ini — dan UI designer memastikan design system (episode 9) menerjemahkannya ke token & komponen.

Warning

Jangan pernah mengorbankan usability demi brand: brand yang "sangat berani" (warna nyala, font eksperimental) tidak boleh membuat teks sulit dibaca atau tombol sulit ditemukan. Brand dan usability bukan dua hal yang bersaing — brand yang baik diekspresikan dalam batasan yang tetap usable dan accessible.

#Dari Brand Guidelines ke UI

Alur kerja menghubungkan brand ke antarmuka:

Brand foundation — nilai, personality, kata kunci brand.
Visual brand — logo, warna brand, tipografi brand, gaya aset.
Design tokens — terjemahan brand ke token semantik (episode 9): color.primary = warna brand, dsb.
Komponen & layout — keputusan radius, elevasi, dan komposisi yang menyuarakan brand.
Verifikasi — cek konsistensi: apakah tiap layar terasa "satu brand"?

Jika salah satu lapisan lepas (misal logo baru tapi palette lama), kesan brand pecah. UI designer menjaga rantai ini tetap utuh.

#Praktik: UI Berbasis Brand Kantongin

Tuliskan 3 kata personality Kantongin (misal "muda, tepercaya, ringan").
Audit satu layar: apakah warna, tipografi, radius, dan microcopy mencerminkan ketiga kata itu?
Tulis ulang 3 microcopy (empty, error, sukses) agar konsisten dengan voice.
Cek konsistensi logo & wordmark (ukuran, jarak) di layar utama.
Dokumentasikan "voice & tone" di halaman Overview file system.

#Common Pitfalls

Brand hanya di logo — warna & tone brand tidak konsisten di layar lain.
Keputusan selera tanpa brand — "aku suka", bukan "sesuai personality".
Tone tidak menyesuaikan momen — error yang bercanda, sukses yang flat.
Microcopy tidak konsisten — bahasa berubah-ubah antar layar.
Usability dikorbankan — brand "berani" yang merusak keterbacaan.

#Penutup

Pada episode 24 ini, kalian telah menghubungkan identitas brand ke setiap keputusan antarmuka.

Inti yang harus dibawa pulang:

Brand personality diterjemahkan ke warna, tipografi, bentuk, dan ilustrasi yang konsisten.
Voice konsisten, tone menyesuaikan momen — microcopy adalah brand yang paling sering dibaca.
Brand hidup di setiap titik kontak: logo, warna, ikon, motion, dan kata.
Brand diekspresikan dalam batasan usability & accessibility, bukan melawan mereka.

Di episode 25 selanjutnya kita akan membahas UI research & iteration loop — menguji desain, mengumpulkan feedback, dan melakukan iterasi berulang untuk mematangkan Kantongin. Sampai jumpa di episode 25!