Artboard di Adobe XD: Panduan Lengkap untuk Desainer Pemula!

Table of Contents

Artboards di Adobe XD itu ibarat kanvas atau halaman khusus di dalam ruang kerja desain digital kamu. Bayangkan kalau kamu lagi kerja di studio seni, artboard ini seperti papan gambar yang siap kamu pakai untuk menaruh ide-ide visual kamu. Setiap artboard mewakili satu layar atau halaman dalam aplikasi atau website yang sedang kamu desain. Jadi, kalau kamu bikin aplikasi mobile, setiap layar di aplikasi itu bisa kamu representasikan dengan satu artboard.

Fungsi Utama Artboards dalam Desain UI/UX¶

Artboards ini penting banget dalam desain UI/UX karena beberapa alasan:

1. Mengorganisir Desain Kamu¶

Image just for illustration

Bayangkan kalau kamu mendesain website yang punya banyak halaman, seperti halaman utama, halaman produk, halaman kontak, dan lain-lain. Tanpa artboards, semua elemen desain kamu bakal numpuk jadi satu di satu area kerja yang besar. Pusing, kan? Nah, dengan artboards, kamu bisa memisahkan setiap halaman atau bagian website ke artboard masing-masing. Jadi, desain kamu jadi lebih terstruktur dan mudah dikelola. Kamu bisa fokus mendesain satu halaman di satu artboard tanpa terganggu elemen dari halaman lain.

2. Menyimulasikan Alur Pengguna (User Flow)¶

Image just for illustration

Artboards juga membantu kamu buat menyimulasikan alur pengguna atau user flow. Karena setiap artboard mewakili satu layar atau halaman, kamu bisa menyusun artboards ini secara berurutan sesuai dengan bagaimana pengguna akan berinteraksi dengan aplikasi atau website kamu. Di Adobe XD, kamu bahkan bisa menghubungkan antar artboards dengan prototyping untuk membuat simulasi interaktif. Ini keren banget karena kamu bisa melihat dan menguji alur pengguna sebelum benar-benar dikembangkan jadi kode.

3. Desain Responsif yang Lebih Mudah¶

Image just for illustration

Di era digital sekarang, website dan aplikasi harus bisa tampil keren di berbagai ukuran layar, mulai dari desktop, tablet, sampai smartphone. Nah, dengan artboards, kamu bisa mendesain untuk berbagai ukuran layar sekaligus. Kamu bisa membuat artboard khusus untuk tampilan desktop, artboard lain untuk tablet, dan artboard lainnya lagi untuk mobile. Adobe XD punya fitur Responsive Resize yang bikin proses desain responsif jadi lebih cepat dan efisien. Kamu gak perlu repot-repot menyesuaikan desain satu per satu untuk setiap ukuran layar.

4. Kolaborasi Tim yang Lebih Efektif¶

Image just for illustration

Kalau kamu kerja dalam tim desain, artboards ini sangat membantu untuk kolaborasi. Setiap anggota tim bisa fokus mengerjakan artboard atau bagian desain yang berbeda. Karena desainnya terstruktur dan terpisah-pisah, konflik antar anggota tim jadi lebih kecil. Selain itu, dengan fitur cloud document di Adobe XD, semua anggota tim bisa mengakses dan bekerja pada file desain yang sama secara real-time. Kolaborasi jadi lebih lancar dan produktif.

Bedanya Artboards dengan Canvas atau Pages di Software Lain?¶

Mungkin kamu bertanya-tanya, apa bedanya artboards di Adobe XD dengan canvas atau pages di software desain lain? Secara konsep, memang mirip-mirip. Tapi, ada beberapa hal yang bikin artboards di Adobe XD ini spesial dan lebih fokus untuk desain UI/UX:

1. Fokus pada Layar Digital¶

Image just for illustration

