Modul Pembelajaran

UI / UX

Course Overview

1. Pengenalan UI / UX
2. Pengenalan Adobe XD
3. Tampilan Adobe XD
4. Tutorial Adobe XD

1. UI / UX Introduction
a. Apa itu UI
User Interface adalah titik interaksi manusia-komputer dan komunikasi dalam suatu
perangkat. Ini dapat mencakup layar tampilan, keyboard, mouse, dan tampilan
desktop. Ini juga merupakan cara di mana pengguna berinteraksi dengan aplikasi
atau situs web. Tumbuhnya ketergantungan banyak bisnis pada aplikasi web dan
aplikasi mobile telah mendorong banyak perusahaan untuk menempatkan
peningkatan prioritas pada UI dalam upaya meningkatkan pengalaman pengguna
secara keseluruhan.
b. Apa itu UX
User experience (UX) design adalah proses yang digunakan tim desain untuk
menciptakan produk yang memberikan pengalaman yang bermakna dan relevan
bagi pengguna. Ini melibatkan desain seluruh proses untuk memperoleh dan
mengintegrasikan produk, termasuk aspek branding, desain, kegunaan dan fungsi.
c. Membedakan UI dan UX
Desain UX mengacu pada desain pengalaman pengguna, sedangkan desain UI
adalah desain antarmuka pengguna. Keduanya sangat penting untuk produk IT dan
perlu bekerja sama secara erat. Meskipun sangat integral satu sama lain, peran itu
sendiri sangat berbeda, melibatkan proses yang berbeda. UI lebih mengarah pada
tampilan dan desain visual dari sebuah produk, sedangkan UX lebih mengarah pada
pengalaman user dalam menggunakan suatu produk dan melakukan navigasi di
dalamnya.

2. Pengenalan Adobe XD
Adobe XD adalah alat desain User Experience dan User Interface berbasis vektor untuk
aplikasi web dan aplikasi seluler, yang dikembangkan dan diterbitkan oleh Adobe Inc.
Adobe XD tersedia untuk macOS dan Windows, meskipun ada versi untuk iOS dan
Android untuk membantu preview hasil kerja langsung pada perangkat seluler. XD
mendukung penyisipan situs web, dan membuat prototipe click-show interaktif
sederhana.

3. Tampilan Adobe XD
Adobe XD menggunakan antarmuka yang sangat mudah dan efisien, gaya yang
diwarisi dari aplikasi pendamping dalam paket Creative Cloud. Adobe XD
menyediakan alat prototyping untuk berbagai platform, termasuk situs web, ponsel,
 tablet, dan banyak lagi. Saat meluncurkan aplikasi, welcome page menyediakan
template ukuran layar standar yang berbeda dan menambahkan ukuran file yang Anda
tentukan sendiri. Selain itu, halaman pembuka berisi sejumlah resources yang dapat
digunakan sebagai titik awal untuk mempelajari aplikasi ini, serta elemen desain UI
seperti perangkat IOS atau Android.
Adobe XD dibagi menjadi 2 tampilan; tampilan desain dan tampilan prototype, dapat
diakses dari kiri atas aplikasi. Dalam tampilan desain, desainer dapat menggunakan
banyak alat dan fitur untuk membuat elemen layout desain, menambahkan artboards
untuk mewakili halaman layout, dan mengimpor resources dari aplikasi lain seperti
Adobe Illustrator dan Adobe Photoshop.
Tampilan kedua dalam Adobe XD adalah tampilan prototype, yang memungkinkan
desainer untuk membuat koneksi antara artboards (halaman) dan untuk menentukan
koneksi di antara mereka melalui interaksi. Setelah proyek selesai, perancang dapat
mempreview dengan mengklik ikon preview di sudut kanan atas atau membaginya
dengan tim melalui attachment berbasis web. Desainer juga dapat menyimpan halaman
yang berbeda dalam format berbasis bitmap atau vektor.

4. Tutorial Adobe XD

1. Buatlah sebuah project prototype

Ketika Anda membuka Adobe XD, halaman pembuka dan jenis proyek yang dapat
Anda pilih ditampilkan. Pilih iPhone6 (375 * 667px). Kemudian klik ikon iPhone untuk
membuat proyek. Dapatkan elemen UI iPhone dari Apple iOS untuk digunakan dalam
pembuatan prototipe Anda. Setelah membuat artboard, klik dua kali nama artboard dan
ubah menjadi "Home".

2. Buatlah sebuah background prototype

