Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Cara Membuat File Sketsa Ramah Pengguna dan Dapat Digunakan Kembali

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Bagus Dwi (you can also view the original English article)

Final product image
What You'll Be Creating

Beberapa waktu lalu kami menerbitkan tutorial tentang membuat file Sketsa khusus dengan diagram alur yang dapat digunakan kembali. Ini adalah sumber daya yang bagus untuk membuat alur pengguna atau peta situs Anda sendiri. Dalam tutorial ini, kami akan memperkuat file Sketch agar lebih bermanfaat bagi orang lain.

Anda mungkin memiliki rekan yang ingin menggunakan file Anda, atau mungkin membayar pelanggan. Bagaimanapun, peningkatan yang kami lakukan pada file akan berarti bahwa orang lain dapat membukanya, memahaminya, dan menggunakannya.

Saya sarankan Anda melanjutkan dan membaca tutorial asli. Paling tidak, ambil file Sketch akhir untuk memulai dengan kaki kanan dan ikuti bagian kedua ini. Tutorial ini penuh dengan tips dan trik Sketsa, beberapa kiat pro di sana-sini, serta beberapa plugin terkait yang harus Anda coba sendiri.

Manual Pengguna

Hal pertama yang akan kita lakukan adalah menyiapkan halaman baru. Saya menyebut saya "Manual pengguna". Halaman ini akan berfungsi sebagai panduan cepat tentang cara menggunakan elemen diagram alur. Kami akan menggunakannya untuk menjelaskan setiap peran elemen, cara menggunakannya, dan cara memanipulasi properti mereka seperti titik awal untuk panah.

“Cara Menggunakan Panah”

Kami akan mulai dengan artboard baru, saya memanggil saya "Cara menggunakan panah". Tekan A untuk membuat Artboard baru dan dari sudut kanan atas pilih Paper Size dan Letter. Sketsa secara otomatis akan menempatkan artboard berukuran tepat untuk Anda (ini berfungsi dengan ukuran layar desktop dan seluler juga!).

Paper sizes for Artboards in Sketch
Ukuran kertas untuk Artboards dalam Sketsa

Saya ingin pengguna baru memahami beberapa hal, termasuk cara memilih garis dan menempatkannya di artboard, cara mengubah bentuknya, dan cara mengubah titik awal dan akhir. Bagaimana Anda menjelaskan hal-hal ini adalah pilihan Anda; deskripsi dan instruksi spesifik terserah Anda. Saya telah meningkatkan deskripsi saya dengan menyertakan beberapa tangkapan layar.

Mengatur Gaya Teks

Sama seperti simbol atau style layer, kita juga bisa mengatur style teks. Untuk halaman buku panduan ini saya memiliki tiga gaya teks yang berbeda, H1, H2, dan body.

H1-saya adalah Helvetica Neue, Regular, berukuran 24px dengan tinggi garis 30px. H2 adalah Helvetica Neue, Bold, berukuran 14px dengan tinggi garis 20px. Body adalah Helvetica Neue, Regular, berukuran 12px dengan tinggi garis 20px. Ketiganya menggunakan warna # 325372.


Kami dapat menggunakan sintaksis organisasi Sketsa untuk mengatur gaya-gaya ini dalam drop-down. Saya beri nama mereka sebagai berikut, yang dapat Anda lihat tercermin dalam tarik-turun di atas:

  • Teks manual / Judul / H1
  • Teks manual / Judul / H2
  • Teks manual / Body

Saya suka ini — ini membuat file Sketsa saya jauh lebih teratur!

“Cara Menggunakan Anotasi”

Halaman berikutnya di manual pengguna akan membahas anotasi. Untuk menghemat waktu, salin halaman panah dan edit teks dan gambar untuk mencerminkan anotasi. Untuk penjelasan, kita perlu mendiskusikan hal-hal berikut: menambahkan ke halaman, memilih anotasi dan ukuran yang berbeda.

Tombol Secara Otomatis Dapat Diatur Ulang

