Review Adobe XD 2022: Tugas desainer UX/UI yang cerdas untuk menjelajahi gelombang teknologi, alat, dan peretasan yang mengubah laut sama menakutkannya dengan mendebarkannya. Salah satu sensasi tersebut adalah menggunakan dan menjaga arus dengan Adobe XD (Desain Pengalaman) yang sering diperbarui, perangkat lunak desain antarmuka interaktif dan pembuatan prototipe.

Adobe mengembangkan XD pada tahun 2015 sebagai pesaing Sketch, yang telah memulai debutnya lima tahun sebelumnya. Kedua aplikasi berbasis vektor dapat digunakan untuk desain front-end situs web, aplikasi, dan game. Perbedaan utama adalah bahwa Sketch hanya untuk Mac, sedangkan XD mendukung macOS dan Windows.

Adobe XD juga mendapat manfaat dari integrasi Creative Cloud, dengan akses dalam aplikasi ke perpustakaan bersama gambar, palet, dan aset sistem desain. Ini dikemas dengan fitur, kuat, dan intuitif, menjadikannya program Pilihan Editor dan harus dimiliki oleh desainer.

Adobe sibuk menambahkan fitur ke XD, banyak yang datang dari saran di forum UserVoice-nya. Faktanya, permintaan teratas akhir-akhir ini adalah integrasi video dalam prototipe—sekarang menjadi kenyataan. Lebih lanjut tentang ini di bawah ini.

Ulasan Ringkas Adobe XD 2022

Adobe XD memenangkan pergumulan alat desain UI/UX tidak hanya karena dorongan yang didapatnya dari integrasi dengan aplikasi Creative Cloud, tetapi juga karena alat desainnya yang responsif.

US Street Price$9,99

Kelebihan

• Ruang kerja yang intuitif dan perintah kunci yang familiar untuk pengguna Creative Cloud
• Kolaborasi tim yang sangat baik dan mudah
• Dukungan desain responsif terkemuka
• Tutorial yang kuat dan komunitas pengguna
• Kompatibel dengan macOS dan Windows

 
Kekurangan

• Tidak banyak plug-in untuk Sketch

Berapa Biaya Adobe XD?

Adobe menawarkan paket awal gratis namun sangat terbatas yang memungkinkan hanya satu dokumen dan dua ekspor PDF. Harga langganan mulai dari $9,99 per bulan untuk individu dan menghilangkan batasan tersebut. XD juga tersedia sebagai bagian dari paket Creative Cloud All Apps, yang memberi Kalian akses ke lebih dari 20 aplikasi—termasuk Photoshop dan Harga Illustrator $52,99 per bulan.

Sebaliknya, Sketch berharga $9 per bulan (atau $99 per tahun) per orang, dengan uji coba gratis selama 30 hari.

Pesaing populer yang lebih baru adalah Figma, aplikasi berbasis cloud dengan lebih dari empat juta pengguna, pada tulisan ini. Figma unik dalam grup ini karena menawarkan opsi akun gratis selamanya yang memberi Kalian plug-in, template, kolaborator tak terbatas, dan file pribadi tak terbatas, tetapi hanya tiga file proyek desain Figma. Karena Figma sepenuhnya berbasis browser, kompatibilitas platform desktop tidak menjadi masalah.

Satu pesaing terakhir—dan menarik—adalah InVision, yang melakukan prototipe dan desain antarmuka berbasis cloud dan tingkat akun gratis yang mendukung 10 pengguna dan tiga dokumen. Versi berbayar berharga $7,95 per pengguna per bulan.

Bisakah PC atau Mac Kalian Menjalankan Adobe XD?

Seperti yang disebutkan, Adobe XD berjalan di macOS dan Microsoft Windows. Pesaing utamanya, Sketch, hanya untuk macOS. Di kedua OS, Kalian mendapatkan XD dari aplikasi Creative Cloud Desktop, yang memudahkan penginstalan dan pembaruan, meskipun itu berarti menginstal program lain lagi di sistem Kalian.

