Landasan Teori

Pengertian
Adobe XD adalah perangkat lunak yang bisa digunakan oleh para desainer
aplikasi mobile. Ketika aplikasi mobile menjadi bagian dalam hidup masyarakat
yang tidak bisa disingkirkan, hal ini membuat banyak orang yang menggunakan
aplikasi mobile setiap harinya agar aktivitas mereka bisa berjalan dengan lancar.
Dari segi penamaan, Adobe XD atau experience design ini ditujukan secara
khusus bagi para desainer aplikasi mobile atau yang biasa disebut
sebagai UX/UI Designer. Resmi diluncurkan pada 14 Maret 2016.

Focused design tools - Tools ini berfungsi untuk membuat wireframe /

kerangka kerja, screen layouts and production, dan membuat kerangka mockup
unuk desain yang lain.

Prototyping tools – Tools ini berfungsi untuk menetapkan alur kerja yang
telah dibuat agar tidak rancu dengan proyek desain lainnya.

Built in sharing – Tools ini berfungsi untuk membuat rekaman video selama
proses oegerjaan dari prototype desain yang kita. Bisa juga digunakan untuk
berbagi link dengan sesama desainer melalui fasilitas Creative Cloud yang
disediakan oleh pihak Adobe.

Support for bringing in existing assets from Photoshop, Illustrator and

Sketch - Aplikasi ini juga sudah mendukung asset desain dari Photoshop,
Illustrator maupun Sketch.

fast performance – membuat dan menyatukan sebuah proyek desain yang

kompleks secara bersamaan seperti desain website , aplikasi mobile,
aplikasi untuk tablet , dan aplikasi untuk smart watch tanpa menggangu performa
software.

Kelebihan Adobe XD

Prototyping tools
Dengan tools ini, maka para desainer aplikasi mobile bisa membuat alur kerja
yang lebih baik dan terperinci sekaligus teratur sehingga ketika ada proyek desain
lainnya, tidak akan saling mengganggu dan tetap pada jalurnya sendiri.

HENDRA YESEKYEL 1 G1A019072

 Focused design tools
Dengan tools ini, maka para desainer aplikasi mobile membuat membuat kerangka
kerja, mockup hingga screen layouts and production untuk desain yang lainnya.

Asset design from Photoshop, Sketch, Illustrator

Seperti yang sudah diketahui, Adobe memiliki beberapa perangkat lunak lainnya
yang juga digunakan untuk desain seperti Photoshop, Sketch dan Illustrator.
Untungnya, platform ini bisa memasukkan aset desain dari perangkat lunak
tersebut ke dalam proyek kamu sehingga memudahkan pekerjaan.

Built-in sharing
Tools ini bisa membuat kamu merekam video selama proses pengerjaan desain
sehingga bisa dicek oleh desainer lainnya lewat fitur Creative Cloud.

Fast performance
Tentu saja performa yang cepat ditawarkan, sehingga berapa banyak pengerjaan
yang kamu lakukan bisa berjalan dengan lancar tanpa lagging.

Kekurangan Adobe XD

Difficult animating UI
Dengan membuat prototype maka kamu bisa menunjukkan apa yang akan
ditampilkan dari aplikasi mobile tersebut, namun dengan Adobe SD, tidak
ada tools animasi yang support dengan Adobe XD sehingga bisa menyulitkan.

No CSS export
CSS export bisa membuat desainer bekerja lebih simpel lagi dan membuat
pengerjaan lebih cepat juga. Namun, di dalamnya belum ada fitur ini. Padahal di
dalam platform Photoshop sendiri sudah ada menggunakan plugin Zeplin.

Copy/Paste feature
Tentu saja di dalam perangkat lunak buatan Adobe memiliki fitur copy
paste untuk desain yang sudah dibuat. Ada modifikasi yang bisa dilakukan juga di
sana sehingga lebih mudah. Namun Adobe XD malah membuat fitur copy
paste yang tidak mumpuni sehingga menyulitkan kinerja desainer nantinya.

