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](https://play.google.com/store/apps/details?id=codepolitan.lite.newreaders).

![codepolitan mobile android](https://www.codepolitan.com/assets/img/bg_logout_android.jpg)

> Baca juga : [Mengenal 10 Heuristic Usability pada User Interface](https://www.codepolitan.com/mengenal-10-heuristic-usability-pada-user-interface-5b4481dc6d6d2)

## 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](https://creative.adobe.com/products/download/xd).

![download adobe xd](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/adobe.PNG)

Setelah itu klik **Open Creative Cloud Desktop App** pada *popup*. Maka akan tampil :

![Creative cloud app](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/creative_cloud.PNG)

Jika proses unduh telah sukses, kemudian kita buka aplikasi Adobe XD.

![Landing Adobe XD](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/welcome_xd.PNG)

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

2. **IPad :**

* Ipad
* Ipad pro
* Android tablet
* Surface pro

3. **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](https://developer.apple.com/design/resources/), Wireframe Kits disediakan oleh [Behance](https://www.behance.net/gallery/55462459/Wires-wireframe-kits-for-Adobe-XD), Android Kits disediakan oleh [Material Design](https://material.io/archive/guidelines/resources/sticker-sheets-icons.html#), Microsoft Windows Kits disediakan oleh [Microsoft](https://docs.microsoft.com/en-us/windows/uwp/design/downloads/index) dan lain sebagainya.

![Wireframe Kits](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/wireframe_kits.PNG)
<small>Wireframe Kits</small>

## 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**.

![integrasi photoshop dan XD](https://wwwimages2.adobe.com/content/dam/acom/en/products/xd/2018/05/xd-riverflow-4-720x520.gif)

Pertama kita buka Adobe XD, setelah itu pilih jenis platform **Android Mobile**, maka akan tampil :

![Project blank](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/project_blank.PNG)

Keterangan :

1. Dibagian *sidebar* kiri terdapat alat-alat dalam membuat *element*.

* Select
* Rectangle
* Ellipse
* Line
* Pen
* Text
* Board
* Zoom
* Assets

2. *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

3. 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](https://material.io/archive/guidelines/resources/sticker-sheets-icons.html#)

![Android kits](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/android_kits2.PNG)

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](https://www.flaticon.com/free-icon/update-arrow_66758#term=refresh&page=1&position=81))

> Artikel terkait : [Konsep Wireframe pada Website](https://www.codepolitan.com/konsep-wireframe-pada-website-5b3db818441cf)

Setelah mengetahui apa saja *element* yang akan dibuat, selanjutnya salin Tabs yang ada pada UI Kits yang kemudian tempelkankan ke file *project* kita. 

![Tabs kit](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/tabs.PNG)

Karena tabs yang kita butuhkan adalah lima buah maka kita harus men-*select* tabs hingga berwarna hijau.

![tab edit](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/drag_tabs1.PNG)

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.

![Fix tabs](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/fix_tabs.PNG)

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).

![Container](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/container.PNG)

Kemudian kita manipulasi element-element tersebut dengan data yang kita miliki dengan cara men-*drag* gambar **kedalam** *element*-nya.

![Fix container](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/fix_container_1.PNG)

Terakhir kita *duplicate* container tersebut sesuai keinginan.

![duplicate container](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/3_artikel1.PNG)

## Mockup Artikel

Element yang terdapat pada mockup artikel berisi : 
1. Top bar

* Icon kembali
* Icon refresh ([download](https://www.flaticon.com/free-icon/update-arrow_66758#term=refresh&page=1&position=81))
* Icon shere 
* Icon more (titik tiga)

2. Foto 
3. Judul
4. Nama penulis
5. Artikel
6. Tag

Pertama kita *duplicate* mockup *landing page* dengan mengklik pada nama *project*-nya.

![duplicate project](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/duplicate_project1.PNG)

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.

![wireframe artikel](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/wireframe_artikel.PNG)

Berikutnya kita manipulasi *rectangle* tadi dengan memasukan data-data yang kita perlukan seperti artikel, icon dan judul.

![Artikel mockup](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/mockup_artikel.PNG)

## Prototyping 

Langkah selanjutnya *mockup* tadi kita konversi menjadi *prototype*, pertama klik **Prototype** pada topbar. Maka tampil :

![start prototype](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/prototype_landing1.PNG)

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.

![connection card](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/line_prototype.PNG)

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.

![Transisi](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/transisi_connec.PNG)

Kemudian jangan lupa untuk mengkoneksi **icon back** pada board artikel ke board landing page.

![connection back](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/connect_back.PNG)

Untuk dapat melihat hasil protoype, cukup dengan mengkilik **icon play** yang berada di pojok kanan atas.

![play](https://static.cdn-cdpl.com/source/2dd7d3ba70bcbe34f8b0d7242c773a78/play.PNG)

Hasil akhir :

<iframe width="560" height="315" src="https://www.youtube.com/embed/pcZN11zuEaI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Cukup sekian, jangan bosan untuk terus belajar. Terimakasih sudah mengikuti hingga akhir :D

Membuat Prototype Mobile App dengan Adobe XD

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Prototype Mobile App dengan Adobe XD

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Membangun Desktop App dengan 5 Framework Javascript

Mengenal Teknik Pengamanan Data Steganografi

Konsep Wireframe Pada Website

Website Interaktif dengan Typed.js

Library JavaScript Menarik Tahun 2018

CSS Grid vs Flexbox