wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Wireframe Fundamentals and Fidelity

Total questions: 95

Worksheet time: 48mins

Name
Class
Date
1.

Wireframe dalam pengembangan aplikasi berfungsi utama sebagai...

a)

Media promosi visual produk

b)

Alat pengujian performa server

c)

Template coding frontend

d)

Acuan pewarnaan dan tipografi akhir

e)

Kerangka struktur tampilan sebelum tahap desain visual

2.

Fokus utama wireframe dibanding UI design adalah pada...

a)

Estetika dan animasi

b)

Warna dan branding

c)

Efek transisi halaman

d)

Resolusi gambar

e)

Struktur layout dan fungsi komponen

3.

Posisi wireframe dalam alur UI/UX yang benar adalah...

a)

Setelah testing usability

b)

Setelah launching aplikasi

c)

Setelah UI final

d)

Setelah coding backend

e)

Setelah user flow dan sebelum prototype visual

4.

Jika sebuah tim ingin menghindari revisi besar saat tahap coding, maka wireframe digunakan untuk...

a)

Mengatur database

b)

Validasi konsep layout lebih awal

c)

Menentukan warna dominan

d)

Membuat animasi transisi

e)

Mempercepat rendering halaman

5.

Seorang UI Designer membuat tampilan kotak-kotak hitam putih tanpa warna. Ini termasuk jenis...

a)

Low fidelity wireframe

b)

High fidelity wireframe

c)

Interactive prototype

d)

UI mockup

e)

Mid fidelity wireframe

6.

Komponen utama yang mengatur struktur besar halaman disebut...

a)

Interface component

b)

Additional component

c)

Layout utama

d)

Navigation component

e)

Information component

7.

Header, sidebar, dan body termasuk ke dalam kategori...

a)

Komponen tambahan

b)

Layout utama

c)

Interface

d)

Navigasi

e)

Informasi

8.

Tombol, link, logo, dan ukuran font termasuk dalam...

a)

Komponen interface

b)

Komponen informasi

c)

Komponen tambahan

d)

Komponen struktur

e)

Komponen navigasi

9.

Komponen yang membantu user berpindah halaman disebut...

a)

Interface component

b)

Information component

c)

Layout component

d)

Navigation component

e)

Visual component

10.

Input form, thumbnail, paragraf teks termasuk ke dalam...

a)

Support component

b)

Information component

c)

Layout component

d)

Navigation component

e)

Interface component

11.

Fitur cek resi dan live chat pada toko online termasuk...

a)

Komponen informasi inti

b)

Komponen interface utama

c)

Komponen navigasi

d)

Komponen tambahan

e)

Layout struktural

12.

Alasan utama komponen informasi harus ditempatkan di area mudah dilihat adalah...

a)

Agar tampilan terlihat penuh

b)

Supaya desain terlihat ramai

c)

Karena menjadi fokus utama user dalam menerima konten

d)

Agar mudah diberi warna

e)

Untuk mengisi ruang kosong

13.

Wireframe yang paling sering dipakai dalam industri adalah...

a)

Low fidelity

b)

Mid fidelity

c)

UI mockup

d)

High fidelity

e)

Sketch manual

14.

Mid fidelity wireframe memiliki ciri utama...

a)

Siap langsung dikoding

b)

Sudah interaktif penuh

c)

Layout lebih presisi tanpa visual detail

d)

Menggunakan gambar final

e)

Menggunakan warna lengkap

15.

High fidelity wireframe biasanya digunakan ketika...

a)

Brainstorming awal

b)

Riset user

c)

Evaluasi server

d)

Mendekati tahap desain final

e)

Sketsa ide kasar

16.

Jika desainer hanya memakai kertas dan pensil maka wireframe tersebut termasuk...

a)

Interactive prototype

b)

High fidelity

c)

UI final

d)

Low fidelity

e)

Mid fidelity

17.

Manfaat wireframe dalam menghemat waktu terjadi karena...

a)

Mengurangi ukuran file

b)

Mempercepat internet

c)

Perubahan lebih mudah dilakukan di tahap konsep

d)

Mempercepat proses coding

e)