Di Windows, Kalian memerlukan PC 64-bit yang menjalankan Windows 10 versi 1909 atau lebih baru dengan RAM 4GB. XD secara native mendukung pena Windows dan input sentuh. Di macOS, Kalian memerlukan versi 10.15 (Catalina) atau lebih baru dengan RAM 4 GB, dan itu dapat berjalan sebagai aplikasi asli Apple Silicon.

Memulai Dengan Adobe XD

Setelah Kalian memilih opsi berlangganan Creative Cloud, memulai dengan XD sangatlah mudah. Saat Kalian meluncurkan program, hal pertama yang Kalian lihat adalah dasbor beranda. Tombol Pelajari membawa Kalian ke situs web Adobe Learn & Support untuk Panduan Langkah-demi-Langkah XD. Di sana Kalian dapat memilih dari beberapa tingkat pembelajaran, dan pergilah.

Menambah sumber daya pendidikan XD adalah banyak demo dan tutorial video lainnya di situs Adobe, termasuk akses ke Adobe Max sebelumnya dan streaming Adobe Live di mana Kalian dapat belajar dari para profesional saat Kalian menonton mereka mengerjakan sebuah proyek. Kalian juga dapat mengirimkan pertanyaan Kalian di forum terkait.

Di layar beranda, Kalian melihat pilihan prasetel artboard dalam ukuran viewport perangkat standar, yang dapat Kalian gunakan untuk memulai desain. Layar juga menampilkan tautan ke kit antarmuka pengguna, tautan prototipe dari proyek Kalian, dan file yang telah dibagikan oleh rekan kerja kepada Kalian.

Adobe telah meningkatkan dan menstandarisasi cara Kalian berkolaborasi dengan kolega dan klien di semua aplikasi Creative Cloud. Ini berarti bahwa berbagi yang efisien, pelacakan umpan balik, iterasi, dan penerbitan semuanya sudah ada di dalamnya. Perwakilan Adobe memberitahu saya bahwa mereka akan segera menambahkan kemampuan untuk berbagi percakapan langsung dalam aplikasi dengan kolega dan klien. Selain itu, XD mendukung kolaborasi tim melalui Slack dan Microsoft Teams.

Alur Kerja Perwakilan

XD memiliki tiga mode: Desain, Prototipe, dan Bagikan. Seperti yang Kalian duga, Kalian mendesain dan menata halaman, atau layar Kalian, dalam mode Desain. Menggambar sketsa tangan adalah cara yang bagus untuk memulai proyek apa pun, dan ini terutama berlaku untuk desain yang melibatkan pencarian hierarki informasi dan hubungan timbal balik, seperti situs web:

Setelah saya mengerjakan navigasi dan alur yang layak, saya meluncurkan XD dan membuat prototipe low-fidelity (alias wireframe) yang merupakan versi sketsa tangan yang lebih rapi dan bersih—meskipun masih tanpa salinan, foto, atau warna:

Setelah persetujuan pemangku kepentingan atas prototipe lo-fi, saya menambahkan salinan yang ada, branding , dan citra, serta membangun prototipe fidelitas tinggi untuk memulai tinjauan desain dan siklus iterasi. Mode desain juga tempat Kalian menentukan parameter pengguliran, responsivitas, kisi berulang, dan transisi interaktif (dan mikro-interaktif), seperti status istirahat dan melayang.

Bergantung pada kecanggihan klien, saya juga dapat menggunakan versi ini sebagai prototipe interaktif yang berfungsi yang terlihat dan berfungsi seperti situs web sebenarnya, lengkap dengan pengguliran, navigasi dan tombol yang berfungsi, status istirahat dan melayang, dan banyak lagi. Di bawah ini adalah bidikan yang diperbesar dari artboard layar sebelum membuat prototipe. 