Artboards di Adobe XD dirancang khusus untuk desain layar digital, seperti website, aplikasi mobile, atau bahkan interface untuk perangkat lain. Ukuran artboard biasanya sudah preset sesuai dengan ukuran layar perangkat populer, seperti iPhone, iPad, Android phone, dan desktop. Ini memudahkan desainer untuk langsung memulai desain dengan ukuran yang tepat untuk target platform mereka. Beda dengan canvas di software desain grafis umum yang lebih fleksibel dan bisa dipakai untuk berbagai keperluan, termasuk desain cetak.

2. Fitur Prototyping Terintegrasi¶

Image just for illustration

Salah satu keunggulan utama Adobe XD adalah fitur prototyping yang terintegrasi langsung dengan artboards. Kamu bisa dengan mudah menghubungkan antar artboards untuk membuat prototipe interaktif tanpa perlu keluar dari software atau menggunakan plugin tambahan. Fitur prototyping ini penting banget dalam desain UI/UX karena membantu desainer untuk menguji dan memvalidasi desain mereka sebelum diimplementasikan. Dengan artboards yang terhubung ke prototyping, proses desain dan pengujian jadi lebih seamless dan efisien.

3. Manajemen Aset yang Lebih Baik¶

Image just for illustration

Adobe XD juga punya fitur manajemen aset yang lebih baik untuk desain UI/UX. Kamu bisa menyimpan komponen, warna, dan karakter style sebagai aset dan menggunakannya kembali di berbagai artboards. Ini membantu menjaga konsistensi desain di seluruh proyek dan mempercepat proses desain. Kalau ada perubahan pada aset, kamu bisa update aset tersebut dan semua instans aset di semua artboards akan ikut terupdate secara otomatis. Ini efisien banget dan mengurangi risiko kesalahan manual.

Cara Kerja dengan Artboards di Adobe XD¶

Nah, sekarang kita bahas gimana sih cara kerja dengan artboards di Adobe XD? Tenang, gampang banget kok!

Membuat Artboard Baru¶

Image just for illustration

Ada beberapa cara untuk membuat artboard baru di Adobe XD:

1. Pilih Tool Artboard (A): Di toolbar sebelah kiri, klik ikon Artboard (bentuknya kayak bingkai foto). Kursor kamu akan berubah jadi ikon artboard.
2. Klik dan Drag di Canvas: Klik di area kosong canvas dan drag untuk membuat artboard dengan ukuran custom.
3. Pilih Preset Ukuran: Di panel Properties sebelah kanan, setelah kamu pilih tool Artboard, kamu akan melihat daftar preset ukuran artboard untuk berbagai perangkat (Web, iPhone, iPad, Android). Klik salah satu preset untuk langsung membuat artboard dengan ukuran tersebut.
4. Duplikasi Artboard: Kamu juga bisa menduplikasi artboard yang sudah ada dengan cara klik kanan pada artboard dan pilih “Duplicate” atau tekan Ctrl+D (Windows) atau Cmd+D (Mac).

Menamai Artboard¶

Image just for illustration

Penting banget untuk menamai artboard kamu dengan jelas dan deskriptif. Ini akan membantu kamu dan tim kamu untuk mengorganisir desain dengan lebih baik, terutama kalau proyek kamu punya banyak artboards. Cara menamai artboard:

1. Double Klik Nama Artboard: Di panel Layers atau langsung di atas artboard di canvas, double klik nama artboard (biasanya defaultnya “Artboard 1”, “Artboard 2”, dst.).
2. Ketik Nama Baru: Ketik nama baru yang kamu inginkan. Misalnya, “Homepage”, “Product Page”, “Login Screen”, dll.
3. Enter: Tekan Enter untuk menyimpan nama baru.

Mengatur Ukuran dan Posisi Artboard¶

Image just for illustration

Kamu bisa dengan mudah mengatur ukuran dan posisi artboard kamu:

