Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Tahukah Kamu Cara Membuat Panduan Gaya Sketsa, Perpustakaan dan Kit UI?

- Advertisement -
- Advertisement -
- Advertisement -

Antara ahli Sketch atau baru di Sketch , desainer akan menemukan bahwa membuat panduan gaya di Sketch dapat menjadi sumber daya berharga untuk kotak peralatan desain mereka yang dapat menghemat banyak waktu.

Panduan gaya tidak hanya membantu menjaga hal-hal tetap konsisten, tetapi juga memungkinkan pembaruan untuk elemen-elemen seperti warna dan ikon di banyak dokumen dengan lebih sedikit kerumitan. Tutorial ini berjalan melalui proses langkah-demi-langkah untuk menciptakan panduan gaya dan perangkat UI dan akan memberikan desainer pemahaman yang lebih baik tentang simbol Sketsa, referensi perpustakaan Sketsa untuk desain mereka, dan kepercayaan pada organisasi aset desain mereka.

Membuat Panduan Gaya Sketsa Anda

“Panduan gaya adalah ‘dokumen hidup’ yang komprehensif yang melacak semua elemen berulang untuk proyek, mulai dari aturan branding hingga jumlah beveling untuk tombol ajakan bertindak,” menurut UXPin . Panduan gaya dapat mencakup apa saja dari elemen visual sederhana hingga kosa kata dan citra yang disetujui. Tutorial ini mencakup organisasi, warna, ikon, font, gaya teks, dan aset.

Langkah Satu: Organisasi

  1. Buat folder master untuk menyimpan file sketsa, plugin, dan aset lain yang diperlukan seperti font dan ikonografi. (Plugin akan didiskusikan di akhir tutorial.)
  2. Mulai file Sketsa baru dan beri nama ” Perpustakaan Clientname .” Misalnya, jika klien Anda adalah Toptal maka file Anda harus dinamai “Perpustakaan Toptal.”
Membuat panduan gaya dengan Sketsa

Langkah Dua: Warna

Jika warna telah dipilih, langkah selanjutnya adalah mengubah warna Anda menjadi simbol.

  1. Untuk melakukan ini, buat kotak dengan ukuran yang sama dan ubah warnanya. Klik “Buat Simbol” dan simpan elemen-elemen ini menggunakan sistem pelabelan nama warna / @ warna . Warna / @ merah muda , warna / @ latar belakang abu-abu , atau warna / @ FFFFF adalah contoh label yang tepat. Konvensi penamaan penting dalam menjaga panduan gaya terorganisir, jadi format untuk semuanya harus ditetapkan dan dipatuhi sejak awal.
  2. Setelah selesai, tambahkan ke halaman panduan gaya.
  3. Simpan carikan warna di bagian dokumen palet warna Anda.
Mengubah blok warna menjadi simbol Sketsa

Cara pintas yang bermanfaat: Alat R – persegi panjang, alat T – teks, jarak alt – ukur.

Warna simbol sketsa juga harus ditambahkan ke palet warna dokumen
Simpan carikan warna di palet warna dokumen.

Langkah Tiga: Ikon

Mengubah ikon menjadi simbol dinamis memungkinkan warnanya mudah diubah ke salah satu warna yang disimpan di Langkah Dua di atas. Ini berarti bahwa setelah ikon ditempatkan ke dalam desain, warna dapat diubah melalui menu dropdown sederhana, yang disebut ‘override,’ menggunakan ‘Inspektur’ di sebelah kanan kanvas.

  1. Simpan ikon sebagai simbol (tetap ke .svg untuk jenis aset jika memungkinkan).
  2. Pergilah ke halaman simbol, temukan ikonnya, dan tutupi dengan warna default dari warna yang sebelumnya disimpan. Untuk melakukan ini, overlay simbol warna di atas ikon dan klik “Mask” di toolbar (atau klik kanan dan pilih “Mask” dari menu pop-up).
  3. Setelah ikon ditutup, hapus isian dengan menghapus centang pada kotak di bawah bagian “Mengisi” di Inspektur.
  4. Atur ikon di halaman panduan gaya. Di bagian yang sama, sangat membantu untuk menentukan warna untuk ikon yang aktif dan tidak aktif, ditambah spesifikasi warna penting lainnya.
