Media Pengembangan Web & App | by APPKEY

DesainDesigner toolsPemula Harus Baca! Adobe XD Trisets untuk Anda yang...

Pemula Harus Baca! Adobe XD Trisets untuk Anda yang Ingin Menggunakan Adobe XD

-

Last Updated on October 26, 2020 by

Belum menggunakan Adobe XD? Adobe XD Trisets akan dapat digunakan segera Anda sebagai pemula membaca artikel ini.

Apa Itu Adobe XD?

 

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.

Artikel Terkait  Cara Membuat Desain Web yang Profesional untuk Pemula

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

  1. Mulai gratis
  2. Mulai cepat dan operasikan, sehingga Anda dapat menggunakannya tanpa mengkhawatirkan spesifikasi PC

2. Buat Artboard

 

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

  1. Buat ukuran layar yang sesuai hanya dengan memilih dari templat

2. Ukuran layar juga fleksibel. Ideal untuk halaman yang panjang seperti smartphone

Artikel Terkait  Mengenal Perbedaan CLI dan GUI yang Wajib Dipahami Programmer

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

  1. Operasi sangat sederhana! Anda dapat dengan cepat belajar cara menggunakan
  2. Jika Anda menggunakan kit UI, Anda dapat dengan mudah dan indah menggambar kabel bahkan jika Anda bukan seorang desainer! Dan gratis
Artikel Terkait  Cara Membuat Icon Agar Komputermu Tidak Terlihat Membosankan

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

  1. 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.

Artikel Terkait  User Interface adalah : Rekomendasi Design Tools Wajib untuk Desainer UI/UX

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

  1. Anda dapat mengatur tautan internal ke tombol atau teks dan menyelesaikan “Di mana Anda terbang saat menekan tombol ini?”
  2.  Buat sitemap dan gunakan untuk melacak kemajuan
Artikel Terkait  20 Plugin Figma Terbaik yang Wajib UI Designer Gunakan!

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

  1. Ketika ada beberapa editor, pertukaran “Bisakah Anda mendapatkan data asli?”, dapat dikurangi
  2. Karena data terbaru selalu ada di cloud, pertukaran “Bisakah Anda mendapatkan data .xd terbaru?
  3. 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

  1. Bagikan pratinjau di browser
  2. Kata sandi dapat diatur, sehingga keamanan terjamin
  3. 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.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya