TUTORIAL BELAJAR ADOBE Xd PEMULA (PART 3)

Salam kreatif teman-teman irhamhalik.com. Dalam membuat prototype menggunakan software Adobe Xd ada hal-hal yang harus dipersiapkan terlebih dahulu sebelum mendesain prototype yang ingin kita buat. Persiapan ini sangat berguna untuk menjaga konsistensi desain dan isi konten dari prototype yang ingin kita buat. Hal penting tersebut antara lain ;

  1. Storyboard
  2. Asset
  3. Flowchart

[ Baca Juga ]
Pengertian dan contoh storyboard
Pengertian dan contoh flowchart

Ketiga hal diatas menjadi sangat penting untuk menjaga alur kerja kita terarah dan tidak melompat, membentuk konsistensi prototype mulai dari screen pertama hingga screen terakhir, serta fokus kita dalam mendesain prototype tersebut.

Tahapan awal dalam membuat prototype aplikasi dengan Adobe Xd adalah menentukan jenis platform yang digunakan, dalam hal ini kita menggunakan platofrm android. Langkah-langkahnya sebagai berikut ;

  1. Jalankan software Adobe Xd yang telah terinstal.
  2. Pilih platform Google Pixel.
  3. Kita akan membuat 4 screen utama (Home, Info, Menu, Profil).
  4. Sebelum membuat 4 screen tersebut ada baiknya kita membuat warna dasar. dulu yang selanjutnya tinggal di duplikasi untuk mempercepat desain awal.
  5. Beri warna utama (Fill Solid Color).
  6. Klik kanan pada screen Home (untuk merubah nama screen cukup klik 2 kali pada judul screen) pilih duplicate.
  7. Lakukan duplikasi sebanyak 3 kali sehingga didapatkan 4 screen dengan warna dasar yang sama.

Pada tahap ini kita telah membuat screen utama. Screen adalah halaman yang akan tampil di dalam aplikasi, jumlah halaman ini tidak terbatas, menyesuikan dengan kebutuhan pengembang aplikasi itu sendiri. Langkah berikutnya membuat tampilan pembuka di halaman Home.

  1. Klik 2 kali pada screen Home, masukkan gambar pembuka (cukup drag-drop kedalam screen) beri judul aplikasi “Lensa Kamera”.
  2. Tambahkan gambar berupa tombol yang berfungsi untuk berpindah ke Screen Info.

Selanjutnya kita melakukan setting tambahan pada Screen Home, settingan ini untuk menjaga management asset dan kondisi awal halaman Home pada saat aplikasi dijalankan, langkah-langkahnya sebagai berikut :

  1. Pilih Screen Home, di jendela sebelah kanan bagian Layout aktifkan Responsive Resize.
  2. Scrolling pilih None.

Sampai tahapan ini kita telah mendesain tampilan awal dari aplikasi kita, walaupun sangat sederhana, akan tetapi seluruh tahapan yang kita lakukan dari awal sampai akhir akan berulang terus untuk Screen Info, Menu, dan Profil. Pada postingan berikutnya akan dilanjutkan untuk mengisi konten dan menyelesaikan Screen Info dan Screen Menu.

Leave a Reply

Your email address will not be published. Required fields are marked *