Menyimpan ikon sebagai simbol Sketsa membuatnya lebih mudah untuk dimanipulasi
Pertama, jadikan ikon sebagai simbol.
Mengubah warna simbol Sketsa bertopeng
Selanjutnya, buat topeng dengan simbol warna sebelumnya.
Warna dapat diubah dengan dropdown Override
Saat dibutuhkan, ubah warna ikon apa pun dengan dropdown Override.

Langkah Empat: Gaya Teks

Setelah font dipilih, saatnya menentukan gaya teks: H1, H2, H3, H4, H5, body, tautan, keterangan, label, dll. Referensi yang baik untuk tipografi web adalah posting blog ini berdasarkan Typecast.

  1. Pilih ukuran, berat, karakter, dan penspasian garis untuk sebanyak mungkin gaya yang diperlukan.
  2. Menulis kata (“Ketik Sesuatu” secara otomatis muncul ketika Anda menekan T, alat teks) dan memformatnya untuk mencerminkan detail gaya yang dipilih.
  3. Klik “Buat Gaya Teks baru.”
  4. Atur gaya teks di halaman panduan gaya.
Menentukan jenis gaya dalam panduan gaya Sketsa Anda membuat semuanya konsisten
Membuat gaya teks membuat panduan gaya UI Anda konsisten.

Langkah Kelima: Aset

Sekarang untuk bagian yang menyenangkan. Saatnya menggabungkan semua langkah sebelumnya untuk membuat beberapa aset. Jika aset telah dibuat, untuk konsistensi, yang terbaik adalah membuatnya kembali menggunakan gaya teks, ikon, dan warna yang telah Anda pilih. Misalnya, mungkin ada banyak warna abu-abu yang berbeda dalam dokumen desain kerja yang belum diperhitungkan oleh desain, sehingga menciptakan kembali aset akan menjamin konsistensi warna yang dipilih. Jangan lupa untuk tetap konsisten dengan penamaan, dan pastikan untuk menambahkan aset ke halaman panduan gaya saat dibuat.

Berikut adalah beberapa aset yang disarankan untuk dikerjakan:

Tombol

  1. Buat simbol-simbol dinamis ini, seperti halnya ikon, dengan menutupi tombol dalam warna default dan menghapus isian.
  2. Agar teks tetap terpusat setiap saat, span lebar kotak teks agar sama dengan tombol dan pusatkan teks.
  3. Untuk memastikan konsistensi, pastikan untuk menggunakan gaya teks yang disimpan.
  4. Simpan elemen-elemen ini sebagai simbol menggunakan sistem penamaan tombol / nama-tombol .
  5. Gunakan fitur ganti untuk mengubah label dan warna.

Cari Bilah

  1. Menerapkan batasan pengubahan ukuran untuk bidang pencarian, dan ikon dan teks yang digunakan dalam bidang itu sendiri.
  2. Jangan lupa tentang menerapkan gaya dan warna teks yang sebelumnya disimpan dalam palet warna dokumen Anda.
  3. Simpan elemen ini sebagai simbol menggunakan pencarian sebagai judul, atau jika Anda memiliki berbagai jenis pencarian, patuhi sistem pelabelan seperti pencarian / standar dan pencarian / tidak-ikon .

Tombol dan Kotak centang Radio

  1. Dimungkinkan untuk memiliki simbol di dalam simbol, dan cara yang baik untuk mengujinya adalah dengan membuat tombol radio dan aset kotak centang yang cerdas.
  2. Pertama, buat aset tombol itu sendiri. Simpan elemen ini sebagai simbol menggunakan kotak centang / dipilih dan centang / hapus pilihan sebagai contoh label.
  3. Sekarang buat input. Tambahkan teks placeholder di sebelah simbol kotak centang dan kemudian konversi seluruh aset menjadi simbol. Karena ini sekarang merupakan input, disarankan untuk menyimpan aset seperti itu, sehingga label yang baik akan menjadi input / kotak centang / dipilih dan input / kotak centang / tidak dipilih .

Langkah Enam: Gunakan Panduan Gaya!

