Cara membuat Prototipe UI menggunakan Adobe XD

Adobe XD menggunakan antarmuka yang sangat sederhana namun efisien; sebuah gaya yang diwarisi dari aplikasi sejenisnya dalam package Creative Cloud. Program ini menyediakan sarana untuk prototipe untuk berbagai platform termasuk web, mobile, tablet, dan lainnya. 

Saat aplikasi diluncurkan, layar awal memberi Anda berbagai template ukuran layar standar dan kemampuan untuk menambahkan ukuran dokumen sesuai keperluan Anda. Selain itu, layar berisi akses menuju sejumlah aset yang dapat digunakan sebagai titik awal untuk mempelajari lebih lanjut tentang aplikasi ini, desain elemen UI untuk berbagai perangkat seluler seperti iOS dan Android, dan akses ke sumber online seperti tutorial, dan lainnya.

1. Membuat Proyek Prototipe

Setelah Adobe XD dibuka, layar awal akan muncul dan memungkinkan Anda memilih jenis proyek Pilih iPhone 6 (375 × 667px). emudian klik ikon iPhone untuk membuat proyek. Dari iOS Apple, Anda bisa mengakses elemen UI iPhone yang bisa digunakan pada prototipe Anda. Setelah artboard dibuat, klik dua kali nama artboard, dan ubah ke "Home”.

2. Membuat latar belakang Prototipe

Klik artboard untuk menampilkan karakteristiknya di Properties panel pada sisi kanan aplikasi, dan klik warna Fill warna untuk membuka pilihan otak dialog Colors. Atur warna menjadi abu-abu gelap dan tutup kotak dialog.

3. Pengaturan Layar Header

Selanjutnya masuk ke File > Import. Di situs web fail, mengarahkan ke gambar header dan klik Import.Gunakan kontrol di sekitar gambar untuk mengubah ukurannya agar sesuai dengan tajuk layar. Anda juga bisa mengklik dua kali gambar untuk memotong gambar.

Pilih Text Tools dari panel Tools, klik pada area header dan ketik "Nature". Klik dua kali teks dan dari panel Properties kanan, pilih "Helvetica", atur bentuk tulisan menjadi "bold", dan ukuran ke "32". Klik dua kali warna Fill lalu atur ke "abu-abu gelap".

4. Membangun Latar Belakang Area Konten

Pilih sarana Rectangle dari panel Tools di sisi kanan, lalu buat persegi panjang di bawah header. Dari kanan panel Properties, atur warna Fill menjadi abu-abu tua, dan hapus centang pada opsi Border untuk menghilangkan goresan.

5. Tambahkan Konten

Impor konten thumbnail konten dan tambahkan teks seperti yang ditunjukkan pada langkah 3. Atur thumbnail agar sesuai dengan latar belakang area konten dan di sisi kanan tambahkan teks. Untuk memotong thumbnail pada area tertentu, Anda dapat mengklik dua kali gambar tersebut dan menggunakan keempat sudut untuk memotongnya.

6. Membuat Kisi Konten

Salah satu sarana yang paling berguna di Adobe XD adalah Anda dapat membuat kisi dari konten yang ada tanpa menggandakannya secara manual. Tekan Shift pada keyboard Anda dan pilih thumbnail, content background, dan text. Kemudian, klik tombol Repeat Grid di panel Properties. Ini menerjemahkan konten yang dibuat ke dalam kisi.

Tarik ikon hijau bagian bawah untuk membuat kisi konten vertikal. Kemudian, Anda dapat mengklik dua kali konten berulang untuk memodifikasinya. Terakhir, pilih konten dan pilih Ungroup Grid untuk memutus keterkaitan di antara keduanya.

7. Membuat Halaman Baru (Artboard)

Untuk membuat halaman dengan layout baru, tekan pada Artboard tool dari panel Tools yang terletak di sebelah kiri. Kemudian, pilih template iPhone 6 dari kanan untuk membuat halaman baru.

8. Membuat lebih banyak halaman

Ulangi langkah di atas untuk membuat lebih banyak halaman dan tambahkan konten ke halaman seperti petunjuk di atas.  Layout tampilan terakhir harus seperti gambar di bawah ini. 

Setelah desain layout selesai, kita akan beralih ke tampilan Prototype untuk membangun keterkaitan antara halaman yang dibuat.

9. Mengatur Beranda Proyek

Sebelum mengatur hubungan antar halaman, kita perlu menetapkan beranda untuk proyek tersebut. Beranda bisa berupa halaman yang dibuat. Dalam contoh ini, kami akan menetapkan layout pertama yang kami buat sebagai beranda dengan mengklik ikon Home yang muncul pada bagian kiri atas artboard.

10. Membangun Keterkaitan Antara Halaman

Untuk menghubungkan antar halaman, pilih beranda, klik panah buram ke sisi kanan. Menu Target akan muncul; pilih halaman berikutnya, dan atur jenis animasi transisi (misalnya "Dissolve"). Ulangi langkah ini untuk menghubungkan antara halaman lain.

11. Menciptakan Interaksi

Dalam prototipe ini, konten blok pertama yang terdapat di beranda harus beralih menjadi konten pertama artboard, dan konten blok kedua harus terhubung ke artboard kedua ... dll. Jadi, pilih konten blok pertama, dan klik kanan tanda panah biru untuk menetapkan target sama dengan apa yang kita lakukan di langkah 10. Ulangi langkah dengan konten blok kedua. 

Setelah membuat prototipe, ada dua metode utama pratinjau. Pertama adalah menggunakan fitur Previewyang terdapat dalam Adobe XD itu sendiri, dan yang lainnya adalah melalui hipertaut web yang bisa dikirim ke anggota tim.

12. Pratinjau Prototip

Klik ikon Preview di sebelah kanan atas aplikasi. Ini akan menampilkan layar pratinjau yang memungkinkan kita melihat dan mengarahkan halaman yang berbeda. Sebagai tambahan yang bagus, ia memiliki ikon Record yang memungkinkan kita untuk merekam arus antar halaman dan menyimpannya ke format Quicktime (MOV). 

13. Berbagi Prototipe

Dilakukan! Sekarang kita hanya perlu membagikan dokumen kita dengan anggota tim lain atau pemangku kepentingan yang belum tentu menggunakan XD. Klik pada ikon Share di bagian kanan atas aplikasi; menu akan muncul, memberikan URL yang bisa disalin dan dibagi antar anggota tim