Scribd
Unggah
180 tayangan10 halaman

Pola Desain UI untuk Aplikasi dan Website

Dokumen tersebut membahas tentang pola desain antarmuka pengguna (UI design pattern) yang merupakan komponen berulang yang dapat digunakan kembali untuk menyelesaikan masalah desain antarmuka yang sering terjadi. Beberapa contoh pola desain yang disebutkan adalah breadcrumbs, lazy registration, dan progressive disclosure. Pola desain dapat membantu para desainer dengan menyediakan blueprint untuk mendesain antarmuka pengguna.

Diunggah oleh

anggi antya
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
180 tayangan10 halaman

Pola Desain UI untuk Aplikasi dan Website

Dokumen tersebut membahas tentang pola desain antarmuka pengguna (UI design pattern) yang merupakan komponen berulang yang dapat digunakan kembali untuk menyelesaikan masalah desain antarmuka yang sering terjadi. Beberapa contoh pola desain yang disebutkan adalah breadcrumbs, lazy registration, dan progressive disclosure. Pola desain dapat membantu para desainer dengan menyediakan blueprint untuk mendesain antarmuka pengguna.

Diunggah oleh

anggi antya
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

DAY 5

UI DESIGN PATTERN OVERVIEW


Link Video Materi = [Link]

UI Designer bertugas untuk membuat tampilan sebuah layar terlihat lebih menarik dengan
warna, komposisi dan layout yang baik. Digabung dengan UX Designer, User interface
diharapkan memiliki tampilan menarik dengan kegunaan yang tepat dalam membantu user
menyelesaikan suatu task atau goal. Untuk membangun sebuah desain produk, desainer
menyusun komponen-komponen UI dan mendesain interface untuk menyampaikan informasi
dan mendukung panggung, menyelesaikan suatu task/tugas pada produk.

Apa itu Component?


Komponen merupakan kumpulan pola, bentuk, widget, blok yang bergantung pada konteks
desain dan biasanya digabungkan untuk membuat seluruh halaman atau tampilan
Apa itu UI Design Pattern?

User Interface Design Pattern (Pola UI Desain) merupakan komponen berulang/dapat digunakan
kembali untuk menyelesaikan masalah yang sudah sering terjadi dalam interface design, contoh
pola The Breadcrumbs dapat memberi tahu pengguna untuk kembali mengingat langkah awal.
Desainers dapat mengimplementasikan cara ini dalam berbagai macam kasus, namun harus
disesuaikan juga dengan konteks yang ada

Component Library
Componen library merupakan struktur umum yang digunakan dalam pembuatan desain, dan
dapat diatur sesuai kebutuhan desain. Berikut merupakan contoh-contoh komponen library yang
digunakan dalam UI Design :
1. Checkbox

2. Radio Button
3. List Boxes

[Link]
5. Toggles

6. Text Field
7. Date Time Picker

Kenapa Pola Desain dapat dijadikan sebagai pembantu para desainer?


Website dan aplikasi memiliki tampilan dan kesan konvensional dikarenakan pola desain
navigasi secara global dan banyak tab bars. dalam UI Design, kamu bisa mengunakan pola
desain sebagai pemecah masalah tersebut. salah satu contohnya dengan mengunakan pola desain
datepicker dapat membantu pengguna untuk memilih tanggal dalam bentuk form, jadi pola
desain ini bisa dianggap sebagai blueprint untuk desain desain yang akan kita buat selanjutnya.

contoh pola desain seperti: Macam-macam UI design pattern

Breadcumbs — mengunakan label yang terhubung untuk memberikan navigasi ke halaman


berikutnya
Lazy Registration — form yang banyak dapat membuat pengguna malas dalam melakukan
registrasi, maka lebih bagusnya untuk membuat pola desain form yang mudah agar pengguna
tidak bosan melakukan registrasi

Forgiving Format — Memberikan kemudahan pengguna untuk mengisi data dengan format
yang mudah (contoh kota/provinsi/kecamatan atau kode pos)
Clear Primary Action — Button harus dibuat terlihat dengan warna yang mencolok, (contoh
submit). anda harus menentukan aksi dimana dalam suatu halaman memerlukan prioritas

Progressive Disclosure — Tampilkan informasi kepada pengguna yang paling relevan, jika
panjang bisa dilanjutkan dihalaman berikutnya (contoh : view more)

Hover Controls — sembunyikan yang tidak terlalu esensial dalam bentuk bentuk yang lebih
detail untuk mempertajam penampilan informasi
Subscription Plants — Tawari pengguna dengan tombol seperti Sign-up untuk bergabung
dalam program produk anda
Leaderboards — Gunakan leaderboards untuk tampilan UI anda lebih memukau

Anda mungkin juga menyukai