Melakukan semua pekerjaan ini untuk membuat panduan gaya hanya berguna jika itu benar-benar membuat proyek berjalan lebih lancar. Setelah semua aset telah dibuat, saatnya untuk menerapkan perpustakaan ke dokumen yang sedang dirancang. Di Sketsa, buka “Preferensi -> Tambah Perpustakaan …” dan tambahkan dokumen perpustakaan.

Menerapkan panduan gaya Sketsa ke dokumen masa depan

Setelah Anda menambahkan perpustakaan ke file desain proyek Anda, Anda dapat mengakses perpustakaan dan simbol-simbolnya di bagian simbol. Anda akan melihat pustaka Desain iOS UI yang datang dengan Sketch sebagai opsi pustaka, serta pustaka yang baru saja diimpor.

Aset panduan gaya dapat diakses sebagai simbol Sketsa
Anda dapat menemukan semua perpustakaan Anda di bagian simbol dokumen desain Anda. Anda dapat menambah dan menghapus perpustakaan sebanyak yang Anda inginkan.

Jika Anda ingin memperbarui simbol, klik dua kali pada simbol itu sendiri dan dokumen perpustakaan Anda akan muncul. Setelah Anda membuat perubahan, kembali ke dokumen desain dan klik tombol pembaruan di sudut kanan atas.

Simbol sketsa dapat dengan mudah diperbarui di seluruh dokumen setiap kali perpustakaan diperbarui
“Pembaruan perpustakaan tersedia” akan muncul di sudut kanan atas di Sketsa.
Sketsa akan menampilkan peringatan ketika simbol dapat diperbarui
Ketika pembaruan Perpustakaan tersedia, modal akan menampilkan simbol yang telah berubah di Perpustakaan. Mengklik “Perbarui Simbol” akan menyetujui perubahan.

Bonus: Mengimpor / Mengekspor Gaya Teks

Gaya teks tidak disimpan dengan pustaka, tetapi plugin Gaya Teks Bersama untuk Sketsa memecahkan itu. Setelah mengunduh plugin, buka dokumen perpustakaan dan kemudian ke menu: “Plugins -> Shared Text Styles -> Export …” Simpan file ini di folder yang sama dengan dokumen perpustakaan Anda. Kemudian, dalam dokumen desain Anda buka lagi menu: “Plugin -> Gaya Teks Bersama -> Impor Gaya Teks …” dan impor file yang baru saja Anda simpan. Gaya teks Anda akan muncul.

Menyimpan gaya teks memerlukan plugin tambahan

Bonus: Mengimpor / Mengekspor Palet Warna

Mirip dengan gaya teks, warna dokumen tidak menabung dengan perpustakaan Sketch, tetapi plugin Sketch Palettes memecahkannya. Sama seperti di atas, ekspor palet menggunakan “Plugin -> Sketsa Palet -> Warna Dokumen -> Simpan Palet” dan impor dengan “Plugin -> Palet Sketsa -> Warna Dokumen -> Muat Palet.” Ingatlah untuk menyimpannya di folder yang sama dengan dokumen perpustakaan Anda yang lain.

Bonus: Font

Craft by InVision adalah seperangkat plugin yang membawa perangkat lunak Sketch ke tingkat berikutnya. Craft memungkinkan Anda untuk mengganti gambar dengan stok foto, prototipe dan sinkronisasi ke InVision, membuat perpustakaan, dan banyak lagi. Jika Craft diunduh, tekan “cmd-shift-c” dalam dokumen dan stylesheet akan dihasilkan. Font akan terdaftar di sini.

Craft from InVision menghadirkan sejumlah fitur tambahan ke Sketch

Mengikuti enam langkah yang diuraikan di atas akan membuat proyek desain besar dan kecil berjalan lebih lancar dan hasil akhirnya akan lebih halus. Jika mereka unik atau sangat spesifik, panduan gaya, Perpustakaan, dan kit UI dapat digunakan untuk satu klien, atau untuk banyak proyek jika elemen UI standar terus-menerus dibuat, seperti gambar rangka dan prototipe. Mencurahkan waktu, pada awalnya, untuk membuat komponen UI Sketsa ini dengan benar akan menghemat banyak waktu, dan berpotensi di banyak proyek.

sumber: toptal.com

- Advertisement -

Latest articles

15.1k Followers
Follow

Related articles