Mengurangi jumlah halaman

18.

Wireframe membantu tim mengetahui gambaran produk sejak awal karena...

a)

Sudah ada warna final

b)

Sudah ada animasi

c)

Struktur tampilan sudah terlihat jelas

d)

Sudah ada database

e)

Sudah ada backend

19.

Pengembangan lebih terstruktur terjadi karena...

a)

Ada CDN

b)

Ada server cloud

c)

Komponen sudah tertata dari awal

d)

Ada template UI

e)

Ada efek animasi

20.

Wireframe memudahkan koordinasi tim karena...

a)

Semua anggota bisa coding

b)

Semua orang melihat warna sama

c)

Semua mengacu pada kerangka yang sama

d)

Semua memakai software sama

e)

Semua memakai font sama

21.

Jika klien meminta revisi layout, bagian terbaik untuk melakukan perubahan adalah...

a)

Saat backend selesai

b)

Setelah testing akhir

c)

Pada tahap wireframe

d)

Saat deployment

e)

Setelah website live

22.

Langkah pertama sebelum membuat wireframe adalah...

a)

Melakukan riset

b)

Setting grid

c)

Menentukan layout

d)

Menyiapkan hosting

e)

Menulis konten

23.

Tujuan utama riset dalam wireframe adalah...

a)

Menentukan warna

b)

Membuat animasi

c)

Mengatur server

d)

Menyesuaikan desain dengan tren dan kebutuhan user

e)

Memilih font aesthetic

24.

Tools berikut yang umum dipakai membuat wireframe adalah...

a)

Blender

b)

Premiere Pro

c)

After Effects

d)

Audition

e)

Figma

25.

Fungsi utama grid dalam wireframe adalah...

a)

Membuat animasi

b)

Mempercepat loading

c)

Membantu penataan layout lebih rapi

d)

Mengatur warna

e)

Menentukan font

26.

Grid membantu tampilan terlihat seimbang karena...

a)

Mengurangi ukuran gambar

b)

Menghapus margin

c)

Membagi halaman ke dalam kolom terstruktur

d)

Mengubah resolusi layar

e)

Mengatur audio

27.

Menentukan tata letak dilakukan setelah...

a)

UI final

b)

Publishing

c)

Coding frontend

d)

Testing usability

e)

Setting grid

28.

Diskusi tim paling efektif dilakukan pada tahap...

a)

Maintenance

b)

Deployment

c)

Penentuan layout wireframe

d)

Coding backend

e)

UI final

29.

Penulisan konten dilakukan setelah...

a)

Launching

b)

Testing

c)

Layout tersusun

d)

UI final

e)

Hosting siap

30.

Tujuan utama mengatur konten bertahap adalah...

a)

Memperindah warna

b)

Mempercepat desain

c)

Menghemat memori

d)

Mengurangi file

e)

Memastikan struktur informasi jelas

31.

Jika wireframe dibuat terlalu detail sejak awal, risiko yang mungkin terjadi adalah...

a)

Navigasi hilang

b)

Proses revisi menjadi lebih berat

c)

Tampilan terlalu sederhana

d)

Font tidak terbaca

e)

Grid tidak berfungsi

32.

Dalam industri, wireframe sering dijadikan dasar untuk...

a)

Hosting setup

b)

SEO optimization

c)

Prototype interaktif

d)

Motion graphic

e)

Video promosi

33.

Perbedaan wireframe dan mockup terletak pada...

a)

Bahasa pemrograman

b)

Fungsi backend

c)

Ukuran layar

d)

Database

e)

Tingkat detail visual

34.

Mobile app wireframe harus mempertimbangkan...

a)

Framework backend

b)

Ukuran server

c)

Warna brand

d)

Ukuran layar dan jangkauan jari user

e)

Format database

35.

Jika user kesulitan menemukan menu, maka masalah berada pada...

a)

Warna UI

b)

Interface animation

c)

Hosting

d)

Struktur navigasi wireframe

e)

Database

36.

Wireframe membantu UX karena...

a)

Menambah animasi

b)

Mengurangi coding

c)

Menghemat bandwidth

d)

