MENU POST

Cari Blog

Thursday, September 21, 2017

Tutorial UX & Web Design: Adobe XD 
Adobe telah menempatkan pengetahuan desain legendarisnya ke dalam ruang UX dengan Adobe Experience Design all-new - yang lebih dikenal dengan Adobe XD.

Banyak pengguna Cloud Kreatif mungkin telah melakukan desain UX di aplikasi lain seperti Illustrator atau bahkan Photoshop. Nah, Adobe XD ada di sini sebagai alat yang dirancang untuk desain UX. Tinggalkan yang menakjubkan - tapi kebanyakan tidak perlu - fitur dari aplikasi grafis favorit Anda. Trade-off? Program yang sangat responsif dan intuitif yang memungkinkan Anda mendesain ulang aplikasi prototipe dan situs web dengan cepat.

Memulai Adobe XD
Hal pertama yang akan Anda perhatikan saat meluncurkan aplikasi adalah Start Screen. Sebagai pengguna baru Adobe XD, saya sangat menyarankan untuk mengklik tombol Begin Tutorial. Pada saat mana Anda akan dibawa ke layar dengan panel menjelaskan proses kerja dengan XD.Informasi tersebut dengan cepat menuntun Anda melalui dasar-dasar aplikasi. Anda akan belajar menyelesaikan tugas penting seperti membuat papan nama, mengimpor gambar, menggunakan kisi ulang, dan cara menghubungkan artboards bersama untuk prototip. Jika Anda adalah pengguna Cloud Kreatif, banyak elemen akan masuk akal.
Setelah selesai meninjau proyek tutorial, sekarang saatnya membuat yang baru. Anda bisa melakukan ini dengan memilih File> New. Ini akan mengembalikan Anda ke layar yang mirip dengan Welcome Screen. Di sini Anda dapat dengan cepat memilih resolusi layar target berdasarkan perangkat, ukuran web, atau memasukkan nilai untuk ukuran khusus.

Setelah memilih ukuran untuk proyek Anda, Anda akan memasuki antarmuka Adobe XD. Anda akan segera melihat bahwa antarmuka dipecah menjadi tab: Desain dan Prototipe. Di tab Desain Anda akan membangun semua elemen Anda di papan tulis, dengan setiap artboard yang mewakili layar berbeda XD juga menawarkan beberapa alat gambar untuk membuat bentuk dasar atau Anda dapat mengimpor karya seni dari luar aplikasi.
Fitur yang Kuat Adobe XD menyediakan banyak fitur yang Anda harapkan dalam alat UX. Banyak alat akan akrab dari gerbang, sementara yang lain telah dirancang ulang untuk mendukung desain UX terbaik. Misalnya, Anda akan menemukan alat gambar yang berfungsi seperti aplikasi Adobe lainnya. Di sisi lain, lapisannya sedikit berbeda, sekali lagi untuk mengakomodasi bagaimana desainer UX bekerja. Anda akan melihat bahwa setiap elemen berada pada lapisannya sendiri. Lapisan berisi ikon yang menunjukkan jenis konten yang terletak pada lapisan itu apakah itu gambar, bentuk, folder, dll. Anda dengan cepat merasakan apa yang hidup di setiap lapisan. Tentu saja, Anda dapat menarik lapisan untuk mengubah pesanan mereka dan mengalihkan visibilitas dengan mengklik ikon mata, seperti yang Anda harapkan.

UX Kit
Adobe XD hadir lengkap dengan UX Kits sehingga mudah bagi Anda untuk segera mengolok-olok aplikasi asli untuk platform Apple iOS, Windows, dan Google. Untuk mengakses kit ini, cukup pilih File> Open UI Kits
Kit ini memberi Anda akses ke elemen UI standar yang ditemukan di masing-masing platform. Ini akan memungkinkan Anda untuk memvisualisasikan seperti apa aplikasi Anda di lingkungan asalnya. Anda juga dapat menggunakan beberapa elemen UI standar ini untuk menghemat waktu saat merancang prototip Anda.

Ulangi Grid
Fitur benar-benar pembunuh yang ditemukan dalam Adobe XD adalah kotak berulang. Buat satu atau lebih objek satu kali, lalu pilih benda dan aktifkan kisi ulang. Sekarang Anda akan bisa mengulangi benda-benda yang terkandung pada sumbu x dan sumbu y. Anda bahkan dapat menyesuaikan jarak antar objek dan menyesuaikan tampilan objek sebagai satu kelompok atau satu per satu. Pikirkan semua skenario yang berbeda dimana ini akan memberi otomasi tugas yang membosankan! Sebuah tabel, misalnya, atau daftar teks dan gambar. Bayangkan sebuah grid gambar untuk membuat galeri. Jenis tugas ini sebelumnya membutuhkan banyak usaha manual untuk mendapatkan penampilan yang diinginkan. Kemudahan dari kotak berulang memungkinkan Anda meluangkan lebih banyak waktu untuk mengeksplorasi opsi tata letak dan untuk melihat bagaimana tata letak Anda akan bekerja dengan lebih banyak data dengan cepat.

