Pada materi kali ini mahasiswa diharapkan mampu memhamai fundamental dari UI design seperti Typography, Color, Spacing dan aturan-aturan lain yang perlu di pahami dalam membuat UI Design

Tujuan Pembelajaran :

1. Memahami dasar ilmu Typography
2. Memahami dasar ilmu Coloring
3. Memahami dasar ilmu aturan Spacing
4. Memahami aturan-aturan UX Law
5. Mengetahui tentang responsive design

Topic Pembelajaran :

1. Quiz typography

2. Quiz Coloring

3. UX Law Quiz

4. Quiz aturan Spacing

5. Quiz responsive design

Greetings from Galih Pandu - UI/UX Designer,

Ketika saya memulai karir sebagai UI/UX Designer, saya seringkali merasa kurang percaya diri dengan designer lainnya yang mampu membuat sebuah UI desain yang menarik dan dilengkapi animasi yang sangat interaktif. Sayangnya ternyata hal itu keliru. Seperti kata pepatah, Learning micro-fancy-interactions will not make you a PRO designer, learning basics like spacing, typography, alignment, will do.

Sebagai seorang UI Designer pemula, alangkah baiknya jika kita mengetahui setiap komponen yang ada didalam design itu sendiri. Namun sesungguhnya terdapat hal yang fundamental yang tidak bisa kita hiraukan. Hal tersebut yang mampu menunjang kualitas hasil design yang telah kita buat. Pada materi kali ini, kita akan membahas seputar 5 poin penting yang patut untuk dikuasai oleh seorang UI Designer.

1. Typography

Pada dasarnya, tipografi (typography) adalah seni mengatur huruf dan teks yang mengkombinasikan antara ukuran, font, serta spasi antar huruf. Seni mengenai pengaturan ini digunakan untuk memasukan dan menyesuaikan teks pada design. Hal ini akan membantu kita saat membuat sebuah konten, yang memiliki tujuan tertentu seperti promosi brand. Tipografi dapat memberi impresi pada orang-orang dan menyampaikan pesan secara efektif. Dalam desain grafis, Tipografi didefinisikan sebagai suatu proses seni untuk menyusun bahan publikasi menggunakan huruf cetak loh. Maka dari itu, “menyusun” meliputi merancang bentuk huruf cetak hingga merangkainya dalam sebuah komposisi yang tepat, adalah hal yang perlu dilakukan untuk memperoleh suatu efek tampilan yang dikehendaki. Dalam proses perancangannya, seorang designer harus memerhatikan beberapa aspek seperti pemilihan font, ukuran, penempatan huruf, body text, white space, dan masih banyak lagi.  Penentuan tersebut tak dapat kita lakukan secara asal, karena tipografi merupakan hal yang krusial di dalam desain grafis. Oleh karena itu, seorang graphic designer perlu memikirkannya matang-matang. Perkembangan tipografi banyak dipengaruhi oleh faktor budaya serta teknik pembuatan. Karakter tipografi yang ditimbulkan dari bentuk hurufnya bisa dipersespsikan berbeda. Pemilihan hurufnya pun tidak semudah yang dibayangkan, jumlah hurufnya mencapai ribuan bahkan jutaan. Sehingga, desainer harus cermat dalam memilih tipografi yang tepat untuk karyanya.

Kenapa harus mempelajari Typography ?