Mempermudah alur penggunaan user

e)

Membuat UI cantik

37.

Jika ingin menguji alur checkout e-commerce, yang paling tepat diuji adalah...

a)

UI warna

b)

Database

c)

Backend

d)

Wireframe flow halaman

e)

Hosting

38.

Wireframe sebaiknya dibuat...

a)

Dengan kolaborasi tim

b)

Setelah UI final

c)

Setelah launching

d)

Sendiri tanpa diskusi

e)

Setelah coding

39.

Wireframe yang baik harus...

a)

Full foto

b)

Full ilustrasi

c)

Jelas, sederhana, dan fokus fungsi

d)

Banyak animasi

e)

Banyak warna

40.

Dalam industri, wireframe biasanya dibuat oleh...

a)

UI/UX designer

b)

Content writer

c)

System analyst

d)

Project manager

e)

Backend developer

41.

Jika komponen terlalu padat, dampak UX yang muncul adalah...

a)

Loading lambat

b)

User bingung membaca konten

c)

Server down

d)

Warna rusak

e)

Database error

42.

Alur kerja yang benar adalah...

a)

UI → Wireframe → Prototype

b)

Coding → Wireframe → UI

c)

Wireframe → Prototype → UI Design

d)

Backend → UI → Wireframe

e)

Testing → Wireframe → UI

43.

Tujuan utama wireflow adalah...

a)

Mengatur server

b)

Menggambarkan alur perpindahan antar halaman

c)

Menentukan font

d)

Membuat logo

e)

Menambah warna UI

44.

Frontend berhubungan langsung dengan...

a)

Database

b)

Server

c)

Hosting

d)

Tampilan yang dilihat user

e)

API

45.

Backend bertugas mengelola...

a)

Warna UI

b)

Tipografi

c)

Layout

d)

Data dan logika sistem

e)

Icon

46.

Jika sebuah aplikasi terasa membingungkan saat pertama digunakan, maka evaluasi pertama yang perlu dilakukan adalah pada bagian...

a)

Struktur wireframe dan alur navigasi pengguna

b)

Optimasi server backend sistem

c)

Pengaturan database pengguna

d)

Penambahan animasi transisi halaman

e)

Pemilihan warna UI utama

47.

Seorang desainer menempatkan tombol utama (CTA) di area yang mudah dijangkau jempol pada layar smartphone. Prinsip ini menunjukkan penerapan...

a)

Backend performance optimization

b)

Graphic design composition rule

c)

User experience ergonomics dalam wireframe mobile

d)

Aesthetic UI principle

e)

Visual branding consistency

48.

Dalam proyek tim, wireframe biasanya dijadikan acuan utama oleh developer karena...

a)

Menentukan server deployment

b)

Memberikan gambaran struktur halaman secara logis

c)

Berisi database struktur aplikasi

d)

Sudah mengandung kode HTML dan CSS

e)

Sudah memiliki warna dan animasi lengkap

49.

Jika sebuah website memiliki banyak fitur namun tampilan terasa penuh dan sulit dipahami, maka solusi yang tepat adalah...

a)

Menambah animasi interaktif

b)

Mengganti warna dominan

c)

Memperbesar ukuran font

d)

Mengganti framework frontend

e)

Menyederhanakan struktur wireframe dan prioritas konten

50.

Dalam industri UI/UX, wireframe sering dipresentasikan kepada stakeholder dengan tujuan...

a)

Mengukur kecepatan loading

b)

Menunjukkan kemampuan visual desainer

c)

Mendapatkan validasi struktur dan alur aplikasi

d)

Menguji performa server

e)

Menentukan warna branding

51.

Jika user sering salah menekan tombol karena jarak terlalu dekat, maka perbaikan dilakukan pada...

a)

Pemilihan font

b)

Layout spacing pada wireframe

c)

Warna kontras UI

d)

Animasi interaksi

e)

Sistem backend

52.

Wireframe yang terlalu detail di tahap awal dapat berdampak pada...

a)

Fleksibilitas revisi menjadi berkurang

b)

Tampilan terlalu sederhana

c)

User testing lebih mudah

d)

