UI Design Pattern Overview

Topic 1 : Component & Pattern

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 yang cantik dengan kegunaan yang tepat dalam membantu user menyelesaikan
suatu task atau goal. Untuk membangun sebuah desain produk, desainer menyusun komponen UI
dan mendesain interface untuk mendukung produk dalam menyampaikan informasi dan mendukung
penggung menyelesaikan suatu task/tugas pada produk.

 
Component vs Pattern
Apa itu 'Component'?

Komponen adalah bagian spesifik dari design system yang bisa digunakan kembali. Komponen juga
dikenal sebagai modul, potongan, portlet, widget, blok, atau label lain yang bergantung pada
konteks desain dan biasanya digabungkan untuk membuat seluruh halaman atau tampilan. Setiap
komponen memiliki cara pengaplikasian khusus dalam layout halaman dan mungkin memiliki
spesifikasi preskriptif untuk perilaku, format, editorial, gaya visual, dan variabel khusus.

Apa itu 'Pattern'?

Pattern adalah solusi global untuk masalah desain umum, sehingga desainer dapat menggunakan
solusi tersebut berkali-kali dan tidak perlu membuatnya dengan cara yang sama dua kali.

Misalnya, menggunakan desain umum tab seperti diperlukan setidaknya dua tab, pemutaran video
yang dapat diputar atau dijeda, atau otentikasi yang dilalui via form login, setidaknya, memerlukan
beberapa bentuk field username dan password. .
 
Hubungan antara Component dan Pattern
Pattern dan component bisa sangat saling melengkapi dan hidup berdampingan dalam membuat
solusi desain, meskipun keduanya bisa dibilang bukan hal yang sama.

Pada artikel UIE, menunjukkan website fancast.com dan comcast.net untuk memberi tanda
bagaimana component dan pattern bisa dibangun. Dua halaman beranda dapat dipecah menjadi
beberapa components (ditandai dengan kotak oranye), banyak di antaranya digunakan kembali di
halaman lain. Setiap beranda juga menggunakan banyak patterns (ditandai dengan keterangan
merah).

Potongan komponen (oranye) dan pola (merah) di beranda comcast.net (kiri) dan fancast.com
(kanan). Gambar dari artikel UIE
Desain dua halaman memiliki setidaknya 5 pattern, termasuk penelusuran, autentikasi, carousel,
headline, dan tab.

Bagaimana kesamaan antara Component & Pattern?

Baik pola dan komponen merupakan solusi desain yang dapat digunakan kembali untuk masalah
tertentu. Penggunaan kembali ini — dan konsistensi serta penghematan biaya yang dihasilkan —
adalah nilai jual utama dari pattern dan component.

Selain itu, pattern dan component bisa:

  Dijelaskan melalui atribut seperti Use When, Rationale, dan Solution Guidelines
 Dikelola dalam sebuah library
 Diberikan sebagai aset yang dapat digunakan kembali, baik kerangka kerja HTML / CSS
atau pustaka desain yang digunakan dalam wireframe atau produksi comp
 Dimanfaatkan selama proyek oleh information architects, interaction designers, visual
designers, design technologists (yaitu, joki HTML / CSS / JS), dan disiplin ilmu lainnya
 Dibuat dan dikelola melalui alur kerja yang ditentukan dengan baik
 Berdasarkan kebutuhan desain suatu organisasi
 Dipengaruhi dan ditingkatkan berdasarkan riset pengguna

 
Mengadopsi Component & Pattern Library
Saat mendesain interface, cobalah untuk konsisten dan mudah diprediksi dalam memilih
komponen interface. Karena disadari atau tidak, user telah terbiasa dengan pattern dan komponen-
komponen yang bekerja dengan cara tertentu yang sudah mereka ketahui sebelumnya, jadi pilihlah
untuk mengadopsi komponen-komponen itu jika diperlukan. Hal itu akan membantu penyelesaian
tugas, efisiensi, dan kepuasan mereka.

Daftar design pattern di web UI patterns

Pattern menjadi pembantu yang efektif pada pengerjaan kegiatan mendesain rutin. Jika kamu ingin
menemukan yang lainnya, pertimbangkan untuk melihat design pattern libraries yang sudah memiliki
struktur pattern yang terorganisir. Contoh beragam design pattern bisa dilihat di situs-situs ini : UI
Patterns, UI Garage, Pttrns dan Elements of Design.
Detail dokumentasi pattern navigation tabs dari web UI patterns
Untuk pemula, saya rekomendasikan daftar pattern yang ada di UI Patterns. Situs lain bagus juga
tapi tidak terlalu banyak mencantumkan dokumentasi untuk memahami maksud adanya pattern
tersebut dengan alasan-alasan/rationale yang mendukung bagaimana navigation tab bisa
memberikan solusi dari sebuah problem desain. 

Topic 2 : Input Components