Prototype live preview

Seperti yang sudah dijelaskan di atas, kamu bisa memberikan live preview
protoype dari aplikasi mobil yang dibuat.

HENDRA YESEKYEL 2 G1A019072

 Soal dan Pembahasan
1. Review praktikum pada hari ini

Jawab

1.1 Buka aplikasi Adobe XD kemudian buat layout baru (CTRL+N)

gambar 1.1 Layout baru

1.2 Buat bentuk-bentuk yang diinginkan

gambar 1.2 Bentuk yg dibuat

1.3 Artboart untuk membuat bagian menu

gambar 1.3 Membuat artboard

HENDRA YESEKYEL 3 G1A019072

2. Buat Mock up aplikasi logo ai(tema dan aplikasi sama) minimal 5 artlayout

Jawab

2.1 Buka aplikasi Adobe XD kemudian pilih android mobile

gambar 2.1 tampilan layout

2.2 Buat sebuah kotak ditengah dan diwarnai sesuai keinginan

2.3 kemudian import logo

2.4 buat sebuah kotak kecil dengan tulisan start

gambar 2.2 hasil layout pertama

2.5 kemudian buat layout baru dengan menggunakan Artboard

2.6 buat beberapa kotak, diwarnai sesuai keinginan, dan juga beserta
tulisan

HENDRA YESEKYEL 4 G1A019072

 2.7 import gambar bola ke dalam layout

2.8 tambahkan jg 2 lingkaran di atas dan di bawah

gambar 2.3 hasil layout ke dua

2.9 buat kembali layout baru

2.10 buat beberapa kotak, diwarnai dan diberikan tulisan

gambar 2.4 hasil layout ke tiga

2.11 lakukan langkah seperti sebelumnya hingga terbentuk layout untuk

training dan juga setting

gambar 2.5 hasil layout ke empat

HENDRA YESEKYEL 5 G1A019072

 gambar 2.6 hasil layout ke lima

3. Buat prototype dari mock up tersebut

Jawab

3.1 klik tulisan prototype

3.2 sambungkan 1 layout ke layout lainnya sesuai keinginan

gambar 3.1 Layout yg saling tersambung

4. Jelaskan peran kalian di video dan beri rating teman kalian

Jawab

Dalam video kami yg bertema Romance, peran saya adalah menjadi seorang
cowok yg jatuh cinta pada wanita yg tidak sengaja saling bertabrakan, sang cowok
jatuh cinta pada sang wanita pada pandangan pertama.
Rating untuk teman

 Agung Tri Saputra : 8

 M. Wijaya Permana : 8

 Siti Rochika Qory : 8

HENDRA YESEKYEL 6 G1A019072

 Kesimpulan dan Saran

Kesimpulan

Adobe XD sangat berguna bagi kita untuk mendesain, membuat mock up serta
prototype sebuah aplikasi. Adobe XD sangat membantu terutama bagi desainer
mobile khususnya untuk memudahkan kinerja mereka.

Saran

Dalam membuat mock up serta prototype dari aplikasi yang kita inginkan
menggunakan adobe xd kita perlu memahami setiap fungsi yang ada, kita juga
harus sering berlatih agar semakin mahir dalam menggunakan adobe xd

HENDRA YESEKYEL 7 G1A019072

 Daftar Pustaka

Budhiluhoer, Muhammad. 2018. Membuat Prototype Mobile App dengan Adobe

XD. Diakses di https://www.codepolitan.com/membuat-prototype-mobile-app-
dengan-adobe-xd

Danny K, Prio. 2016. Mengenal Adobe XD. Diakses di

https://www.kompasiana.com/mengenal-adobe-xd-experience-design-aplikasi-
desain-antarmuka-buatan-adobeinc

Elmansy, Rafiq. 2016. Cara membuat Prototipe UI menggunakan Adobe XD.

Diakses di https://webdesign.tutsplus.com/id/tutorials/how-to-create-a-ui-
prototype-using-adobe-xd

HENDRA YESEKYEL 8 G1A019072