Dalam tutorial awal, kami memastikan bahwa anotasi Tindakan dan Label secara manual dapat diubah ukurannya dengan properti asli Sketch. Namun, jika Anda ingin menggunakan plugin keren untuk melakukan pengubahan ukuran untuk Anda, bolehkah saya menyarankan mengunduh dan menggunakan Rebel Button atau Paddy?

"Bagaimana Menggunakan Halaman"

Terakhir, saya menambahkan halaman untuk "Cara menggunakan Halaman". Saya telah menyertakan petunjuk default tentang cara menambahkan laman ke artboard serta cara mengubah teks "beranda" default.

Kiat: jika Anda perlu menempatkan elemen Anda secara akurat, pilih elemen dan tekan Opsi di keyboard Anda. Saat mouse Anda melayang di atas elemen lain pada artboard, indikator akan menyampaikan jarak piksel yang tepat di antara mereka.

Panduan Gaya

Hal berikutnya yang perlu kita atur adalah panduan gaya. Saya telah membuat halaman baru dan, Anda dapat menebaknya, saya menyebutnya "Panduan gaya". Seperti panduan gaya lainnya, ini dimaksudkan untuk memperkenalkan pengguna ke berbagai gaya yang digunakan dalam file. Di dalam panduan gaya, saya akan membahas warna, tipografi, dan gaya lapisan - termasuk gaya garis panah (solid vs dashed).

Warna

Dalam desain asli diagram alur, saya akhirnya menggunakan sembilan warna berbeda, jadi mari buat artboard baru hanya untuk mereka. Tempatkan semua warna di halaman dan beri nama. Hal-hal keren datang berikutnya!

Membuat dan Mengatur Gaya Warna

Sekarang saya akan menambahkan warna ini sebagai gaya. Dengan cara ini, jika ada yang ingin menyesuaikan warna dari berbagai elemen yang mereka bisa.

Pertama, sintaksnya: Styles/Color/{Color name}. Jadi, Styles/Colour/Error red or Styles/Colour/Background blue. Setelah Anda selesai menambahkannya, lihat dan kagumi bagaimana tersusun rapi warna-warna tersebut muncul di dropdown Layer Style! Selain itu, Anda dapat melihat bahwa ada sisa gaya dari tutorial asli. Kami akan mengaturnya nanti.

Alasan pertama untuk semua warna yang ditata adalah untuk menunjukkan apa yang sedang digunakan (seperti panduan gaya). Alasan kedua adalah untuk penguraian ulang yang mudah. Itu tidak akan berlaku untuk semua elemen yang berbeda yang digunakan (seperti teks) tetapi itu dapat dengan mudah memengaruhi yang hanya dengan latar belakang seperti Yes dan No anotasi. Kami akan mencoba melakukan hal itu selanjutnya.

Kustomisasi Warna

Kembali ke halaman simbol. Selanjutnya, terapkan gaya yang sama yang baru kita buat ke elemen Action, Label, Ya dan Tidak. Dengan cara ini, jika Anda memutuskan Anda tidak lagi menginginkan Ya menjadi kuning tetapi hijau, yang harus Anda lakukan hanyalah memperbarui warna di panduan Gaya dan semua Ya di seluruh file Sketsa akan berubah warna.

Warna Dokumen

Untuk membuat alur kerja Anda sedikit lebih mudah, Anda mungkin ingin menyimpan warna Anda ke warna Dokumen. Ini akan membuatnya lebih mudah diakses setiap saat.

Menjaga Artboards dan Lapisan Anda Terorganisir

Jika Anda suka diatur, saya sarankan mengunduh Sort Me Plugin. Ini mengurutkan lapisan dan artboards, menurut abjad dan numerik (atau juga terbalik). Berikut adalah beberapa sumber daya efisiensi lain untuk Sketch:

Penulisan

Panduan gaya berikutnya yang perlu kita buat adalah untuk tipografi. Kami ingin menampilkan semua gaya teks dalam dokumen, dan saya ingin membaginya menjadi dua kategori, teks dokumen (seperti dalam panduan manual dan gaya di sini) dan yang ada di diagram alur.