1. Pilih Artboard: Klik artboard yang ingin kamu atur.
2. Resize:
   • Drag Handle: Di sekeliling artboard akan muncul handle (kotak kecil). Drag handle ini untuk mengubah ukuran artboard secara manual.
   • Panel Properties: Di panel Properties sebelah kanan, kamu bisa melihat dan mengubah ukuran artboard (Width dan Height) secara numerik. Kamu juga bisa memilih preset ukuran di dropdown “Size”.
3. Pindah Posisi:
   • Drag Artboard: Klik di area kosong di dalam artboard (bukan elemen desain) dan drag untuk memindahkan posisi artboard di canvas.
   • Panel Properties: Di panel Properties, kamu bisa melihat dan mengubah posisi artboard (X dan Y coordinates) secara numerik.

Menduplikasi Artboard¶

Image just for illustration

Seperti yang sudah disebutkan sebelumnya, menduplikasi artboard itu gampang banget dan sangat berguna kalau kamu ingin membuat variasi dari desain yang sudah ada atau membuat halaman yang mirip. Caranya:

1. Pilih Artboard: Klik artboard yang ingin kamu duplikasi.
2. Duplicate:
   • Klik Kanan: Klik kanan pada artboard dan pilih “Duplicate”.
   • Shortcut: Tekan Ctrl+D (Windows) atau Cmd+D (Mac).

Menghapus Artboard¶

Image just for illustration

Kalau ada artboard yang tidak terpakai atau salah buat, kamu bisa menghapusnya dengan mudah:

1. Pilih Artboard: Klik artboard yang ingin kamu hapus.
2. Delete:
   • Klik Kanan: Klik kanan pada artboard dan pilih “Delete”.
   • Tombol Delete: Tekan tombol Delete atau Backspace di keyboard.

Mengatur Urutan Artboards¶

Image just for illustration

Urutan artboards di canvas penting terutama untuk prototyping dan presentasi desain. Adobe XD secara otomatis mengurutkan artboards dari kiri ke kanan dan atas ke bawah berdasarkan posisinya di canvas. Tapi, kamu juga bisa mengatur urutan artboards secara manual:

1. Pilih Artboard: Klik artboard yang ingin kamu pindahkan.
2. Drag dan Drop: Drag artboard ke posisi baru yang kamu inginkan di canvas. Artboards lain akan otomatis menyesuaikan posisinya.
3. Panel Layers: Di panel Layers, kamu juga bisa melihat urutan artboards dan drag artboard untuk mengubah urutannya.

Tips dan Praktik Terbaik Menggunakan Artboards¶

Supaya kerja dengan artboards kamu makin efektif dan efisien, berikut beberapa tips dan praktik terbaik yang bisa kamu terapkan:

1. Organisasikan Artboards Secara Logis¶

Image just for illustration

Susun artboards kamu secara logis sesuai dengan alur pengguna atau struktur website/aplikasi. Misalnya, urutkan artboards dari halaman utama, lalu halaman kategori, halaman produk, sampai halaman checkout. Ini akan memudahkan kamu dan tim kamu untuk navigasi dan memahami alur desain secara keseluruhan.

2. Gunakan Naming Convention yang Konsisten¶

Image just for illustration

Selain menamai artboards dengan jelas, gunakan juga naming convention yang konsisten di seluruh proyek. Misalnya, gunakan awalan atau akhiran yang sama untuk artboards yang berkaitan, seperti “Homepage-Desktop”, “Homepage-Mobile”, “Product-Detail-Desktop”, “Product-Detail-Mobile”. Ini akan membuat nama artboards kamu lebih terstruktur dan mudah dicari.

3. Pertimbangkan Ukuran Layar Target¶

Image just for illustration

Saat membuat artboard baru, selalu pertimbangkan ukuran layar target perangkat yang kamu desain. Pilih preset ukuran artboard yang sesuai atau buat ukuran custom yang spesifik. Ini akan memastikan desain kamu optimal dan tampil baik di perangkat target.

4. Jaga Konsistensi Desain Antar Artboards¶

Image just for illustration