Klik pada artboard; propertinya akan ditampilkan di panel properti di sisi kanan
aplikasi. Kemudian klik pada warna isi untuk membuka dialog pemilihan warna. Atur
warna ke abu-abu gelap dan tutup kotak dialog.

3. Set header
Open File > Import. Di browser file, navigasikan ke gambar header dan klik Import.
Gunakan kontrol di sekitar gambar untuk mengubah ukurannya agar sesuai dengan
header halaman. Anda juga dapat mengklik dua kali gambar untuk memotong gambar.
Pilih alat teks dari panel teks, klik di area header dan masukkan teks "Nature". Klik dua
kali teks dan pilih "Sans Serif Font" dari panel properti di sebelah kanan, atur lebarnya
menjadi "Bold" dan ukurannya menjadi "32". Klik dua kali pada isian dan atur menjadi
"abu-abu gelap".

4. Buatlah sebuah content area background

Pilih Rectangle Tool dari panel Tool di sebelah kiri dan buat persegi panjang di bawah
header. Dari panel properti di sebelah kanan, atur isian ke abu-abu gelap dan hapus
pilihan stroke untuk menghilangkan stroke.
5. Add content
Import direktori kecil katalog dan tambahkan teks seperti yang Anda lakukan pada
langkah 3. Atur gambar kecil agar sesuai dengan latar belakang area direktori, dan
tambahkan teks di sebelah kanan seperti yang ditunjukkan pada gambar kelima di
bawah ini. Untuk memasukkan gambar kecil ke area khusus, Anda dapat mengklik dua
kali pada gambar dan memotongnya menggunakan 4 sudut.

6. Buatlah sebuah content grid

Salah satu alat paling berguna dalam Adobe XD adalah Anda dapat membuat kisi dari
konten yang sudah ada alih-alih menyalinnya secara manual. Tahan Shift pada
keyboard Anda dan pilih gambar kecil, latar belakang konten, dan / atau teks.
Kemudian, klik tombol Ulangi Kotak di panel properti. Ini akan menyalin konten yang
dipilih ke kisi.
Seret ikon hijau bawah untuk membuat kisi konten vertikal. Kemudian Anda dapat
mengklik dua kali pada duplikat untuk memodifikasinya. Terakhir, pilih konten dan
pilih Batalkan Kotak untuk mengakhiri koneksi di antara mereka.

7. Buatlah sebuah halaman baru (artboard)

Untuk membuat halaman layout baru, klik alat Artboard yang ditemukan pada panel
alat di sebelah kiri. Kemudian, pilih template iPhone6 dari kanan untuk membuat
halaman baru.

8. Buat lebih banyak halaman

Ulangi langkah - langkah di atas untuk membuat lebih banyak halaman dan
menambahkan konten ke halaman seperti yang ditunjukkan di atas. Setelah tata letak
desain selesai, kami akan melanjutkan ke tampilan prototype untuk membuat koneksi
untuk halaman yang dibuat.

9. Menyetel Project Home Page

Sebelum mengatur koneksi antar halaman, kita perlu menentukan Home untuk proyek
tersebut. Halaman home dapat berupa halaman yang dibuat. Dalam contoh ini, kita klik
ikon beranda yang muncul di kiri atas artboard untuk memilih tata letak pertama sebagai
halaman home.

10. Buatlah koneksi antar halaman

Untuk menghubungkan antar halaman, pilih halaman home dan klik panah blur di
sebelah kanan. Menu objek mengambang muncul; pilih halaman berikutnya dan setel
jenis animasi transisi (seperti "stack"). Ulangi langkah ini untuk menghubungkan antara
halaman lain.

11. Preview prototype

Klik ikon preview di sudut kanan atas aplikasi. Layar preview yang memungkinkan
kita untuk melihat dan menavigasi ke halaman yang berbeda ditampilkan. Sebagai
tambahan, ia memiliki ikon catatan untuk memungkinkan kita merekam lalu lintas antar
halaman dan menyimpannya dalam format QuickTime (MOV).

12. Share prototype

Kita selesai! Sekarang kita hanya perlu membagikan file kita dengan anggota tim lain
atau mereka yang tidak perlu menggunakan XD. Klik tombol Share di sudut kanan atas
aplikasi; menu mengambang akan muncul, menyediakan URL yang dapat disalin dan
dibagikan di antara anggota tim.

Sumber:
hackernoon.com
mockplus.com
interaction-design.org
techrcrunch.com