NieR

1. Menggambarkan website harus memiliki header yang menjelaskan website apa.

2. Menggambarkan adanya navigasi yang diposisikan di sidebar.

3. Menggambarkan konten dari website.

Jenis Desain UI Website

-   Static

Desain web memiliki ukuran tetap pada semua resolusi browser (pixel).

-   Fluid

Desain web dapat menyesuaikan lebar layout sesuai dengan resolusi browser (%).

-   Responsive

Desain web dapat berganti layout pada resolusi tertentu (desktop&mobile).

-   Responsive fluid

Gabungan Responsive & Fluid (%)

-   Horizontal Scrolling

Desain web dengan menampilkan konten Horizontal atau menyamping).

-   Parallax Scrolling

Desain web dengan layer atau hanya 1 halaman (one page/single page).
 

Kategori Pengguna

Dalam IMK, penting untuk mengetahui kategori pengguna karena dalam membuat sebuah aplikasi sebelumnya kita juga harus menentukan target dari pengguna aplikasi kita.  

- Berdasarkan Usia 

Umur 5 – 9 tahun
Umur 10 – 14 tahun
Umur 15 – 18 tahun
Umur 25 – 34 tahun
Umur 35 – 44 tahun
Umur 45 – 54 tahun
Umur 55 – 64 tahun
Umur 65+ tahun

Setiap rentang jarak usia memiliki karakternya masing-masing. Usia tua cenderung menyukai suatu yang simple dan pastinya mudah untuk digunakan, hal ini berbeda dengan usia remaja. Usia remaja cenderung menyukai suatu aplikasi yang estetik, waran akekinian yang enak dipandan mata, serta memiliki fitur yang menarik laiinya. Rentang usia anak kecil juga pastinya akan sangat berbeda. Anak kecil umumnya menyukai aplikasi yang penuh dengan warna, banyk memiliki animasi yang menarik serta ada lagu-lagu yang menghibur.
 
 - Berdasarkan Jenis Kelamin

Yaitu :

= Laki-laki, dan
= Perempuan

Laki-laki dan perempuan memiliki selera yang berbeda pastinya.

- Berdasarkan Geografis

Yaitu :

= Bahasa
= Lokasi
= Kebiasaan

Biasanya letak geografis menentukan bahasa dan kebiasaan yang berbeda untuk setiap lokasinya.

- Berdasarkan Minat

Diantaranya :

= Food enthusiasts
= Book lovers
= Movie lovers
= Music lovers
= Shoppers
= Dll

- Berdasarkan Teknologi


= PC/Laptop/Smartphone
= Windows/Linux/MacOS
= iOS/Android/Windows Phone
= Web/apklikasi
= Chrome/Safari/Firefox/Opera/UC
= 2G/3G/4G/Wi-Fi
= Dll

- Berdasarkan Profesi

= Dokter
= Guru
= Programmer
= Pilot
= Supir
= Dll


Jika aplikasi untuk semua kategori pengguna, buat aplikasi atau UI yang mudah dipahami semua kategori pengguna.

Apa itu Gambar (Image) ?

Gambar/Image adalah representasi grafis dan visual dari beberapa informasi yang dapat ditampilkan pada layar komputer atau dicetak. Gambar terdiri dari perpaduan antara titik, garis, bidan, dan warna yang digunakan untuk mencitrakan sesuatu.

Beberapa macam bentuk Gambar

- Fotografi

 
Sebagai istilah umum, fotografi berarti proses atau metode untuk menghasilkan gambar atau foto dari suatu objek dengan merekam pantulan cahaya yang mengenai objek tersebut pada media yang peka cahaya. Alat paling populer untuk menangkap cahaya ini adalah kamera. 

- Gambar


Dalam Kamus Besar Bahasa Indonesia, kata Gambrr diartikan sebagai sebuah tiruan barang baik itu orang, tumbuhan, binatang dan sebagainya yang dibikin dengan menggunakan coretan pensil dan sebagainya pada medium kertas dan sebagainya.

- Lukisan

Lukisan adalah karya seni yang proses pembuatannya dilakukan dengan memulaskan cat dengan alat kuas lukis, pisau palet atau peralatan lain, yaitu memulaskan berbagai warna dan nuansa gradasi warna, dengan kedalaman warna tertentu juga komposisi warna tertentu dari bahan warna pigmen warna dalam pelarut (atau medium) dan gen pengikat (lem) untuk pengencer air, gen pegikat berupa minyak linen untuk cat minyak dengan pengencer terpenthin, pada permukaan (penyangga) seperti kertas, kanvas, atau dinding. 