Seperti telah dijelaskan dalam definisi di atas, typography mempunyai tujuan agar pembaca mendapatkan kemudahan dan kenyamanan, baik itu dalam hal melihat kejelasan bentuk huruf ((legibility) maupun keterbacaan (readability).
Kejelasan bentuk huruf (legibility) adalah tingkat kemudahan mata mengenali suatu karakter / rupa huruf / tulisan tanpa harus bersusah payah. Hal ini bisa ditentukan oleh:

• Kerumitan desain huruf, seperti penggunaan siripan, kontras goresan, dan sebagainya.

• Penggunaan warna

• Frekuensi pengamat menemui huruf tersebut dalam kehidupan sehari-hari.

Keterbacaan (readability) adalah tingkat kenyamanan / kemudahan suatu susunan huruf saat dibaca, yang dipengaruhi oleh:

• Jenis huruf

• Ukuran

• Pengaturan, termasuk di dalamnya alur, spasi, kerning, perataan, dan sebagainya

• Kontras warna terhadap latar belakang

Dengan menguasai penggunaan Typography, berarti kita sudah setengah jalan untuk menguasai UI Design. Karena sebagian besar atau bahkan lebih dari 50% konten yang berada didalam produk digital yang sering kita lihat terdiri dari banyak teks. Coba kita lihat contoh berikut

Typography, apa yang dipelajari ?

Dalam typography, kita akan mempelajari bagaimana cara menggunakan teks yang tepat. Agar semua manfaat tipografi dalam desain grafis dapat tercapai, sebagai designer kamu harus membuat desain dengan tepat, menarik dan sesuai tujuan, misalnya dengan mengikuti beberapa aturan dasar tipografi berikut. 

• Pertimbangkan teks 

Banyak desainer yang membuat kesalahan dengan hanya menyalin dan menempelkan teks dari arahan klien begitu saja tanpa benar-benar membaca keseluruhan teks dengan cermat. Padahal pilihan jenis huruf dan font yang salah tidak akan meninggalkan dampak seperti yang diinginkan. Itu sebabnya untuk menarik perhatian pelanggan atau audiens, bacalah teks itu secara menyeluruh agar kamu mendapatkan ide unik tentang bagaimana teks itu harus dimasukkan dan diintegrasikan ke dalam desain, seperti di dalam situs. Pastikan menelusuri teks dengan cermat sebelum memilih elemen tipografi yang tepat. 

• Tunjukkan hierarki

Hierarki dalam tipografi adalah tentang mengarahkan pandangan audiens ke elemen terpenting dalam desain. Misalnya untuk desain situs, kamu dapat menggunakan tipografi untuk memutuskan di mana pengunjung harus membaca terlebih dahulu. Untuk membuat hierarki kamu dapat menggunakan ukuran dan jenis font yang dapat menarik perhatian ke informasi paling penting. Umumnya desainer membuat hierarki yang berdampak dalam desain dengan menambahkan tiga tingkat tipografi yang bebeda. 

Tipografi tingkat satu merupakan konten paling signifikan dan yang terlihat jelas pertama dalam desain. 

Tipografi tingkat dua untuk membuat teks menjadi sekelompok atau bagian informasi yang tidak hanya menonjol tapi juga harus membantu audiens menavigasi detail dengan mudah.

Sementara  tipografi tingkat tiga biasanya adalah inti dari desain dan tata letak yang penuh teks. Di sini audiens memahami pesan desain kamu. 

• Pilih warna typeface yang tepat 

Desainer harus dapat memilih warna tipografi yang sempurna sehingga mudah dibaca. Dengan penggunaan warna yang tepat kamu dapat menarik perhatian audiens dengan lebih mudah. Sebaliknya pemilihan warna yang salah dapat membuat audiens kehilangan fokus karena berbagai elemen desain di latar belakang. Oleh karena itu para desiner memilih warna yang kontras dengan warna latar untuk tipografi. Misalnya teks berwarna hitam dengan latar belakang putih atau warna terang dimaksudkan agar teks dapat dibaca. Pemilihan typeface itu perlu diperhatikan karena setiap typeface memiliki karakter dan sifat yang berbeda-beda.

Untuk lebih memahami makna Typography, sebagai kesimpulan kita simak contoh gambar berikut.
Gambar pertama ini menggunakan font yang sama serta ketebalan huruf dan ukuran yang sama.

Coba bandingkan dengan gambar kedua. Jenis font, ketebalan, serta ukuran font dibuat berbeda.

Pastinya kalian dapat menilai sendiri, mana gambar yang lebih enak dan nyaman untuk dilihat.

Jadi pada bagian typography ini ada beberapa hal yang kita pelajari :
- Ketebalan (Font weight), Kapan harus menggunakan jenis ketebalan reguler, medium atau bold
- Ukuran (Font size), Teks seperti apa yang harus menggunakan ukuran besar dan teks yang mana harus menggunakan ukuran kecil
- Warna (Font color), Kapan harus menggunakan warna yang pekat yang membuat teks menjadi mencolok dan kapan menggunakan warna yang tidak mencolok
- Jarak antar baris (Line height), Bagaimana menentukan jarak antar baris dalam sebuah paragraf agar mudah dibaca
- Kombinasi (Combination), Bagaimana mengkombinasikan jenis font yang berbeda agar tercipta harmoni
- Jarak antar huruf (Letter space), Bagaimana menentukan jarak antar huruf dalam sebuah teks agar terlihat proporsional

Manfaat Typography pada design

1. Menarik perhatian Audiens.

Typography merupakan elemen penting dalam membangun impresi audiens. Melalui sebuah teks, pesan atau informasi dapat tersampaikan secara efektif dan gamblang. Akan tetapi, durasi untuk menarik perhatian audiens sangatlah singkat. Suatu brand perlu menarik atensi dari para target customer dalam waktu yang terbatas tersebut. Oleh karena itu, typography harus dibuat unik dan eye cathcing.
Walau dilihat sekilas, teks harus memberikan sebuah impresi. Hal tersebut akan membuat pesan membekas di benak orang-orang. Sebuah teks yang mencolok akan mudah mendapat simpati dari publik. 
Tulisan akan sulit mendapat perhatian jika menggunakan font tipis dengan warna pudar. Namun, beda halnya kalau menggunakan warna terang dengan font tebal, audiens akan lebih mudah mengingatnya. 

2. Membuat teks lebih mudah dibaca.

Melalui pengaturan huruf, sebuah teks akan lebih mudah kita baca. Pengaturan font, size, warna, tata letak, dan spasi yang sesuai akan memberi kenyamanan bagi pembaca. Selain itu, pengaturan baris seperti alignment juga berpengaruh pada tingkat keterbacaan konten.
Jika desainer salah menentukan font atau spasi, orang-orang akan sulit dan kebingungan mencerna informasi tersebut. Contohnya, jika spasi antar kata terlalu rapat, maka audiens akan kesulitan membacanya. Oleh karena itu, pastikan text yang kita tampilkan mudah terbaca.

3. Membangun Brand Awareness

Fungsi tipografi dalam desain grafis selanjutnya adalah membangun brand awareness. Hal ini merupakan masalah yang krusial bagi sebuah bisnis untuk berkompetisi. Banyak logo brands berlandaskan pada typography. Berdasarkan fungsi ini, tidak sedikit brands yang mudah dikenali dengan cepat. Misalnya seperti Coca-Cola, Hyundai, Google, dan Disney. 
Oleh karena itu, design yang kita buat harus bisa membangun brand awareness. Logo atau tagline sebuah perusahaan harus bisa memberi impresi serta impact yang besar pada audiens, sehingga mudah diingat dalam jangka panjang. Melalui hal tersebut, orang-orang akan mudah mengenali perusahaan maupun produknya.

4. Mengelompokkan Teks

Kita pasti sering melihat suatu flyer berisikan teks dengan ukuran yang berbeda-beda. Orang-orang pada umumnya lebih condong membaca tulisan paling besar atau mencolok terlebih dahulu. Hal tersebut merupakan salah satu peran tipografi dalam desain grafis. Desainer dapat melakukan pengelompokkan teks ini dengan menggunakan berbagai font atau ukuran untuk heading, subheading, dan body text. 
Melalui pengaturan ukuran ini, desainer bertujuan mengarahkan pembaca untuk melihat informasi paling penting dahulu. Selain itu, perbedaan warna, ukuran, dan font akan memudahkan pembaca mencari informasi penting dengan cepat. 

5. Memberikan karakteristik pada design.

Setiap jenis font memberikan pembawaan karakteristik serta arti yang berbeda-beda. Oleh karena itu, guna memberi karakter pada kontennya, desainer akan menggunakan typography. Pengaturan font bisa memperjelas konsep dan merefleksikan identitas suatu produk maupun perusahaan. 
Sebagai contoh, halaman website bisa terlihat friendly atau serius melalui pemilihan font-nya. Website berita politik untuk orang dewasa akan cenderung menggunakan font yang tegas. Berbeda halnya dengan website produk make up untuk remaja, hurufnya terlihat tidak begitu kaku dan memiliki tone warna lebih cerah. 

2. Spacing

Space atau spacing mengacu kepada interval, area atau jarak yang terukur diantara semua objek atau item-item dalam sebuah desain. Ya, benar kita berbicara tentang space diantara apapun dalam desain dan mengakui bahwa space tersebut juga merupakan bagian dari desain yang anda kerjakan. Bahkan pada kenyataannya hal itu sangat penting untuk menjaga beberapa area dalam desain web anda tetap membiarkannya benar-benar kosong, dan anda harus menahan godaan untuk mengisi seluruh gap dengan ini itu. Kenapa anda harus melakukannya? Jawabannya sangat sederhana, dengan melakukannya mata orang yang melihat suatu desain tersebut punya tempat untuk istirahat diantara dan disekitar elemen. Singkat kata desain yang anda lakukan tidak menyakiti mata orang yang menikmatinya dengan berbagai macam pernak-pernik di sini dan disana. Selain itu space juga berguna bagi orang yang melihat desain agar mereka mampu membedakan mana elemen dari desain yang lebih penting dari elemen lainnya.
Spacing dalam UI Design merupakan hal yang sangat penting. Dalam UI design, space (jarak) pada design dapat membuat UI terlihat lebih rapi dan bersih. Untuk memahami pentingya Spacing (jarak) dalam UI desain coba kita lihat contohnya berikut:

Menurut kalian, mana gambar yang lebih enak dilihat? Tentu gambar sebelah kiri lebih nyaman dan enak dilihat karena jarak (space) yang proporsional. Berbeda dengan gambar sebelah kanan, jarak yang terlalu mepet mebuat kita tidak nyaman untuk membacanya.

Menentukan jarak yang ideal

Untuk menentukan jarak yang ideal pada setiap komponen dalam design adalah dengan tidak memberikan jarak yang terlalu lebar atau terlalu mepet. Jarak yang terlalu mepet membuat kita susah dalam mengenali tiap hurufnya, sedangkan jarak yang terlalu lebar membuat susah untuk membacanya.

Bagaimana menentukan jarak untuk huruf kapital ?

Berbeda dengan penggunaan spacing pada umumnya, khusus untuk teks yang berbentuk kapital maka jarak antar hurufnya dibuat sedikit melebar. Hal ini dikarenakan teks kapital memiliki ketinggian yang sama antar hurufnya. Untuk dapat memahami lebih lanjut, simak contohnya pada gambar berikut ini,

Untuk teks non kapital, spacing antar hurufnya dibuat supaya tidak terlalu berjarak.

3. Font Weight

Pada hakikatnya, font weight atau ketebalan font termasuk ke dalam bagian komponen penting dalam typography. Namun hal ini menarik untuk dibahas lebih lanjut. Kesalahan dalam mengatur font weight akan berakibat fatal didalam desain. Desain akan terlihat saling tumpang-tindih dan akan menyulitkan pengguna dalam membaca teks didalamnya. Umumnya, terdapat 4 jenis ketebalan font pada teks yang biasa digunakan, yaitu Regular, Medium, Semibold, dan Bold. Kita dapat melihat contoh penerapan ketebalan font pada aplikasi Twitter berikut:

Apabila kita identifikasi untuk penggunaan font weight, maka akan didapat:

1. Nama Pengguna - Bold

Pengguna twitter biasanya menuliskan nama asli. Elemen ini penting untuk terlihat secara sekilas dengan cara menggunakan teks bold berukuran besar dan berwarna hitam.

2. Username - Reguler

Username twitter merupakan nama alias. Username menggunakan jenis ketebalan regular berukuran kecil dan  berwarna abu-abu karena jika dilihat dari sisi prioritas nama pengguna lebih penting daripada username.

3. Isi Tweet - Reguler

Elemen paling penting dan ditonjolkan dengan ukuran font yang lebih besar dibandingkan dengan elemen lainnya. Lalu kenapa menggunakan jenis font reguler? Karena jika menggunakan jenis font bold akan tidak nyaman dibaca karena jumlah katanya yang banyak. 

4. Waktu - Reguler

Elemen waktu merupakan elemen sekunder (nice to have) maka dari itu dibuat dengan jenis font reguler, berwarna abu-abu dan ukuran kecil

5. Jumlah Retweet dan Like - Bold

Elemen ini dibuat dengan menggunakan ketebalan font yang tebal (Bold) karena elemen ini merupakan elemen penting agar user dapat melihat secara cepat.

6. Keterangan - Reguler

Informasi keterangan dibuat tidak mencolok agar angka didepanya mudah terbaca.

Apabila masih belum paham, mari kita analisa bersama design card hasil pencarian booking hotel di bawah ini:

Coba kita lihat elemen harga pada desain diatas yang dibuat mencolok dengan warna merah dan ketebalannya dibuat lebih Bold. Mengapa dibuat lebih mencolok? Karena elemen harga merupakan elemen penting. Penggunaan ketebalan teks yang berbeda-beda ditujukan untuk informasi yang lebih penting. Tidak semua informasi penting harus dibuat dengan teks tebal tergantung elemen-elemen di sekitarnya.

4. Visual Hierarchy

Seberapa penting visual hierarchy dalam UI desain? coba kita lihat langsung contoh desain dibawah ini

Kira-kira nyaman gak bacanya? coba kita tambahkan spacing atau jarak antar teksnya, kira-kira lebih nyaman gak ya

Masih kurang? coba kita ubah teks pada judul menjadi lebih tebal, kira-kira tambah enak gak ya bacanya

Coba kita ubah lagi ukuran teks judulnya, lalu nama pembicaranya juga diperbesar dan diubah menjadi Bold 

Sepertinya bisa masih bisa diubah lagi biar lebih nyaman dibaca, Kita ubah ukuran teks dari tanggal pelaksanaan nya menjadi lebih besar ditambah bold, lalu di bagian link pendaftaran kita beri kotak, lalu untuk catatan di bawah kita miringin (italic). Kira-kira gimana sekarang bacanya?

Jadi apa itu Visual Hierarchy?

Arti hierarchy sendiri merupakan tingkatan. Jadi Visual Hierarcy adalah kombinasi tingkatan visual untuk memudahkan membaca informasi, misalnya

• Tingkatan warna (Color)

Ada yang warnya hitam pekat, ada yang warnanya hitam sedang dan ada yang warnanya abu-abu

• Tingkatan ukuran (Size)

Ada yang ukuranya besar, sedang dan kecil

• Tingkatan ketebalan (weight)

Ada yang bold, medium, regular bahkan light (paling tipis)

berikut ini contoh lain dari penerapan visual hierarchy pada aplikasi Twitter

5. Coloring

UX Law

Laws of UX atau hukum UX adalah kumpulan praktik terbaik yang dapat dipertimbangkan UI Designer saat membangun tampilan dari sebuah sistem. Hukum-hukum yang ada akan berkaitan satu sama lain untuk menunjang terwujudnya kepuasan pengguna.

• Fitt’s law

• Hick's law

                  

Menu yang ini pake hick’s law

• Jacobs law

“Mata kita cenderung melihat suatu yang sama (warna, bentuk, dll) sebagai satu kesatuan, walaupun benda tersebut terpisah-pisah”

Contohnya gambar dibawah ini, kita akan mudah melihat warna merah di gambar walaupun terpisahkan oleh jarak.

Efeknya apa di dunia UI dan UX? Contohnya ketika mendesain sebuah link, umumnya dengan style berwarna biru dan bergaris bawah/underline. Melihat satu halaman sekilas kita tau style tersebut merupakan link, yang mempunyai fungsi yang sama. Coba perhatikan gambar di bawah ini. Style yang sama kan cepat kita ketahui tempatnya dan fungsinya karena punya kesamaan / similarity

Hal ini yang jadi aturan juga desain itu perlu konsisten. Jadi walaupun elemen di desain tersebar di satu halaman. Dengan adanya kesamaan, user lebih mudah melihatnya dan mengetahui fungsinya. Dan similarity ini ga ditentukan hanya dengan warna ya. Bisa juga dengan ukuran dan bentuk.

• Miller law

“Rata-rata kita hanya bisa mengingat 7 (+2 atau -2) item dikepala kita”

Kalau saya kasih nomor hp saya seperti di gambar. Nomor yang paling bawah menurut Miller's Law akan lebih mudah untuk diingat.

Biasanya hukum ini dihubungkan juga dengan hukum yang lain, bisa dengan Hick's Law. Intinya membantu kita agar ingatan tidak terbebani oleh terlalu banyak informasi. Perlu diingat, Miller's Law ini digunakan untuk work memory, yaitu ingatan yang berjalan. Ada beberapa hal yang perlu diperhatikan untuk mengurangi beban informasi untuk user. Antara lain:

Pertama, kurangi menggunakan element yang ga penting, karena user perlu memproses setiap informasi yang mereka dapatkan.

Kedua, kurangi pilihan untuk user, bisa kita gunakan Hick's Law juga untuk yang satu ini.

Dan, last but not least, berhati-hatilah menggunakan icon, kadang icon yang sulit dimengerti akan membuat user bingung.

Responsive design

Responsive web design atau desain web responsif adalah sebuah teknik atau metode bagi web designer untuk membuat suatu layout website yang dapat menyesuaikan diri sesuai dengan ukuran layar pengguna. Baik dari ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi device yang digunakan. 

UI desain akan semakin bersahabat jika dapat digunakan dalam berbagai device.

Hal-hal yang perlu diperhatikan dalam UI responsive design

• Perhatikan perbedaan jarak antara mobile dan desktop

• Perhatikan perbedaan font antara mobile dan desktop

Mahasiswa akan diberikan beberapa quiz untuk menguji pemahaman mereka tentang dasar-dasar UI Design