Menata Ulang Gaya Teks

Sekarang saya ingin menunjukkan kepada Anda cara mengatur ulang Gaya Teks Anda saat ini dan mengganti nama mereka (jika perlu). Dari drop down Text Style, pilih opsi terakhir Organize Text Styles... Itu akan memunculkan jendela baru yang dipenuhi dengan semua gaya Teks Anda. Jika Anda mengklik dua kali, Anda dapat mengganti namanya. Saya ingin Anda mengubah nama mereka sebagai berikut:

  • Default text > Flow diagram texts/Action
  • Label text > Flow diagram texts/Label
  • Notes > Flow diagram texts/Notes
  • Page text > Flow diagram texts/Page
  • Manual texts/… > Document texts/…

Saya juga ingin Anda mengganti semua ketiga "teks manual" menjadi "Dokumen teks". Kami membuat nama awal dengan tujuan hanya menggunakannya dalam dokumentasi manual Pengguna, tetapi sejak itu kami telah menambahkan panduan gaya yang membuat konvensi penamaan tidak lagi akurat. Seperti yang Anda lihat mengubah nama gaya teks sederhana. Jika Anda salah mengeja nama atau konvensi penamaan Anda perlu diperbarui, itu tidak masalah!

Tip: ikon minus kecil [-] di sudut kiri bawah akan menghapus gaya yang dipilih. Tetapi hati-hati: tidak ada batalkan dan tidak menanyakan apakah Anda yakin.

Perbarui gaya teks di panduan gaya untuk memperbarui tipografi di seluruh file (seperti halnya warna).

Gaya Bersama dalam Elemen Tersisa

Ini akan menjadi artboard terakhir di bawah bagian panduan gaya. Di sini kita akan membahas cara mewarnai ulang dan memperlakukan elemen yang tersisa, simbol halaman, dan simbol anotasi keputusan. Kami akan membahas panah terakhir, tepat setelah menyelesaikan bagian gaya bersama.

Mengatur Layer Styles Bersama

Jika Anda melihat kembali ke bagian warna, Anda akan ingat bahwa kami memiliki beberapa gaya tambahan yang saya katakan akan kami atur nanti. Nah, sekarang saatnya! Idenya persis sama dengan mengatur gaya teks. Pilih untuk mengatur gaya lapisan; Anda dapat mengganti nama, mengatur, dan menghapus semuanya sama seperti gaya teks.

Untuk gaya lapisan, saya ingin Anda menyimpan setiap satu Style/Colour/... yang kami buat sebelumnya. Kemudian, ganti nama sisanya sebagai berikut:

  • Action bg > Background/Action
  • Arrow - Dotted > Arrow line/Dotted
  • Arrow - Solid > Arrow line/Solid
  • Label bg > Background/Label
  • Page > Background/Page

Kiat: menekan tombol Tab tidak menavigasi ke bawah daftar nama gaya yang sama itu akan menurunkan daftar lapisan. Sebagai gantinya, di jendela ini, tombol Tab membuat nama gaya yang dipilih dapat diedit atau tidak. Alihkan satu atau dua kali untuk melihat apa yang saya maksud!

Ingat ikon minus [-] saya sebutkan sebelumnya? Ini untuk menghapus gaya. Saya ingin Anda menghapus Background gray. Ini adalah sisa dari eksplorasi desain awal saya dan tidak digunakan di mana pun.

Terakhir, tutup jendela, pilih latar belakang Anotasi Keputusan dan pilih Create new Layer Style, from the dropdown. Name the new style “Background/D, dari dropdown. Beri nama “Background/Decision” gaya baru. Kami akan melanjutkan dan menyesuaikan gaya ini sekarang, kembali ke halaman panduan gaya. Salin latar belakang dari Anotasi Keputusan dan elemen Halaman.

Menambahkan dan Memperbarui Gaya Lapisan Bersama

Kembali pada panduan gaya, tempelkan dua latar belakang ke dalam Panah dan elemen artboard. (Saya hanya akan menyalin Halaman dan Anotasi Keputusan.)