- Gambar Bergerak (Animasi)


Gambar bergerak dapat disebut juga sebagai Animasi. Yaitu gambar yang terlihat seolah-olah hidup (bergerak).


Resolusi & Pixel

Resolusi adalah kerapatan pixel dalam sebuah grafis. Semakin besar resolusi gambar maka makin banyak sebuah pixel dalam gambar dan tampilan gambar akan semakin detail.

Piksel adalah unsur gambar atau representasi sebuah titik terkecil dalam sebuah gambar grafis yang dihitung per inci. Pixel merupakan titik terkecil kecil dalam grafis yang memiliki 1 warna. Kerapatan pixel dalam 1 inch (pixels per inch (ppi) atau dots per inch (dpi)).

Resolusi berdasarkan kebutuhan desain umumnya :

- Offset atau printing resolusi 300dpi
- Cetak outdoor atau indoor resolusi 100 – 150dpi
- Content atau banner website resolusi 72dpi

Resolusi untuk monitor diantaranya yaitu :
- 800 x 600 px
- 1024 x 768 px
- 1280 x 720 px
- 1280 x 768 px
- 1360 x 760 px
- 1360 x 768 px
- 1920 x 1080 px
- 2304 x 1440 px
- 4K (3840 x 2160 px)
- 8K (7680 x 4320 px)


Bit Depth

Bit depth merupakan informasi jumlah warna yang ada pada tiap pixel tersebut. Semakin besar angka bit depth maka semakin banyak informasi nuansa warna yang tersedia pada tiap pixel sehingga dapat lebih merepresentasikan tonal warna semakin akurat.

Warna memiliki pengaruh yang kuat terhadap sikap dan emosi. Ketika kita melihat warna, mata akan berinteraksi dengan bagian otak bernama hipotalamus, yang kemudian mengirim sinyal pada kelenjar pituitari di sistem endokrin, untuk diteruskan ke kelenjar tiroid. Kelenjar tiroid akan menghasilkan berbagai hormone yang memengaruhi suasana hati, emosi, dan akhirnya perilaku.

Psikologi warna

Berdasarkan survey, umumnya :

- Wanita menyukai biru, ungu, dan hijau
- Pria menyukai biru, hijau, dan hitam
- Biru menumbuhkan kepercayaan
- Kuning memancing rasa waspada
- Hijau untuk kesan alami dan kreatif
- Oranye melambangkan kesenangan
- Hitam memberi kesan mewah


Kompresi Gambar

Kompresi citra adalah proses untuk meminimalisasi jumlah bit yang merepresentasikan suatu citra sehingga ukuran data citra menjadi lebih kecil.

• Lossless compression adalah jenis kompresi dimana selama proses kompresi tidak ada data yang hilang. Memiliki detail yang diupayakan sangat mendekati aslinya.

• Lossy Compression adalah jenis kompresi dimana selama kompresi ada data yang dihilangkan. Menghilangkan beberapa detail yang tidak dapat dideteksi oleh indra manusia secara umum.


Format Gambar

Ada banyak format untuk gambar, beberapa diantaranya adalah :

- JPG / JPEG (Joint Photographic Experts Assemble)
- GIF (Graphics Interchange Format)
- PNG (Portable Network Graphics)
- TIFF (Tagged Image Format File)
- RAW

Dan untuk format RAW, terbagi lagi menjadi :

.ari (Arri_Alexa) .mrw (Minolta)
.arw .srf .sr2 (Sony) .nef .nrw (Nikon)
.bay (Casio) .orf (Olympus)
.cri (Cintel) .pef .ptx (Pentax)
.crw .cr2 (Canon) .pxn (Logitech)
.cap .iiq .eip (Phase_One) .R3D (RED Digital Cinema)
.dcs .dcr .drf .k25 .kdc (Kodak) .raf (Fuji)
.dng (Adobe) .raw .rw2 (Panasonic)
.erf (Epson) .raw .rwl .dng (Leica)
.fff (Imacon/Hasselblad raw) .rwz (Rawzor)
.mef (Mamiya) .srw (Samsung)
.mdc (Minolta, Agfa) .x3f (Sigma)

Apa itu Queue ?

Queue mengikuti aturan FIFO (First In First Out). Queue merupakan kebalikan dari satack. pada Queue elemen yang dimasukkan pertama kali apabila dilakukan pemrosesan makan elemen tersebut yang akan diproses terlebih dahulu.

- Merupakan konsep First In First Out (FIFO)
- Data yang disimpan pertama akan diambil lebih dahulu 
- Implementasi queue dapat menggunakan arrayatau linked list
- Pada implementasi queue dengan array, kemungkinan queue bisa penuh
- Pada implementasi queue dengan linked list, queue tidak pernah penuh 

Operasi Shift pada Biner 

Operasi shift pada biner adalah operasi yang akan menggeser posisi bit dalam suatu variabel ke kiri/kanan sebanyak n kali. Salah satu contoh penggunan operasi shift adalah sebagai berikut :

misal nilai variabel x adalah 10, maka bilangan binernya adalah 1010. Apabila kita akan menggunakan shift right “>>” sebanyak 2. Maka nilai bit dari variabel yang semula adalah 1010 maka akan menjadi 0010. Karena telah terjadi pergeseran bit sebanyak 2 kali ke kanan. Dapat dituliskan sebagai berikut :

x = 10 (desimal) = 1010 (biner)
x >> 2 = 0010 (biner) = 2 (desimal)

contoh implementasi pada bahasa C++

 

Sejarah IMK

Pada tahun 1970 mulai dikenal istilah antarmuka pengguna (User Interface), yang juga dikenal dengan istilah Man-Machine Interface (MMI), dan mulai menjadi topik perhatian, bagi peneliti dan perancang sistem. Perusahaan komputer mulai memikirkan aspek fisik dari antarmuka pengguna sebagai factor penentu keberhasilan dalam pemasaran produk.

Istilah Human-Computer Interaction (HCI) atau Interaksi Manusia dan Komputer (IMK) mulai muncul pertengahan tahun 1980-an sebagai bidang studi yang baru. Istilah HCI mengisyaratkan bahwa bidang studi ini mempunyai fokus yang lebih luas, tidak hanya sekedar perancangan antarmuka secara fisik.

UI merupakan bagian dari aplikasi yang memungkinkan pengguna berinteraksi dengan komputer untuk menyelesaikan suatu pekerjaan sedangkan Human-Computer Interface atau IMK merupakan perancangan, implementasi, dan evaluasi dari User Interface (UI).

IMK diaplikasikan ke banyak bidang seperti perkantoran, otomotif, penerbangan, komunikasi, dan lain-lain.
 

Mengapa ada IMK 

Pada awalnya hanya pengguna tertentu yang bisa menggunakan komputer, tetapi saat ini teknologi komputer sudah menjadi bagian dari kehidupan manusia, sehingga interaksi dengan komputer harus intuitif dan jelas. 

Manusia mempunyai keinginan untuk mendapatkan kemudahan dalam menggunakan komputer untuk membantu pekerjaan manusia dalam menyelesaikan suatu persoalan. Sistem harus didesain sesuai kebutuhan dan kemampuan orang yang menggunakannya dan bersifat transparan.

Desain interface tidak hanya mempertimbangkan aspek fisik saja, tapi juga harus memperhatikan kemampuan dan keterbatasan manusia.

Tujuan IMK

Sistem yang berguna (usable) serta aman (safe), yaitu sistem tersebut dapat berfungsi dengan baik. Sistem tersebut bisa juga untuk mengembangkan serta meningkatkan keamanan (safety), utilitas (utility), kegunaan (usability), efektifitas (effectiveness), serta efisiensi (efficiency).

Sistem yang dimaksud konteksnya tidak hanya pada perangkat keras dan perangkat lunak, tetapi juga mencakup lingkungan secara keseluruhan, baik itu lingkungan organisasi masyarakat kerja atau lingkungan keluarga. Sedangkan Ketergunaan (usability) disini dimaksudkan bahwa sistem yang dibuat tersebut mudah digunakan dan mudah dipelajari baik secara individu ataupun kelompok. Utilitas mengacu kepada fungsionalitas sistem atau sistem tersebut dapat meningkatkan efektifitas dan efesiensi kerjanya.


Beberapa tujuan IMK :

1. Menghasilkan sistem yang berguna dan aman

2. WYSIWYG (What You See Is What You Get)
Artinya seluruh bagian antarmuka memiliki fungsi tertentu.

3. Mengurangi frustasi, ketidakamanan, dan kebingungan pengguna