Database lebih stabil

e)

Proses coding semakin cepat

53.

Dalam pembuatan aplikasi e-commerce, fitur pencarian produk sebaiknya dimasukkan pada tahap...

a)

Maintenance sistem

b)

Backend deployment

c)

Wireframe sebagai komponen navigasi/informasi

d)

UI final

e)

Hosting setup

54.

Salah satu indikator wireframe yang efektif adalah...

a)

Resolusi tinggi

b)

Banyaknya ilustrasi gambar

c)

Warna yang menarik perhatian

d)

Efek animasi halus

e)

User dapat memahami fungsi halaman tanpa penjelasan panjang

55.

Jika klien meminta perubahan posisi menu utama, maka tahapan yang paling cepat untuk melakukan perubahan adalah...

a)

Setelah backend selesai

b)

Saat testing akhir

c)

Setelah UI final selesai

d)

Saat website sudah online

e)

Pada file wireframe sebelum prototype dibuat

56.

Dalam konteks mobile-first design, wireframe sebaiknya dibuat dengan prioritas...

a)

Tampilan desktop lebar

b)

Animasi berat

c)

Ukuran layar kecil dan kebutuhan user mobile

d)

Resolusi tinggi

e)

Desain kompleks

57.

Jika sebuah aplikasi memiliki banyak menu, maka solusi wireframe yang tepat adalah...

a)

Menghapus sidebar

b)

Menghilangkan ikon

c)

Mengelompokkan menu menggunakan hierarki navigasi

d)

Menggunakan font kecil

e)

Menambah warna berbeda

58.

Komponen footer biasanya berfungsi untuk...

a)

Menempatkan informasi, tautan, dan navigasi tambahan

b)

Menyimpan data server

c)

Mengatur animasi halaman

d)

Mengubah warna tema

e)

Menampilkan banner iklan

59.

Saat wireframe diuji ke user, tujuan utama pengujian adalah...

a)

Menentukan resolusi gambar

b)

Mengetahui kemudahan penggunaan layout

c)

Mengatur tipografi

d)

Mengukur kecepatan server

e)

Menilai keindahan warna

60.

Wireframe yang baik harus memperhatikan prinsip...

a)

Resolusi tinggi

b)

Warna brand dominan

c)

Konsistensi layout dan kemudahan navigasi

d)

Visual efek

e)

Banyak animasi

61.

Jika sebuah tombol penting sulit ditemukan user, maka permasalahan terletak pada...

a)

Framework backend

b)

Warna background

c)

Database struktur

d)

Pemilihan font

e)

Visual hierarchy pada wireframe

62.

Dalam workflow industri, wireframe biasanya dibuat sebelum...

a)

Persona

b)

Riset user

c)

User interview

d)

Analisis pasar

e)

Prototype interaktif

63.

Wireframe membantu mengurangi miskomunikasi antara desainer dan developer karena...

a)

Sama-sama menggunakan software

b)

Menggunakan bahasa visual yang sama

c)

Memberikan gambaran struktur sistem secara konkret

d)

Menyederhanakan coding

e)

Mengurangi dokumentasi

64.

Jika sebuah aplikasi terasa berat digunakan, evaluasi awal yang bisa dilakukan dari sisi UI/UX adalah...

a)

Framework backend

b)

Kompleksitas layout wireframe

c)

Database query

d)

Server performance

e)

Hosting bandwidth

65.

Wireframe dashboard admin sebaiknya menampilkan...

a)

Banyak ilustrasi visual

b)

Warna cerah dominan

c)

Foto latar belakang

d)

Informasi penting yang mudah dipantau

e)

Animasi transisi

66.

Dalam aplikasi pendidikan, prioritas wireframe sebaiknya pada...

a)

Tampilan estetika

b)

Warna branding

c)

Efek animasi

d)

Kemudahan akses materi pembelajaran

e)

Resolusi tinggi

67.

Salah satu tujuan utama wireframe adalah membantu proses...

a)

Video editing

b)

Marketing digital

c)

Perencanaan struktur produk digital

d)

Pengolahan audio

e)

Editing foto

68.

