Latihan Soal Desain

  1. Apa yang dimaksud dengan istilah “viewport” dalam desain web dengan CSS?
    1. Bagian dari halaman yang hanya muncul saat di-scroll
    2. Sebuah elemen yang berfungsi sebagai modal pop-up
    3. Area tampilan yang tersedia pada perangkat pengguna 
    4. Tata letak yang mengikuti ukuran gambar dalam website
    5. Komponen navigasi dalam desain responsif
  2.  Jika ingin menyimpan gambar dengan ukuran kecil tetapi tetap mempertahankan kualitas tinggi untuk web, format terbaik adalah…?
    1. WebP 
    2. RAW
    3. PSD
    4. GIF
    5. JPEG
  3. Untuk menyematkan video dengan ukuran lebih kecil tanpa kehilangan kualitas dalam desain web, format yang direkomendasikan adalah…?
    1. AVI
    2. MOV
    3. FLV
    4. MP4 
    5. MKV
  4.  Jika ingin meningkatkan kecepatan loading website, langkah yang paling efektif adalah…?
    1. Menambahkan lebih banyak font kustom
    2. Menggunakan resolusi gambar setinggi mungkin
    3. Mengaktifkan banyak animasi berbasis JavaScript
    4. Memasang banyak plugin tambahan
    5. Menggunakan gambar dalam format WebP dan menerapkan teknik kompresi 
  5. Dalam implementasi proyek desain web, teknik “lazy loading” digunakan untuk…?
    1. Menunda pemuatan gambar hingga diperlukan untuk meningkatkan performa 
    2. Mengurangi ukuran teks pada halaman web
    3. Menampilkan semua elemen secara bersamaan
    4. Mempercepat waktu loading halaman dengan cache
    5. Meningkatkan resolusi gambar
  6.  Framework CSS yang paling umum digunakan untuk mempercepat proses pengembangan desain web responsif adalah…?
    1. jQuery
    2. Bootstrap 
    3. Django
    4. Node.js
    5. PHP
  7. Langkah pertama dalam mengembangkan proyek desain web yang efektif adalah…?
    1. Menulis kode CSS terlebih dahulu
    2. Mengunggah situs ke hosting
    3. Menggunakan template tanpa modifikasi
    4. Menginstal plugin sebanyak mungkin
    5. Menentukan tujuan dan kebutuhan pengguna 
  8.  Apa langkah yang paling penting dalam memilih palet warna untuk proyek desain web?
    1. Menggunakan sebanyak mungkin warna cerah
    2. Menyesuaikan dengan warna kebutuhan klien 
    3. Menyesuaikan warna dengan tren desain terkini
    4. Hanya menggunakan warna monokrom
    5. Memilih warna yang paling disukai oleh desainer
  9.  Apa tujuan dari penggunaan alt pada elemen <img> dalam desain web?
    1. Membuat gambar bisa terindeks mesin pencari 
    2. Mengubah ukuran gambar secara otomatis
    3. Meningkatkan kualitas gambar di layar retina display
    4. Menjadikan gambar lebih ringan untuk dimuat
    5. Mengubah warna gambar berdasarkan preferensi pengguna
  10.  Manakah praktik terbaik dalam pengelolaan proyek desain web yang berskala besar?
    1. Menggunakan sistem version control seperti Git 
    2. Mengedit langsung di server produksi
    3. Membuat buku dokumentasi proyek
    4. Hanya menggunakan satu format gambar dalam proyek
    5. Menghindari pengujian pada browser yang berbeda
  11.  Apa tujuan utama dari Project Brief dalam pembuatan website?
    1. Menjelaskan cara menulis kode HTML
    2. Menganalisis performa website setelah diluncurkan
    3. Mengembangkan desain tanpa masukan dari klien
    4. Mengganti konten website setelah selesai
    5. Menentukan tujuan, kebutuhan, dan batasan proyek 
  12. Dalam Project Brief, bagaimana cara terbaik untuk menentukan cakupan proyek?
    1. Menggunakan desain tanpa masukan dari klien
    2. Mengizinkan perubahan mendadak tanpa batas
    3. Menghindari komunikasi dengan tim pengembang
    4. Menetapkan fitur utama, batasan proyek, dan timeline yang jelas 
    5. Menunda perencanaan hingga proyek berjalan
  13. Apa faktor utama dalam menentukan anggaran dalam Project Brief pembuatan website?
    1. Jumlah teks yang akan dimasukkan ke dalam website
    2. Jumlah komentar dalam kode sumber
    3. Kompleksitas desain, fitur tambahan, dan kebutuhan teknis 
    4. Ukuran font yang digunakan
    5. Jumlah warna dalam skema desain
  14.  Jika klien ingin websitenya memiliki fitur e-commerce, apa yang harus dimasukkan dalam Project Brief?
    1. Jenis produk, sistem e-commerce 
    2. Jumlah gambar yang akan digunakan dalam homepage
    3. Tipe dan kapasitas server yang akan digunakan
    4. Warna dominan dalam desain
    5. Panjang teks di halaman utama
  15.  Apa keuntungan utama menggunakan vw dan vh dalam desain web?
    1. Memastikan ukuran elemen tetap sama di semua perangkat
    2. Meningkatkan waktu loading halaman
    3. Membuat elemen hanya bisa diakses dalam mode fullscreen
    4. Menjadikan ukuran elemen lebih kecil
    5. Menyesuaikan ukuran elemen berdasarkan lebar dan tinggi viewport 
  16. Jika sebuah elemen memiliki width: 50vw, apa artinya?
    1. Lebar elemen akan selalu 50 piksel
    2. Lebar elemen akan mengikuti tinggi layar
    3. Lebar elemen tidak dapat berubah
    4. Lebar elemen akan setengah dari lebar layar 
    5. Lebar elemen menjadi setengah dari ukuran font root
  17.  Jika sebuah elemen memiliki properti height: 100vh, apa yang akan terjadi?
    1. Elemen akan memiliki tinggi 100 piksel
    2. Elemen akan selalu memiliki tinggi lebih kecil dari lebar
    3. Elemen akan memiliki tinggi setara dengan tinggi layar 
    4. Elemen akan menyesuaikan tinggi berdasarkan lebar layar
    5. Elemen akan memiliki tinggi yang sama dengan elemen induknya
  18.  Apa tujuan utama dari prinsip keseimbangan dalam desain web?
    1. Membantu menciptakan tampilan yang harmonis 
    2. Memastikan semua elemen memiliki ukuran yang sama
    3. Menggunakan hanya satu warna dalam desain
    4. Membuat teks lebih besar dibandingkan elemen lainnya
    5. Menghilangkan semua elemen yang tidak perlu
  19.  Mengapa prinsip konsistensi (consistency) penting dalam desain web?
    1. Membuat setiap halaman memiliki desain yang berbeda agar lebih unik
    2. Menggunakan warna yang mencolok di semua elemen agar menarik perhatian
    3. Memudahkan pengguna dalam memahami navigasi dan interaksi dengan website 
    4. Mengubah tata letak halaman setiap kali pengguna mengaksesnya
    5. Menggunakan berbagai jenis font dalam satu halaman untuk variasi
  20.  Bagaimana cara terbaik untuk meningkatkan user experience (UX) dalam desain web?
    1. Menampilkan semua informasi dalam satu halaman tanpa pemisahan
    2. Menggunakan navigasi yang jelas, konsisten, dan mudah digunakan 
    3. Menggunakan font yang sangat kecil agar lebih banyak teks bisa dimuat
    4. Menambahkan banyak animasi pada setiap elemen agar lebih menarik
    5. Menggunakan warna-warna yang mencolok untuk menarik perhatian pengguna
  21.  Apa keuntungan utama dari menggunakan desain responsif dalam pengembangan web?
    1. Mengurangi jumlah elemen desain yang digunakan
    2. Membuat tampilan web menyesuaikan ukuran layar perangkat 
    3. Membuat web hanya bisa diakses di perangkat tertentu
    4. Menambahkan lebih banyak gambar agar terlihat lebih menarik
    5. Menghilangkan kebutuhan untuk mendesain ulang website
  22.  Dalam prinsip desain web, pemilihan font yang baik harus…?
    1. Memiliki keterbacaan yang tinggi dan konsisten 
    2. Menggunakan sebanyak mungkin jenis font untuk variasi
    3. Hanya menggunakan font serif
    4. Menggunakan ukuran font kecil agar lebih ringkas
    5. Menempatkan teks dalam banyak warna tanpa aturan
  23. Dalam desain web, skema warna yang baik harus memperhatikan…?
    1. Kontras, keterbacaan, dan konsistensi warna 
    2. Menggunakan sebanyak mungkin warna mencolok
    3. Memilih warna berdasarkan tren media sosial
    4. Menggunakan warna secara acak untuk variasi
    5. Menghindari warna terang karena tidak menarik
  24.  Apa tujuan utama dari penggunaan grid system dalam desain web?
    1. Menambahkan efek animasi pada tampilan
    2. Mempercepat loading website
    3. Menyusun elemen secara rapi dan konsisten 
    4. Meningkatkan ukuran file gambar
    5. Mengubah format teks menjadi lebih menarik
  25. Apa keuntungan utama dari menggunakan sistem desain seperti Material Design atau Bootstrap?
    1. Meningkatkan performa website
    2. Menyediakan komponen UI yang siap digunakan dan konsisten 
    3. Memungkinkan kreativitas dalam desain
    4. Hanya bisa digunakan oleh desainer profesional
    5. Hanya tersedia dalam format premium
  26. Apa yang dimaksud dengan “typography” dalam desain web?
    1. Desain yang hanya menggunakan teks tanpa gambar
    2. Pemilihan warna dalam tampilan website
    3. Penentuan margin dan padding dalam elemen desain
    4. Penggunaan dan pengaturan font untuk meningkatkan keterbacaan dan estetika 
    5. Teknik membuat elemen bergerak dalam sebuah website
  27.  Istilah “parallax scrolling” dalam desain web mengacu pada…?
    1. Navigasi yang mengarahkan pengguna ke bagian lain dalam satu halaman
    2. Tampilan menu yang tetap berada di bagian atas layar
    3. Desain yang memanfaatkan elemen bergerak secara dinamis
    4. Efek yang hanya digunakan dalam desain game
    5. Efek di mana latar belakang bergerak lebih lambat daripada konten di atasnya saat di scroll 
  28.  Apa fungsi dari properti opacity dalam CSS?
    1. Menentukan tingkat transparansi suatu elemen 
    2. Menyesuaikan efek bayangan pada teks
    3. Mengontrol ukuran font dalam desain web
    4. Menambahkan efek blur pada gambar
    5. Mengatur warna elemen secara otomatis
  29.  Properti CSS yang digunakan untuk mengontrol sudut lengkungan pada elemen adalah…?
    1. border-curve
    2. round-corner
    3. border-radius 
    4. padding
    5. clip-path
  30.  Jika ingin menggunakan warna dengan transparansi di CSS, format warna yang digunakan adalah…?
    1. hex
    2. hsl
    3. rgb
    4. rgba 
    5. cmyk