Trik Desain, Tips, dan Teknik Desain Adobe

01 07

Trik Desain, Tips, dan Teknik Desain Adobe

Ketika Adobe memperkenalkan Desain Pengalaman sebagai Pratinjau Publik , perusahaan ini menyelesaikan dua prestasi yang agak luar biasa pada saat yang sama. Pertama, mereka mengintai ruang di pasar perangkat lunak prototyping yang sedang berkembang. Kedua, mereka menciptakan peluang bagi pengguna untuk bermain dengan "work-in-progress" dan membiarkan pengguna memengaruhi kemajuan itu. Setelah aplikasi ini tersedia selama beberapa bulan, saya pikir ini adalah saat yang tepat untuk membagikan beberapa trik, kiat, dan teknik Desain Pengalaman.

Tapi pertama-tama, Anda mungkin bertanya-tanya apa yang dimaksud dengan Prototyping Software. Di antara pemain utama di ruang ini adalah Proto.io, Prinsip, UXPin, Atomic.io , Pengalaman Desain dan InVision. Tidak seperti aplikasi seperti Sketsa 3, Photoshop dan Illustrator di mana desain statis diproduksi, editor grafis ini memperkenalkan interaktivitas, gerakan, dan fitur lain yang umum dalam ruang desain web dan seluler saat ini.

Dengan munculnya mobile dan fokus laser yang tak terhindarkan pada Pengguna, tidak lagi cukup bagi seorang desainer untuk membuat beberapa sketsa, menarik beberapa comps dan kemudian merilis proyek atau mengunggahnya ke server web. Alur kerja UI / UX telah mengubah hal-hal secara mendasar. Setiap langkah dari proses, mulai dari mengidentifikasi pengguna, membuat sketsa, wireframes, maket, dan prototipe sekarang menjadi subyek pengujian pengguna yang ekstensif.

Ini adalah tahap terakhir - prototyping - di mana titik-titik rasa sakit ditemukan dan diperbaiki sebelum proyek bergerak ke dalam produksi akhir. Di sinilah interaktivitas, gerak, transisi layar dan penempatan segala sesuatu di layar sangat penting. Masalah dan masalah tidak bisa hanya ditampilkan sebagai gambar statis atau dijelaskan secara verbal. Lagi pula, produk ini untuk manusia nyata. Daripada memindahkan semua itu ke kode, proses prototyping semakin banyak dilakukan oleh perangkat lunak grafis yang dirancang hanya untuk tujuan itu. Lebih mudah untuk memperbaiki kesalahan, mengganti gambar, menulis ulang beberapa teks, memindahkan tombol dan seterusnya menggunakan editor visual dari terus menulis ulang dan debugging kode.

Bahkan, perangkat lunak ini telah menjadi komponen kunci dalam lingkungan "Desain Prototipe" dan Pengembangan "Rapid Prototyping" saat ini.

Dengan itu, mari kita bersenang-senang dengan Desain Pengalaman.

02 07

Buat Pin Tujuan Dengan Lingkaran Sederhana dalam Desain Pengalaman Adobe

Salah satu aspek yang rapi dari XD adalah penggunaan alat gambar vektor. Tidak dapat menemukan ikon? Tidak masalah. Gulung milikmu. Begini caranya:

1. Pilih Ellipse Tool dan, dengan tombol Option / Alt-Shift ditekan, gambar lingkaran.
2. Dengan lingkaran yang dipilih, atur warna Isi ke FF0000 dan Perbatasan ke "tidak ada" di properti.
3. Klik dua kali lingkaran untuk menunjukkan titik jangkar. Seret jangkar bawah ke bawah.
4. Klik dua kali Jangkar Titik yang dipilih dan lekukannya diganti dengan garis.
5. Gambar lingkaran kecil lain dengan isi putih dan tanpa stoke. Pindahkan ke posisi dan pilih pin dan lingkaran. Di panel Align di bagian atas Properties klik tombol Horizontal Center dan Pin dibuat.

03 07

Buat Blur Latar Belakang dalam Desain Pengalaman Adobe

