Perancangan web (web design) adalah istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, (biasanya berupa hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau perangkat lunak berbasis web. Tujuan dari web design adalah untuk membuat website (sekumpulan konten online termasuk dokumen dan aplikasi yang berada pada server web / server). Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis.
Berikut adalah kumpulan soal-soal dan jawaban Web Design UI/UX
Berikut di bawah ini adalah hal yang dapat mempengaruhi personality pada font . . .
Jenis Typeface
Warna Font
Ketebalan Font
Betul semua
Berikut di bawah ini adalah karakteristik dari typeface “Script”
Cocok digunakan untuk penulisan di paragraph
Cocok digunakan pada Heading untuk menampilkan kesan klasik
Mudah dibaca jjika memiliki susunan text yang cukup Panjang
Fleksibel digunakan untuk berbagai macam genre website
Berikut ini adalah yang bukan tergolong dari Typeface “San Serif”
Helvetica
Lato
Times New Roman
Oswald
Pengaturan Shadow pada figma dapat diakses melalui property . . .
Stroke
Effect
Fill
Layer
Monseratt memiliki berapa jenis pengaturan Font Weight ?
2
5
8
10
Pada proses extreme cropping sebaiknya dilakukan menggunakan Teknik . . .
Pengaturan Gradient menjadi Linier
Pengaturan Nilai Fradient menjadi Radial
Menggunakan Teknik Masking
Menggunakan alt + drag mouse
Berikut ini yang bukan type pengaturan fill pada figma . . .
Solid
Gradient
Image
Animation
Untuk memberikan visual hierarcy yang jelas pada sebuah text, dapat diterapkan pengaturan . . .
Line Spacing
Line Hight
Font Weight
Salah semua
Penerapan teknik masking digunakan untuk . . .
Menghasilkan efek bayangan
Menghasilkan transisi transparansi dari gambar
Melakukan cropping image
Mengatur urutan layer
Berikut di bawah ini adalah jenis type face yang memiliki pola tebal tipis
Modern
Lato
Roboto
Oldstyle
Typeface berjenis “Proxima Soft” cocok digunakan dalam design website bertema . . .
Klasik
Formal
Casual
Elegant
Berikut ini yang bukan jenis type gradient pada aplikasi figma . . .
Linear
Opacity
Radial
Diamond
Arial memiliki berapa jenis pengaturan Font Weight ?
2
5
8
10
Open Sans memiliki berapa jenis pengaturan Font Weight ?
2
5
8
10
Berikut di bawah ini adalah karakteristik dari typeface “Slab”
Cocok digunakan untuk penulisan di paragraph
Cocok digunakan untuk merepresentasikan kesan Mekanikal dan Kekuatan
Mudah dibaca jjika memiliki susunan text yang cukup Panjang
Fleksibel digunakan untuk berbagai macam genre website
Berikut di bawah ini adalah karakteristik dari typeface “Lato”
Tidak direkomendasikan untuk digunakan pada paragraph
Cocok digunakan pada Heading untuk menampilkan kesan klasik
Fleksibel digunakan untuk berbagai macam genre website
Memberikan kesan Lux dan ELegant
Teknik penulisan text dengan line spacing yang renggang, bisa digunakan ketik . . .
Menggunakan Text berukuran kecil dan jumlah text yang banyak
Menggunakan Text berukuran besar dan jumlah text yang sedikit
Ingin memberikan kesan Clasic pada text
Membuat Heading
Berikut ini adalah yang bukan tergolong dari Typeface “Serif”
Oldstyle
Roboto
Slab
Modern
Berikut di bawah ini adalah pernyataan yang benar berkaitan dengan font weight . . .
Pengaturan dari ukuran font
Pengaturan dari ketebalan font
Pengaturan dari transparansi font
Pengaturan dari Line Spacing
Pada aplikasi Figma pengaturan background Color dapat dilakukan melalui property . . .
Stroke
Effect
Fill
Layer
Berikut ini adalah penjelasan yang paling tepat berkenaan dengan Typography . . .
Adalah segala sesuatu yang berkenaan dengan pengaturan image
Adalah segala sesuatu yang berkenaan dengan pengaturan warna
Adalah segala sesuatu yang berkenaan dengan pengaturan layout
Adalah segala sesuatu yang berkenaan dengan pengaturan jenis typeface dan font
Pada aplikasi Figma pengaturan Grid dapat dilakukan pada elemen . . .
Rectangle
Frame
Text
Elipse
Untuk merubah ukuran gambar secara proporsional dapat dilakuakn menggunakan cara . . .
Menggunakan alt + drag mouse
Menggunakan shift + drag mouse
Menggunakan ctrl + drag mouse
Menggunakan ctrl + Shift + drag mouse
Typeface berjenis “Bodoni” cocok digunakan dalam design website bertema . . .
Holiday
Anak anak
Casual
Elegant
Teknik penulisan text dengan line spacing yang rapat, bisa digunakan ketika . . .
Menggunakan Text berukuran kecil dan jumlah text yang banyak
Menggunakan Text berukuran besar dan jumlah text yang sedikit
Text ingin mudah dibaca
Membuat paragraph
Berikut ini child elemen yang terdapat pada “Elemen Navbar” pada aplikasi Web Flow
Container, Brand, Nav Menu, Menu Button
Div Blox, IMG, Main Menu, Icon
Elemen Navbar tidak mempunyai child elemen
Navbar, Container, Brand, Menu
Berikut ini adalah nilai default “direction” pada flex box menggunakan aplikasi webflow
Start
End
Vertical
Horizontal
Pada aplikasi Webflow, pengaturan navbar collapsible menu terdapat pada
Tab Style
Tab Element Settings
Tab Style Manager
Tab Interactions
Pada aplikasi webflow, pengaturan Flex Box terdapat pada menu
Layout
Spacing
Position
Effect
Berikut ini adalah yang bukan merupakan default jenis ukuran screen pada aplikasi webflow
Desktop
Laptop
Tablet
Mobile landscape
Berikut ini yang bukan merupakan jenis pengaturan “Justify” flex box pada aplikasi webflow
Start
Center
Space Between
Vertical
Berikut ini yang bukan merupakan jenis alignment flex box pada aplikasi webflow
Start
Center
Baseline
Horizontal
Untuk mengimplementasikan efek hover, perlu melakukan pengatiran di menu
Style Selector > State > Hover
Effects > State > Hover
Transition > State > Hover
Filter > State > Hover
Pilih salah satu pernyataan yang benar (berkenaan dengan aplikasi web flow) dari beberapa pernyataan di bawah ini
Image dapat ditambahkan secara langsung pada “Elemen Brand”
Image dapat ditambahkan secara langsung pada “Elemen Nav Menu”
Untuk memunculkan Gambar pada “Elemen Brand” perlu ditambahkan “Elemen Image”
Hanya gambar berbentuk icon yang dapat ditambahkan pada “Elemen Nav Bar”
Berikut ini adalah pernyataan yang tidak benar berkaitan dengan konsep Margin dan Padding
Margin auto digunakan untuk mengatur posisi sebuah elemen agar ke tengah halaman
Padding digunakan untuk mengatur jarak di dalam sebuah elemen (jarak antara content sebuah elemen dengan border terluar dari elemen tersebut)
Margin digunakan untuk mengatur jarak antara sebuah elemen degan elemen yang lain
Pengaturan margin dan padding tidak dapat dilakukan secara bersamaan pada elemen yang sama
Pada proses extreme cropping sebaiknya dilakukan menggunakan Teknik
Pengaturan Gradient menjadi Linier
Pengaturan Nilai Fradient menjadi Radial
Menggunakan Teknik Masking
Menggunakan alt + drag mouse
Elemen Heading bertuliskan “Judul B” dihasilkan dari proses duplikasi dari Elemen Heading bertuliskan “Judul A”, sehingga kedua elemen tersebut memiliki class yang sama bernama “Heading”. Berikut ini adalah pernyataan yang tidak benar berkaitan dengan studi kasus tersebut pada aplikasi webflow
Setiap perubahan style yang dilakukan pada text “Heading B” akan di aplikasikan juga pada text “Heading A”
Setiap perubahan text yang dilakukan pada text “Heading B” tidak akan di aplikasikan pada text “Heading A”
Agar perubahan style pada text “Heading A” tidak mempengaruhi style pada text “Heading B” maka perlu melakukan proses “rename class”
Perubahan style pada text “Heading A” secara default tidak akan mempengaruhi style pada text “Heading B” karena keduanya adalah elemen yang berbeda
Berikut ini adalah pernyataan yang tidak benar berkenaan dengan pengaturan font pada aplikasi webflow
untuk menambahkan font harus terlebih dahulu melakukan pengaturan di menu “site setting” lalu masuk ke menu “font”
Penambahan font pada webflow bisa langsung dilakukan di dalam projek yang sedang dikerjakan
Adobe Font dapat ditambahkan ke dalam aplikasi web flow
Custom Font dapat ditambahkan ke dalam aplikasi web flow
Pilih salah satu pernyataan yang benar (berkenaan dengan aplikasi web flow) dari beberapa pernyataan di bawah ini
Menu pada “Elemen Nav Bar” hanya akan disembunyikan pada layar dengan ukuran Mobile Landscape atau yang lebih kecil
Menu pada “Elemen Nav Bar” hanya akan disembunyikan pada layar dengan ukuran Tablet atau yang lebih kecil
Menu pada “Elemen Nav Bar” hanya akan disembunyikan pada layar dengan ukuran Mobile “Potrait”
Tidak ada pernyataan yang benar
Elemen Brand pada Web Flow berfungsi untuk
Menampilkan link menu
Menampilkan Logo Merk atau Nama Situs
Menampilkan Colapse Icon
Menampilkan Button menu
Berikut ini yang bukan merupakan jenis file yang dihasilkan dari proses export menggunakan Figma
pdf
svg
png
psd
Berikut ini adalah perbedaan antara Elemen Div Blox dan Elemen Container pada aplikasi Web FLow
“Elemen Div Blox” memiliki nilai default padding top dan padding button sedangkan “Elemen Container” tidak memiliki nilai default padding
“Elemen Container” memiliki nilai default padding top dan padding button sedangkan “Elemen Div Blox” tidak memiliki nilai default padding
Pada screen ukuran desktop, “Elemen Div Blox” akan memenuhi seluruh ukuran lebar dari layar monitor, sedangkan “Elemen Container” tidak memenuhi seluruh ukuran lebar dari layar monitor
Pada screen ukuran desktop, “Elemen Container” akan memenuhi seluruh ukuran lebar dari layar monitor, sedangkan “Elemen Div Blox” tidak memenuhi seluruh ukuran lebar dari layar monitor
Sebuah “Elemen Div-Blox” berukuran 300 px ingin di posisikan di tengah halaman, maka pengaturan yang dilakukan pada aplikasi webflow adalah
Margin Right : Center ; Margin Left : Center
Margin Right : Midle ; Margin Left : Midle
Margin Right : Auto ; Margin Left : Auto
Margin Right : 0 ; Margin Left : 0
Itulah artikel Kumpulan Soal dan Jawaban Web Design UI/UX kali ini, semoga bermanfaat.
Posting Komentar untuk "Kumpulan Soal dan Jawaban Web Design UI/UX"