Cara Membuat Panduan Gaya Sketsa, Pustaka, dan Kit UI

Setiap proyek desain dapat mengambil manfaat dari panduan gaya yang dipikirkan dengan matang. Gunakan tutorial ini untuk membuat kit UI dan secara bersamaan membuat pustaka kustom (dan dapat digunakan kembali) untuk pembuatan prototipe cepat.

Baik ahli Sketsa atau baru mengenal Sketsa, desainer akan menemukan bahwa membuat panduan gaya di Sketsa dapat menjadi sumber daya yang 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 elemen seperti warna dan ikon di banyak dokumen dengan lebih sedikit kerumitan. Tutorial ini membahas proses langkah demi langkah dalam membuat panduan gaya dan kit UI dan akan memberi desainer pemahaman yang lebih baik tentang simbol Sketsa, mereferensikan perpustakaan Sketsa untuk desain mereka, dan keyakinan dalam organisasi aset desain mereka.

Membuat Panduan Gaya Sketsa Anda

“Panduan gaya adalah 'dokumen hidup' komprehensif yang melacak semua elemen berulang untuk sebuah proyek, dari aturan branding hingga jumlah beveling untuk tombol ajakan bertindak," menurut UXPin. Panduan gaya dapat mencakup apa saja mulai dari elemen visual sederhana hingga kosakata 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 penting lainnya seperti font dan ikonografi. (Plugin akan dibahas di akhir tutorial.)
2. Mulai file Sketch baru dan beri nama “ Clientname Library.” Misalnya, jika klien Anda adalah Toptal maka file Anda harus diberi nama "Perpustakaan Toptal."

Langkah Kedua: Warna

Jika warna sudah dipilih, langkah selanjutnya adalah mengubah warna menjadi simbol.

1. Untuk melakukan ini, buat kotak dengan ukuran yang sama dan ubah warnanya sesuai dengan itu. Klik “Buat Simbol” dan simpan elemen-elemen ini menggunakan sistem pelabelan warna/ @nama-warna . Color/@pink , color/@background-gray , atau color/@FFFFF adalah contoh label yang tepat. Konvensi penamaan penting dalam menjaga panduan gaya tetap teratur, jadi format untuk semuanya harus ditetapkan dan dipatuhi sejak awal.
2. Setelah selesai, tambahkan ke halaman panduan gaya.
3. Simpan contoh warna di bagian dokumen palet warna Anda.

Pintasan yang berguna: R - alat persegi panjang, T - alat teks, alt - ukur jarak.

Langkah Tiga: Ikon

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

1. Simpan ikon sebagai simbol (tetap gunakan .svg untuk jenis aset jika memungkinkan).
2. Masuk ke halaman simbol, temukan ikonnya, dan tutupi dengan warna default dari warna yang disimpan sebelumnya. Untuk melakukan ini, overlay simbol warna di atas ikon dan klik "Mask" di bilah alat (atau klik kanan dan pilih "Mask" dari menu pop-up).
3. Setelah ikon disamarkan, hapus isian dengan menghapus centang pada kotak centang di bawah bagian "Isi" di Inspektur.
4. Atur ikon di halaman panduan gaya. Di bagian yang sama, sangat membantu untuk menentukan warna untuk ikon aktif dan tidak aktif, ditambah spesifikasi warna penting lainnya.

Langkah Empat: Gaya Teks

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

1. Pilih ukuran, berat, karakter, dan spasi baris untuk gaya sebanyak yang diperlukan.
2. Tulis sebuah kata ("Ketik Sesuatu" secara otomatis muncul saat 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.

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 tidak diperhitungkan oleh desain, jadi membuat ulang aset akan menjamin konsistensi warna yang dipilih. Jangan lupa untuk menjaga penamaan tetap konsisten, dan pastikan untuk menambahkan aset ke halaman panduan gaya saat dibuat.

Berikut adalah beberapa aset yang disarankan untuk dikerjakan:

tombol

1. Buat simbol dinamis ini, seperti ikon, dengan menutupi tombol dalam warna default dan menghapus isian.
2. Untuk menjaga teks tetap di tengah setiap saat, rentangkan lebar kotak teks menjadi sama dengan tombol dan tengahkan 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 override untuk mengubah label dan warna.

Cari Bar

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

Tombol Radio dan Kotak Centang

1. Dimungkinkan untuk memiliki simbol di dalam simbol, dan cara yang baik untuk mengujinya adalah dengan membuat tombol radio cerdas dan aset kotak centang.
2. Pertama, buat aset tombol itu sendiri. Simpan elemen ini sebagai simbol menggunakan kotak centang/yang dipilih dan kotak centang/tidak dipilih sebagai contoh pelabelan.
3. Sekarang buat inputnya. Tambahkan teks placeholder di sebelah simbol kotak centang, lalu ubah seluruh aset menjadi simbol. Karena ini sekarang merupakan input, disarankan untuk menyimpan aset seperti itu, jadi label yang baik adalah input/checkbox/selected dan input/checkbox/deselected .

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 Sketch, buka “Preferences -> Add Library…” dan tambahkan dokumen library.

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

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 perbarui di sudut kanan atas.

Bonus: Mengimpor/Mengekspor Gaya Teks

Gaya teks tidak disimpan dengan perpustakaan, tetapi plugin Gaya Teks Bersama untuk Sketch menyelesaikannya. Setelah Anda mengunduh plugin, buka dokumen perpustakaan dan kemudian ke menu: “Plugins ‐> Gaya Teks Bersama ‐> Ekspor …” Simpan file ini di folder yang sama dengan dokumen perpustakaan Anda. Kemudian, dalam dokumen desain Anda, masuk ke menu lagi: “Plugins –> Shared Text Styles –> Import Text Styles…” dan impor file yang baru saja Anda simpan. Gaya teks Anda akan muncul.

Bonus: Mengimpor/Mengekspor Palet Warna

Mirip dengan gaya teks, warna dokumen tidak disimpan dengan perpustakaan Sketsa, tetapi plugin Palet Sketsa menyelesaikannya. Sama seperti di atas, ekspor palet menggunakan "Plugins -> Sketch Palette -> Document Colors -> Save Palette" dan impor dengan "Plugins -> Sketch Palette -> Document Colors -> Load Palette." Ingatlah untuk menyimpannya di folder yang sama dengan dokumen perpustakaan Anda yang lain.

Bonus: Font

Craft by InVision adalah rangkaian plugin yang membawa perangkat lunak Sketch ke level 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" di dokumen dan stylesheet akan dihasilkan. Font akan terdaftar di sini.

Mengikuti enam langkah yang diuraikan di atas akan membuat proyek desain besar dan kecil berjalan lebih lancar dan hasil akhirnya akan lebih halus. Jika unik atau sangat spesifik, panduan gaya, Pustaka, dan kit UI dapat digunakan untuk satu klien, atau untuk banyak proyek jika elemen UI standar terus 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.

Bacaan lebih lanjut di Blog Desain Toptal:

• Mengapa Startup Membutuhkan Styleguide
• Hal-Hal yang Mungkin Tidak Anda Ketahui Tentang Tipografi di Sketsa
• Daftar Utama 50 Plugin Sketsa Terbaik
• Adobe XD vs. Sketch - Alat UX Mana yang Tepat untuk Anda?
• Cara Membangun Kerangka Desain yang Efektif (Termasuk Kerangka UI Sketsa Gratis)