Tutorial Adobe XD - Desain Pengalaman dan Prototyping

Selamat datang di tutorial besar Adobe XD. Di dalam pengantar ini, saya akan memperkenalkan diri sebagai pelatih Anda.

Apa bedanya antara Pengalaman Pengguna (UX) dan Antarmuka Pengguna (UI)? Jenis desain level apa saja yang ada dan untuk apa Adobe XD digunakan dengan baik? Jawabannya ada di sini!

Pertama kali membuka Adobe XD - dan segera ada banyak pilihan yang dapat dipilih. Dalam video ini, ada sedikit latihan awal untuk Adobe XD, gambaran umum tentang program tersebut serta pengenalan tentang Splash-Screen XD dan fungsinya.

Artboards (Zeichenflächen) dapat dengan mudah dibuat untuk berbagai resolusi dan perangkat di Adobe XD. Anda akan mengetahui hal-hal khusus yang perlu diperhatikan dalam tutorial ini.

Berbagai pengaturan grid yang berbeda memudahkan kita dalam menyusun elemen dan objek secara bersih. Untuk itu, kita memiliki sebuah grid berbentuk persegi dan pembagian kolom untuk kolom yang tersedia.

Google, Apple, dan Microsoft menyediakan UI-Kits praktis untuk memulai dengan cepat. Artboard siap pakai ini sangat membantu kami dalam pengembangan prototipe untuk berbagai platform nantinya.

Warna memainkan peran yang sangat penting dalam hampir setiap desain - dalam video ini, kamu akan belajar bagaimana menggunakan warna dalam Adobe XD, cara mengimpor mereka, dan sumber daya praktis apa yang tersedia untuk mengumpulkan harmoni warna yang sudah jadi.

Ada banyak metode untuk mengimpor aset seperti gambar, file, dokumen teks, dll. ke dalam Adobe XD. Di video ini, saya akan memperkenalkan beberapa metode. Namun, karena XD merupakan bagian dari Creative Cloud oleh Adobe, bekerja dengan pustaka sangat nyaman dan mudah.

Tema font dan tipografi adalah salah satu elemen penting dalam perjalanan kita melintasi Adobe XD. Di video ini, Anda akan belajar bagaimana mengelola font dengan benar dan efisien.

Bentuk dapat diimpor ke Adobe XD dengan sangat mudah atau dapat dibuat sendiri dengan menggunakan alat jalur. Jika sebuah objek digunakan lebih dari dua kali, disarankan untuk juga menjadikannya sebagai simbol dalam daftar aset.

Merancang memiliki banyak kaitannya dengan inspirasi dan masukan dari luar. Ini termasuk lingkungan analog maupun dunia digital. Di sini saya akan memperkenalkan beberapa portal yang saya sukai.

Mari kita mulai dengan proyek praktik kecil yang bagus. Dalam tutorial ini dan dua video berikutnya, kita akan membuat Onepager.

Grid pengulangan adalah salah satu fitur paling penting dari Adobe XD. Ini membantu kita untuk membuat kelompok objek yang sudah dibuat sekali dapat diskalakan sesuai keinginan dan diisi secara individual.

Pada bagian terakhir dari pembuatan Onepager, kita akan menangani footer dan area untuk referensi. Di sini kita akan menggunakan file SVG yang praktis dan belajar teknik desain lainnya.

Pada pelajaran ini, kita akan membahas bagaimana artboard individu dapat terhubung secara interaktif satu sama lain. Kita akan menjelaskan pilihan transisi dan modifikasi lain yang dapat kita lakukan pada prototipe.

Setiap situs web memerlukan titik anchor untuk navigasi. Dalam video ini, kita hanya akan fokus pada pembuatan menu navigasi utama di bagian header dan koneksi interaktif di antara mereka.

Pelatihan ini membangun dari bab sebelumnya dan menunjukkan bagaimana kita melakukan adaptasi menu desktop yang dibuat untuk smartphone. Ikona hamburger dan poin menu ditingkatkan dengan animasi menarik.

Salah satu alat terkuat untuk visualisasi yang maksimal adalah fungsi Auto-Animate dari Adobe XD. Dalam contoh ini, saya akan menjelaskan bagaimana Anda dapat mengadaptasi prinsip fungsi Auto-Animate secara adaptif untuk setiap skenario yang dapat dibayangkan.

Dalam video-video berikut kita akan belajar membuat prototipe untuk toko online. Kita akan belajar cara untuk membuat prototipe High-Fidelity yang menarik secara visual dari artboard sederhana. Bagian 1 dari 4.

Pada bagian kedua, kita akan mengurus penjelasan detail, memasukkan slider untuk gambar, dan menghubungkan artboards satu sama lain.

Fungsi overlay untuk prototyping interaktif memberikan kami berbagai kemungkinan menarik, seperti informasi yang dapat ditampilkan dan disembunyikan secara langsung.

Desain Usability yang baik memberikan umpan balik kepada pengguna tentang status sistem. Umpan balik ini akan kita masukkan ke dalam animasi cantik pada akhir proyek.

Adobe XD juga mendukung interaksi melalui perintah suara dalam proses prototyping-nya. Perintah verbal menghasilkan tindakan sistem yang dapat kita tentukan sendiri. Cara kerjanya akan saya tunjukkan dalam tutorial ini.

Dalam bekerja sama dengan departemen dan orang yang terlibat lainnya, komentar audio adalah fitur berharga untuk menjelaskan keadaan proyek dengan jelas.

Menguji prototipe di lingkungan virtual adalah satu hal - menampilkannya langsung di perangkat akhir adalah hal yang berbeda sekali. Dan itulah yang bisa diatasi dengan mudah melalui Adobe XD, baik melalui koneksi USB atau melalui Creative Cloud. Untuk itu kami menggunakan aplikasi Adobe XD dari App Store.

Selama berkolaborasi, penting untuk berdiskusi dengan departemen lain mengenai status proyek. Melalui fitur publish, prototype dapat dirilis sehingga reviewer, pengembang, dan pemberi tugas dapat mendapatkan gambaran visual dari proyek. Pada titik ini, proses pengeditan antara departemen spesialis dimulai untuk membawa proyek ke tahap kedewasaan.

Adobe XD terus berubah sebagai program yang masih sangat muda dengan setiap pembaruan: Dalam video ini, saya akan menjelaskan perubahan apa yang terjadi dari versi 18 ke versi 19, bagaimana fitur-fitur tersebut digunakan, dan dalam situasi apa mereka membantu. Ini termasuk: Komponen bukan simbol, Responsive Resize, Garis bantu, Alat Poligon, lebih banyak kemungkinan penataan teks, dan banyak lagi. Selamat menikmati!