Membuat Prototype Mobile App dengan Adobe XD

Dalam membangun aplikasi, baik itu aplikasi berbentuk website, mobile ataupun desktop tentu memiliki tahapan-tahapan yang dimulai dengan menganalisa masalah hingga prilisan, dari hulu hingga hilir. Koding hanyalah sebagian kecil dalam membangun aplikasi. Biasanya sebelum tahap development/koding kita mesti melewati tahap desain terlebih dahulu agar dalam development dapat terarah dan terstruktur serta meminimalisir seringnya revisi. Tahap desain umumnya terdiri dari membuat mockup atau prototype.

Di artikel ini, kita akan belajar bagaimana mendesain mockup dan prototype menggunakan Adobe XD yang telah dirilis Adobe secara cuma-cuma.

Case study yang akan kita terapkan adalah bagaimana mendesain mockup dan prototype pada aplikasi mobile android CodePolitan yang dapat diunduh di Google PlayStore.

Baca juga : Mengenal 10 Heuristic Usability pada User Interface

Persiapan: Unduh dan Pemasangan

Pertama kita unduh aplikasi Adobe XD di website resminya Adobe. Sebelum mengunduh kita diwajibkan untuk login dan memasang Create Cloud Desktop App. Unduh Creative Cloud Desktop App di sini.

Setelah itu klik Open Creative Cloud Desktop App pada popup. Maka akan tampil :

Jika proses unduh telah sukses, kemudian kita buka aplikasi Adobe XD.

Bisa kita lihat bahwa dalam pembuatan project kita bisa langsung memilih jenis platform yang telah disediakan, bahkan dapat dibuat secara* custom size*.

1. Mobile :

• Iphone X
• Iphone 6/7/8 plus
• Iphone 6/7/8
• Iphone 5/SE
• Android mobile

1. IPad :

• Ipad
• Ipad pro
• Android tablet
• Surface pro

1. Web

User Interface Kits

UI Kits ini adalah file Adobe XD yang berisi desain-desain User Interface yang telah di sediakan oleh pihak ketiga seperti UI Kits Iphone yag disediakan Apple, Wireframe Kits disediakan oleh Behance, Android Kits disediakan oleh Material Design, Microsoft Windows Kits disediakan oleh Microsoft dan lain sebagainya.

Mockup Landing Page

Setelah Adobe XD telah sukses diunduh dan dipasang maka saatnya kita memulai dengan mendesain mockup. Bagi teman-teman yang sudah terbiasa dengan Adobe Photoshop dapat pula mendesain menggunakan alat tersebut dalam kata lain Adobe XD dapat di integrasikan dengan Adobe Photoshop.

Pertama kita buka Adobe XD, setelah itu pilih jenis platform Android Mobile, maka akan tampil :

Keterangan :

1. Dibagian sidebar kiri terdapat alat-alat dalam membuat element.

• Select
• Rectangle
• Ellipse
• Line
• Pen
• Text
• Board
• Zoom
• Assets

1. Sidebar kanan terdapat setting-an untuk element yang telah kita select/pilih.

• Alignment yang dapat beroperasi secara horizontal dan vertical.
• *Repeat grid *dan manipulasi element
• Ukuran dan koordinasi suatu element
• Color, border, shadow

1. Topbar :

• Design (Workspace untuk desain mockup/wireframe)
• Prototype (Pembuatan prototype pada desain yang telah dibuat)

Yang sudah dipaparkan diatas bahwa kasus yang akan kita kerjakan adalah aplikasi CodePolitan. Aplikasi CodePolitan pada bagian landing page tersebut memiliki element :

1. Tab berjumlah lima

Tab ini dapat kita ambil dari UI Kits Android yang dapat didownload di Material Design

Keterangan :

1. Tabs
2. System Icons - Navigation
3. Bottom Sheet

2. Container

• Foto avatar
• Nama penulis
• Tanggal publikasi
• Foto Thumbnail
• Judul artikel
• Deskripsi pengantar
• Jumlah pembaca
• Icon shere
• Icon bookmark (download)

Artikel terkait : Konsep Wireframe pada Website

Setelah mengetahui apa saja element yang akan dibuat, selanjutnya salin Tabs yang ada pada UI Kits yang kemudian tempelkankan ke file project kita.

Karena tabs yang kita butuhkan adalah lima buah maka kita harus men-select tabs hingga berwarna hijau.

1. Kemudian di-drag hingga otomatis bertambah element tab hingga berjumlah lima
2. Karena jarak antar element berjauhan secara default, maka kita harus mengecilkan padding-nya dengan meng-hold diantara element sehingga sesuai dengan lebarnya layar.

Jika sudah sesuai maka kita hanya tinggal meng-edit teks pada kelima element dan mengganti judul menjadi CodePolitan.

Tahap selanjutnya kita membuat wireframe yang memiliki container menggunakan Rectangle/Kotak dengan ukuran 360 x 330 yang berisi element foto avatar (circle) dan foto artikel (Rectangle).

Kemudian kita manipulasi element-element tersebut dengan data yang kita miliki dengan cara men-drag gambar kedalam element-nya.

Terakhir kita duplicate container tersebut sesuai keinginan.

Mockup Artikel

Element yang terdapat pada mockup artikel berisi :

1. Top bar

• Icon kembali
• Icon refresh (download)
• Icon shere
• Icon more (titik tiga)

1. Foto
2. Judul
3. Nama penulis
4. Artikel
5. Tag

Pertama kita duplicate mockup landing page dengan mengklik pada nama project-nya.

Langkah selanjutnya kita remove element pada project artikel sesuai dengan element yang dibutuhkan. Pada project artikel cukup sederhana yang berisi element teks saja. pertama kita lakukan wireframing yang memiliki dua buah renctangle ( topbar berukuran 360 x 40 dan image berukuran 320 x 140) dan rectangle yang akan berisi teks hashtag.

Berikutnya kita manipulasi rectangle tadi dengan memasukan data-data yang kita perlukan seperti artikel, icon dan judul.

Prototyping

Langkah selanjutnya mockup tadi kita konversi menjadi prototype, pertama klik Prototype pada topbar. Maka tampil :

Klik icon close pada pojok kanan atas. Kemudian kita hanya cukup membuat line connection pada board/project atau element yang akan menjadi link sehingga akan terjadi perpindahan/event.

1. Select element container/card
2. Klik connection, lalu
3. Arahkan ke board/project artikel.

Maka akan muncul popup setting dalam mengatur target, jenis transisi dan durasi.

Kemudian jangan lupa untuk mengkoneksi icon back pada board artikel ke board landing page.

Untuk dapat melihat hasil protoype, cukup dengan mengkilik icon play yang berada di pojok kanan atas.

Hasil akhir :

Cukup sekian, jangan bosan untuk terus belajar. Terimakasih sudah mengikuti hingga akhir :D