Spesifikasi Desain Material dari Google pada awalnya ditujukan untuk platform Android sebagai cara untuk menyarankan konsistensi desain pada platform.
01 06
Cara Membuat Kartu Desain Materi di Adobe Experience Design CC
Setelah desainer mulai menyodoknya dan memahami pemikiran di baliknya, Desain Material diam-diam menjadi salah satu filosofi visual yang paling berpengaruh di web dan desain seluler . Yang perlu Anda lakukan untuk melihat apa yang kami maksudkan adalah melakukan pencarian Desain Material di Pinterest dan Anda akan melihat ratusan contoh dan percobaan pada perangkat, tablet, dan bahkan situs web.
Aspek Desain Material yang memukau adalah pemikiran Google tentang bagaimana aplikasi harus muncul dan bekerja di perangkat seluler tetapi konsep tersebut diterapkan ke semua ukuran layar apa pun di platform apa pun. Seperti yang dinyatakan Google dalam paragraf pembukaan spesifikasi, “Kami menantang diri kami untuk menciptakan bahasa visual bagi pengguna kami yang menyintesis prinsip klasik desain yang baik dengan inovasi dan kemungkinan teknologi dan sains. Ini adalah desain material. Spesifikasi ini adalah dokumen hidup yang akan diperbarui seiring kami terus mengembangkan prinsip dan spesifikasi desain material. ”
Materi yang dibicarakan, dalam istilah yang sangat umum, adalah kertas dan ciri Desain Material adalah kartu. Pikirkan kartu indeks di permukaan dan Anda berada di jalur yang benar. Kartu adalah elemen yang berisi foto, video, tautan teks, dan sebagainya, tetapi di mana mereka berbeda dari sebagian besar desain interaktif adalah kartu dimaksudkan untuk fokus pada satu subjek. Kartu memiliki sudut membulat, berisi bayangan samar yang menunjukkan bahwa mereka berada di atas permukaan dan jika semuanya berada pada bidang yang sama, mereka disebut sebagai "koleksi".
Dalam "Cara" ini kita akan membuat kartu berdasarkan spesifikasi. Daripada membuat kartu dengan berbagai alat gambar dan gambar, kita akan mendapatkannya dari arah yang berbeda. Kami akan menggunakan alat-alat dalam Desain Pengalaman Adobe yang saat ini dalam pratinjau umum hanya-Macintosh dan gratis. Anda dapat mengunduhnya di sini.
Mari kita mulai.
02 06
Membuat The Prototype Artboard di Adobe Experience Design CC
Tidak ada cara yang jelas untuk membuat layar Android dari Layar Mulai di Experience Design CC (XD). Apa yang biasanya kita lakukan ketika kita membuka XD, adalah memilih opsi iPhone 6 dan, ketika antarmuka terbuka, kita memilih alat Artboard di bagian bawah Toolbar dan memilih Android Mobile dari pilihan pada panel Properties di sebelah kanan. Lalu kita beralih ke alat seleksi, klik sekali pada nama artboard iPhone dan hapus artboard. Tidak lagi.
Dalam versi XD saat ini, ada panah kecil di samping iPhone 6 yang ketika diklik, membuka menu drop-down. Dari sana Anda memilih versi Android Mobile dan artboard Android Mobile yang dipilih terbuka di antarmuka.
Untuk memastikan kami memiliki ruang layar yang tepat terbuka untuk kartu, kami biasanya menuju ke Sketch 3 dan salin dan tempelkan Status Bar, Nav Bar, dan bilah Aplikasi dari Template Desain Material ke artboard. Sketsa 3.2 berisi Templat Desain Material ( File> New From Template> Desain Material ) dan satu lagi gratis yang bagus adalah dari Kyle Ledbetter yang dapat Anda peroleh di sini. Jika Anda tidak memiliki Sketch, Anda dapat menyalin dan menempelkannya dari stiker XD yang ditemukan di File> Open UI Kit> Google Material . Anda juga dapat mengunduhnya dari Google untuk digunakan di Photoshop, Illustrator, After Effects, dan Sketch.
03 06
Menambahkan Kartu Desain Material ke Adobe XD CC Artboard
Salah satu fitur XD yang paling berguna adalah penyertaan Kit UI untuk Apple iOS, Google Material, dan Microsoft Windows. Dalam banyak hal, mereka menambahkan kata "Cepat" ke istilah "Rapid Prototyping". Selain itu mereka membuat pekerjaan desainer lebih mudah dalam elemen UI umum tidak harus terus-menerus diciptakan kembali dalam Aplikasi Desain seperti Photoshop, Illustrator atau Sketsa.
Elemen UI yang kami butuhkan adalah kartu. Untuk mendapatkannya kami memilih File> Open UI Kit> Google Material dan perangkat dibuka sebagai dokumen baru. Elemen yang kami butuhkan ditemukan dalam kategori Kartu.
Apa yang kita sukai tentang ini adalah mereka mematuhi spesifikasi Desain Material sebagaimana tercantum dalam spesifikasi Blok Konten serta format teks dan spesifikasi jarak yang ditetapkan dalam spesifikasi Tipografi.
Gaya kartu yang kami inginkan adalah yang ada di kiri bawah. Kami hanya memakainya dengan mouse dan menyalinnya ke clipboard. Sayangnya, XD tidak mengandung antarmuka tab untuk dokumen terbuka. Apa yang kami lakukan adalah memindahkan jendela dokumen terbuka sedikit ke bawah untuk mengungkapkan yang sedang kami kerjakan, pilih dan tempel. Cara lain untuk dengan cepat beralih antara dokumen XD terbuka adalah menekan Command- ' .
04 06
Cara Mengedit Elemen Desain Material dalam Desain Adobe CC
Ketika kartu di XD tiba dari clipboard tidak dengan senang hati mulai bekerja dengannya. Hal pertama yang perlu Anda lakukan adalah ungroup kartu karena Anda perlu akses ke bit dan potongan-potongan menyusun kartu. Untuk melakukan ini, pilih kartu dan pilih Object> Ungroup atau tekan Shift-Command-G.
Kartu Anda sekarang terdiri dari tiga bagian:
- Kotak abu-abu terang untuk gambar.
- Kotak abu-abu sedang untuk teks
- Kotak belakang digunakan sebagai latar belakang.
Langkah pertama adalah menghapus kotak abu-abu terang. Satu-satunya tujuan adalah bertindak sebagai placeholder untuk gambar yang membuatnya, jika Anda memilih, opsional.
Kotak dengan teks sebenarnya adalah abu-abu gelap dengan opacity 50%. Kotak ini dapat digunakan sebagai latar belakang teks dan Anda dapat mengubah warna dan opacity kotak.
Meskipun tidak segera terbukti, kotak abu-abu terang mengikuti spesifikasi Desain Material di mana sudut atasnya dibulatkan oleh 2 piksel. Ingatlah ini jika Anda menambahkan gambar. Ini juga akan membutuhkan sudut membulat yang dapat ditambahkan ke aplikasi pencitraan atau di XD.
Melihat bagaimana ini adalah keadaan istirahat kartu itu juga membutuhkan bayangan. Spesifikasi membuatnya jelas ada ketinggian kartu yang beristirahat dari 2 piksel. Untuk menambahkan ini, pilih bentuk latar belakang hitam dan atur nilai Y dan B (Blur) ke 2 di panel properti.
05 06
Cara Menambahkan Gambar ke Kartu Desain Material dalam Adobe XD CC
Mengetahui lebar kartu 344 piksel dan luas gambar adalah 150 piksel tinggi ( setengah tinggi kotak abu-abu terang ) Kami membuka gambar di Photoshop, memotongnya ke ukuran dan menyimpannya menggunakan opsi @ 2x di Photoshop's Export As dialog kotak. Gambar itu diimpor ke Adobe XD.
Kami kemudian menyeret kotak abu-abu terang di atas gambar di papan tulis dan memilih Object> Mask With Shape . Hasilnya adalah gambar mengambil sudut bulat dari bentuknya. Kami kemudian memindahkan gambar ke posisi akhirnya.
Dengan gambar di tempat, kami kemudian mengubah warna latar belakang kotak abu-abu Medium, mengubah teks dan warna teks tautan.
06 06
Menggunakan Fitur Grid Adobe XD CC
Dengan kartu yang lengkap sekarang perlu ditempatkan dengan benar sesuai dengan spesifikasi Desain Material. Ini berarti ada 8 piksel di kedua sisi kartu dan kartu harus 8 piksel di bawah bilah aplikasi. Untuk melakukan ini, klik sekali pada nama artboard dan, di Panel Properties, pilih Grid. Grid muncul di atas artboard.
Ukuran grid default adalah 8 piksel yang kebetulan menjadi ukuran grid yang sama untuk Desain Material. Jika Anda membutuhkan ukuran yang berbeda, ubah nilainya di area Grid. Jika Anda ingin mengubah warna grid, klik chip warna dan pilih warna dari Color Picker yang dihasilkan.
Dengan grid terlihat, klik pada kartu dan pindahkan ke posisi terakhirnya.
Untuk menyelesaikannya, kami memilih kartu, mengklik tombol Repeat Grid dan mengubah jarak antar kartu menjadi 8 piksel juga.