adobe xd android app design tutorial

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Secara historis, Adobe Creative Cloud belum memiliki sarana bagi perancang untuk prototipe layouts dengan cepat dan efisien, atau mendapatkan umpan balik tim sebelum membuat desain UI akhir. Kekurangan ini hilang dilengkapi oleh Adobe Experience Design CC (Adobe XD). Aplikasi yang pertama kali diperkenalkan sebagai "Project Comet" melalui Adobe MAX 2015, sekarang tersedia untuk diunduh dalam versi beta dari Adobe Creative Cloud. Ini adalah aplikasi desktop yang memungkinkan perancang membuat antarmuka prototipe untuk perangkat web, ponsel, dan tablet. Mari kita lihat apa yang bisa dilakukan!

Memperkenalkan 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.

Adobe XD Welcome screen — Layar awal adobe XD

Ruang kerja Adobe XD terbagi menjadi dua pandangan; Desain dan Prototipe, yang bisa diakses dari sisi kanan atas aplikasi. Dalam tampilan Design, perancang dapat menggunakan sejumlah sarana dan fitur untuk membuat layout desain elemen, menambahkan artboards yang digunakan untuk mewakili halaman layout, dan mengimpor sumber daya dari aplikasi lain seperti Adobe Illustrator dan Adobe Photoshop.

Informasi: Perancang dapat menyalin elemen desain secara langsung dari aplikasi ini dan menempelkannya ke artboard terpilih sebagai grafis berbasis vektor. . Hal ini memungkinkan untuk modifikasi karya seni yang diimpor dengan mengubah warna atau bahkan memodifikasi jalur jangkar poin.

Tampilan kedua di Adobe XD adalah tampilan Prototype yang memungkinkan perancang untuk menghubungkan antara artboards (halaman) dan menentukan hubungan antara mereka melalui interaksi. Setelah proyek selesai, perancang dapat meninjau ulang dengan mengklik ikon pratinjau di kanan atas, atau membagikannya dengan tim melalui tautan berbasis web. Perancang juga dapat menyimpan layar yang berbeda dalam format bitmap atau berbasis vektor.

Tutorial Adobe XD

Setelah menjelajahi susunan dasar Adobe XD antarmuka, contoh berikut menunjukkan proses langkah-demi-langkah untuk membuat prototipe UI pertama Anda pada Adobe XD. Kita akan membangun sesuatu untuk ukuran layar iPhone 6. Anda bisa mengunduh fail latihan dengan mengunjungi visiting repositori Github untuk tutorial inil. Atau mengunduh langsung dari Pixapay:

lotus
flower
sparrow
baboon

Bagian pertama dari tutorial ini akan berfokus pada pembuatan layout pada tampilan Design Adobe XD.

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".

Figure 1 Adobe XD Welcome screen — Layar awal Adobe XD

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.

Figure 2 Set the artboard background to dark gray animated GIF — Tetapkan latar belakang artboard ke abu-abu gelap

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.

Create the content area background — Membuat latar belakang area konten

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 seperti yang ditunjukkan pada gambar 5 di bawah ini. Untuk memotong thumbnail pada area tertentu, Anda dapat mengklik dua kali gambar tersebut dan menggunakan keempat sudut untuk memotongnya.

Adding content below the header area — Menambahkan konten di bawah area header

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.

Create a new Artboard — Membuat Artboard 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.

The final prototype of the UI design layout — Prototipe terakhir dari desain layout UI

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.

Assign a homepage to the project — Tetapkan beranda pada proyek

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.

Link between pages — Tautan antar halaman

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.

Add interaction to content — Tambahkan interaksi pada konten

Setelah membuat prototipe, ada dua metode utama pratinjau. Pertama adalah menggunakan fitur Preview yang 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).

Previewing the prototype in Adobe XD — Pratinjau prototipe pada Adobe XD

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:

The prototype web URL — Prototipe web URL

Penutup

Seperti yang telah kita lihat, saat ini versi beta dari Adobe XD menyediakan sarana sederhana namun efektif bagi profesional UX untuk memvisualisasikan penelitian mereka terhadap perangkat web, seluler, dan tablet. Hal ini memungkinkan mereka untuk mengintegrasikan elemen karya seni dari aplikasi Adobe lainnya seperti Adobe Illustrator dengan mempertahankan format vektor yang dapat diedit.

Dalam versi Adobe XD yang akan datang, kami menjanjikan lebih banyak fitur; seperti warna yang ditingkatkan, kemampuan untuk menambahkan layer, meningkatkan fitur berbagi, dukungan untuk pengguliran, dan menambahkan lebih banyak elemen interaktif ke Prototype View. Jika Anda sudah mencoba Adobe XD, kami akan senang mendengar kesan pertama Anda; memberikan umpan balik sekarang akan membantu bentuk resmi program ini di masa depan.