Tools Sketch

Sketch adalah software untuk membuat desain website, aplikasi Android atau iOS, software PC, dan lain-lain yang berhungan dengan product design.

Saya pribadi menggunakan sketch ini untuk keperluan UI UX desain.

UI kependekan dari user interface, yaitu proses mendesain tampilan (interface) dari suatu produk web atau aplikasi.

UX adalah singkatan dari user eXperience, yaitu proses merancang fungsionalitas suatu aplikasi atau web.

Logikanya seperti ini, misal kamu punya rumah. Letak pintu utama ada di depan, letak dapur ada di belakang, letak toilet ada di sebelah kanan, dll. Itu yang dinamakan UX.

Sedangkan warna cat tembok, jenis keramik yang digunakan, bentuk toiletnya seperti apa, itu yang dinamakan UI.

UX fokus pada fungsionalitas (pengalaman = experience) sedangkan UI fokus pada yang kasat mata.

Untuk membuat desain UI dan UX, kita butuh yang namanya tools atau alat. Kamu bisa menulis kalau ada polpen atau alat sejenisnya kan?

Tools yang banyak digunakan saat ini salah satunya adalah Sketch.

Berikut ini adalah fitur-fitur andalan Sketch:

1. Berbasis Vector

Sketch ini berbasis vector, tapi juga bisa melakukan fungsionalitas software bitmap seperti Photoshop.

Misalnya efek untuk membuat blur gambar, blending option, dll.

Untuk membuat desain aplikasi sangat penting jika menggunakan aplikasi berbasis vector. Kenapa?

Karena aplikasi atau web kita bersifat multi device yang ukurannya berbeda-beda.

Misal, ukuran layar iPhone XS Max tentu beda dengan Xiaomi Mi 5 kan?

Karena beda-beda itulah kita membutuhkan desain berbasis vector. Fungsinya buat apa?

Ya supaya lebih mudah untuk memperbarui ration dari obyek desain tersebut.

Selain itu, dengan berbasis vector kita lebih mudah mengeksport desain dalam skala yang lebih besar. Misal, kita desain dengan ukuran 1440 x 1200px, kita bisa eksport dengan ukuran 1x, 2x, bahkan 10x.

Lebih puas kan? 😀

2. Tampilannya simple

Tampilan sketch sangat sederhana, dan memang dibuat untuk desain aplikasi.

Memang benar kita bisa desan UI dengan Photoshop, tapi tampilan dan fiturnya ribet. Karena photoshop didesain untuk desain grafis dan manipulasi foto.

tampilan sketch – sketch.com

Posisi layering disebelah kanan, dan custom tampilan di sebelah kanan. Tidak seperti photoshop, dimana keduanya ada di sebelah kanan (walau bisa diganti sih)

Hal ini sangat memudahkan kita dalam manajemen layer dan efek.

3. Banyak dukungan plugin

Plugin pendukung sangat-sangat bermanfaat dan menjadi salah satu alasan kenapa kita memilih sebuah tools.

Ada buanyak sekali (gak tau berapa jumlahnya pokoknya banyak >_<) plugin sketch yang bisa kamu gunakan. Misal buat convert desain ke HTML dan CSS.

Dari plugin yang kompleks misalkan conversi desain menjadi kode sampai hal yang dirasa gak penting, misal mengurutkan layer dari A-Z atau 1-2.

Hampir semua plugin yang kamu butuhkan ada yang buat. Kenapa?

Ya karena yang butuh gak cuma kamu doang :v

4. Terintegrasi cloud

Saat ini apaapa butuh koneksi internet, ya karena memang sangat memudahkan.

Sketch juga menyediakan fitur tersebut, kita bisa eksport file dokumen sketch ke awan dan membagikan desain tersebut ke tim kita.

Dengan adanya fitur sharing ini kita bisa berkolaborasi dengan tim kita.

Tim lain bisa memberikan masukan ke desain yang telah kita buat. Yah, seperti ketika kamu ngasih selembar kertas ke teman kemudian dia mencoret-coret memberikan masukan.

5. Bisa bikin prototype

Sebelum suatu aplikasi didevelope sangat perlu untuk membuat prototype.

Logikanya seperti ini, tidak mungkin kan kontraktor bangunan langsung membangun sebuah bangunan untuk “cuma” dilihatin ke konsumen?

Pasti, dibuat desain sketsa dulu, habis itu dibuat desain 3D yang bisa diputer-puter desainnya. Dilihat 360 derajat dari atas, kanan, bawah, kiri.

Nah, sama. Dengan sketch kita bisa bikin prototype aplikasi sebelum ke hand-over atau diserah terimakan ke programmer.

Selain itu, dengan buat prototype sangat amat membantu programmer untuk ngoding alias mengkonversi desain tersebut menjadi aplikasi real yang siap digunakan.

6. Buat symbol yang bisa diulang-ulang

Ini fitur utama yang sangat-sangat bermanfaat dan unggul dibanding Photoshop.

Kita bisa membuat satu buat simbol dan bisa digunakan berulang-ulang kali.

Misal, kamu mau buat desain web dengan 10 halaman. Disetiap halaman pasti ada bagian navigasi atas kan?

Kita bisa membuat 1 buat navigasi yang bisa dipakai di 10 halaman tersebut. Manfaatnya?

Ya jika kita mau ngedit navigasi, kita tinggal edit 1 aja udah berubah semuanya. Mirip seperti CSS, ketika kamu mengedit 1, semuanya keedit.

Bayangin, jika kamu bikin 50 halaman, dengan navigasi yang sama. Tiba-tiba navigasinya berubah desain. Masak iya mau ngedit 50 halaman?

7. Image editing yang cukup lengkap

Walau ini berbasis vector, tapi fitur untuk mengedit gambar bitmap juga sudah sangat cukup untuk keperluan web / app desain.

Untuk ngekrop, blending option, border, shadow, masking, semuanya ada di sketch.

Jadi, sangat memudahkan kamu untuk membuat desain web yang lebih real.

Kekurangan

Tentu ada kekurangan software ini, yang paling mencolok ya karena ini hanya ada di mac saja 🙂

Jadi, jika kamu pengguna windows mohon bersabar ya ini ujian.

Kemudian, untuk membuat micro interaction juga masih belum bisa. Hanya sebatas slide prototype saja.

Sehingga kamu butuh software tambahan untuk membuat micro interaction, seperti software principle atau invinsion.

Leave a Comment