BAB V
PENGATURAN TAMPILAN DAN WARNA
Pertemuan : 5
Waktu : 100 Menit
Kompetensi Dasar : Mahasiswa dapat merancang antarmuka sesuai dengan paradigma IMK
Indikator : Mahasiswa dapat mengatur tampilan dan menggunakan warna dalam merancang antarmuka pengguna
Perancangan yang berhubungan dengan bagian informasi dapat ditampilkan dengan cara yang terbaik pada layar. Beberapa hal yang terkait yang perlu diperhatikan antara lain : kerapatan visual dan keseimbangan (dari daerah-daerah teks), kejelasan teks, pengkodean visual, visualisasi, dan penggunaan warna.
I. Kerapatan Visual dan Keseimbangan
Hal ini berhubungan dengan bagaimana “terkemas dengan eratnya” teks itu pada layar dan oleh karena itu berhubungan dengan jumlah “white space” atau ruang kosong yang ada sehubungan dengan teks itu. Kepadatan/kerapatan tinggi berarti ada banyak teks dan sedikit ruang kosong dan pengaturan seperti ini membuat teks lebih sulit untuk dibaca. Pada sebuah kertas sering dijumpai kerapatan tekas antara 70% - 80%, yang artinya sebanyak 70% – 80% dari halaman kertas ditutupi oleh teks. Hal ini mungkin masih bisa terbaca, tetapi pada layar komputer akan sulit dibaca. Oleh karena itu kerapatan yang disarankan antara 15 % - 20%. Hal lain yang membuat suatu teks dapat terbaca atau tidak adalah susunan teks pada layar.
II. Kejelasan Teks
Hal- hal yang perlu diperhatikan terkait dengan kejelasan teks antara lain : a. Gunakan peraturan standar huruf besar dan kecil sesuai standar
b. Gunakan jenis-jenis huruf yang umum (Times, Courier, Geneva) . Hindari penggunaan huruf yang tampak lucu, tetapi susah dibaca.
c. Hindari penggunaan lebih dari tiga jenis huruf, dan tiga ukuran huruf dalam sebuah dokumen.
Satu teknik yang digunakan untuk antar muka www (browser) adalah dengan membuat tabel yang terdiri dari hanya satu baris, tanpa batas dan mengatur lebarnya pada sejumlah
partikel-partikel gambar tertentu, sehingga layar teks akan selalu tetap lebarnya seperti yang telah ditentukan berapapun ukuran jendela browser.
III. Pengkodean Visual
Hal ini mengacu kepada sejumlah teknik yang mungkin dapat digunakan untuk menarik perhatian, atau memusatkan perhatian pada elemen-elemen tertentu dilayar. Elemen-elemen tertentu dilayar. Elemen-elemen ini termasuk :
Elemen-elemen intensitas yang membedakan. Warna dasar yang hampir sama diletakkan secara berdekatan, sehingga user akan lebih mudah melihat, dibandingkan jika diletakkan berjauhan. Hal ini bisa dilakukan dengan menampilkannya dalam lingkaran warna (color circle) atau bentuk bangun yang lain.
Contoh :
Pemilihan bentuk-bentuk yang unik , sebagai contoh teks yang diletakkan di dalam bentuk ‘awan’, atau dalam sebuah kotak, akan tampak mencolok dari sekelilingnya. Warna dan Shading/bayangan dapat digunakan untuk memberi efek yang bagus.
Informasi yang ditampilkan, dapat sangat mempengaruhi daya baca dan kemudahan mendapatkan informasi-informasi tertentu, bahkan pada layar-layar yang cukup kompleks sekalipun. Rancangan layar yang dibuat dengan teliti dapat meningkatkan kegunaan suatu paket program.
IV. Warna
Mata manusia mengandung banyak syaraf-syaraf penerima yang terdiri dari sel-sel berbentuk batang tongkat yang disebut rod dan sel-sel berbentuk corong yang disebut cone. Sel cone peka terhadap tiga warna yaitu : warna merah/jingga atau hijau/kuning atau biru.Dalam kehidupan ada beberapa manusia yang dikaruniai cacat warna hal ini harus dipertimbangkan dalam membuat user interface. Bentuk cacat yang paling umum adalah tidak
bisa membedakan warna merah dengan hijau. Ketika ingin membuat sebuah tampilan, jangan hanya mengandalkan pengkodean warna tetapi juga menggunakan bentuk simbol (misal : bentuk, ukuran, tekstur, simbol-simbol). Contoh : lampu lalu lintas. Pengguna jalan tidak harus punya kemampuan membedakan warna, dengan bantuan cahaya dapat diketahui warna apa yang palig terang. Cahaya disini sebagai petunjuk tambahan.
V. Tuntunan untuk Menggunakan Warna
Dalam layar-layar yang kebanyakan terdiri dari teks, warna dapat membantu ketika pengguna harus mencari atau membedakan bagian-bagian tertentu. Ini dapat digunakan untuk membagi sebuah layar kedalam segmen-segmen yang berbeda sesuai kebutuhan. Warna juga dapat digunakan untuk membedakan kategori-kategori data yang berbeda sebagai contoh, gunakan warna untuk membedakan antara :
Data lama dan data baru
Fitur/gambar asli dengan figur-figur yang direncanakan Judul/heading dan badan teks
Data yang disediakan oleh user/pengguna dan data yang disediakan oleh komputer. Data yang benar dan data yang salah.
Ada beberapa hal yang perlu diperhatikan terkait dengan tuntunan umum penggunaan warna, yaitu :
Jangan menggunakan lebih dari 4 atau 5 warna sekaligus (layar bisa menjadi tidak tersusun dengan baik)
Sebuah kode warna harus mendukung kelancaran tugas pengguna bukan memperlambat. Gunakan untuk mengidentifikasi hal-hal yang sama yaitu : untuk membedakan hal-hal yang berbeda, untuk menunjukkan keadaan-keadaan tertentu. Ingat tidak ada terjemahan yang umum, jadi harus menggunakan skema warna
yang dikenali oleh pengguna sebagai contoh, merah sering diterjemahkan sebagai ‘bahaya’, tapi dalam beberapa konteks mungkin hanya berarti panas.
Tetaplah konsisten dengan penggunaan warna di dalam dan antara antarmuka-antarmuka perangkat lunak.
Jika memungkinkan pengguna harus diberi kendali atas pengkodean warna sehingga mereka dapat merancang warna yang memiliki arti bagi mereka.
Hindari kombinasi-kombinasi warna sebagai berikut : o Merah pada biru bergetar
o Kuning pada biru bayangan o Merah pada hijau bayangan o Hijau pada biru after image
Teks merah pada latar belakang biru membuat teks tampak bergetar. Kuning pada biru memberi kesan pinggiran-pinggiran pucat disekitar teks. Merah pada hijau atau kuning pada biru memberi efek ‘bayangan’. Beberapa kombinasi seperti hijau pada biru, dapat menghasilkan ‘after image’ pada retina yang dapat mengganggu penglihatan untuk sementara. VI. Penggunaan Sistem Warna RGB
a. Cahaya Melalui Kombinasi Warna Dasar/Primer
Cahaya terdiri dari tiga kombinasi warna dasar/primer merah, biru, dan hijau. Dengan kombinasi warna dasar/primer ini dalam intensitas yang berbeda kita mendapatkan semua warna kelihatan. Jika kita menghadirkan intensitas dari tiap warna primer dengan satu angka, maka kita dapat melihat ketiga warna tersebut berupa tiga angka (satu angka untuk warna merah, satu angka untuk marna hijau, dan satu angka untuk warna biru). Sistem ini dikenal dengan RGB Color System (Red, Green, Blue).
b. Sistem Warna RGB
Sebagai asumsi jika menggunakan bilangan bulat dengan cakupan nilai dari 0 sampai dengan 255 (1 byte), yaitu 256 nilai yang mungkin untuk masing-masing warna primer, maka dengan tiga byte dapat menghasilkan 256x256x256 kombinasi warna yang berbeda.
Ada lebih dari 16juta warna yang dapat dihadirkan, dikenal dengan ‘true color’. Sistem ini dikenal dengan RGB-256. Beberapa program ada yang menggunakan sistem RGB-100, yaitu menggunakan angka-angka dengan cakupan 0..100 untuk menandakan persentase dari intensitas (0%= off ; 100% = max).
c. Warna abu-abu (gray)
Warna hitam dilambangkan sebagai ketidakhadiran warna (cahaya) diwakili dengan nilai RGB (Red = 0, Green = 0, Blue = 0 atau 0,0,0). Sedangkan warna putih dianggap sebagai kehadiran dari semua warna (dalam intensitas maksimum) diwakili dengan RGB (255,255,255).
Contoh :
RGB (0,0,0) : hitam
RGB (128, 128, 128) : abu-abu gelap (dark gray) RGB (192,192,192) : abu-abu terang (light gray) RGB (255, 255, 255) : putih
Kombinasi nilai RGB untuk warna dasar adalah sebagai berikut : RGB (255,0,0) = merah menyala (merah terang)
RGB (0,255,0) = hijau menyala (hijau terang) RGB (0,0,255) = biru menyala (biru terang) Kombinasi warna dasar yang gelap :
RGB (128, 0, 0) = merah gelap RGB (0,128,0) = hijau gelap RGB (0,0,128) = biru tua
e. Warna Sekunder
Warna sekunder didapatkan dari mengkombinasikan dua warna primer dengan intensitas yang sama :
RGB (0, 255, 255) = Cyan terang = light green + light blue RGB (255, 0, 255) = Magenta Terang = light red + light blue
RGB (255, 255, 0) = Kuning (Yellow) Terang = light red + light green Kombinasi warna sekunder dengan yang gelap :
RGB (0, 128, 128) = Cyan gelap = hijau gelap + biru tua RGB (128, 0, 128) = Magenta gelap = merah tua +biru tua RGB (128,128,0) = Kuning gelap = merah gelap + hijau gelap
f. Warna-warna lainnya
Orange merupakan warna campuran dari merah terang atau RGB (255, 0,0) dan kuning terang atau RGB (255, 255, 0) sehingga kalau digabungkan akan menjadi RGB (255, 128, 0) yang akan menghasilkan warna orange.
Cara mencarinya adalah : Merah = (255 + 255) / 2= 255 Hijau = (0+255) / 2 = 128 Biru = (0 + 0) / 2 = 0 g. Warna Murni
Warna murni berkombinasi hanya dua warna dasar dan mempunyai format RGB(X,Y,0), RGB(Y,X,0), RGB(0,X,Y), RGB(0,Y,X), RGB(X,Y,0) atau RGB(Y,X,0) di mana x<> 0 dan x>=y:
Ketika y= 0, kita mempunyai suatu warna dasar. Ketika x= y, kita mempunyai suatu warna sekunder.
Ketika y= x/2 kita mempunyai suatu warna yang persisnya antara suatu warna dasar dan suatu warna sekunder. Sebagai contoh RGB(255,128,0) adalah warna oranye persisnya antara merah dan kuning.
Ketika y < x/2 kita mempunyai suatu warna semakin dekat dengan warna dasar dibanding warna sekunder. Sebagai contoh RGB(255,116,0) adalah oranye yang semakin dekat ke merah dibanding ke kuning.
Ketika y > x/2 kita mempunyai suatu warna semakin dekat dengan warna sekunder dibanding warna dasar. Sebagai contoh, RGB(255,140,0) adalah orange yang semakin dekat ke kuning dibanding ke merah.
h. Hue dan Luminosity (kilauan)
Warna dengan format yang sama akan mempunyai hubungan sama dengan x/y, ini dikatakan mempunyai “hue” sama. Sebagai contoh RGB(255,128,0) dan RGB(192,96,0) mempunyai format yang sama ( RGB(X,Y,0)) dan keduanya mempunyai hubungan yang sama dengan x/y ( 255/128= 192/96), sehingga dikatakan mempunyai hue sama.
Hue sering mengarah pada format warna yang sama. Contoh warna oranye terang dan oranye gelap, keduanya mempunyai hue yang sama tetapi kilauan (luminosity) yang berbeda. Kilauan mengukur bagaimana suatu warna dekat dengan putih, dan pada umumnya diwakili dengan persentase. Sebagai contoh, RGB(192,96,0) adalah oranye dengan kilauan 75% dan RGB(128,64,0) adalah oranye dengan kilauan 50%.
RGB(255,128,0) = Orange 100% luminosity RGB(192,96,0) = Orange 75% luminosity RGB(128,64,0) = Orange 50% luminosity
Hue dari RGB(0,0,128) dan RGB(0,0,64) adalah biru, tetapi warna yang kedua mempunyai kilauan 50% dan 25%.
i. Saturation Kejenuhan
Terlepas dari kilauan dan hue, warna digambarkan oleh parameter ketiga yang dikenal sebagai kejenuhan (saturation), yang mana mengukur kemurnian dari warna. Sejauh ini kita telah berhadapan dengan 100% warna murni. Warna tidak murni adalah warna murni yang bercampur dengan kelabu. Semakin sedikit bercampur dengan kelabu, semakin jenuh. Sebagai contoh, RGB(192,128,64) mempunyai kilauan dan hue oranye terang RGB(255,128,0), tetapi
50% kejenuhan. Hal ini diakibatkan percampuran oranye terang dengan abu-abu sedangRGB(128,128,128):
Oranye merah kelabu =( 255+ 128) / 2= 192 Hijau=( 128+ 128) / 2= 128
Biru=( 0+ 128) / 2= 64
Jika kita mencampur hasil kelabu sedang lagi, kita akan membuat oranye dengan 25% kejenuhan RGB(160,128,96), bahkan semakin dekat ke kelabu sedang. Jika kita mencampurnya dengan kelabu lagi, kita mendapatkan suatu orange dengan 12,5% kejenuhan RGB(144,128,112).
RGB(255,128,0) = Light Orange 100% saturation RGB(192,128,64) = Light Orange 50% saturation RGB(160,128,96) = Light Orange 25% saturation RGB(144,128,112) = Light Orange 12,5% saturation RGB(128,128,128) = Kelabu sedang / Medium Gray Kejenuhan (Saturation) dapat dihitung dengan rumusan berikut :
Kejenuhan= (( maximum-medium)+ ( medium-minimum)) / 255* 100% Sebagai contoh:
Saturation(160,128,96) = ((160-128) + (128-96)) / 255 * 100% = (32 + 32) / 255 * 100%
= 64 / 255 * 100%
Saturation(160,128,96) = 25%
j. Penyajian Warna dengan Bilangan Bulat (Desimal dan Heksadesimal)
Ke tiga bytes itu menghadirkan suatu warna yang dapat dikombinasikan dalam 32-bit bilangan bulat, secara normal diwakili oleh notasi hekadesimal. Sebagai contoh, RGB(160,128,96) adalah 6080A0:
Red (RR) = 160 dec = A0 hex Green (GG) = 128 dec = 80 hex Blue (BB) = 96 dec = 60 hex
Sebagai catatan kontanta warna mempunyai format BBGGRR (bukan RRGGBB), dimana BB adalah byte (dua digit heksa) untuk biru, GG adalah byte untuk hijau dan RR adalah byte untuk merah. Alasan penyimpanan dalam bilangan bulat dikarenakan pemakaian memori internal
lebih kecil. Kontanta BBGGRR akan disimpan dalam memori internal sebagai RRGGBB (urutan terbalik), contoh 6080A0 secara internal disimpan sebagai A08060.
Skernario 1
Step 1 : Bukalah aplikasi browser, aplikasi word processor, dan aplikasi multimedia
Step 2 : Amati bagaimana ketiga user interfase software tersebut dalam menerapkan desain warna.
Step 3 : Jelaskan software yang menggunakan fitur warna yang paling banyak dan yang paling sedikit, jelaskan mengapa demikian
Skenario 2
Untuk membantu proses pembelajaran bahasa inggris akan dibuat aplikasi yang mirip seperti kamus. Pengguna aplikasi ini ada dua macam yaitu anak-anak dan remaja. Jika dipilih tombol A maka akan menuju ke aplikasi kamus anak-anak, jika dipilih tombol R maka akan menuju ke aplikasi kamus remaja. Buatlah perancangan antar muka untuk aplikasi kamus tersebut dengan memanfaatkan fungsi penggunaan warna.
Skenario 3
Akan dibuat aplikasi games mengenal benda-benda sekitar untuk anak-anak usia 1-3 tahun. Buatlah perancangan antarmuka penggunanya. Manfaatkan fungsi penggunaan warna