Component Library
Component library menawarkan struktur umum yang dapat digunakan, ditambahkan, dikurangi, atau
mengubah bagian untuk menyesuaikan dengan persyaratan khusus untuk produk desain.

Mari kenali macam-macam komponen umum yang mendukung pembuatan interface design. 

Input Controls
Checkboxes

Checkbox memungkinkan user untuk memilih satu opsi atau lebih dari satu set. Biasanya terbaik
untuk menyajikan kotak centang dalam daftar vertikal. 

Radio buttons
Radio button digunakan untuk memungkinkan pengguna memilih satu item pada sebuah daftar
pilihan.

Dropdown lists

Dropdown list memungkinkan user untuk memilih satu item sekaligus, mirip dengan radio button,

tetapi lebih compact dan menghemat ruang. Pertimbangkan untuk menambahkan teks ke pilihan,
seperti ‘Pilih satu’ untuk membantu pengguna mengenali tindakan apa yang diperlukan.

List boxes

Seperti checkbox, list box memungkinkan user memilih beberapa item sekaligus, tetapi lebih ringkas

dan dapat mendukung daftar opsi yang lebih panjang jika diperlukan.
Buttons

Sebuah button atau tombol menunjukkan action atas dari sentuhan atau klik dan biasanya diberi
label menggunakan teks, ikon, atau keduanya.

Toggles

Button Toggle memungkinkan user untuk mengubah pengaturan antara dua kondisi. Mereka paling

efektif untuk keadaan on/off yang secara visual berbeda.

Text fields
Text fields memungkinkan pengguna memasukkan teks. Text field memungkinkan memasukkan
satu baris atau beberapa baris teks.

Date Time Picker

Date time picker memungkinkan pengguna untuk memilih tanggal dan / atau waktu. Dengan
menggunakan picker, informasi secara konsisten diformat dan dimasukkan ke dalam sistem.

Topic 3 : Navigational Components

Search field

Kotak pencarian memungkinkan pengguna untuk memasukkan kata kunci atau frase dan
mengirimkannya untuk mencari indeks dengan maksud mendapatkan kembali hasil yang paling
relevan. Biasanya kolom pencarian adalah kotak teks satu baris dan sering disertai dengan tombol
pencarian.
Breadcrumb

Breadcrumbs memungkinkan user untuk mengidentifikasi lokasi mereka saat ini di dalam sistem

dengan memberikan jejak yang dapat diklik dari halaman melanjutkan untuk menavigasi.

Pagination

Pagination membagi konten di antara halaman, dan memungkinkan useruntuk melompat di antara

halaman atau melakukan pemesanan melalui konten.

Slider
Slider, juga dikenal sebagai track bar, memungkinkan user untuk mengatur atau menyesuaikan
nilai. 

Tags

Tag memungkinkan user menemukan konten dalam kategori yang sama. Beberapa sistem tag juga
memungkinkan user untuk menerapkan tag mereka sendiri ke konten dengan memasukkannya ke
dalam sistem.

Topic 4 : Informational Components

& Container
Tooltips

Tooltips memungkinkan user u
ntuk melihat petunjuk ketika mereka mengarahkan kursor ke item yang menunjukkan nama atau
tujuan item tersebut.
Icons

Icon adalah gambar yang disederhanakan yang berfungsi sebagai simbol intuitif yang digunakan
untuk membantu user menavigasi sistem, atau memberi informasi lebih jelas dengan mendukung
label.

Progress bar

Progress bar menunjukkan di mana pengguna user berada saat mereka bergerak melalui

serangkaian langkah dalam suatu proses. 

Message boxes
Message box adalah jendela kecil yang menyediakan informasi kepada user dan mengharuskan
mereka untuk mengambil tindakan sebelum mereka dapat bergerak maju atau melanjutkan
kegiatannya dengan produk.

Modal windows

Modal windows mengharuskan pengguna untuk berinteraksi dengannya sebelum mereka dapat

kembali ke sistem.

Containers
Accordion
Accordion adalah daftar item yang ditumpuk secara vertikal yang menggunakan fungsionalitas show
/ hide. 
Ketika label diklik, dia akan memperluas bagian yang menunjukkan konten di
dalamnya. Accordion bisa memiliki satu atau lebih item yang ditampilkan pada satu waktu dan
mungkin memiliki status default yang menunjukkan satu bagian atau lebih bagian tanpa harus
mengklik.

End Notes :
Sekarang kamu sudah tahu mengenai prinsip dasar mengenai visual design dan sudah mengenal
beragam komponen yang biasa digunakan untuk membangun sebuah UI design. Cara cepat untuk
menguasai UI design adalah dengan banyak melakukan latihan di aplikasi prototyping tool Adobe
XD atau Figma.

“If we want users to like our software we should design it to behave like
a likeable person: respectful, generous and helpful.”
— Alan Cooper

http://ui-patterns.com/patterns

https://www.smileycat.com/category/elements-of-design/

https://pttrns.com/

https://uigarage.net/