Penggunaan placeholder text pada wireframe bertujuan untuk...

a)

Mengurangi loading

b)

Mengatur ukuran gambar

c)

Memberikan gambaran struktur konten

d)

Menentukan warna font

e)

Mempercantik tampilan

69.

Jika wireframe tidak memperhatikan kebutuhan user, dampak yang terjadi adalah...

a)

Database error

b)

Warna tidak konsisten

c)

Server overload

d)

Pengalaman pengguna menjadi buruk

e)

Animasi patah-patah

70.

Dalam proyek besar, wireframe biasanya disimpan sebagai...

a)

File database

b)

File audio

c)

Dokumen desain kolaboratif

d)

Script backend

e)

File video

71.

Grid system dalam wireframe membantu menjaga...

a)

Warna desain

b)

Kecepatan loading

c)

Animasi UI

d)

Ukuran file

e)

Konsistensi alignment layout

72.

Jika sebuah website terlihat tidak seimbang, maka perbaikan dilakukan pada...

a)

Database layout

b)

Warna dominan

c)

Struktur grid dan tata letak wireframe

d)

Framework backend

e)

Hosting server

73.

Dalam wireframe mobile, posisi tombol utama biasanya ditempatkan di...

a)

Sidebar kanan

b)

Bagian paling atas

c)

Pojok kiri atas

d)

Tengah layar

e)

Area bawah yang mudah dijangkau jempol

74.

Wireframe yang efektif harus mampu menjawab pertanyaan user tentang...

a)

Warna brand

b)

Efek animasi

c)

Bagaimana cara menggunakan aplikasi

d)

Spesifikasi server

e)

Bahasa pemrograman

75.

Jika klien ingin menambahkan fitur baru, maka penyesuaian pertama dilakukan pada...

a)

UI final

b)

Backend server

c)

Hosting konfigurasi

d)

Wireframe struktur halaman

e)

Database sistem

76.

Wireframe juga membantu perencanaan konten karena...

a)

Mengatur animasi

b)

Mengatur resolusi

c)

Mengatur posisi dan prioritas informasi

d)

Mengatur font

e)

Menentukan warna teks

77.

Dalam industri startup, wireframe sering digunakan untuk...

a)

Branding visual

b)

Hosting setup

c)

Social media marketing

d)

Editing video promosi

e)

Pitching ide produk ke investor

78.

Jika wireframe tidak diuji ke user, risiko utama yang muncul adalah...

a)

Tampilan kurang warna

b)

Fitur tidak sesuai kebutuhan pengguna

c)

Kecepatan internet turun

d)

Database sulit diakses

e)

Server tidak stabil

79.

Produk tidak sesuai kebutuhan pengguna merupakan contoh risiko ketika...

a)

Tim fokus pada animasi dan efek interaktif

b)

Iterasi dilakukan terlalu sering tanpa tujuan

c)

Wireframe diabaikan dalam tahap perencanaan awal

d)

Dokumentasi visual dibuat sangat rinci dan panjang

80.

Wireframe membantu mempercepat proses desain karena...

a)

Menghapus seluruh elemen animasi dari UI

b)

Menurunkan resolusi seluruh aset gambar

c)

Mengurangi trial-error di tahap visual desain

d)

Mengurangi jumlah halaman aplikasi secara drastis

81.

Saat membuat wireframe aplikasi booking, komponen penting yang harus diperhatikan adalah...

a)

Animasi loading yang memikat pengguna

b)

Warna latar belakang dekoratif halaman

c)

Ikon dekoratif tanpa fungsi navigasi

d)

Alur pemilihan jadwal dan konfirmasi pemesanan

82.

Jika pengguna sulit memahami halaman utama, evaluasi sebaiknya dilakukan pada...

a)

Struktur homepage pada wireframe

b)

Konfigurasi hosting dan domain

c)

Struktur database dan tabel

d)

Logika backend server aplikasi

83.

Penggunaan komponen konsisten dalam wireframe bertujuan untuk...

a)

Mempercantik UI dengan banyak warna

b)

Mempercepat animasi pada transisi

c)

Mengurangi ukuran file aset gambar

