Tentang UI dan UX

1. DASAR-DASAR DESAIN UI/ UX
MULTIMEDIA
SMK AS-SU’UDIYYAH

2. UX mengacu pada istilah Pengalaman
Pengguna sedangkan UI adalah singkatan
dari Antarmuka Pengguna. Namun
terlepas dari kedekatan mereka, ada
lebih banyak proses eksekusi dan
disiplin desain mereka.
UI & UX

3. Desain UX berkaitan dengan keseluruhan interaksi dan
pengalaman pengguna dengan aplikasi atau situs web.
Sudah diketahui umum bahwa pengalaman pengguna yang
luar biasa akan menghasilkan pelanggan yang kembali
dan penggunaan aplikasi yang hebat.
Biasanya, proses Desain UX mencakup penelitian,
desain, pembuatan prototipe, pengujian, dan
pengukuran. Banyak faktor yang memengaruhi proses UX
seperti kegunaan, utilitas, aksesibilitas,
desain/estetika, kinerja, ergonomi, interaksi

4. Di sisi lain, Antarmuka Pengguna (UI) lebih
tentang desain visual dan desain informasi di
sekitar layar. Meskipun banyak proses masuk ke
elemen grafis ini, UI seperti namanya, tentang
hal-hal yang benar-benar akan dilihat dan
berinteraksi oleh pengguna. Ini memberikan
hasil yang nyata dan berfokus pada bagaimana
tampilan dan fungsi permukaan aplikasi atau
produk.

12. UI Design Basics
Section 1

13. Introduction
Desain Antarmuka Pengguna (UI) berfokus pada:
• Mengantisipasi apa yang mungkin perlu dilakukan
pengguna dan
• Memastikan bahwa antarmuka memiliki elemen yang mudah
diakses, dipahami, dan digunakan untuk memfasilitasi
tindakan tersebut.
UI menyatukan konsep dari:
1. Desain Interaksi
2. Desain Visual dan
3. Arsitektur Informasi
Desain Antarmuka Pengguna (UI) berfokus pada:

14. 1. Interaction Design
Desain interaksi adalah komponen penting
dalam payung raksasa desain pengalaman
pengguna (UX).
- Desain interaksi berfokus pada pembuatan
antarmuka yang menarik dengan perilaku yang
dipikirkan dengan matang.
- Memahami bagaimana pengguna dan teknologi
berkomunikasi satu sama lain merupakan hal
mendasar dalam bidang ini.
- Dengan pemahaman ini, Anda dapat
mengantisipasi bagaimana seseorang

15. Praktik Terbaik untuk Merancang Interaksi
Pertimbangkan kualitas berikut dan pertanyaan
terkait saat membuat produk digital yang memiliki
elemen interaktif:
Pertanyaan yang Perlu Dipertimbangkan saat Mendesain
Interaksi
• Tentukan Bagaimana Pengguna Dapat Berinteraksi dengan
Antarmuka
• Berikan Petunjuk kepada Pengguna tentang Perilaku sebelum
Tindakan Diambil
• Mengantisipasi dan Mengurangi Kesalahan
• Pertimbangkan Umpan Balik Sistem dan Waktu Respons

18. 2. Desain visual
Desain visual berfokus pada
estetika situs dan materi
terkait dengan menerapkan
gambar, warna, font, dan elemen
lainnya secara strategis.
Desain visual yang sukses tidak
menghilangkan konten pada
halaman atau fungsi.
Sebaliknya, itu meningkatkannya
dengan melibatkan pengguna dan
membantu membangun kepercayaan
dan minat pada merek.

19. 12 Prinsip Hirarki Visual

20. 12 Visual Hierarchy Principles…

21. 12 Visual Hierarchy Principles…

22. 12 Prinsip
Hirarki Visual

23. Elemen Dasar Desain Visual
Elemen dasar yang digabungkan
untuk membuat desain visual
meliputi:
• Garis
• Bentuk
• Warna
• Tekstur
• Tipografi
• Membentuk

24. Prinsip Membuat Desain Visual
Desain visual yang sukses
menerapkan prinsip-prinsip berikut
pada elemen-elemen yang disebutkan
di atas dan secara efektif
menyatukannya dengan cara yang
masuk akal. Saat mencoba mencari
cara menggunakan elemen dasar,
pertimbangkan:
• Persatuan
• Gestalt
• Ruang angkasa
• Hirarki
• Keseimbangan
• Kontras
• Skala

25. Contoh Menyatukan semuanya

26. 3. Arsitektur Informasi
Arsitektur informasi (IA) berfokus pada
pengorganisasian, penataan, dan pelabelan
konten dengan cara yang efektif dan
berkelanjutan.
Tujuannya adalah untuk membantu pengguna
menemukan informasi dan menyelesaikan tugas.
Untuk melakukan ini, Anda perlu memahami
bagaimana potongan-potongan itu cocok satu sama
lain untuk menciptakan gambaran yang lebih
besar, bagaimana item-item tersebut berhubungan
satu sama lain di dalam sistem.
Mengapa IA yang Dipikirkan dengan Baik Penting
Tujuan IA Anda adalah untuk membantu pengguna

27. 3. Arsitektur Informasi
Mengapa IA yang Dipikirkan
dengan Baik Penting
Tujuan IA Anda adalah untuk
membantu pengguna memahami:
where they are
what they’ve found
what’s around and
what to expect

28. Apa yang perlu Anda ketahui
Agar berhasil, Anda memerlukan beragam pemahaman
tentang standar industri untuk membuat, menyimpan,
mengakses, dan menyajikan informasi.
Komponen utama AI:
Skema dan Struktur Organisasi: Bagaimana Anda
mengkategorikan dan menyusun informasi
• Sistem Pelabelan: Bagaimana Anda merepresentasikan
informasi
• Sistem Navigasi: Bagaimana pengguna menelusuri atau

29. Menarik, bukan?
Ini hanyalah pratinjau sekilas dari presentasi lengkapnya. Kami harap Anda
menyukainya! Untuk melihat sisanya, cukup klik di sini untuk melihatnya secara
lengkap di PowerShow.com. Kemudian, jika mau, Anda juga dapat masuk ke
PowerShow.com untuk mengunduh seluruh presentasi secara gratis.