DESAIN

SUHENDRI, S.T., M.Kom.

Informatika – Fakultas Teknik – Universitas Majalengka
Pengertian User Interface (UI)
• UI adalah bagian dari UX yang berupa tampilan visual design sebuah sistem.
Tampilan tersebut memungkinkan pengguna terhubung dan berinteraksi
dengan suatu produk. 
• Selain berfungsi sebagai penghubung, UI juga berfungsi untuk
memperindah tampilan sehingga dapat meningkatkan kepuasan pengguna.
Namun, tak hanya harus indah, UI juga harus mudah digunakan. 
• Beberapa komponen UI diantaranya adalah komponen tombol, ikon
tipografi, tema, layout, animasi yang tampil pada produk, dan visual
interaktif lainnya. Semua komponen UI tersebut didesain dengan berfokus
pada keindahan dan kemudahan pengguna. Jadi, pengguna dapat
menikmati produk Anda. 
Pengertian User Experience (UX)
• User Experience (UX) merupakan proses mendesain suatu produk melalui
pendekatan pengguna. Dengan pendekatan ini, Kita bisa menciptakan
produk yang sesuai dengan kebutuhan dan keinginan pengguna.
• Produk dengan desain UX yang baik akan menciptakan pengalaman yang
menyenangkan bagi pengguna saat menggunakan produk yang kita buat.
Pengguna jadi mudah dan nyaman saat menggunakan produk.
• Adapun, komponen UX ini meliputi bagaimana fitur-fitur yang disediakan
pada produk, struktur desain, navigasi penggunaan produk, aspek visual
design, dan seluruh aspek interaksi dengan pengguna. UX juga meliputi
bagaimana kita menentukan branding, konten, dan copywriting yang
sesuai dengan target pengguna Kita.
Perbedaan User Interface (UI) dan User
Experience (UX)
1. Tujuan Desain
• Hal yang mendasar tentang perbedaan UI dan UX adalah tujuan desainnya.
Fokus pembuatan desain UI dan UX sangatlah berbeda. Desain UI pada
sebuah produk bertujuan untuk mempercantik tampilan produk. Sementara
desain UX dirancang untuk memberikan pengalaman yang menyenangkan
saat menggunakan produk. 
• Fokus desain UI adalah keindahan tampilan, sementara fokus desain UX
adalah kepuasan menggunakan produk. 
• Sederhananya, desain UI akan mempengaruhi kesan pertama pengguna
melihat produk Anda. Sementara itu, UX mempengaruhi bagaimana
pengalaman pengguna saat menggunakan produk.
Perbedaan User Interface (UI) dan User
Experience (UX)
2. Proses Desain
• Tujuan desain yang berbeda juga mempengaruhi prosesnya. Oleh sebab itu, proses
merancang UI dan UX pun berbeda. 
• Karena berfokus pada user experience, proses desain UX berlandaskan riset pengguna
sehingga menghasilkan produk yang disukai dan dibutuhkan oleh target pengguna. Prosesnya
pun melalui banyak tahap dan membutuhkan peran banyak pihak, salah satunya yaitu UX
researcher. Setelah melakukan riset, desainer merancang sketsa desain dengan wireframe
(kerangka awal sebelum halaman website atau antarmuka sebuah aplikasi
didesain) dan prototype (model kerja dasar sebagai pengembangan perangkat lunak).
• Sementara itu, desain UI juga memerlukan riset. Namun, riset yang dilakukan merupakan
riset desain untuk membuat desain yang menarik dan sesuai dengan konsep. Di sini, desainer
UI juga perlu merancang model desain yaitu dengan membuat mockup () terlebih dahulu.
Perbedaan User Interface (UI) dan User
Experience (UX)
3. Komponen Desain
• Komponen yang membangun Desain UI berfokus pada keindahan tampilan
produksi. komponen UI tersebut di antaranya meliputi warna, gambar dan
video animasi, typography (teknik dalam memilih dan menata huruf
dengan indah), buttons, dan visual interaksi lainnya. 
• Sementara itu, komponen desain UX meliputi hampir seluruh komponen
pada suatu produk seperti fitur-fitur, struktur desain, dan navigasi.
Termasuk juga tampilan interface, copywriting (proses atau teknik menulis
konten), hingga branding (pencitraan agar suatu produk dapat menarik
dan melekat di benak konsumen), sehingga diperlukan kolaborasi tim
untuk menghasilkan desain produk yang baik. 
Perbedaan User Interface (UI) dan User
Experience (UX)
4. Tools yang Digunakan 
• Proses pembuatan yang berbeda tentu membutuhkan tools yang berbeda. Untuk desainer
UI, keindahan gambar sangatlah penting. Jadi mereka membutuhkan aplikasi yang
mendukung pembuatan desain interface yang detail. 
• Ada banyak aplikasi desain UI yang tersedia seperti Flinto, Principle, Frames X, Adobe
illustrator, dll. Aplikasi tersebut dilengkapi beberapa tools pendukung desainer UI seperti
tools menambahkan unique interaction icon, easy transitions, UI assets and kits, dll. 
• Sementara itu, desainer UX lebih membutuhkan aplikasi prototyping desain agar mudah
mendapatkan feedback dari pengguna. Beberapa aplikasi prototyping desain yang
mendukung desainer UX adalah: Sketch, InVision, Figma, Adobe XD, Axure, dll. 
• Beberapa fitur yang tersedia seperti tersedia fitur collaboration, real-time editing, easy to
test design, dll. Fitur tersebut akan memudahkan desainer UX mendapatkan feedback
untuk menghasilkan produk yang user-friendly
Perbedaan User Interface (UI) dan User
Experience (UX)
5. Skill yang Dibutuhkan 
• Menjadi desainer UI dan desainer UX membutuhkan skill tersendiri. Beberapa skill
yang dibutuhkan seorang desainer UI adalah desain grafis, design branding, creative
thinking, dan convergent thinking (teknik untuk menyelesaikan masalah dengan fokus
untuk mencari satu jawaban yang benar). Skill tersebut harus dimiliki oleh desainer UI
dalam mendesain tampilan produk agar terlihat menarik dan mudah untuk interaksi.
• Sementara seorang desainer UX bertanggung jawab membuat desain produk dengan
pendekatan pengguna agar mudah digunakan. Oleh sebab itu, mereka harus memiliki
skill melakukan riset, analytical thinking, problem solving, critical
thinking, dan creative thinking. 
• Setelah membaca uraian perbedaan UI dan UX di atas, kami juga telah merangkumnya
dalam bentuk tabel supaya lebih mudah memahami perbedaan UI dan UX.
Perbedaan User Interface (UI) dan User
Experience (UX)
Perbedaan User Interface (UI)  User Experience (UX) 

