Kehidupan kita di bentuk oleh Desain UI tipografi warna, mulai dari papan reklame hingga sampul buku; poster film hingga iklan makanan. Dan hal itu tidak berbeda dalam hal desain konten dan pengalaman pengguna (UX). Tipografi dan palet warna yang di gunakan dalam produk dan sistem digital memengaruhi emosi, perilaku, dan pengambilan keputusan kita.
Faktanya, pilihan desain seputar jenis huruf dan warna untuk situs web, aplikasi seluler, realitas campuran, atau teknologi yang dapat di kenakan dapat menjadi pembeda antara pengalaman yang mulus dan memuaskan atau frustrasi dan pengucilan yang merusak hari kita.
Jadi, apakah Anda calon desainer produk, desainer konten veteran, pemasar digital, atau siapa pun yang bertanggung jawab terhadap informasi daring, Anda perlu mengetahui beberapa dasar di bidang ini. Bagian pertama artikel ini membahas tipografi. kedua membahas palet warna. Bagian terakhir membahas cara menerapkan keduanya pada Desain UI tipografi warna dalam praktik.
Tipografi
Tipografi adalah bentuk seni berusia 500 tahun. Menerapkan tipografi ke antarmuka pengguna (UI) digital hanyalah bab terakhir dalam cerita yang panjang. Sebagai desainer, kita berdiri di atas bahu para raksasa dalam hal tipografi. Mari kita mulai dengan sebuah definisi.
Apa itu tipografi?
Tipografi adalah praktik mengatur huruf dan teks sedemikian rupa sehingga konten antarmuka pengguna dapat dikenali, terbaca, dan menarik secara visual.
Istilah jenis huruf dan fon sering di gunakan secara bergantian — tetapi ada perbedaan di antara keduanya: jenis huruf pertama mewakili seluruh keluarga fon; jenis huruf kedua merujuk pada ketebalan, lebar, dan gaya dalam keluarga tersebut.
Mengapa tipografi penting dalam desain?
Ada banyak alasan mengapa tipe itu penting, termasuk:
- Pencitraan merek — jenis huruf yang tepat mendukung nada suara Anda, dan penggunaan font yang dapat di kenali di mana pun pengguna/pelanggan berinteraksi dengan perusahaan Anda memastikan konsistensi dan kepercayaan.
- Kegunaan — tipografi yang jelas dan mudah di baca membantu pengguna mempelajari produk dan layanan yang ingin atau perlu mereka akses dengan cepat dan mudah. Jika orang tidak dapat membaca informasi ini, mereka akan beralih ke pesaing, atau menyerah begitu saja.
- Inklusi — pilihan tipografi yang tidak dapat di akses atau tidak sesuai dengan budaya berisiko mengecualikan penyandang disabilitas atau kebutuhan akses lainnya.
Teori tipografi berjalan cukup mendalam — lihat diagram di bawah ini, yang sesuai dengan hierarki kebutuhan pengguna dalam desain UX dan antarmuka dengan properti tipografi:
Apa saja pilihan tipografi yang ada?
Pada dasarnya Anda memiliki empat jenis utama jenis huruf untuk dipilih:
- Serif — gaya klasik yang secara tradisional di temukan dalam buku, surat kabar, dan majalah cetak. Jenis huruf serif menyampaikan kualitas sastra dan berkelas tinggi. Contoh: Times New Roman, Merriweather.
- Sans serif — jenis huruf yang bersih dan sederhana yang sering di gunakan untuk situs web dan aplikasi seluler guna menyampaikan kesan netral, minimalis, dan kontemporer. Variasi yang membulat memiliki kesan yang menyenangkan dan ceria; versi yang ringan menyampaikan kesan elegan dan mewah. Contoh: Arial, Roboto.
- Font dekoratif — biasanya di gunakan untuk logo dan judul guna mencerminkan nuansa produk atau layanan, dan di maksudkan agar menarik secara estetika dan tidak terlalu mudah dibaca. Contoh: Cooper Black, Lobster.
- Font skrip — jenis huruf yang di rancang agar tampak seperti tulisan tangan. Skrip kasual menyampaikan kualitas pribadi dan buatan tangan; skrip formal menyampaikan formalitas dan keanggunan. Contoh: Pacifico, Caveat.
Perbedaan antara kedua pilihan ini di ilustrasikan di bawah ini:
Anda dapat menggunakan situs web seperti Google Fonts untuk bermain-main dengan tampilan konten Anda menggunakan jenis huruf yang berbeda.
Tips untuk menggunakan tipografi
Berikut ini beberapa praktik yang baik untuk mendesain dengan jenis huruf:
- Pilih jenis huruf yang mencerminkan merek Anda — pengguna mengasosiasikan jenis huruf tertentu dengan industri dan jenis produk tertentu. Beberapa orang bahkan mungkin mengasosiasikan jenis huruf dengan harga, kualitas, dan nilai merek. Ikuti Hukum Jackob dan pilih jenis huruf yang mungkin diharapkan pengguna berdasarkan pengalaman mereka di situs web serupa.
- Gunakan jenis huruf sans serif secara default — tidak banyak perbedaan dalam keterbacaan bagi kebanyakan orang antara serif dan sans serif, tetapi untuk anak-anak, orang tua, dan mereka yang memiliki penglihatan rendah atau disleksia, sans serif yang lebih bersih lebih mudah dipindai, dibaca, dan berinteraksi .
- Ingat prinsip desain ‘bentuk mengikuti fungsi’ — tipografi yang Anda pilih harus mencerminkan tujuan produk Anda. Misalnya, GOV.UK menggunakan fon sans serif karena pengguna ingin cepat menggunakan layanan yang dapat diakses lalu meninggalkan situs web; The Atlantic menggunakan fon serif karena pengguna ingin menikmati pengalaman membaca majalah yang panjang.
- Uji tipografi Anda dengan pengguna/pelanggan — penting untuk mengetahui bagaimana perasaan pengguna tentang tipografi produk Anda, dan apakah tipografi tersebut memengaruhi pengalaman atau tindakan mereka. Ada banyak cara untuk melakukan riset Desain UI tipografi warna Anda, mulai dari studi daya tarik dan kelompok fokus yang memperoleh wawasan kualitatif hingga pengujian A/B dan pelacakan mata untuk menganalisis data kuantitatif.
- Pertimbangkan untuk mengizinkan pengguna menyesuaikan pengalaman mereka — ini dapat mencakup penggunaan fitur bawaan, hamparan aksesibilitas, atau memastikan pengguna dapat menggunakan teknologi bantuan mereka sendiri untuk mempersonalisasi tipografi produk Anda, misalnya menambah ukuran teks atau mengubah ke font seperti Dyslexie yang dapat membantu pembaca disleksia.
Warna
Penggunaan warna untuk membangkitkan emosi merupakan bentuk seni yang bahkan lebih tua daripada tipografi, yang sudah ada sejak zaman Yunani, Mesir, dan Cina kuno. Namun, bagaimana penerapannya pada Desain UI tipografi warna modern? Sekali lagi, mari kita mulai dengan definisi.
Apa itu palet warna?
Palet warna adalah kombinasi warna yang digunakan oleh desainer untuk menciptakan antarmuka yang mudah diakses dan menarik, sering kali sebagai bagian dari sistem desain yang koheren. Palet warna didasarkan pada teori warna .
Namun, kita tidak akan membahasnya sekarang; kita akan fokus pada aspek praktis dalam menciptakan palet warna dasar dalam desain UI. Internet dipenuhi dengan inspirasi untuk palet warna. Misalnya, kombinasi di bawah ini, yang masing-masing dapat digunakan untuk jenis produk digital yang berbeda.
Anda dapat menggunakan alat seperti Coolors dan Canva untuk membuat atau menjelajahi palet warna yang sedang tren.
Mengapa Desain UI tipografi warna penting dalam desain?
Ada banyak faktor, termasuk:
- Pencitraan merek — menggunakan warna yang konsisten, mudah di kenali, dan khas untuk perusahaan atau organisasi Anda membantu Anda menonjol, dan selaras dengan pengenalan heuristik kegunaan atas ingatan .
- Kegunaan — palet warna yang di rancang dengan baik membantu membuat antarmuka Anda lebih cepat dan mudah di gunakan. Misalnya, palet warna membantu pengguna mengidentifikasi menu, tautan, dan fitur lainnya — mendukung prinsip desain yang mudah ditemukan (pengguna mengetahui tindakan apa yang mungkin di lakukan).
- Aksesibilitas — kontras yang kuat antara elemen latar depan dan latar belakang membantu semua orang, terutama orang dengan penglihatan rendah . Bergantung pada lokasi Anda, Anda mungkin juga di wajibkan secara hukum untuk mematuhi peraturan aksesibilitas web.
- Konversi — menemukan warna optimal untuk elemen UI seperti tombol ajakan bertindak (CTA) dapat meningkatkan rasio konversi. Anda dapat bereksperimen dengan perangkat lunak pengujian A/B untuk menemukan variasi yang menghasilkan klik terbanyak.
- Emosi — pengguna mengasosiasikan warna-warna tertentu dengan emosi dan suasana hati tertentu. Itu berarti pilihan desainer atas kombinasi warna dapat memengaruhi perasaan orang saat menggunakan suatu produk atau sistem, yang memengaruhi seluruh pengalaman mereka dalam berinteraksi dengan suatu merek (lihat di bawah).
Apa saja jenis palet warna yang ada?
Sistem palet warna yang berbeda meliputi:
- Monokromatik — pilihan sederhana dan populer, di mana palet di bentuk dari berbagai corak dan warna dari satu warna.
- Analog — sistem palet yang lebih kompleks yang terbentuk dari tiga warna yang terletak bersebelahan pada roda warna.
- Komplementer — mungkin berlawanan dengan intuisi, palet warna komplementer terbentuk dari warna-warna yang berlawanan satu sama lain pada roda warna (untuk mencapai efek kontras yang kuat).
- Triad — pendekatan palet ini di dasarkan pada tiga warna berbeda yang berjarak sama satu sama lain pada roda warna. Biasanya, desainer memilih satu warna dominan dan dua lainnya sebagai warna aksen .
Tips untuk mendesain palet warna
- Mulailah dengan melakukan riset — cari tahu warna mana yang dapat membangkitkan suasana hati atau emosi yang ingin dicapai produk/layanan Anda. Pelajari konvensi warna apa yang berlaku untuk produk serupa di industri Anda. (Mengikuti konvensi industri yang telah ditetapkan berarti mematuhi konsistensi dan standar heuristik kegunaan .)
- Pertimbangkan untuk tetap menggunakan satu warna merek — beberapa perusahaan teknologi terbesar di dunia, termasuk Facebook, Airbnb, dan Spotify, memiliki palet warna berdasarkan satu warna merek. Warna ini kemudian digunakan sebagai elemen interaktif utama (tombol). Menjaga hal-hal tetap sederhana seperti ini menghindari Desain UI tipografi warna, sehingga mengurangi beban kognitif .
- Pertimbangkan palet monokromatik — memilih palet berdasarkan variasi warna yang sama dapat menciptakan tampilan yang kohesif, menyederhanakan antarmuka, dan menyampaikan kehadiran merek yang kuat. Palet monokromatik di buat menggunakan sistem warna HSB, menggunakan rona yang sama untuk setiap warna tetapi menyesuaikan saturasi dan kecerahan (kita akan membahasnya di bagian terakhir).
- Pastikan sistem warna Anda dapat di akses — Pedoman Aksesibilitas Konten Web (WCAG) mengharuskan rasio kontras warna minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Anda dapat menggunakan alat seperti pemeriksa kontras WebAIM untuk melihat apakah warna Anda sesuai. Namun, perlu di ingat bahwa standar kontras WCAG saat ini tidak sempurna (lihat di bawah), dan akan di ubah menjadi Algoritma Kontras Persepsi yang Dapat Diakses (APCA) dalam versi 3.
- Uji dengan pengguna Anda — penting untuk menguji kombinasi warna Anda dengan pengguna yang representatif guna memastikan Anda mendesain secara inklusif . Warna dapat memiliki makna yang berbeda dalam budaya yang berbeda . Misalnya, di Eropa, warna putih di kaitkan dengan pernikahan, tetapi di Cina, warna putih di kaitkan dengan pemakaman dan kematian. Perbedaan budaya ini (lihat di bawah) dapat memengaruhi apakah Anda mengejar desain universal untuk produk Anda atau mengadaptasinya untuk pasar yang berbeda.
- Ingatlah bahwa Anda tidak bisa menyenangkan semua orang — tidak peduli seberapa banyak teori warna yang Anda pelajari atau variasi budaya yang Anda pelajari, ingatlah bahwa setiap pengguna itu unik; setiap orang — terutama pemangku kepentingan proyek — akan memiliki preferensi mereka sendiri dan tidak ada kombinasi warna yang akan membuat semua orang senang .
Tipografi dan warna dalam praktik
Saya sering kali menemukan konsep paling baik di ilustrasikan dengan mengerjakan contoh. Jadi mari kita terapkan ini pada beberapa Desain UI tipografi warna dalam praktik. Berikut adalah prototipe yang saya rancang untuk situs web perekrutan pekerjaan fiktif, dengan fokus pada pengalaman seluler. Mari kita sebut situs web itu ‘Blue Leaf’.
Tipografi
Saya memilih Plus Jakarta Sans untuk prototipe saya, karena jenis hurufnya jelas, modern, dan sangat mudah dibaca. Secara pribadi, saya penggemar berat jenis huruf yang bersih, sederhana, dan tebal, dan menurut saya jenis huruf ini cocok untuk Blue Leaf.
Berikutnya, saya telah menetapkan gaya font Plus Jakarta Sans yang berbeda untuk berbagai judul dan teks isi, dengan tetap menggunakan gaya Bold dan Regular demi kesederhanaan:
Akhirnya, saya telah mengatur gaya font ini dalam berkas desain alat pembuatan prototipe saya (Figma):
Sekarang setelah saya membuat pengaturan font, saya dapat membuat komponen dan varian menggunakan gaya tipografi yang telah saya tetapkan sebelumnya. Ini membuat desain lebih cepat, memastikan konsistensi, dan jika saya ingin membuat perubahan, saya dapat melakukannya di tingkat pengaturan — saya tidak perlu mengubah setiap layar satu per satu.
Warna
Saya memutuskan untuk menjaga semuanya tetap sederhana: Saya memilih satu warna merek, yang akan saya gunakan untuk elemen interaktif utama (tombol CTA) di UI.
Saya memilih warna biru sebagai warna merek saya. Warna ini terlihat profesional dan seharusnya terasa familier bagi para pencari kerja di LinkedIn. Semoga warna ini menunjukkan rasa percaya , ketenangan , dan kedamaian pikiran ( dan tidak menimbulkan perasaan sedih atau depresi!)
Saya juga menggunakan palet monokromatik . Berikut ikhtisarnya:
Apa arti label-label ini? Berikut rinciannya:
- Merek : elemen interaktif (seperti tautan teks dan tombol).
- Teks kuat : teks utama (judul, isi badan) dan label formulir.
- Teks lemah : teks pendukung (jadi kurang menonjol).
- Goresan kuat : batas non-dekoratif pada elemen antarmuka
seperti kolom masukan formulir, dan juga ikon. - Goresan lemah : batas dekoratif, seperti garis pemisah, yang tidak
penting dalam mengidentifikasi elemen UI. - Isi : latar belakang sekunder.
Enam warna ini di lengkapi dengan latar belakang putih polos. Di bawah ini saya telah mengidentifikasi label mana yang terkait dengan berbagai elemen UI dalam praktiknya:
Mirip dengan tipografi, saya telah menetapkan nilai palet warna dalam berkas desain saya dan memberi semuanya label:
Sekarang saya dapat menerapkan gaya warna yang telah ditetapkan ke berbagai elemen antarmuka. Misalnya, saya dapat membuat komponen tombol interaktif utama menjadi warna merek Blue Leaf:
Sistem desain Anda di Figma atau alat pembuatan prototipe lainnya harus mendokumentasikan palet warna Anda dengan jelas. Saya telah menata palet Blue Leaf di bawah ini — perhatikan teknik monokromatik dari Hue yang konsisten (kecuali ‘Background’) tetapi menyesuaikan Saturation dan Brightness.
Saya dapat melihat bahwa kontras warna saya tidak sempurna untuk beberapa contoh, dan gagal memenuhi standar WCAG level AAA. Namun, dalam kasus ini, warna tersebut lolos level AA yang dapat di terima:
Ringkasan
Semoga artikel ini membantu menjelaskan dasar-dasar cara mendekati Desain UI tipografi warna dalam desain UX/UI, termasuk:
- apa tipografi dan palet warna itu
- mengapa mereka penting dalam desain
- berbagai kategori jenis huruf dan palet warna
- kiat praktik terbaik untuk desain
- bagaimana menerapkan semua ini dalam praktik