Adalah umum untuk memiliki teks atau konten lain di atas gambar latar belakang. Masalahnya di sini adalah gambar, lebih sering daripada tidak, mengalahkan konten di atasnya. Salah satu cara untuk mengatasi masalah ini adalah dengan mengaburkan gambar latar belakang. Anda dapat mengaburkan gambar di Photoshop atau perangkat lunak pengedit gambar lainnya, tetapi ini agak tidak efisien, terutama karena XD sekarang dapat menangani tugas ini untuk Anda. Begini caranya:

1. Buat artboard baru dan tambahkan gambar latar Anda.
2. Pilih Rectangle Tool dan tarik sebuah persegi panjang di atas gambar. Dengan Rectangle dipilih, atur Fill ke White dan Stroke ke None.
3. Dengan Rectangle dipilih, pilih Background Blur di panel properties. Ketiga slider tersebut adalah Blur Amount, Brightness dan Opacity. Inilah yang mereka lakukan:

• Blur Amount: Menyesuaikan blurriness gambar di bawah bentuk. Nilai maksimumnya adalah +50.
• Kecerahan: Menyesuaikan sorotan dan bayangan dalam gambar. Nilai Minimum adalah -50 dan Nilai maksimumnya adalah +50.
• Opacity: Mempengaruhi transparansi bentuk dan visibilitas gambar di bawah bentuk. Nilai berkisar dari 0% hingga 100%.

Jika Anda benar-benar ingin "beralih", ubah warna bentuk dan mainkan dengan nilai Opacity untuk mengubah "tampilan" gambar.

04 07

Buat Scrim dalam Desain Pengalaman Adobe

Masalah desain yang umum adalah elemen elemen antarmuka harus menjadi warna yang umum tetapi, hilang ketika ditempatkan di atas gambar latar belakang atau warna solid. Solusinya adalah samaran. A scrim adalah gradien yang agak buram ditempatkan antara elemen antarmuka dan latar belakang. Ini mudah dilakukan di XD. Begini caranya:

1. Buat artboard Anda di XD, tambahkan gambar dan salin dan tempel elemen antarmuka dari UI Kit yang sesuai - File> Open UI Kit … - ke dalam artboard. Pada gambar di atas, foto membuat bilah Status dan Bilah Aplikasi sulit dilihat.
2. Pilih Rectangle Tool dan gambar persegi panjang. Di Properties Panel pilih Isi dan pilih Gradient dari pop down di Color Picker. Atur warna gradien menjadi Hitam Putih. Setel nilai A - Opacity - menjadi 60% dan nilai A putih menjadi 0%.
3. Dengan Rectangle dipilih, pilih Object> Arrange> Send Backward . Elemen antarmuka sekarang terlihat di atas gambar.

05 07

Buat Avatar Gambar dalam Desain Pengalaman Adobe

Pola Desain umum ditemukan di aplikasi Obrolan tempat orang-orang saling berbicara dan gambar pembicara muncul di layar. Avatar-avatar ini biasanya adalah gambar yang telah disamarkan. Sudah mati sederhana mencapai ini di XD. Begini caranya:

1. Anda mulai dengan gambar dan lingkaran atau bentuk lain pada artboard. Anda dapat mengisi lingkaran dengan warna apa pun. Apa yang Anda tidak perlu lakukan adalah menambahkan warna stroke. Ini akan hilang ketika Anda membuat efek, jadi mengapa repot-repot. Jika Anda perlu menyalakan lingkaran, salin ke clipboard.
2. Pindahkan lingkaran ke gambar dan pilih gambar dan lingkaran. Dengan objek bot yang dipilih, pilih Object> Mask with Shape . Saat Anda melepaskan mouse, Avatar dibuat. Dari sana Anda dapat mengubah ukurannya.
3. Jika Anda perlu menambahkan stroke, tempelkan lingkaran di clipboard Anda ke artboard. Dengan salinan yang dipilih, matikan isian Properties dan tambahkan warna stroke dan lebar. Untuk membariskannya, pilih kedua objek dan klik tombol Tengah Rata dalam opsi Align di bagian atas panel properti.
4. Jika Anda ingin memindahkan foto di dalam topeng, klik ganda mask. Ini akan menunjukkan gambar dan bentuk topeng. Klik pada gambar dan seret ke posisinya. Ketika Anda melepaskan mouse, gambar akan berada di posisi barunya di dalam topeng.

06 07

Mainkan Dengan Adobe Experience Design Artboards

The Experience Design artboards tidak hanya ada bagi Anda untuk menempatkan konten. Mereka juga bisa dimanipulasi. Berikut beberapa hal yang dapat Anda lakukan:

1. Jika Anda membutuhkan versi Landscape dan Portrait dari artboard, duplikat artboard dan, dengan duplikat yang dipilih, klik tombol lanskap di panel Properties. Artboard akan berubah menjadi orientasi Lansekap. Jika Artboard memiliki konten di atasnya, klik nama Artboard dan properti Artboard akan muncul di Panel Properties.
2. Untuk menambahkan warna kustom ke Artboard, dan proyek dalam hal ini, pilih Artboard dan klik chip warna Isi di bagian Penampilan dari Panel Properties. Masukkan nilai heksadesimal untuk warna dan klik tanda +. Warna akan ditambahkan sebagai Warna Kustom. Untuk menerapkan warna itu di tempat lain, pilih objek dan klik chip Custom Color untuk menerapkan warna.
3. Papan iklan dapat dibuat secara vertikal digulir. Untuk melakukan ini, pilih artboard dan ubah ketinggiannya baik pada Panel Properti atau dengan menyeret bagian bawah artboard ke bawah. Di area Gulir dari panel properti, pilih vertikal dari menu pop-down dan masukkan ketinggian viewport untuk layar. Garis biru putus-putus menunjukkan bagian bawah viewport. Untuk mengujinya, klik tombol Putar dan gulir. Untuk mematikan pengguliran, pilih Tidak ada di menu Gulir bawah.

07 07

Edit Kit UI Seluler dalam Desain Pengalaman Adobe

Pengalaman Desain berisi Kit UI untuk mengembangkan iOS, Android dan Windows UI. Ketika Anda pertama kali membukanya, Anda mungkin berpikir mereka sudah cukup siap. Tidak cukup — setiap bit dan potongan dalam kit itu dapat diedit sepenuhnya. Mari kita cari tahu dengan membangun wireframe Android.

1. Anda mulai dengan memilih alat Artboard dan memilih Android Mobile di bagian Google pada Panel Properties .
2. Pilih File> Buka UI Kit> Google Material . Ini membuka Kit UI Desain Material. Pilih Kaca Pembesar dan marquee pada papan Gambar Screen Guides . Saya suka memulai dengan yang ini karena ini memberi saya panduan untuk penempatan antarmuka elemen di layar yang tepat. Jika Anda mengklik salah satu bar Blue Anda akan melihat itu terkunci. Klik kunci yang dilekatkan ke masing-masing untuk membukanya . Marquee the artboard dan salin seleksi ke clipboard. Kembali ke dokumen Anda dan tempelkan layar ke artboard Anda.
3. Klik sekali pada bilah Aplikasi yang bagian atas artboard. Perhatikan bagaimana Anda bisa memilihnya. Pilih Objek> Atur> Bawa ke Depan. Pilihan Anda sekarang di atas Panduan Layar. Ini harus memberi tahu Anda setiap elemen di layar dapat diedit.
4. Klik dua kali Status Bar di bagian atas dan, di Properties Panel dan warna Isi ke 455A64 . Klik dua kali App Bar dan atur isinya ke 607D8B. Ini harus memberi tahu Anda setiap elemen dalam kit UI dapat diedit untuk memenuhi spesifikasi warna proyek.
5. Bagaimana dengan ikonnya? Inilah cara mengubah warna mereka. Klik dua kali jantung untuk memilihnya. Jika Anda melihat Panel Properti, Anda mungkin menganggap Anda tidak dapat mengedit pilihan. Tidak terlalu. Klik dua kali jantung sekali lagi . Properti terbuka dan Anda mengubah warna isian ke FF0000. Ulangi trik double-double-click ini untuk ikon dan teks yang tersisa.