Setelah pemangku kepentingan menandatangani dan memberikan persetujuan akhir, tidak sulit untuk membuat dan mengumpulkan file yang diperlukan dan indikasi CSS untuk ditransfer ke pengembang, selama Kalian telah mengatur dan membangun file XD Kalian dengan pemeliharaan file yang cermat.

Sangat penting untuk mengobrol dengan pengembang Kalian di awal dan di sepanjang proses sehingga Kalian dapat menyinkronkan praktik terbaik seperti organisasi aset, spesifikasi desain, dan konvensi penamaan file. Yang lebih penting lagi adalah memastikan desain bintang Kalian dapat dibangun sesuai anggaran dan teknologi platform yang mereka gunakan.

Beberapa desainer antarmuka mencatat bahwa Sketch memiliki lebih banyak kemampuan desain dan ilustrasi daripada XD. Namun, jika Kalian perlu membuat atau menyesuaikan grafik yang lebih canggih daripada rentang XD, cepat dan mudah untuk masuk ke Illustrator, lakukan hal itu, lalu salin dan tempel grafik sempurna piksel Kalian ke XD. Itu hanya pilihan jika langganan Creative Cloud Kalian menyertakan Illustrator; langganan XD mandiri tidak.

Interaksi dan Pembuatan Prototipe

Membuat prototipe interaktif di XD sangat intuitif dan memuaskan saat Kalian menyambungkan semuanya dengan konektor karet gelang virtual. Saat Kalian masih dalam mode Desain, Kalian dapat menentukan interaksi mikro komponen Kalian, seperti status kursor dan pemicu (lihat gambar di bawah).

Pindah ke mode Prototipe untuk menentukan transisi dan interaksi antar artboard menggunakan animasi otomatis XD untuk memvisualisasikan bagaimana konten Kalian bergerak di antara artboard. Saat menentukan animasi otomatis, Kalian dapat bermain-main dengan pemicu Seret dan Waktu untuk membuat beberapa efek gerakan yang mengesankan. Gambar di bawah dan tangkapan layar pertama di atas menunjukkan contohnya.

Pindah dari mode Desain ke Prototipe, Kalian melihat antarmuka yang hampir sama seperti pada tangkapan layar artboard di atas, kecuali bahwa Properties Inspector kontekstual kanan sekarang diisi dengan interaktivitas daripada atribut desain. Selain itu, pilihan (sekarang berwarna biru) dalam mode Prototipe mewakili hot spot (area yang dapat diklik atau dapat diketuk) daripada elemen desain.

Mampu mendefinisikan dan memvalidasi mekanisme navigasi dan interaksi, seperti interaksi mikro dan animasi antara artboards, tap, dan klik, sebelum pengembangan dimulai adalah manfaat yang tak ternilai dari XD dan alat prototyping lainnya dibandingkan aplikasi desain murni seperti Photoshop dan Illustrator.

XD tidak kekurangan fitur yang mendukung pembuatan prototipe desain interaksi modern. Berikut adalah tiga yang penting:

Pertama, Resize Responsive memungkinkan Kalian melihat bagaimana desain dan konten Kalian akan terlihat di beberapa perangkat secara real time atau manual. Perhatikan bahwa terakhir kali saya melihat Sketch, itu tidak memiliki reflow responsive otomatis, tetapi perusahaan itu telah menambahkan fitur Tata Letak Cerdas yang dapat secara otomatis mengubah ukuran simbol (komponen), meskipun hanya secara lokal, bukan untuk desain responsif pada beberapa layar dan ukuran perangkat.

Kedua, Komponen—mirip dengan simbol di aplikasi lain, termasuk Illustrator—memungkinkan Kalian menghindari duplikasi upaya Kalian saat Kalian membutuhkan beberapa versi dari hal yang sama, seperti topik di header navigasi, atau header itu sendiri. Setiap salinan komponen adalah instance yang dapat Kalian tetapkan beberapa atribut untuk situasi yang berbeda, seperti status istirahat, arahkan kursor, dan klik tombol.

