WorksheetsUTS UI UX Design 2025
Total questions: 50
Worksheet time: 25mins
Manakah pernyataan berikut yang paling tepat menggambarkan fokus utama dari seorang UI Designer?
Fokus pada riset pasar dan perilaku pengguna
Fokus pada struktur navigasi dan logika aplikasi
Fokus pada keindahan tampilan visual dan pemilihan elemen desain
Fokus pada pengalaman perasaan pengguna saat menggunakan aplikasi
Fokus pada pengujian prototipe untuk mencari bug sistem
Elemen desain manakah yang menjadi tanggung jawab utama seorang UI Designer?
Skenario Pengguna (User Scenarios)
Arsitektur Informasi
Tipografi, warna, dan tata letak (Layout)
Riset Pengguna (User Research)
Persona Pengguna
Apa tujuan utama dari penerapan User Experience (UX) Design pada sebuah produk digital?
Membuat aplikasi terlihat penuh warna dan artistik
Meningkatkan kepuasan pengguna melalui kemudahan dan kegunaan
Menulis kode program agar aplikasi berjalan cepat
Membuat logo perusahaan yang menarik
Menjual produk sebanyak-banyaknya tanpa mempedulikan fungsi
Manakah di bawah ini yang merupakan tugas spesifik seorang UX Designer dalam tahap Riset Pengguna?
Memilih palet warna perusahaan
Memahami perilaku, motivasi, dan kebutuhan individu pengguna
Membuat tombol yang bisa diklik
Menata letak gambar pada halaman web
Membuat animasi transisi antar halaman
Apa istilah untuk representasi pengguna (karakter fiksi) yang dibangun berdasarkan kesamaan hasil riset data pengguna?
User Interface
Prototype
Wireframe
User Persona
Layout
Berdasarkan materi, apa perbedaan fokus UI dan UX Designer dalam hal pembuatan Prototype?
Hanya UX Designer yang membuat prototype
Hanya UI Designer yang membuat prototype
UX membuat prototype untuk pengujian fungsi/alur, UI membuat prototype untuk menguji elemen visual
Prototype UI berupa kode, Prototype UX berupa gambar sketsa
Tidak ada perbedaan, keduanya melakukan hal yang persis sama
Apa yang dimaksud dengan Arsitektur Informasi dalam tugas seorang UX Designer?
Merancang bentuk fisik bangunan kantor perusahaan
Menyusun tata letak dan organisasi konten secara logis agar mudah ditemukan pengguna
Menyusun hierarki warna dari gelap ke terang
Membuat database backend untuk aplikasi
Mengatur animasi loading page
UX Desain dituntut untuk menjadi jembatan penghubung. Apa yang dihubungkan oleh UX?
Antara penjual dan pembeli
Antara UI (tampilan) agar dapat bekerja sama dengan sistem secara logis
Antara perangkat keras dan perangkat lunak saja
Antara internet dan komputer
Antara warna primer dan sekunder
Mengapa ranah kerja UX Designer dikatakan lebih luas dibandingkan UI Designer?
Karena UX Designer harus bisa coding
Karena UX Designer dimulai dari proses riset pasar hingga implementasi desain dan pengujian
Karena gaji UX Designer lebih besar
Karena UX Designer bekerja sendirian tanpa tim
Karena UI Designer hanya bekerja di tahap paling akhir proyek
Dalam desain antarmuka, apa fungsi dasar dari elemen "Garis" (Line) seperti yang dijelaskan dalam materi?
Hanya sebagai hiasan pinggir halaman
Membimbing mata pengguna bergerak dari satu bagian ke bagian lain
Memberikan tekstur kasar pada latar belakang
Menentukan jenis huruf yang akan digunakan
Menghapus ruang kosong pada desain
Apa istilah untuk ruang kosong (negative space) di sekitar elemen desain yang berfungsi untuk memberikan "istirahat" bagi mata pengguna?
Dark Mode
White Space
Texture
Grid System
Footer
Manakah pernyataan berikut yang benar mengenai penggunaan tipografi (Typography) pada antarmuka digital?
Gunakan font Serif (berkait) agar terlihat klasik
Gunakan font Sans-serif (seperti Roboto, Inter) agar mudah dibaca di layar
Gunakan minimal 5 jenis font berbeda dalam satu halaman
Ukuran font harus sama semua untuk setiap teks
Spasi antar huruf harus sangat rapat
Elemen desain "Tekstur" (Texture) berhubungan dengan...
Tingkat kecerahan warna
Tampilan atau nuansa permukaan suatu benda (halus, kasar, licin)
Jarak antar baris teks
Ukuran file gambar
Garis luar sebuah objek
Warna "Oranye" dalam desain UI sering diasosiasikan dengan sifat "Agresif" yang cocok digunakan untuk elemen...
Latar belakang (Background)
Call to Action (CTA) seperti tombol "Subscribe" atau "Beli"
Teks paragraf panjang
Ikon menu pengaturan
Footer website
Perhatikan sifat garis berikut: "Gerak kilat, gairah, dan semangat". Jenis garis manakah yang memiliki sifat tersebut?
Garis Lurus Horizontal
Garis Lengkung Beraturan
Garis Zigzag
Garis Putus-putus
Garis Spiral
Mengapa penggunaan "Ukuran" (Size/Scale) yang berbeda sangat penting dalam desain layout?
Agar semua elemen terlihat sama rata
Untuk menciptakan hierarki visual dan menunjukkan elemen mana yang paling penting
Untuk menghemat ruang layar
Agar desain terlihat lebih penuh
Untuk mengurangi penggunaan warna
Dalam elemen warna, warna "Hijau" sering diasosiasikan dengan...
Kemewahan dan kekuasaan
Romantis dan feminin
Kekayaan (wealth) dan relaksasi
Peringatan bahaya
Kepercayaan diri
Sebuah halaman website terasa sangat sumpek dan melelahkan mata saat dibaca. Elemen desain apa yang perlu ditambahkan untuk mengatasi masalah tersebut?
Menambahkan lebih banyak gambar
Mengganti warna background menjadi merah
Menambah White Space (Ruang Kosong) antar elemen
Memperbesar ukuran semua teks
Menambah garis tepi pada setiap paragraf
Apa yang dimaksud dengan "Hierarki Visual" dalam konteks elemen desain?
Urutan membaca dari elemen yang paling menonjol (besar/tebal) ke elemen pendukung
Menggunakan satu warna untuk seluruh aplikasi
Menempatkan semua elemen di tengah layar
Menggunakan gambar resolusi tinggi
Struktur organisasi tim desain
Apa definisi dari prinsip desain "Keseimbangan" (Balance)?
Penggunaan warna yang sama di seluruh halaman
Distribusi bobot visual elemen desain agar tampilan terasa stabil
Jarak yang sama antar huruf
Penggunaan satu jenis font saja
Membuat semua objek memiliki ukuran yang sama persis
Prinsip "Kontras" (Contrast) digunakan untuk tujuan utama yaitu...
Membuat desain terlihat samar
Menonjolkan elemen penting agar menjadi fokus perhatian
Menyamakan semua elemen agar seragam
Mengurangi penggunaan warna
Membuat latar belakang lebih dominan daripada konten
Cara berikut ini dapat digunakan untuk menciptakan Kontras, KECUALI...
Perbedaan Ukuran (Besar vs Kecil)
Perbedaan Warna (Gelap vs Terang)
Perbedaan Bentuk (Bulat vs Kotak)
Menggunakan elemen yang identik dan seragam
Perbedaan Posisi
Prinsip "Pengulangan" (Repetition) sangat penting untuk membangun...
Kebosanan pengguna
Konsistensi visual dan identitas merek (brand identity)
Perbedaan drastis antar halaman
Kompleksitas desain
Beban loading aplikasi
Sebuah tombol "Beli Sekarang" dibuat berwarna merah cerah di atas latar belakang putih, sementara tombol "Batal" dibuat berwarna abu-abu. Teknik ini menerapkan prinsip...
Alignment
Repetition
Dominasi / Emphasis melalui Kontras
Asimetri
Unity
Dalam sebuah newsletter, Headline ditulis dengan font Arial Black tebal, sementara Subhead juga menggunakan font tebal yang ukurannya hampir sama, hanya beda sedikit. Mengapa materi menyebut ini sebagai "Kontras yang buruk" (conflict)?
Karena font Arial Black terlalu umum
Karena prinsip kontras menuntut perbedaan yang ekstrim; jika perbedaannya samar, itu bukan kontras melainkan konflik visual
Karena seharusnya Headline menggunakan warna merah
Karena subhead tidak boleh menggunakan font tebal
Karena newsletter harus menggunakan font berkait (Serif)
Anda sedang mendesain poster acara teknologi modern. Anda ingin memberikan kesan "Dinamis, Modern, dan Menarik". Jenis keseimbangan (Balance) mana yang sebaiknya Anda pilih, dan mengapa?
Simetris, karena memberikan kesan formal dan santun
Radial, karena memusatkan perhatian ke tengah lingkaran
Asimetris, karena distribusi elemen yang berbeda ukuran/posisi namun seimbang secara visual menciptakan kesan modern
Simetris, karena paling mudah dibuat oleh pemula
Keseimbangan Warna, karena warna adalah elemen terpenting
Sebuah kartu nama memiliki informasi nama, telepon, dan alamat yang tersebar di empat sudut berbeda. Hal ini membuat mata pembaca harus melompat-lompat dan bingung memulai dari mana. Prinsip desain apa yang paling mendesak diterapkan untuk memperbaiki masalah ini?
Repetition (Mengulang font yang sama)
Contrast (Membuat nama lebih besar)
Proximity (Mengelompokan informasi yang berkaitan menjadi satu unit)
Variety (Menambahkan gambar ilustrasi)
Rhythm (Mengatur jarak spasi huruf)
Sebuah brosur menggunakan Center Alignment (rata tengah) untuk seluruh teksnya, namun hasilnya terlihat membosankan dan pemisahan antar kelompok informasinya tidak tegas. Langkah perbaikan apa yang disarankan materi untuk membuatnya lebih tegas dan terorganisir?
Mengubah semua menjadi rata kanan (Right Alignment)
Menggunakan Left Alignment (rata kiri) yang kuat atau menggabungkan alignment dengan prinsip Proximity yang ketat
Memperbesar ukuran semua huruf
Menambahkan bingkai di setiap kalimat
Mengacak posisi teks agar terlihat artistik
Format gambar manakah yang bersifat "Lossy" (kualitas menurun saat dikompresi) namun mendukung jutaan warna (24-bit)?
GIF
PNG
SVG
JPG
BMP
Kelebihan utama dari format SVG (Scalable Vector Graphics) dibandingkan format raster (JPG/PNG) adalah...
Memiliki ukuran file yang sangat besar
Tidak bisa dianimasikan
Gambar bersifat scalable/zoomable tanpa degradasi mutu (pecah)
Tidak bisa transparan
Gambarnya pecah
Jika Anda ingin menampilkan sebuah logo perusahaan dengan latar belakang transparan dan tanpa gradasi warna yang rumit, format manakah yang paling efisien dan tepat?
JPG
PNG
BMP
RAW
TIFF
Mengapa format JPG dianggap cocok untuk "Foto yang kaya warna" tetapi tidak cocok untuk "Line art atau Logo"?
Karena JPG tidak mendukung kompresi
Karena JPG mendukung transparansi penuh
Karena JPG adalah format vektor
Karena JPG lossy menyebabkan penurunan kualitas pada garis tajam/teks, tapi bagus untuk gradasi foto
Karena ukuran file JPG selalu lebih besar dari PNG
Anda mendesain dashboard dengan grafik interaktif yang harus tetap tajam saat di-zoom di layar retina (resolusi tinggi) dan file-nya harus ringan. Solusi terbaik adalah menggunakan format...
GIF, karena mendukung animasi
JPG, karena warnanya banyak
PNG-24, karena mendukung transparansi
SVG, karena berbasis vektor dan scalable
BMP, karena tidak dikompresi
Apa yang dimaksud dengan "Color Depth" (Kedalaman Warna)?
Tingkat kecerahan layar
Jumlah bit yang digunakan untuk mengindikasikan warna pada satu pixel
Kedalaman dimensi gambar 3D
Jumlah tinta yang digunakan printer
Tingkat kegelapan warna hitam
Berapa jumlah warna yang dihasilkan oleh kedalaman warna "1 bit"?
256 Warna
16 Warna
2 Warna (Hitam & Putih)
4 Warna
16 Juta Warna
Jika Anda mendesain aplikasi yang membutuhkan kesan "Kepercayaan, Profesional, dan Tenang" (seperti Bank), kelompok warna manakah yang secara psikologis paling sering digunakan?
Warm Color (Merah/Oranye)
Cool Color (Biru/Hijau)
Neon Color
Monochromatic Red
Triadic Yellow
Apa yang dimaksud dengan skema warna "Monochromatic"?
Menggunakan warna hitam dan putih saja
Menggunakan satu warna dasar (hue) yang divariasikan tingkat terang/gelapnya (tint/shade)
Menggunakan banyak warna warni
Menggunakan warna yang bertabrakan
Menggunakan warna primer saja
Jika sebuah gambar memiliki kedalaman warna 8-bit, berapa banyak memori yang digunakan per pixel dibandingkan dengan gambar 1-bit?
8 kali lebih sedikit
8 kali lebih banyak
Sama saja
256 kali lebih banyak
2 kali lebih banyak
Apa perbedaan mendasar antara model warna "Additive" dan "Subtractive"?
Additive untuk cetak (tinta), Subtractive untuk layar (cahaya)
Additive mencampur cahaya (RGB), Subtractive mencampur pigmen/tinta (CMYK)
Additive menghasilkan warna lebih gelap, Subtractive lebih terang
Tidak ada perbedaan
Additive hanya untuk warna hitam putih
Warna-warna seperti merah, oranye, dan kuning dikategorikan sebagai…
Cool Color (Warna Sejuk)
Neutral Color (Warna Netral)
Warm Color (Warna Hangat)
Dark Color (Warna Gelap)
Pastel Color
Apa definisi dari Tipografi?
Seni melukis huruf di atas kanvas
Teknik mencetak huruf menggunakan mesin press
Seni dan teknik memilih dan menata huruf dengan pengaturan penyebarannya pada ruang yang tersedia
Ilmu yang mempelajari sejarah aksara kuno
Cara membuat font baru menggunakan perangkat lunak
Dalam anatomi huruf, garis imajiner tempat huruf-huruf “duduk” atau berpijak disebut…
Cap-height
X-height
Ascender
Baseline
Descender
Istilah untuk jarak spasi antar kata (bukan antar huruf) disebut…
Leading
Kerning
Tracking
Word-spacing
Padding
Dalam penggunaan Web Font, desainer sering memadukan dua jenis font yang berbeda (Pairing Fonts) untuk menciptakan…
Kekacauan (Chaos)
Kesamaan (Similarity)
Harmoni atau Kontras
Animasi
Warna
Apa yang dimaksud dengan “Leading” dalam pengaturan teks?
Jarak antar karakter
Jarak antar kata
Jarak antar baseline (jarak antar baris)
Tinggi huruf kapital
Ketebalan huruf
Perhatikan pernyataan berikut: “Pengaturan jarak antar dua karakter tertentu agar terlihat proporsional”. Istilah yang tepat untuk ini adalah…
Tracking
Kerning
Leading
Spacing
Alignment
Jika “Kerning” adalah jarak antar dua karakter spesifik, maka “Tracking” adalah…
Jarak antar baris dalam satu paragraf
Jarak antar kata dalam satu kalimat
Jarak antar karakter secara keseluruhan dalam sebuah kata atau blok teks
Ukuran tinggi huruf kecil
Jarak antara header dan footer
Pilih jawaban yang paling benar dari pernyataan berikut: Pertemuan huruf yang seringkali menyebabkan terjadinya kerning adalah…
A. Huruf M dan N
B. Huruf V dan A
C. Huruf F dan T
D. Huruf T dan A
E. B dan D benar
Materi membedakan antara “Legibility” dan “Readability”. Manakah pernyataan yang paling tepat menggambarkan “Legibility”?
Tingkat kenyamanan membaca satu halaman penuh
Pengaturan tata letak paragraf yang baik
Tingkat kemudahan sebuah karakter atau huruf untuk diidentifikasi dan dibedakan satu sama lain
Tingkat kemudahan memahami makna kalimat
Keindahan bentuk font saat dipandang
Sebaliknya, apa yang dimaksud dengan “Readability”?
Kemampuan software membaca font
Tingkat kemudahan keterbacaan sekumpulan huruf dalam blok teks (kata, kalimat, paragraf)
Kejelasan bentuk satu huruf saja
Ukuran file font
Tingkat kecerahan warna font
![RBT T3 BAB 3 Rekabentuk dalam perniagaan [BAH A]](https://cf.quizizz.com/image/image-loader.svg)