Simbol
Simbol dalam Adobe XD bekerja dengan cara yang sangat mirip dengan aplikasi lain seperti Illustrator atau Axure. Jika Anda memiliki objek yang ingin Anda gunakan di beberapa artboards, yang tidak biasa, Anda dapat menjadikan objek sebagai simbol. Setiap perubahan pada objek akan tercermin di tempat lain yang digunakan dalam desain. Misalnya, jika Anda perlu mengubah warna pada objek, buat saja perubahannya sekali saja, dan sudah selesai. Semua contoh akan diperbarui sepanjang desain.
Perpustakaan Cloud Kreatif Sebagai pengguna Cloud Kreatif, Anda mungkin sudah membagikan aset Anda seperti warna, gaya karakter, gambar, dan elemen lainnya di semua aplikasi kreatif Adobe Anda. Pada bulan Agustus tahun 2017, Adobe menambahkan kemampuan Adobe XD untuk dapat mengakses aset tersebut. Ini bisa menjadi penghematan waktu yang sangat besar jika Anda mendapati diri Anda menggunakan produk seperti Photoshop atau Illustrator untuk menciptakan aset untuk proyek Adobe XD Anda.

 Prototipe
Setelah selesai mendesain semua artboard Anda, Anda mungkin ingin melihat bagaimana aplikasi Anda akan berfungsi. Klik Prototype tab di pojok kiri atas dan Anda dapat mulai membuat tautan antar artboards, yang akan menampilkan layar di aplikasi. Ini adalah solusi yang sangat sederhana, namun tak ternilai dan kuat untuk melihat aplikasi Anda menjadi hidup. Untuk membuat tautan antara layar, pilih objek apa pun, dan panah muncul di sebelah kanan kotak pembatas. Anda dapat menarik dan menarik panah ini ke artboard lain untuk menghubungkannya atau mengkliknya dan memilih dari menu tarik-turun.

Pratinjau
Bila Anda menghubungkan objek dengan artboard lain, Anda dapat memilih transisi dengan mudah-in atau easy-out. Kemudian, setelah Anda menghubungkan semuanya, Anda bisa mengklik tombol Putar kanan atas untuk melihat pratinjau aplikasi. Sebagai alternatif, Anda dapat mendownload aplikasi XD untuk iPhone / Android dan melihat pratinjau pekerjaan Anda di perangkat sebenarnya secara real-time; baik dengan USB atau melalui Creative Cloud. Akhirnya, Anda dapat dengan mudah membagikan prototip Anda dengan membuat tautan langsung dari aplikasi. Begitu Anda melakukannya, rekan kerja dan pemangku kepentingan lainnya akan dapat menambahkan komentar.


Aset Ekspor
Informasi tersebut dengan cepat menuntun Anda melalui dasar-dasar aplikasi. Anda akan belajar menyelesaikan tugas penting seperti membuat papan nama, mengimpor gambar, menggunakan kisi ulang, dan cara menghubungkan artboards bersama untuk prototip. Jika Anda adalah pengguna Cloud Kreatif, banyak elemen akan masuk akal. Setelah selesai meninjau proyek tutorial, sekarang saatnya membuat yang baru. Anda bisa melakukan ini dengan memilih File> New. Ini akan mengembalikan Anda ke layar yang mirip dengan Welcome Screen. Di sini Anda dapat dengan cepat memilih resolusi layar target berdasarkan perangkat, ukuran web, atau memasukkan nilai untuk ukuran khusus.

Setelah memilih ukuran untuk proyek Anda, Anda akan memasuki antarmuka Adobe XD. Anda akan segera melihat bahwa antarmuka dipecah menjadi tab: Desain dan Prototipe. Di tab Desain Anda akan membangun semua elemen Anda di papan tulis, dengan setiap artboard yang mewakili layar berbeda XD juga menawarkan beberapa alat gambar untuk membuat bentuk dasar atau Anda dapat mengimpor karya seni dari luar aplikasi.
Fitur yang Kuat, Adobe XD menyediakan banyak fitur yang Anda harapkan dalam alat UX. Banyak alat akan akrab dari gerbang, sementara yang lain telah dirancang ulang untuk mendukung desain UX terbaik. Misalnya, Anda akan menemukan alat gambar yang berfungsi seperti aplikasi Adobe lainnya. Di sisi lain, lapisannya sedikit berbeda, sekali lagi untuk mengakomodasi bagaimana desainer UX bekerja.

Anda akan melihat bahwa setiap elemen berada pada lapisannya sendiri. Lapisan berisi ikon yang menunjukkan jenis konten yang terletak pada lapisan itu apakah itu gambar, bentuk, folder, dll. Anda dengan cepat merasakan apa yang hidup di setiap lapisan. Tentu saja, Anda dapat menarik lapisan untuk mengubah pesanan mereka dan mengalihkan visibilitas dengan mengklik ikon mata, seperti yang Anda harapkan. Adobe XD hadir lengkap dengan UX Kits sehingga mudah bagi Anda untuk segera mengolok-olok aplikasi asli untuk platform Apple iOS, Windows, dan Google. Untuk mengakses kit ini, cukup pilih File> Open UI Kits Kit ini memberi Anda akses ke elemen UI standar yang ditemukan di masing-masing platform. Ini akan memungkinkan Anda untuk memvisualisasikan seperti apa aplikasi Anda di lingkungan asalnya. Anda juga dapat menggunakan beberapa elemen UI standar ini untuk menghemat waktu saat merancang prototip Anda.




No comments:

Post a Comment

jualo