Media Pengembangan Web & App | by APPKEY

Desain Designer tools Pemula Harus Baca! Adobe XD Trisets untuk Anda yang...

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

-

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  InVision atau Adobe XD? | Review Software UI/UX Terbaik

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  Cara Membuat Ikon Aplikasi yang Sempurna

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 Mewujudkan Pengalaman Onboarding Terbaik pada Aplikasi

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  Mudah dan Cepat, Inilah Cara Membuat Skema Warna Sendiri

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  Tidak Perlu Pusing Lagi! Ini Dia Platform Terbaik untuk Temukan Inspirasi Desain Web

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

Subscribe Sekarang

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

Blog Post Ranking 10

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

Proses Komunikasi: Encoding dan Decoding

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

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

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

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Apa Itu Cache Memory? Pengertian dan Fungsinya

Apa itu cache memory? Orang yang setiap hari berinteraksi dengan internet, istilah cache tentu saja bukan lagi istilah yang...

Layout adalah : 4 Prinsip Dasar Desain Layout

Desain layout adalah salah satu bagian dari seni kita semua tahu,  untuk bisa menampilkan seni dengan baik, kita harus...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya