Belajar dengan Prototipe Sederhana Part3

Panduan Cerdas

Panduan Cerdas awalnya diperkenalkan di Sketch dan kemudian diadopsi di Photoshop setelah fitur menjadi hit. Adobe XD menjelaskannya di bagian bantuan mereka: “Saat Anda memindahkan objek atau artboard, gunakan Panduan Cerdas untuk menyelaraskan objek atau artboard yang dipilih dengan objek atau artboards lain. Penjajaran didasarkan pada geometri objek dan artboards. Panduan muncul saat objek mendekati tepi atau titik tengah dari objek lain. "

 

Mari saya mulai dengan mengatakan bahwa objek adalah istilah umum yang digunakan untuk menggambarkan lapisan bentuk, lapisan teks, grup atau bitmap pada kanvas. Pada dasarnya, semua jenis lapisan atau grup adalah objek.

 

Panduan adalah isyarat visual yang mengilustrasikan bagaimana benda-benda sejajar satu sama lain - mereka dapat menampilkan jarak antara dua lapisan, atau menunjukkan apakah suatu lapisan telah terpaku pada batas-batas benda lain atau tepi artboard. Adobe XD akan mencoba mengantisipasi di mana Anda ingin memindahkan layer, dan secara otomatis beralih ke lokasi itu ketika Anda mendekatinya, sambil menunjukkan seberapa jauh Anda telah meninggalkannya sampai Anda mencapainya. Anda dapat menentukan jarak secara manual dengan memilih layer pertama, menahan Option / Alt, dan mengarahkan kursor ke layer kedua.

 

Perataan Manual

Mari kita mulai dengan meratakan layer secara manual, jadi kami memahami perbedaannya. Beberapa saat yang lalu kami mengelompokkan dua lapisan teks menjadi satu - pilih keduanya sekali lagi (tahan Shift sembari mengklik) dan klik tombol Align Center (Secara horizontal) di Inspektur, atau gunakan pintasan: Cmd + Control + C (Shift + C di Windows).

2-9. Lapisan yang berpusat secara manual

Panduan Cerdas Saat Memindahkan Lapisan

Sekarang pilih grup yang sebenarnya. Anda dapat menggunakan alat Pilih (pintasan keyboard: V) dan memilih grup dengan mengkliknya, atau menggunakan tombol Esc untuk melintasi wadah induk, yang merupakan grup. Pindahkan sampai dua hal terjadi:

1.    Muncul 28px di bawah formulir

2.    Ini terkunci ke tengah-mati artboard secara horizontal

Anda akan tahu bahwa Anda telah melakukan ini dengan benar karena garis-garis berwarna dari panduan cerdas akan menggambarkan apa yang telah diambil oleh objek (yang akan menjadi pusat deadboard artboard, seperti yang ditunjukkan oleh garis vertikal yang muncul). Anda juga akan melihat jarak relatif antara grup fungsi pencarian dan grup teks sambutan (seperti yang ditunjukkan oleh nilai numerik).

2-10. Menyelaraskan dengan panduan cerdas

Panduan Cerdas Dengan Opsi / Alt-Tahan

Pilih lapisan paling bawah dari grup ini, tahan Option (Alt di Windows), lalu arahkan kursor ke atas lapisan paling atas. Ini adalah pendekatan manual (juga dikenal sebagai Option / Alt-hold) untuk mengukur jarak relatif antara dua lapisan. Anda dapat memindahkan layer seperti biasa sambil menahan opsi, jadi gunakan tombol panah ↑ → ↓ ← sampai jaraknya 5px

2-11. Panduan dengan opsi / alt-tahan

Mari kita gunakan apa yang telah kita pelajari untuk menambahkan beberapa elemen lagi. Sejauh ini kami telah melihat lapisan bentuk pertama, lapisan teks, pengelompokan lapisan, penyelarasan, panduan cerdas, dan beberapa dasar lainnya. Mari kita rekap sebagian dari itu dan tutup layar ini, mulai dengan komponen navigasi bawah dengan empat tautan.

Buat persegi panjang dengan panjang 345 x 44px (44px, lebar dan tinggi, adalah ukuran minimum untuk target ketukan - ketuk target yang lebih kecil dari ini sangat sulit bagi pengguna untuk mengetuk). Gunakan Option / Alt-Hold untuk memastikan bahwa persegi panjang memiliki margin 15px di tiga sisi.

2-12. Merekam panduan cerdas

 Sekarang kita memiliki bentuk dasar komponen navbar.