Ketiga, Repeat Grid adalah penghemat waktu yang sangat besar karena memungkinkan Kalian untuk mengambil satu grafik atau grup (misalnya foto, harga, dan nama) dan cukup menyeretnya ke segala arah untuk secara ajaib menarik grid berulang dari objek asli Kalian ( S). Ini adalah fasilitator yang sempurna untuk kotak objek untuk dijual atau foto perusahaan. Kemudian letakkan saja grup foto Kalian dan kisi-kisi akan terisi dan tetap dapat diedit untuk penyesuaian lebih lanjut.

Fitur Terbaru dan Terhebat di XD

Adobe merilis pembaruan kecil untuk XD setiap bulan, dengan pembaruan besar diluncurkan setiap Oktober selama pertunjukan terbesarnya, Adobe Max. Yang terbaru dalam jajaran pembaruan kecil adalah penyertaan prasetel artboard untuk perangkat Apple iPhone 13, Google Pixel 6, dan Microsoft Surface Pro 8 . Yang juga baru adalah kemampuan hyperlink web dan email dan beberapa pemicu waktu untuk Lottie animasi

Itu membawa kita langsung ke pembaruan besar yang diumumkan pada impor dan pemutaran animasi Max: Video dan Lottie terbaru. Lotties adalah animasi sederhana berbasis vektor (dapat diskalakan tanpa batas tanpa pikselasi) berkualitas tinggi. Filenya kecil, berfungsi di platform atau perangkat apa pun, dan dapat dikodekan agar interaktif.

Gambar bergerak menambah kehidupan dan mengundang keterlibatan dengan prototipe Kalian. Untuk tujuan ini; XD memungkinkan Kalian mengontrol beberapa skenario pemutaran sehingga Kalian dapat menciptakan pengalaman yang tepat apakah Kalian mengimpor Lotties atau video. Perhatikan bahwa saat ini video terbatas pada file MP4 yang lebih kecil dari 15MB.

Plugin Landscape

Sebelum XD muncul, Sketch telah melampaui Photoshop sebagai aplikasi masuk untuk desain web front-end; mungkin menjelaskan mengapa jumlah plug-in XD masih tertinggal di belakang lebih dari 700 ekstensi yang dibuat untuk Sketsa. Meskipun demikian, dengan lebih dari 250 plugin dan ekstensi XD yang tersedia untuk “mempercepat alur kerja Kalian”; seperti yang dikatakan Adobe, berikut ini adalah beberapa, perwakilan; plug-in berperingkat teratas yang menarik perhatian saya (beberapa gratis dan beberapa dengan versi pro berbayar).

Bagan untuk XD adalah plugin dari Pavel Kuligin yang memungkinkan Kalian membuat bagan dengan data acak, tabular, atau JSON di dalam XD. Ini menghasilkan representasi visual yang disesuaikan dari grafik Kalian dalam hitungan detik.

Alexa Preview, add-in dari Adobe, memungkinkan Kalian membuat prototipe bertenaga suara yang dapat berinteraksi dengan asisten digital Amazon, Alexa.

Stark adalah inspektur aksesibilitas dari Stark Lab yang memastikan desain Kalian memenuhi syarat untuk pengguna dengan gangguan penglihatan.

Yumtastic Hero adalah plug-in dari Yumtastic Tools and Trainings yang memfasilitasi pembuatan dan ekspor ke web; infografis interaktif, microgame, animasi UI, data dinamis, dan banyak lagi.

Permata Tak Terduga: Sistem Desain, Presentasi, dan Lainnya

Penggunaan sekunder yang menarik untuk XD telah muncul ke permukaan: membuat dan menerbitkan sistem desain. Sistem desain mendefinisikan merek dan identitas visual perusahaan melalui aset dan konvensi yang konsisten; seperti standar dan pedoman merek, tetapi berskala lebih besar.