Tujuan Membuat tampilan produk lebih menarik  Memberikan kenyamanan saat memakai produk 

Fokus Berfokus pada tampilan yang bagus Berfokus pada kenyamanan pengguna

Usability, navigasi, struktur desain, fitur-fitur, interaction

Elemen Animasi, typography, warna, video, buttons, dll
design, dll 

Based on Desain berdasarkan riset desain dan konsep produk Desain berdasarkan riset pengguna

Spesifikasi utama desain grafis, seperti Flinto, Principle, Frames Spesifikasi utama prototyping seperti Sketch, InVision, Figma,
Tools
X, Adobe illustrator Adobe XD, Axure

Pre-building Berupa mockup Berupa wireframe dan prototype

Skill yang Desain grafis, creative thinking, convergent thinking, desain Riset, critical thinking, creative thinking, analysis, problem
dibutuhkan branding.  solving,  wireframing.
Workflow Desain UI dan UX
Meskipun UI dan UX berbeda, keduanya tetap harus bekerja secara berkesinambungan agar
tercipta produk yang berkualitas. Nah di bagian ini, Anda akan mengetahui bagaimana cara kerja
UI dan UX dalam pembuatan produk.
1. Riset UX 
2. Membuat Information Architecture
3. Membuat Wireframe 
4. Mengatur UX flows 
5. Membuat Prototype Desain UX 
6. Membuat Design System
7. Mendesain User Interface
8. Proses Pengembangan produk oleh Developer
9. Design Usability Test 
Peranan UI dan UX dalam Pengembangan
Website dan Aplikasi
1. Menghasilkan Produk yang Dibutuhkan Pengguna
2. Meningkatkan Kepuasan Pengguna Terhadap Produk
3. Meningkatkan Penjualan dan Bisnis 
Bagaimana UI yang Baik?
1. Konsisten. Konsistensi desain dapat membantu pengguna untuk mengerti pola website atau aplikasi. 
Dengan begitu, pengguna akan lebih mudah menggunakan produk Anda. Mereka juga akan lebih
familiar dengan produk-produk Anda karena desain yang konsisten. 
2. Responsif. Tampilan website yang baik harus fleksibel di segala perangkat. Hal itu agar pengguna bisa
melihat tampilan website atau aplikasi dengan baik di perangkat desktop maupun mobile. Dengan
begitu, pengguna bisa tetap mengakses website atau produk Anda di mana saja dan kapan saja. 
3. Jelas dan Ringkas. Tampilan website Anda harus terlihat jelas dan ringkas agar pengguna dapat
memahami informasi aplikasi atau website Anda. 
4. Intuitif. Desain yang intuitif secara sederhana artinya mudah dimengerti secara natural. 
Pengunjung jadi dapat dengan mudah memahami flow website Anda tanpa perlu membutuhkan
sebuah manual book.
5. Kontras Warna yang Baik. Pemilihan warna dalam desain interface sangatlah penting. 
Kontras warna yang baik akan memudahkan pengguna membaca dan memahami informasi.
6. Informasi Terstruktur. Desain UI yang baik tidak hanya harus indah, namun juga mudah untuk
digunakan. Dengan menampilkan informasi yang terstruktur, informasi akan lebih mudah dipahami oleh
pengguna. Tidak hanya asal meletakkan gambar, icon, maupun tulisan. Desain seperti ini akan
membantu pengguna untuk bisa lebih fokus dan cepat menyelesaikan kebutuhannya. 
Bagaimana UX yang Baik?
1. Mudah digunakan (usability). Mudah digunakan artinya, pengguna bisa menggunakan
fitur-fitur aplikasi atau website tanpa membutuhkan effort yang berlebih.
2. Memiliki nilai (valuable). Bernilai atau memiliki nilai berarti fitur-fitur yang ada pada
produk sesuai dengan kebutuhan pengguna.
Jika produk tidak dibutuhkan oleh pengguna, produk tersebut belum dikatakan
mempunyai nilai yang berharga meski produk tersebut mudah digunakan. 
3. Mudah untuk didapatkan (Adoptability). Sebuah produk yang bernilai seharusnya
mudah untuk didapatkan, mudah dibeli, dan mudah diunduh sehingga pengguna bisa
dengan mudah untuk memulai menggunakan produk tersebut.
4. Kesukaan (Desirable). Istilah ini berkaitan dengan perasaan emosi tertentu. Misalnya,
pengguna merasakan pengalaman yang menyenangkan saat menggunakan produk
tertentu.  
Contoh Penerapan UI/UX pada Aplikasi
dan Website

TUGAS
Kesimpulan 
• Dari pemaparan di atas, UI memang merupakan bagian dari UX.
Keduanya merupakan elemen penting yang saling membutuhkan dalam
pengembangan website atau aplikasi. 
• Jika desain UX suatu produk sangat baik tetapi desain UI-nya tidak bagus,
first impression (penilaian positif awal) pengguna juga akan tidak bagus.
Sama halnya, jika desain UI suatu produk bagus, tetapi desain UX-nya
tidak bagus, pengguna tidak akan suka menggunakan produk tersebut. 
• Jadi, keduanya harus memiliki desain yang baik sehingga produk disukai
oleh pengguna secara keseluruhan. Dengan begitu manfaat produk pun
juga dapat dirasakan oleh pengguna.