Pastikan konsistensi desain di seluruh artboards. Gunakan style guide atau design system untuk menjaga konsistensi dalam penggunaan warna, tipografi, spacing, dan elemen desain lainnya. Manfaatkan fitur Assets di Adobe XD untuk menyimpan dan menggunakan kembali komponen dan style secara konsisten.

5. Manfaatkan Fitur Grid dan Layout¶

Image just for illustration

Adobe XD punya fitur Grid dan Layout yang sangat membantu untuk menjaga alignment dan struktur desain di dalam artboard. Aktifkan fitur Grid untuk membantu kamu menempatkan elemen desain secara presisi. Gunakan fitur Layout Grid untuk membuat layout kolom yang responsif.

Fitur Artboards Lanjutan di Adobe XD¶

Selain fitur dasar, Adobe XD juga punya beberapa fitur artboards lanjutan yang keren dan bermanfaat:

1. Scrolling Artboards¶

Image just for illustration

Fitur Scrolling Artboards memungkinkan kamu membuat artboard yang lebih panjang dari ukuran layar, sehingga kontennya bisa di-scroll secara vertikal. Ini berguna banget untuk mendesain halaman web yang panjang atau halaman aplikasi dengan banyak konten. Kamu bisa mengatur area yang bisa di-scroll di panel Properties artboard.

2. Responsive Resize di Tingkat Artboard¶

Image just for illustration

Fitur Responsive Resize tidak hanya berlaku untuk elemen desain di dalam artboard, tapi juga bisa diterapkan di tingkat artboard. Kamu bisa membuat variasi ukuran artboard (misalnya desktop, tablet, mobile) dan mengatur aturan responsive resize untuk setiap artboard. Ini memudahkan kamu untuk membuat desain responsif yang benar-benar adaptif dengan berbagai ukuran layar.

3. Overlays¶

Image just for illustration

Fitur Overlays memungkinkan kamu membuat elemen UI yang muncul di atas konten utama saat interaksi pengguna, seperti menu dropdown, modal window, atau tooltip. Kamu bisa membuat artboard khusus untuk overlay dan mengaturnya untuk muncul di atas artboard lain saat prototyping.

4. Komponen dan Artboards¶

Image just for illustration

Penggunaan Komponen (sebelumnya disebut Symbols) di Adobe XD sangat erat kaitannya dengan artboards. Komponen membantu kamu membuat elemen desain yang reusable dan konsisten di seluruh artboards. Kamu bisa membuat komponen dari elemen desain apa pun dan menggunakannya kembali di berbagai artboards. Kalau ada perubahan pada komponen utama, semua instans komponen di semua artboards akan ikut terupdate.

Keuntungan Menggunakan Artboards di Adobe XD¶

Image just for illustration

Secara keseluruhan, menggunakan artboards di Adobe XD memberikan banyak keuntungan, diantaranya:

• Organisasi Desain yang Lebih Baik: Desain lebih terstruktur, mudah dikelola, dan dinavigasi.
• Alur Kerja yang Lebih Efisien: Desain responsif, prototyping, dan kolaborasi tim jadi lebih lancar.
• Konsistensi Desain yang Terjaga: Memudahkan penggunaan aset dan style yang konsisten di seluruh proyek.
• Fokus pada Desain UI/UX: Fitur-fitur artboards dirancang khusus untuk kebutuhan desain layar digital.
• Simulasi User Flow yang Interaktif: Prototyping terintegrasi memungkinkan pengujian dan validasi desain yang lebih baik.

Jadi, sudah jelas banget kan pentingnya artboards dalam Adobe XD? Artboards ini bukan cuma sekadar kanvas, tapi jantung dari proses desain UI/UX di Adobe XD. Dengan memahami dan memanfaatkan artboards dengan baik, kamu bisa meningkatkan produktivitas, kualitas desain, dan efektivitas kolaborasi tim kamu.

Gimana, ada pertanyaan atau pengalaman menarik seputar penggunaan artboards di Adobe XD? Yuk, share di kolom komentar!