Sementara pedoman merek adalah dokumen yang memerlukan pembaruan rutin untuk mempertahankan informasi terkini; sistem desain biasanya dibuat untuk perusahaan besar yang sedang berkembang yang harus siap untuk evolusi visual.

Tidak ada resep yang ditetapkan untuk sistem desain. Sebagian besar memiliki aset visual untuk desain cetak dan layar, termasuk palet, gaya karakter; komponen yang dapat digunakan kembali (atau simbol), kerangka presentasi dan jaminan, dan templat media sosial.

Manfaat utama menggunakan XD untuk menampung sistem desain adalah Kalian dapat mengelola dan mempublikasikan pembaruan dari dokumen cloud pusat yang dibagikan melalui Creative Cloud Library. Jika semua orang siap, itu tidak pernah ketinggalan zaman dan selalu ada di ujung jari Kalian.

Jika Kalian pernah membuat halaman web bergulir sederhana dengan Adobe Spark; Kalian mungkin merasakan kegembiraan betapa mudahnya itu bersama dengan frustasi karena terbatasnya pilihan Kalian.

Sekarang Adobe telah memperluas dan memigrasikan trio Spark online (Halaman/Posting/Video) ke penawaran barunya; Creative Cloud Express, saya masih merasakan kegembiraan dan frustasi yang sama. Namun secara teoritis, seseorang dapat membangun pengalaman seperti Spark dengan membangun prototipe XD; tetapi dengan keuntungan memiliki kontrol penuh atas desain dan tata letak, termasuk hyperlink.

Peringatannya adalah Kalian tidak akan memiliki URL khusus, Kalian juga tidak akan dapat mengoptimalkan mesin telusur. Meskipun demikian, ide ini bisa sangat cocok untuk contoh di mana tidak satupun dari batasan ini menjadi pemecah kesepakatan; seperti untuk presentasi, portofolio pertama siswa, pengumuman, undangan, dan proyek fana lainnya.

Penggunaan terakhir dan tak terduga yang baru-baru ini saya pelajari adalah desainer game menggunakan Pemicu Kunci/Gamepad XD dan memasak bersama input perangkat keras (pikirkan Arduino ) untuk mengontrol prototipe XD. Jenis simulasi ini memberikan pengalaman pengguna yang kaya dan mendalam kepada pemangku kepentingan selama tahap awal pengembangan.

Pengalaman yang Bergerak

Tidak ada yang mengalahkan prototipe yang bekerja dan bergerak untuk menyampaikan pengalaman yang diinginkan dan menciptakan kesenangan. Prototipe interaktif juga memungkinkan Kalian menguji visi dan kegunaan desain Kalian dan membantu menjualnya ke tim atau klien Kalian. Jika Kalian baru memulai dengan desain antarmuka dan pengalaman; memilih alat yang paling mendukung alur kerja, persyaratan, dan kesuksesan akhir Kalian bisa menjadi tantangan.

Adobe XD harus menjadi pilihan Kalian jika Kalian adalah pengguna Creative Cloud yang perlu merancang dan membuat prototype antarmuka web dan seluler. Ini memberi Kalian kenyamanan luar biasa untuk memiliki akses langsung ke Perpustakaan aset Kalian; (atau tim Kalian) dan integrasi tanpa batas dengan Illustrator, Photoshop, After Effects, dan aplikasi Creative Cloud lainnya.

Selain itu, ini juga merupakan alat lintas platform yang luar biasa, penuh fitur. Untuk alasan itu, ini adalah pemenang Pilihan Editor kami untuk perangkat lunak antarmuka dan prototipe.

Karena itu, tidak ada alasan untuk tidak mengikuti kompetisi untuk melihat apakah aplikasi lain beresonansi lebih baik dengan gaya dan kebutuhan kerja Kalian. Semua pesaing utama—Sketch, Figma, dan InVision Freehand; memiliki uji coba gratis sehingga Kalian dapat mengevaluasi chemistry antara Kalian, tim Kalian, dan perangkat lunak.