Last Updated on October 26, 2020 by
Belum menggunakan Adobe XD? Adobe XD Trisets akan dapat digunakan segera Anda sebagai pemula membaca artikel ini.
Table of Contents
Apa Itu Adobe XD?
Adobe XD adalah software berbasis vektor yang biasanya digunakan untuk merancang prototipe bagi pengguna pada aplikasi web dan seluler. Alat all-in-one yang kuat yang memungkinkan Anda untuk dengan mudah beralih antara bingkai gambar, desain visual, desain interaksi, pembuatan prototipe, pratinjau, dan berbagi.
1. Mari Kita Gunakan Terlebih Dulu
Cobalah Gratis dengan Adobe XD
“Tapi produk Adobe itu mahal?” Beberapa pemula mungkin menyerah sejak awal. Tapi ketahuilah bahwa Adobe XD memiliki “Rencana Awal” gratis dengan fitur-fitur utama.
Luncurkan Adobe XD
Fitur lain dari Adobe XD adalah aplikasi diluncurkan dengan sangat cepat. Dapat digunakan jika sedang bekerja terburu-buru atau menginginkan pekerjaan kecil tanpa stres.
Poin pengantar Adobe XD
- Mulai gratis
- Mulai cepat dan operasikan, sehingga Anda dapat menggunakannya tanpa mengkhawatirkan spesifikasi PC
2. Buat Artboard
Artboards adalah layar untuk menulis gambar rangka dan desain. Setelah meluncurkan Adobe XD, mari mulai membuat ruang kerja. Selesai dengan hanya memilih dari templat. Cukup pilih ukuran layar yang ingin Anda buat dari layar mulai dan pembuatan artboard selesai. Karena ukuran layar PC umum dan smartphone terdaftar dari awal, tidak perlu memeriksa “berapa ukuran layar px?”.
Ukuran Artboard Bebas
Tidak seperti aplikasi seperti Office, yang menetapkan ukuran pencetakan kertas seperti A4 dan A3, Adobe XD memungkinkan Anda untuk dengan bebas menyesuaikan ukuran artboard sesuai dengan panjang halaman. Anda dapat membuat halaman dengan berbagai jumlah informasi, seperti halaman ponsel cerdas yang ramping.
Poin Fungsi Artboard
- Buat ukuran layar yang sesuai hanya dengan memilih dari templat
2. Ukuran layar juga fleksibel. Ideal untuk halaman yang panjang seperti smartphone
3. Mari Kita Menggambar Wireframe
Setelah Anda membuat artboard, Anda siap membuat bingkai gambar. Mari membuat gambar rangka!
Ruang Kerja dan Metode Operasi
Sebagian besar tugas diselesaikan hanya dengan menggunakan panel kiri dan kanan ini. Karena tidak perlu mencari menu, Anda dapat melanjutkan dengan lancar tanpa ragu-ragu.
Penggunaan dasar adalah aliran memilih gambar seperti gambar atau teks dari bilah alat di sebelah kiri, memasukkannya ke dalam artboard, dan mengatur warna, ukuran karakter, pengaturan dan bentuk dari panel kanan.
Gunakan Kit UI Gratis
Kit UI adalah kumpulan bagian yang sering digunakan di web dan di aplikasi. Siapa pun dapat dengan mudah membuat gambar rangka yang indah dengan menggabungkan bagian-bagiannya. Masukkan bagian yang diunduh dengan menyalin & menempel atau seret & lepas. Setelah mengatur bagian-bagian dan mengubah teks dan gambar, halaman atas selesai! Butuh sekitar 30 menit untuk sampai ke sini. Bahkan sutradara dapat dengan cepat dan mudah membuat bingkai gambar yang indah dan mudah dilihat!
Titik Pembuatan Wireframe
- Operasi sangat sederhana! Anda dapat dengan cepat belajar cara menggunakan
- Jika Anda menggunakan kit UI, Anda dapat dengan mudah dan indah menggambar kabel bahkan jika Anda bukan seorang desainer! Dan gratis
4. Buat dan Kelola Beberapa Halaman
Komponen Komponen Umum
Sebelum Anda membuat halaman yang mendasarinya, pertama-tama buat komponen yang umum seperti header dan footer. Bagian-bagian komponen diterapkan ke semua halaman dalam satu pengeditan, bahkan jika mereka digunakan pada banyak halaman. Misalnya, jika koreksi terjadi setelah pembuatan, itu dapat diperbaiki dalam batch, dan kelalaian koreksi dapat dicegah.
Tambahkan Artboard
Saat membuat beberapa halaman, pertama tambahkan “artboard”. Jika Anda menggunakan fungsi “artboard”, Anda dapat membuat dan mengelola beberapa halaman dengan satu file.
Membuat dan Mengelola Beberapa Halaman
- Bagian umum seperti header dan footer dapat dikelola secara terpusat oleh komponenisasi
2. Beberapa halaman (artboards) dapat dibuat dengan satu file, sehingga satu situs dapat dikelola secara terpusat.
5. Mari Kita Mengatur Prototipe
Setelah bingkai gambar halaman bawah selesai, langkah selanjutnya adalah menghubungkan tautan setiap halaman menggunakan “fungsi prototipe”.
Hubungkan Tautan dengan Prototipe
Prototipe adalah fungsi yang memungkinkan Anda untuk mengatur tautan ke layar lain pada elemen rangka gambar yang dibuat dengan XD. Sebagai contoh, ini adalah fungsi yang dapat mereproduksi pada pratinjau XD transisi layar dengan hyperlink seperti mengklik pada elemen tombol “Kembali ke halaman atas” pada halaman lapisan bawah.
Menggunakan prototipe ini, ini adalah fungsi yang memainkan peran dalam desain kabel serta desain informasi seperti “Ke mana Anda pergi ketika Anda menekan tombol ini?” “Apa wire ke halaman ini?”
Anda dapat beralih ke “mode Prototipe” dari tab di kiri atas. Jika Anda ingin kembali ke pengeditan bingkai gambar, alihkan ke “mode desain”.
Penggunaan yang mudah: Jadikan layar beranda peta situs
Untuk situs web yang menjangkau beberapa halaman, mudah untuk memiliki layar beranda sebagai peta situs. Layar beranda adalah halaman yang muncul pertama kali saat melihat pratinjau atau mengonversi ke PDF. Pergilah ke mode prototipe dan atur ikon rumah ini ke artboard yang Anda inginkan sebagai layar beranda. Setelah membuat sitemap, setel tautan ke setiap rangka gambar dalam nama halaman dengan cara yang sama seperti prototipe.
Dengan melakukan ini, Anda dapat melompat ke halaman yang ingin Anda lihat segera. Jika Anda mengubah tampilan “dibuat” dan “tidak dibuat”, Anda dapat dengan jelas menunjukkan progres dan mencegah kelalaian halaman!
Poin Prototipe
- Anda dapat mengatur tautan internal ke tombol atau teks dan menyelesaikan “Di mana Anda terbang saat menekan tombol ini?”
- Buat sitemap dan gunakan untuk melacak kemajuan
6. Manfaatkan Fungsi Penyimpanan Otomatis dan Cloud
Selain berbagi pratinjau di browser, Adobe XD memiliki kemampuan untuk secara otomatis menyimpan dan berbagi file .xd menggunakan cloud (Adobe Creative Cloud). Berbagi data saat bekerja dengan banyak orang dan beberapa lokasi dan pembaruan otomatis ke data terbaru dilakukan secara otomatis, sehingga sangat mudah untuk mengelola data asli!
Poin Berbagi Cloud
- Ketika ada beberapa editor, pertukaran “Bisakah Anda mendapatkan data asli?”, dapat dikurangi
- Karena data terbaru selalu ada di cloud, pertukaran “Bisakah Anda mendapatkan data .xd terbaru?
- Ketika bekerja pada PC lain seperti di rumah, dimungkinkan untuk mencegah “Saya meninggalkan data saya secara lokal di PC perusahaan saya!”
7. Bagikan dan Dapatkan Umpan Balik
Setelah membuat wireframe, Anda perlu memeriksa dengan anggota proyek dan klien, bukan? Adobe XD tidak hanya berguna untuk membuat dan mengelola wireframe, tetapi juga untuk berbagi dan bertukar umpan balik!
Pratinjau di Browser
Adobe XD memiliki fitur pratinjau browser. Dengan kata lain, bahkan klien dan insinyur tanpa Adobe XD dapat memeriksa konten dari browser kapan saja dan di mana saja selama ada lingkungan Internet. Selain itu, kata sandi dapat diatur untuk pratinjau, sehingga keamanan terjamin.
Tentu saja, bagi mereka yang ingin mencetak dan melihat data, ada juga fungsi untuk menghasilkan gambar PDF dan PNG .
Umpan Balik
Anda bisa mendapatkan umpan balik misalnya koreksi dari klien maupun anggota pada proyek yang Anda buat, pada “Fungsi Komentar”. Anda dapat menentukan posisi wireframe dari pratinjau dan memasukkan komentar, sehingga jelas di mana dan umpan balik apa yang Anda miliki.
Sampai sekarang, jika Anda mencetak gambar rangka dan mendapatkan umpan balik tulisan tangan, Anda tidak dapat membaca karakter. Karena fungsi komentar dari Adobe XD adalah data teks, tidak ada waktu untuk decoding, Anda dapat menyalin dan menempel instruksi penggantian teks seperti itu, jadi tidak hanya efisiensi tetapi juga kesalahan seperti kesalahan ketik dapat dicegah.
Penggunaan yang Mudah: Spesifikasi Berbagi
Pernahkah Anda menerima permintaan dari klien untuk mengedit naskah, dengan mengatakan, “Saya ingin menyalin dan mengedit teks gambar rangka”. Dalam hal fungsi pratinjau, karena bingkai gambar dicitrakan dan dipratinjau, tidak mungkin untuk merujuk ke informasi teks dan lain-lain dari browser.
Namun, Adobe XD memiliki fitur yang disebut “Share for Development” yang memungkinkan Anda berbagi informasi teks serta pratinjau! Anda tidak hanya dapat melihat informasi teks tetapi juga informasi gaya seperti warna dan ukuran hanya dengan mengarahkan kursor ke elemen yang ingin Anda lihat.
Poin Berbagi dan Umpan Balik
- Bagikan pratinjau di browser
- Kata sandi dapat diatur, sehingga keamanan terjamin
- Gunakan “Share for Development” untuk berbagi informasi teks dan gaya
Kesimpulan
Jadi pada artikel ini, kami telah memperkenalkan operasi dasar dari pengenalan Adobe XD. Silakan coba dan dapatkan pengalaman menggunakan Adobe XD. Sekarang Anda tahu bahwa menggunakan AdobeXD sangat sederhana dan mudah.
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.