Gambarlah persegi panjang lain dengan lebar 25% dari total lebar navbar (karena kita harus membuat empat tautan di dalam navbar, di mana setiap tautan adalah 25% dari total lebar). Mulai gambar Anda dari sudut kiri atas navbar's rectangle. Anda akan melihat panduan pintar lagi, menunjukkan bahwa gambar Anda akan patah dari sudut lapisan itu, yang merupakan apa yang kita inginkan.

2-13. Menggambar dengan snap

Dengan alat Ellipse (E), gambarlah lingkaran 14 x 14px (tahan Shift untuk mempertahankan rasio aspek) dan kelompokkan bersama-sama tautan dan lingkaran navbar, yang menggantikan ikon navbar untuk saat ini. Gandakan grup ini tiga kali dan seret masing-masing secara horizontal untuk mendistribusikannya secara merata di dalam navbar. Terakhir, kelompokkan seluruh komponen.

2-14. Membentuk komponen

Mengganti Nama Layers

Kami sekarang memiliki lo-f mockup dari navbar, tetapi kami juga memiliki banyak objek yang diberi nama "persegi panjang" dan "grup", yang membingungkan jika Anda mencoba menemukan lapisan dalam daftar lapisan.

Pada saat ini tidak ada jalan pintas untuk mengganti nama layer, jadi Anda harus mengklik dua kali pada nama layer di daftar layer, dan ganti nama itu dengan mengetikkan nama baru untuk layer tersebut. Mengganti nama layer membantu Anda menjaga kebersihan dalam desain Anda, dan membuat daftar layer terlihat jauh lebih membingungkan.

2-15. Mengganti nama layer

Tutup layar ini dengan membuat tiga layer lagi:

1. Sebuah persegi panjang, berganti nama menjadi "Logo BG"

2. Layer teks yang disebut "DISHY"

3. Grup yang berisi dua layer ini, diubah namanya menjadi "Logo"

Pusatkan grup secara horizontal / vertikal di ruang atas.

2-16. Mengisi layar pertama

Fast-forward

Maju cepat 30 menit dan kami memiliki layar tambahan. Ketika pengguna telah mencari jenis masakan menggunakan formulir di layar pembuka, mereka kemudian diundang untuk mengatur lokasi mereka sehingga aplikasi dapat mengembalikan hasil yang relevan dengan lokasi pengguna.

Dalam bab berikutnya kami akan membuat prototipe / mendemonstrasikan pengguna ini mengalir, tetapi untuk sekarang mari kita coba mempercantik layar ini sambil mempelajari tentang alat desain Adobe XD lainnya. Dari arsip, ambil armada dukungan bernama C2.xd untuk melanjutkan.

 

2-17. Maju cepat

 Ulangi Grid

Ulangi kisi memungkinkan Anda untuk mengulangi objek secara horizontal dan / atau vertikal - ini adalah cara yang jauh lebih cepat untuk menduplikasi dan mendistribusikan objek sehingga Anda tidak perlu menggandakan dan memposisikannya secara manual. Pilih grup "Lokasi Terbaru" dari papan seni "Tetapkan Lokasi" yang saya tambahkan ke fle dukungan, dan tekan tombol "Ulangi Kotak" di inspektur, atau gunakan pintasan keyboard Cmd + R (Ctrl + R di Windows) .

2-18. Buat grid ulangi

Anda akan melihat bahwa komponen ini sekarang memiliki dua pegangan yang dapat disentuh. Tarik yang tepat untuk mengulangi komponen secara horizontal, dan yang bawah untuk mengulanginya secara vertikal. Dalam hal ini, kami ingin mengulanginya secara vertikal, jadi maju dan lakukan itu. Perhatikan bahwa tidak masalah jika kontennya meluap di atas artboard; pada kenyataannya, pada bab berikutnya kita akan mempelajari semua tentang prototipe yang dapat digulir.

2-19. Komponen berulang

Jika Anda menggunakan kursor untuk mengarahkan kursor ke ruang di antara objek yang diulang, Anda akan dapat mengklik dan menyeret ruang itu untuk menyesuaikannya. Sesuaikan jarak ke 20px (Anda akan melihat penyesuaian jarak berlaku untuk semua objek yang diulang).

2-20. Menyesuaikan ruang antara objek yang diulang

Read More

Belajar dengan Prototipe Sederhana Part2

 Menentukan Ukuran Font

Saat merancang layar sederhana, Anda harus sangat memperhatikan ruang. Mengapa? Karena Anda dapat secara besar-besaran melebih-lebihkan atau meremehkan efek menyisipkan gambar, menentukan font, dan membuat gaya di kemudian hari (ini adalah tahap yang kami sebut prototyping high-fidelity). Akan sangat menghancurkan untuk menyadari bahwa desain yang indah yang telah kami tiru, yang menawarkan pengalaman pengguna yang luar biasa, tidak terlihat atau merespons dengan sangat baik begitu visual telah ditambahkan.

Sementara low-fidelity mockup dianggap dasar / minimal, kita perlu agak realistis dengan konsep ruang. Ketika datang ke menggambar bentuk yang saya maksud nilai lebar dan tinggi, tetapi ketika datang ke teks yang saya maksud adalah ukuran font. Jika Anda pikir Anda akan menggunakan font sans-serif sederhana dalam desain akhir Anda, maka tetap menggunakan font sistem sans-serif seperti Helvetica di mockup low-f Anda.

Membuat Layers Teks

Mulailah langkah berikutnya dengan mengetuk T untuk Teks pada keyboard dan mengklik kanvas tempat Anda ingin teks tersebut muncul. Kami ingin lapisan teks ini menjadi cairan (yaitu, untuk mengubah ukuran secara otomatis tergantung pada nilai teks), jadi tidak perlu menggambar lapisan ini. Lapisan teks fluida memiliki atribut lebar dan tinggi dinonaktifkan di inspektur. Anda harus membungkus konten secara manual dengan menambahkan jeda baris menggunakan Return (Enter in Windows).

Adapun nilai teks, ketik "Makanan Laut", karena ini adalah aplikasi makanan.

Terus mengetuk Esc sampai Anda kembali ke alat bergerak, dan seret-luruskan layer teks ke arah kiri bidang input.

Secara default, font harus Helvetica Neue, dan beratnya harus Reguler, tetapi Anda harus mengubah ukuran font menjadi 14px menggunakan inspektur. Saat ini, warnanya tidak masalah.

Helvetica Neue adalah font sistem yang akan sangat mirip dengan font sans-serif yang akan kita pilih nanti; 14px adalah ukuran font yang tepat mengingat penggunaannya. Ingat, ruang dan ukuran adalah fokus Anda di sini, bukan warna, font, dan estetika lainnya.

2-7. Lapisan teks cair

Sekarang mari kita tambahkan beberapa teks yang menjelaskan apa yang dilakukan aplikasi, karena ini adalah layar pembuka. Tekan T untuk Teks lagi, tapi kali ini gambarkan bidang teks menggunakan mouse sehingga kita dapat mengedit atribut lebar dan tinggi. Kami akan memperkirakan lebarnya pada 190px dan membiarkan teks berjalan selama dua baris. Buat beberapa teks boneka lorem ipsum untuk saat ini. Teks akan secara otomatis membungkus ke baris kedua karena kita menggambar lapisan teks ini dan membelokkan lebar, sebagai lawan membuat lapisan fluida.

Untuk saat ini Anda dapat menyisipkan lapisan teks ini di mana saja di sepertiga bawah layar, tetapi pastikan ukuran fontnya 24px - ini adalah judul utama layar kami, jadi itu perlu menonjol.

Juga, tekan tombol rata tengah di inspektur.

2-8. Memperbaiki layer teks

Layer Duplikat

Anda dapat menduplikasi layer dengan pintasan keyboard Cmd + D (Ctrl + D di Windows), tetapi juga dengan menahan Option (Alt di Windows) dan menyeret layer, secara efektif membuat salinan. Pilih salah satu metode dan duplikat layer teks heading utama, lalu ubah ukuran font layer teks baru ini menjadi 14px - ini akan digunakan sebagai teks sekunder.

Gunakan Inspektur untuk Mengatur Ketinggian yang Cocok

Ingat, jika Anda menggambar lapisan teks, atribut lebar atau tinggi tidak akan cair, jadi pastikan layer teks Anda memiliki ketinggian yang sesuai dengan menggunakan inspektur.

Group Layer

