Belajar dengan Prototipe Sederhana Part1

Pada tutorial mengenal interface Adobe XD, dan bahkan melihat ke shortcut keyboard dari alat yang paling umum. Ini harus memberi kita dasar yang baik untuk bekerja ketika kita mengeksplorasi lebih banyak Adobe XD, kemudian melanjutkan untuk merancang maket aplikasi sederhana.

Layar Selamat Datang

Ketika Anda pertama kali membuka Adobe XD, seperti pada sebagian besar aplikasi desain, Anda akan melihat layar selamat datang yang meminta Anda untuk memilih kit UI yang sudah jadi, atau memulai desain baru dari awal (dengan memilih artboard). Anda juga dapat memilih untuk membuka kembali file yang ada.

UI Kits

Seperti yang disebutkan dalam tutorial sebelumnya, Adobe XD menawarkan kit UI untuk Apple iOS, Google Material, dan Microsoft Windows - kit ini berisi elemen UI asli yang ditemukan dalam sistem operasi, dan Anda dapat menggunakannya untuk merancang maket yang lebih cepat daripada membuat ulang elemen ini sendiri. Jika Anda membuat aplikasi iOS, misalnya, Anda dapat menggunakan kit Apple iOS untuk mengekstrak komponen desain asli, seperti bilah status atau tombol sakelar.

2-1. Adobe XD UI kits

Memilih Artboard

Selama buku ini kita akan merancang aplikasi iOS pemesanan makanan menggunakan iPhone 7 ukuran standar sebagai basis. Jadi pilih iPhone 6/7 dari daftar artboards, dan mari mulai prototipe.

2-2. Memilih artboard

Kembali ke Proyek yang Ada

Jika Anda sudah memiliki desain yang sedang Anda kerjakan, Anda dapat menekan Cmd + O (Ctrl + O di Windows) untuk menemukan dan membukanya. Atau cukup pilih dari daftar Recent Files, jika Anda belum lama membukanya.

2-3. Membuka file

Low-Fidelity Prototype

Dasar Prototipe Sederhana adalah tentang mengkonseptualisasikan gagasan dalam bentuk paling dasar tanpa tipografi, warna, atau estetika apa pun. Mengapa membuang waktu memikirkan visual ketika Anda belum memantapkan tata letak dan pengalaman pengguna?

Tujuan kami saat ini adalah menggunakan Adobe XD untuk membuat ide yang mungkin sudah Anda jelajahi dengan pena dan kertas kuno yang bagus. Setelah itu, ketika kami memiliki mockup sederhana di Adobe XD, kami akan menggunakan alat prototyping untuk menunjukkan aliran pengguna (bagaimana layar terhubung ke layar lain), dan kemudian meminta umpan balik.

Selama buku ini, mockup sederhana ini akan berkembang menjadi prototipe yang berfungsi dan dinamis, kemudian menjadi prototipe high-fdelity dengan warna, ikon, font, dll.

Mockup low-fidelity kami akan sangat didasarkan pada kit UI resmi Adobe XD, Dishy, yang dapat Anda unduh di sini jika Anda ingin melihatnya sekarang.

 

Memulai dengan Shape Layer

Mari kita mulai dengan layar selamat datang aplikasi kami. Ini akan terdiri dari logo, kalimat pengantar, dan beberapa komponen yang dapat ditindaklanjuti seperti bilah navigasi dan bilah pencarian.

 

Kami akan mulai dengan menggambar beberapa persegi panjang yang akan membatasi struktur dasar layar kami, di mana fungsi pencarian akan menjadi fokus. Tekan R untuk memilih alat bentuk Rectangle.

 

Sekarang, dengan menggunakan mouse, gambar persegi panjang hingga mencapai lebar penuh artboard (375px), dan tinggi 445px. Anda dapat memeriksa nilai-nilai ini menggunakan inspektur di sisi kanan.

2-4. Membuat persegi panjang

Snaping Layer ke Poin Tertentu

Jika Anda mulai dengan mengarahkan mouse ke sudut kiri atas artboard, mouse akan secara otomatis beralih ke lokasi tertentu, dan ketika Anda menyeret ke arah tepi kanvas, tepi persegi panjang akan membentur juga di sana (dan lapisan lainnya, jika ada tersedia). Dengan menjentikkan, Adobe XD dengan asumsi Anda akan ingin menyelaraskan lapisan dari (atau ke) lokasi tertentu itu.

Merancang Bersama Inspektur

Jika Anda merasa sulit untuk membuat ketinggian yang tepat 445px (ini bisa sulit dengan beberapa tikus), gunakan inspektur untuk menyatakan ketinggian secara manual dengan memasukkan nilai yang tepat ke dalam bidang (H bidang dalam kasus ini). Anda seharusnya tidak menemukan masalah dengan lebar feld (W) karena Adobe XD akan secara otomatis menjentikkan bentuk ke tepi artboard.

Menggunakan Tombol Panah

Anda juga dapat menggunakan tombol panah untuk mengubah nilai - tombol ↑ akan meningkatkan nilainya sebesar 1, dan tombol ↓ akan menguranginya sebesar 1. Jika Anda menahan Shift saat menggunakan tombol panah, nilainya akan bertambah atau berkurang sebesar 10 bukannya 1.

Sekarang mari kita buat dua persegi panjang lagi. Satu akan menyerupai bidang pencarian dan yang lainnya tombol kirim. Mari kita mulai dengan tombol kirim.

Buat persegi panjang lain, tapi kali ini sebagai persegi 73 x 73px - tahan Shift sambil menggambar bentuk untuk mempertahankan aspek rasio.

Seret sehingga terkunci ke sudut kanan bawah persegi panjang lainnya, tetapi pertama-tama, ketuk Esc untuk tidak fokus dari lapisan dan kemudian Esc sekali lagi untuk kembali ke alat pindahkan.

2-5. Lebih banyak persegi panjang

Ulangi langkah ini dengan persegi panjang lain - 304 x 73px - dan seret ke kiri bawah persegi panjang asli kami yang lebih besar.

2-6. Bahkan lebih persegi panjang

 

Layer Teks

Saat ini tidak jelas apa yang kita miliki di sini. Kami tahu bahwa ini adalah fungsi pencarian, tetapi siapa pun yang menguji prototipe kami tidak akan menyadarinya, jadi penting untuk menambahkan konteks ke mockup low-fidelity. Kami pergi untuk minimalis, tidak kabur. Dengan mengingat hal itu, mari kita tambahkan beberapa teks ke bidang input.