d)

Meningkatkan kemudahan penggunaan antarmuka

84.

Wireframe membantu dokumentasi produk karena...

a)

Menyimpan file audio untuk aplikasi

b)

Menyimpan pilihan warna lengkap UI

c)

Menyimpan seluruh animasi interaktif

d)

Merekam struktur sistem yang dirancang

85.

Jika aplikasi banyak direvisi setelah rilis, kemungkinan kesalahan terjadi pada tahap...

a)

Perencanaan wireframe tahap awal

b)

Pengujian server dan beban trafik

c)

Koding backend dan API

d)

Setup hosting awal aplikasi

86.

Dalam konteks industri, wireframe dianggap sebagai...

a)

Blueprint struktur aplikasi digital

b)

Produk akhir siap dipasarkan

c)

Tampilan visual utama aplikasi

d)

Media promosi kampanye produk

87.

Wireframe yang terlalu rumit akan berdampak pada...

a)

Database menjadi lebih aman otomatis

b)

Server menjadi jauh lebih cepat

c)

UI menjadi jauh lebih menarik

d)

Pengalaman pengguna menjadi tidak nyaman

88.

Untuk akses cepat ke fitur utama, wireframe perlu menerapkan...

a)

Banyak submenu berlapis

b)

Banyak pop-up informasional

c)

Prioritas visual dan hierarchy jelas

d)

Warna cerah di semua elemen

89.

Wireframe membantu desainer fokus pada...

a)

Resolusi gambar setiap ikon

b)

Animasi interaktif kompleks

c)

Warna dan tipografi detail

d)

Struktur dan fungsi tampilan

90.

Dalam aplikasi berita, komponen paling penting yang ditonjolkan dalam wireframe adalah...

a)

Footer dengan banyak tautan

b)

Banner iklan besar di atas

c)

Ikon dekoratif di sidebar

d)

Konten berita utama yang informatif

91.

Jika wireframe tidak konsisten antar halaman, dampaknya adalah...

a)

Warna berubah otomatis saat loading

b)

Server aplikasi mengalami error besar

c)

Pengguna bingung saat berpindah halaman

d)

Database menjadi overload mendadak

92.

Wireframe memungkinkan tim melakukan iterasi karena...

a)

Dapat dicetak untuk komunikasi offline

b)

Desain mudah di-export ke semua format

c)

Ukuran file selalu sangat kecil

d)

Mudah diperbaiki sebelum tahap visual final

93.

Dalam industri digital, wireframe penting karena...

a)

Menentukan domain website perusahaan

b)

Menjadi dasar pengembangan UI dan UX tim

c)

Mengatur animasi seluruh elemen UI

d)

Mengatur warna produk lebih presisi

94.

Jika wireframe dibuat tanpa memperhatikan target pengguna, hasil produk akan...

a)

Lebih cepat proses loading halaman

b)

Memiliki fitur jauh lebih banyak

c)

Lebih menarik dari sisi visual saja

d)

Kurang relevan dengan kebutuhan pengguna

95.

Tujuan akhir penggunaan wireframe dalam pengembangan aplikasi adalah...

a)

Mengurangi ukuran file setiap aset

b)

Menciptakan produk digital mudah digunakan dan terstruktur

c)

Menambah beragam efek visual animasi

d)

Membuat tampilan menjadi lebih ramai

Similar Resources on Wayground

Jawab Sampai Betul modul 4 PSV

100 questions

Jawab Sampai Betul modul 4 PSV

quiz

Worksheet

•

9th - 12th Grade

ASAS SBDP GANJIL 9 2025/2026

100 questions

ASAS SBDP GANJIL 9 2025/2026

quiz

Worksheet

•

9th Grade

Gerak dan Tari

92 questions

Gerak dan Tari

quiz

Worksheet

•

1st - 10th Grade

DDA2 Final Exam

100 questions

DDA2 Final Exam

quiz

Worksheet

•

9th - 12th Grade

LATIHAN ULANGKAJI TINGKATAN 3

92 questions

LATIHAN ULANGKAJI TINGKATAN 3

quiz

Worksheet

•

9th Grade