Lapisan pengelompokan memungkinkan kita untuk menggabungkan lapisan sehingga mereka dapat dipindahkan bergantung satu sama lain (atau hanya karena lebih bersih / rapi untuk menggabungkan lapisan terkait). Untuk Menggunakan Inspektur untuk Mengatur Ketinggian yang Cocok Ingat, jika Anda menggambar lapisan teks, atribut lebar atau tinggi tidak akan cair, jadi pastikan layer teks Anda memiliki ketinggian yang sesuai dengan menggunakan inspektur. Mempelajari Dasar-Dasar dengan Prototyping Low-Fidelity 24contoh, jika kita ingin memindahkan input bidang, termasuk lapisan teks dan tombol kirim, kita dapat memilih semua lapisan sekaligus (klik masing-masing sambil menahan Shift) dan gunakan pintasan keyboard Cmd + G (Ctrl + G di Windows) untuk mengelompokkannya bersama.

Anda dapat memisahkan grup lapisan dengan memilih grup dan menekan Cmd + Shift + G (Ctrl + Shift + G di Windows).

Saat kami di sini, ulangi langkah-langkah ini dengan lapisan teks yang menjelaskan apa yang dilakukan aplikasi. Pengelompokan harus menjadi kebiasaan, karena itu adalah cara yang rapi untuk menjaga desain Anda teratur saat berkembang.

Klik melalui

Klik dua kali atau Cmd + klik untuk memilih lapisan di dalam grup - ini dikenal sebagai "klik-tayang".

Read More

Belajar dengan Prototipe Sederhana Part1

Pada tutorial mengenal interface Adobe XD, dan bahkan melihat ke shortcut keyboard dari alat yang paling umum. Ini harus memberi kita dasar yang baik untuk bekerja ketika kita mengeksplorasi lebih banyak Adobe XD, kemudian melanjutkan untuk merancang maket aplikasi sederhana.

Layar Selamat Datang

Ketika Anda pertama kali membuka Adobe XD, seperti pada sebagian besar aplikasi desain, Anda akan melihat layar selamat datang yang meminta Anda untuk memilih kit UI yang sudah jadi, atau memulai desain baru dari awal (dengan memilih artboard). Anda juga dapat memilih untuk membuka kembali file yang ada.

UI Kits

Seperti yang disebutkan dalam tutorial sebelumnya, Adobe XD menawarkan kit UI untuk Apple iOS, Google Material, dan Microsoft Windows - kit ini berisi elemen UI asli yang ditemukan dalam sistem operasi, dan Anda dapat menggunakannya untuk merancang maket yang lebih cepat daripada membuat ulang elemen ini sendiri. Jika Anda membuat aplikasi iOS, misalnya, Anda dapat menggunakan kit Apple iOS untuk mengekstrak komponen desain asli, seperti bilah status atau tombol sakelar.

2-1. Adobe XD UI kits

Memilih Artboard

Selama buku ini kita akan merancang aplikasi iOS pemesanan makanan menggunakan iPhone 7 ukuran standar sebagai basis. Jadi pilih iPhone 6/7 dari daftar artboards, dan mari mulai prototipe.

2-2. Memilih artboard

Kembali ke Proyek yang Ada

Jika Anda sudah memiliki desain yang sedang Anda kerjakan, Anda dapat menekan Cmd + O (Ctrl + O di Windows) untuk menemukan dan membukanya. Atau cukup pilih dari daftar Recent Files, jika Anda belum lama membukanya.

2-3. Membuka file

Low-Fidelity Prototype

Dasar Prototipe Sederhana adalah tentang mengkonseptualisasikan gagasan dalam bentuk paling dasar tanpa tipografi, warna, atau estetika apa pun. Mengapa membuang waktu memikirkan visual ketika Anda belum memantapkan tata letak dan pengalaman pengguna?

Tujuan kami saat ini adalah menggunakan Adobe XD untuk membuat ide yang mungkin sudah Anda jelajahi dengan pena dan kertas kuno yang bagus. Setelah itu, ketika kami memiliki mockup sederhana di Adobe XD, kami akan menggunakan alat prototyping untuk menunjukkan aliran pengguna (bagaimana layar terhubung ke layar lain), dan kemudian meminta umpan balik.

Selama buku ini, mockup sederhana ini akan berkembang menjadi prototipe yang berfungsi dan dinamis, kemudian menjadi prototipe high-fdelity dengan warna, ikon, font, dll.

Mockup low-fidelity kami akan sangat didasarkan pada kit UI resmi Adobe XD, Dishy, yang dapat Anda unduh di sini jika Anda ingin melihatnya sekarang.

 

Memulai dengan Shape Layer

Mari kita mulai dengan layar selamat datang aplikasi kami. Ini akan terdiri dari logo, kalimat pengantar, dan beberapa komponen yang dapat ditindaklanjuti seperti bilah navigasi dan bilah pencarian.

 

Kami akan mulai dengan menggambar beberapa persegi panjang yang akan membatasi struktur dasar layar kami, di mana fungsi pencarian akan menjadi fokus. Tekan R untuk memilih alat bentuk Rectangle.

 

Sekarang, dengan menggunakan mouse, gambar persegi panjang hingga mencapai lebar penuh artboard (375px), dan tinggi 445px. Anda dapat memeriksa nilai-nilai ini menggunakan inspektur di sisi kanan.

2-4. Membuat persegi panjang

Snaping Layer ke Poin Tertentu

Jika Anda mulai dengan mengarahkan mouse ke sudut kiri atas artboard, mouse akan secara otomatis beralih ke lokasi tertentu, dan ketika Anda menyeret ke arah tepi kanvas, tepi persegi panjang akan membentur juga di sana (dan lapisan lainnya, jika ada tersedia). Dengan menjentikkan, Adobe XD dengan asumsi Anda akan ingin menyelaraskan lapisan dari (atau ke) lokasi tertentu itu.

Merancang Bersama Inspektur

Jika Anda merasa sulit untuk membuat ketinggian yang tepat 445px (ini bisa sulit dengan beberapa tikus), gunakan inspektur untuk menyatakan ketinggian secara manual dengan memasukkan nilai yang tepat ke dalam bidang (H bidang dalam kasus ini). Anda seharusnya tidak menemukan masalah dengan lebar feld (W) karena Adobe XD akan secara otomatis menjentikkan bentuk ke tepi artboard.

Menggunakan Tombol Panah

Anda juga dapat menggunakan tombol panah untuk mengubah nilai - tombol ↑ akan meningkatkan nilainya sebesar 1, dan tombol ↓ akan menguranginya sebesar 1. Jika Anda menahan Shift saat menggunakan tombol panah, nilainya akan bertambah atau berkurang sebesar 10 bukannya 1.

Sekarang mari kita buat dua persegi panjang lagi. Satu akan menyerupai bidang pencarian dan yang lainnya tombol kirim. Mari kita mulai dengan tombol kirim.

Buat persegi panjang lain, tapi kali ini sebagai persegi 73 x 73px - tahan Shift sambil menggambar bentuk untuk mempertahankan aspek rasio.

Seret sehingga terkunci ke sudut kanan bawah persegi panjang lainnya, tetapi pertama-tama, ketuk Esc untuk tidak fokus dari lapisan dan kemudian Esc sekali lagi untuk kembali ke alat pindahkan.

2-5. Lebih banyak persegi panjang

Ulangi langkah ini dengan persegi panjang lain - 304 x 73px - dan seret ke kiri bawah persegi panjang asli kami yang lebih besar.

2-6. Bahkan lebih persegi panjang

 

Layer Teks

Saat ini tidak jelas apa yang kita miliki di sini. Kami tahu bahwa ini adalah fungsi pencarian, tetapi siapa pun yang menguji prototipe kami tidak akan menyadarinya, jadi penting untuk menambahkan konteks ke mockup low-fidelity. Kami pergi untuk minimalis, tidak kabur. Dengan mengingat hal itu, mari kita tambahkan beberapa teks ke bidang input.

Read More

Mengenal Interface Adobe XD

 

Pada pembahasan yang pertama tutorial kali ini Anda akan membiasakan diri dengan antarmuka XD sebelum mengambil pendekatan yang sangat langsung untuk prototipe rendah kesetiaan. Semua tangkapan layar dalam buku ini diambil dari versi MacOS dari Adobe XD.

Namun, penelusuran (dan pintasan) juga berlaku untuk Windows. Jika Anda beralih dari Sketch, Anda akan melihat banyak kesamaan dalam Adobe XD (baik secara visual maupun fitur). Meskipun jika Anda beralih dari Photoshop, Adobe XD masih akan terasa seperti aplikasi Adobe dalam beberapa hal, bahkan jika itu tidak terlihat seperti itu, atau beberapa fitur tampaknya agak asing bagi Anda. Inilah perbandingan cepat XD (di atas) dan Sketsa (di bawah).

Sebelum Memulai

Anda dapat mengunduh Adobe XD melalui Creative Cloud seperti aplikasi Adobe lainnya. Jadi, jika Anda sudah memiliki langganan Creative Cloud, Anda siap. Jika tidak, Anda dapat memulai uji coba Creative Cloud Anda di sini.

 

Adobe XD Masih Dalam Pengembangan Aktif

Perlu dicatat bahwa Adobe secara aktif mengembangkan XD. Ini sudah merupakan alat yang sangat serbaguna dan kuat, tetapi fitur baru terus ditambahkan dalam pembaruan bulanan. Penting juga untuk dicatat bahwa, pada saat penulisan ini, versi aplikasi Windows belum memiliki semua fitur versi macOS, tetapi tim Adobe bekerja keras untuk mendapatkan kedua versi pada par. Tempat terbaik untuk tetap mengikuti perkembangan XD terbaru adalah blog Adobe resmi.

 

Ruang kerja

Ruang kerja Anda terdiri dari kanvas yang tidak terbatas dan artboards di dalamnya. Artboards biasanya mewakili satu halaman web atau satu layar aplikasi dalam desain Anda, di mana ukurannya tergantung pada dimensi jendela browser atau layar perangkat yang Anda rancang. Ruang kerja Anda dapat memuat artboards sebanyak yang diperlukan, meskipun semuanya berukuran berbeda.

 

Layar Selamat Datang

Saat Anda membuka aplikasi, Anda akan melihat layar selamat datang yang meminta Anda menentukan jenis artboard yang ingin Anda mulai. Merupakan hal yang biasa untuk menunjukkan seperti apa desain Anda pada layar desktop dan perangkat yang berbeda, secara efektif menciptakan desain adaptif (yaitu, desain yang beradaptasi dengan perangkat / layar yang pernah dilihatnya). Ini juga diterima secara luas bahwa Anda harus mulai dengan layar yang paling kecil terlebih dahulu (jika Anda mendesain untuk web, ini dikenal sebagai pendekatan mobile-first untuk mendesain)

Mengapa Mobile-First

Mengapa? Karena mendesain pada layar yang lebih kecil memaksa Anda untuk mendesain dengan kesederhanaan. Jauh lebih sulit untuk memperkecil desain untuk layar yang lebih kecil daripada meningkatkan desain untuk layar yang lebih besar. Jika Anda membuat desain web yang responsif, Anda akan mulai dengan artboard seluler dan bekerja hingga tablet dan kemudian layar desktop. Jika Anda merancang aplikasi iOS, Anda akan mulai dengan iPhone terkecil dan bekerja hingga iPad, lalu iPad Pro.

 

Selama buku ini kami akan merancang dan membuat prototipe aplikasi iOS, jadi pilih iPhone 6/7 untuk memulai.

Inilah artboard pertama kami!

UI Siap Pakai

Seperti Sketch, Adobe XD memiliki tiga kit UI pre-made - Apple iOS, Google Material dan Microsoft Windows. Anda dapat mengekstrak elemen desain OS asli dari ini untuk digunakan dalam maket Anda, meskipun kami akan fokus pada merancang UI khusus.

 

Kanvas

Seperti yang saya sebutkan, kanvas tidak terbatas. Semua artboards akan terlihat di atas kanvas sekaligus, sehingga mudah untuk membolak-balik antara layar yang berbeda. Setiap benda yang tidak ada di dalam artboard secara otomatis dimasukkan ke dalam apa yang disebut pasteboard - artboard terpisah untuk objek yang tersebar.

Artboards

Ketika Anda perlu membuat artboards baru, ketuk A dan pilih perangkat dari inspektur di sisi kanan. Jika Anda membutuhkan artboard ukuran khusus (mungkin Anda ingin memiliki ikon aplikasi di dokumen yang sama), ketuk A dan keluarkan artboard menggunakan mouse, daripada memilih satu dari inspektur.

Dalam beberapa kasus, konten Anda akan melebihi dimensi layar. Jika Anda memilih artboard dan menarik pegangan Anda akan dapat mengubah ukurannya, tetapi Anda juga akan melihat garis biru putus-putus, yang menunjukkan batas-batas viewport (konten di atas-lipat). Apa pun di bawah flip diakses dengan menggulir, yang dapat Anda lakukan saat menguji prototipe di perangkat nyata. Kami akan mengeksplorasi itu nanti di buku!

Anda dapat mengubah ketinggian viewport kapan saja menggunakan inspektur, dan Anda juga dapat mematikan viewport sepenuhnya jika Anda tidak ingin layar dapat digulir dalam mode pratinjau langsung.

 

Selama buku ini, kami akan membuat banyak artboards, yang akhirnya diakhiri dengan hasil akhir sebagai berikut:

Ruang Kerja Prototipe

Adobe XD memiliki ruang kerja sekunder yang sama pentingnya yang disebut ruang kerja Prototipe, dan ini adalah tempat kami:

1.    Tautkan layar bersama dengan transisi

2.    Buat demonstrasi video dari desain kami

3.    Prototipe (uji) desain di browser atau perangkat

4.    Bagikan prototipe dengan rekan tim untuk meminta pendapat dan saran

 

Prototipe adalah tempat Adobe XD mengalahkan Photoshop dan Sketch, dan kami akan menggunakan ruang kerja ini hampir sesering ruang kerja Desain.

 

Prototyping bukan tentang menggabungkan beberapa transisi mewah untuk mengesankan klien dan rekan tim kami; membuat prototipe dan mengujinya dalam perangkat nyata merupakan bagian integral dari pembuatan UX yang luar biasa. Ini membantu kami mengidentifikasi kekurangan yang biasanya tidak kami temukan hanya dengan melihat desainnya.

 

 

Toolbar

Seperti di Photoshop, toolbar muncul di sisi kiri, jadi mari kita jalankan melalui alat, bersama dengan shortcut keyboard caranya (sama antara di MacOS maupun Windows):

§  Pindahkan (M)

§  Persegi Panjang (T)

§  Elips (E)

§  Line (L)

§  Pena (p)

§  Teks (t)

§  Artboard (A)

§  Zoom-In (Z)

Gunakan Shortcut

Saya menemukan bahwa cara pintas keyboard zoom-in dan zoom-out lebih mudah daripada menggunakan alat zoom atau toolbar aplikasi, yaitu Cmd + dan Cmd - pada macOS dan Ctrl + dan Ctrl - pada Windows.

Daftar Layer

Di Adobe XD, daftar lapisan muncul di sisi kiri ketika Anda menggunakan pintasan keyboard Cmd + Y (Ctrl + Y di Windows), atau ketika Anda mengklik ikon daftar lapisan di sudut kiri bawah jendela aplikasi . Photoshop, secara default, selalu menampilkan daftar layer di sisi kanan, tetapi Adobe mengambil sedikit inspirasi dari Sketch yang satu ini.

Lapisan adalah komponen terkecil yang membentuk desain Anda. Lapisan dapat berupa lapisan bentuk, lapisan teks, lapisan bitmap, dll.

 

Di sinilah Anda akan melihat hierarki pohon artboards, grup, dan lapisan Anda. Tetapi apa yang membuat antarmuka ini begitu istimewa, dibandingkan dengan aplikasi desain lainnya, adalah bahwa daftar lapisan hanya menampilkan konten dari artboard yang saat ini dipilih, yang mengurangi gangguan. Anda hanya melihat apa yang perlu Anda lihat.

Inspektur Properti

Ketika Anda perlu menata layer, inspektur adalah teman Anda. Di sinilah Anda mendefinisikan latar belakang, flls, batas, jari-jari perbatasan, bayangan, lebar, ketinggian, derajat rotasi, dan sebagainya. Anda juga dapat mengaktifkan Ulangi Kotak dari sini, serta menentukan operasi penyelarasan dan boolean. Seperti yang mungkin Anda lihat sebelumnya, ada pengaturan yang unik untuk artboards dan hanya muncul ketika artboard dipilih (dan sama untuk teks).

 

Jangan khawatir, kita akan belajar cara menggunakan semua fitur ini di bab berikut.

Toolbar Aplikasi

Selain dari dropdown zoom, toolbar ini sebagian besar berkaitan dengan alat prototyping. Di sini Anda dapat beralih antara ruang kerja Desain dan Prototipe, sambungkan ke perangkat seluler (untuk menguji arus dan interaksi pengguna), pratinjau prototipe dalam Adobe XD sendiri, atau bagikan prototipe untuk menerima umpan balik dan komentar.

Dalam enam bab yang akan datang, kita akan belajar semua tentang membuat prototipe dengan Adobe XD, sambil merancang aplikasi sampel. Tetapi jika Anda tidak suka belajar langsung, Anda masih bisa mengikuti kami dalam perjalanan menggunakan screenshot di buku ini. Ini sepenuhnya terserah Anda!

 

Read More

Sekilas Mengenai Adobe XD

 

Sekilas Mengenai Adobe XD

Adobe Experience Design CC (atau lebih dikenal dengan Adobe XD) adalah aplikasi desktop minimalis untuk desainer yang perlu membuat :