Hanya untuk memberi Anda contoh nyata mengubah gaya dan memperbarui secara universal, saya ingin kami melanjutkan dan mengubah gaya latar belakang Anotasi Keputusan. Itu sebabnya saya meminta Anda membuat Layer Style terpisah untuknya, sehingga tidak akan memengaruhi Anotasi Aksi. Ubah ke apa pun yang Anda inginkan, tidak harus sesuai dengan desain. Tambahkan batas 1px dengan warna yang Anda pilih dan warna latar belakang baru juga.

Setelah selesai, dari Layer Style tarik ke bawah, pilih Update Layer Style. Jika Anda pergi ke halaman diagram alur sampel atau kembali ke halaman simbol, Anda akan melihat gaya telah diperbarui. Itu adalah contoh bagus dari gaya pembaruan yang sedang beraksi. Itulah yang seharusnya Anda harapkan terjadi jika Anda memperbarui dokumen untuk gaya desain baru, seperti warna merek yang berbeda.

Kiat: jika Anda mengubah gaya elemen dengan gaya lapisan di atasnya, Anda dapat mengembalikannya ke gaya asli dengan memilih Reset Layer Style.

“Panah, Gaya Garis, Titik Awal dan Akhir”

Oke, kami menemukan aset akhir dan itu semua tentang panah! Saya meninggalkan yang terbaik untuk yang terakhir, secara alami. Pertama-tama, kita perlu menambahkan panah ke panduan gaya kami. Saat ini kami hanya memiliki satu jenis panah yang kami miliki. Namun, jika Anda ingat selama pembersihan lapisan, kami memiliki garis yang solid dan garis putus-putus. Mari tambahkan panah bertitik ke koleksi kami.

Membuat Panah Dotted

Di halaman simbol, saya ingin Anda menyalin panah pertama, Arrow/Default/Right, dan beri nama Arrow/Dotted/Default/Right. Pilih garis panah dan dari Layer Styles drop-down pilih Arrow line kemudian Dotted. Dan itu dia! Kami memiliki panah putus-putus pertama kami.

Dua hal lagi di sini. Pertama, maju dan itu ke panah yang tersisa. Tetap pada konvensi nama Arrow / Dotted /… untuk menyimpan dropdown Symbol yang terorganisasi dengan baik. Berbicara tentang konvensi nama dan sintaks, hal kedua yang harus Anda lakukan adalah mengganti nama setiap satu dari panah garis solid asli. Dropdown Simbol akan menjadi berantakan jika Anda tidak menyukainya.

Gunakan plugin Rename It Sketch untuk membuatnya lebih halus untuk Anda! Pilih Plugins > Rename It > Find and Replace Layers/Artboard Names. Atau Anda dapat menekan Control + Option + Command + R untuk jendela plugin untuk muncul. Di sana, ketik Arrow/Default atau Arrow/S-Shape dan ganti dengan Arrow/Solid/Default dan Arrow/Solid/S-Shape dan seterusnya. Pastikan Lingkup Pencarian saat ini dipilih ke Halaman Saat Ini, bukan Layer.

Titik Awal dan Akhir

Hal terakhir ketika datang ke panah adalah titik awal dan akhir. Dalam tutorial pertama saya menunjukkan kepada Anda bagaimana menambahkan contoh-contoh yang berbeda seperti garis besar. Tambahkan gaya sebanyak yang Anda suka, lalu setelah selesai jangan lupa untuk menyertakan semua titik awal dan akhir yang baru dan mengagumkan di panduan gaya juga.

Dan dengan itu, kita selesai membuat panduan gaya!

Kesimpulan

Tujuan dari tutorial ini adalah untuk mengembangkan yang asli dan mengajarkan Anda cara-cara yang lebih dahsyat untuk menggunakan Sketch. Pada saat yang sama, ini akan menunjukkan beberapa cara praktis untuk meningkatkan dan mengemas semua file Sketsa Anda agar lebih bermanfaat bagi anggota tim dan pelanggan.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.