4. Memberikan feed-back yang diperlukan pengguna

5. Membantu desainer dalam merancang sistem komputer yang user-friendly (ramah dengan pengguna)

Kriteria yang harus dicapai untuk membuat sistem yang user friendly diantaranya :

- Memiliki tampilan yang bagus

- Mudah dioperasikan

- Mudah dipelajari

- Pengguna selalu merasa senang setiap kali menggunakan aplikasi tersebut

Disiplin ilmu dalam Interaksi Manusia dan Komputer

1. Ilmu Komputer (desain aplikasi dan teknik human interface)

2. Psikologi (aplikasi dan teori proses kognitif serta menganalisis perilaku user)

3. Sosiologi & Antropologi (interaksi antara teknologi, work, dan organisasi)

4. Industrial Design (infrastruktur fisik)

5. Teknik Mesin (robotika)

Sejarah Teks

Perkembangan teks dan simbol untuk komunikasi oleh manusia dimulai sejak 6000 tahun yang lalu di lembah Mediterania yang subur di Mesopotamia, Mesir, Sumeria,  dan Babilonia. Tanda pertama dibuat menggunakan lumpur yang dibiarkan mengeras / mengering dibawah panas sinar matahari. Pada saat itu hanya anggota penguasa dan biarawan yang diizinkan membaca dan menulis tanda dan tulisan kuno.

Saat ini teks dan kemampuan membaca merupakan pintu gerbang untuk memperoleh kekuasaan dan pengetahuan. Membaca dan menulis merupakan keterampilan yang penting dalam kultur dunia modern. Melalui tulisan sesorang dapat meraih gelar doctor atau bahkan mendapat hukuman tergantung pada penggunaan kata-kata.

Kategori teks

Teks terbagi menjadi beberapa kategori diantaranya : 

1. Alphabet
Alphabet terdiri dari huruf-huruf dasar yaitu A, B, C, …., Z.

2. Angka
Angka dimulai dari 0, 1, 2, 3, … , 9.

3. Karakter Spesial
Contoh karakter spesial yaitu . , ; : … ‘ “”

4. Simbol
Contoh Simbol = ! @ # $ % ^ & * ( ) - + ? /

Typeface & Font

Typeface merupakan representasi grafik dari alphabet, angka dan karakter spesial. Sedangkan font merupakan model huruf atau kumpulan karakter dari satu ukuran dan style.

Contoh font yaitu Arial, Times New Roman, Verdana, Calibri, dan lain-lain.

Ketinggian karakter dalam font diukur dalam poin (titik), setiap titik sekitar 1/72 inci. Lebar diukur dengan pitch, yang mengacu pada berapa banyak karakter yang dapat ditampung dalam satu inci. Nilai pitch umum adalah 10 dan 12. Font dikatakan pitch tetap jika setiap karakter memiliki lebar yang sama. Jika lebar bervariasi tergantung pada bentuk karakter, itu disebut font proporsional.
 
1. Ukuran Font
Ukuran font didefinisikan dengan pixel. Contoh 12 Pixel Calibri artinya font yang bernama Calibri dengan ukuran 12 Pixel. 

2. Ketebalan Font
Ketebalan font maksudnya adalah ketebalan dari “garis” atau “goresan” dari font tersebut. Ketebalan font dibagi-bagi dengan istilah regular, bold, dan light. Regular atau standar adalah ketebalan default dari font, Light artinya lebih tipis dari ketebalan standar dan Bold adalah yang paling tebal.

3. Font Style
Font bisa jadi italic condensed (atau narrow), compressed, extended dsb.

Selain dari tiga hal yang disebutkan di ata, font juga bisa dibedakan dengan desain, orientasi (dari kanan ke kiri seperti huruf arab), metode pembuatan (dengan pixel atau vektor).

Pengukuran Font

Penggunaan Teks

Apa itu Stack ?

Stack atau tumpukan adalah sebuah kumpulan data yang menggunakan prinsip LIFO(Last in First out), dimana yang artinya data yang terakhir masuk adalah data yang akan pertama kali keluar.

Contoh penggunaan stack dalam beberapa program berikut :

1.1 Program Konversi bilangan Desimal ke Biner

 
1.2 Program Konversi bilangan Desimal ke Oktal



1.3 Program Konversi bilangan Desimal ke Hexadesimal



2. Program untuk membaca kata secara terbalik (reverse)



3. Program untuk mengecek kata atau kalimat palindrom