1. Desain Antarmuka Pengguna

2. Alur dan interaksi pengguna prototipe

3. Ekspor aset gambar untuk pengembangan aplikasi dan situs web

Meskipun Anda dapat mencapai ketiga hal ini (dengan satu atau lain cara) menggunakan dua aplikasi desain terbesar di pasaran saat ini - Photoshop dan Sketch - Adobe XD adalah satu-satunya alat yang menawarkan fungsionalitas desain dan prototyping secara asli, dan itulah mengapa dengan cepat menjadi pesaing utama di ruang desain. Adobe XD adalah segalanya yang dibutuhkan desainer, langsung dari tools box.

 

Mengapa Adobe XD Ada

Bohemian Coding mengembangkat Sketsa karena desainer antarmuka pengguna membutuhkan aplikasi desain yang berfokus pada kebutuhan desainer antarmuka pengguna. Karena Adobe Photoshop adalah alat desain multi-disiplin (awalnya ditujukan untuk fotografer), aplikasi ini memiliki banyak fitur yang tidak relevan bagi perancang antarmuka pengguna. Namun, sementara Sketch menyederhanakan pengalaman mendesain, pembuatnya lalai membuat versi aplikasi Windows, juga tidak menyertakan alat prototyping (Sketch memerlukan plugin pihak ketiga untuk ini).

 

Adobe membuat Adobe XD untuk memasuki kembali kompetisi - dengan menawarkan pengalaman minimalis yang sama seperti Sketch, tetapi dengan alat tambahan yang Sketch belum perkenalkan (yaitu, alat prototyping), dan dengan merilis versi Windows (yang menurut Bohemian Coding akan tidak pernah melakukan). Diasumsikan bahwa bahkan Adobe merekomendasikan bahwa perancang antarmuka pengguna harus beralih dari Adobe Photoshop ke Adobe XD - tetapi bagaimana dengan pengguna Sketch? Mari kita lihat sebentar.

 

Photoshop vs. Sketch vs. Adobe XD

Memilih aplikasi bukan tentang yang mana yang terbaik. Itu tergantung pada kebutuhan pribadi Anda, dan apa yang sudah Anda kenal.

Photoshop, misalnya, sangat multi-disiplin, dan banyak alat ditujukan untuk para ahli fotografi dan mereka yang perlu memanipulasi gambar bitmap. Desainer UI tidak membutuhkan sebagian besar fitur yang ditawarkan Photoshop, itulah sebabnya Adobe berusaha membuat aplikasi desktop yang didedikasikan untuk membuat antarmuka pengguna.

Sketch, di sisi lain, secara khusus ditujukan untuk desainer UI, tetapi tidak tersedia untuk Windows, juga tidak menawarkan alat prototyping secara asli, yang keduanya dilakukan oleh Adobe XD. Pengguna sketsa harus mengunduh plugin untuk memperpanjang alur kerja mereka. Jadi, jika Anda sudah menjadi pengguna InVision, Marvel, atau sejenis alat prototyping lain yang terintegrasi dengan Sketch, dan Anda adalah pengguna MacOS, maka Anda mungkin lebih cocok untuk Sketch.

Jika Anda adalah pengguna macOS dan Anda pikir Sketch juga bisa menjadi pesaing untuk aliran pekerjaan desain Anda, maka periksa buku saya Sketsa Mulai Mulai, yang juga tersedia di SitePoint Premium.

Figma adalah alat lain yang mendapatkan daya tarik akhir-akhir ini. Ini adalah alat desain antarmuka pengguna untuk Windows dan macOS, tetapi sekali lagi, tanpa alat prototyping. Sekarang Anda tahu lebih banyak tentang aplikasi desain ini.

Jadi Siapa yang Harus Membaca Panduan Mahir Adobe XD?

Panduan Mahir Adobe XD adalah untuk:

• Desainer dengan langganan Adobe CC yang ingin beralih dari Photoshop ke alat yang lebih fokus pada desain antarmuka pengguna
• Desainer yang ingin menggabungkan alat desain dan prototyping ke dalam satu aplikasi untuk meningkatkan aliran kerja dan produktivitas mereka
• Desainer yang ingin tahu yang ingin melihat apakah Adobe XD dapat menggantikan yang alat desain sekarang tanpa menghabiskan terlalu banyak waktu
• Desainer tingkat pemula tertarik untuk memulai pembelajaran mereka

 

Read More