Membuat Icon Tak Lagi Menyeramkan dengan Sketch App

Sedikit flashback kebelakang . . .

Di tahun pertama saya menekuni profesi sebagai UI designer, setiap mengerjakan project saya selalu menggunakan icon buatan orang lain, baik itu dari freebie maupun premium. Namun, ada beberapa masalah yang sering saya temui, diantaranya :

1. Kesulitan mencari icon yang pas, terutama untuk kebutuhan yang spesifik.
2. Ketika mendapat iconset yang dirasa cocok, ternyata iconset tersebut tidak cukup lengkap untuk memenuhi kebutuhan suatu project hingga saya harus mengoplos dengan set yang lain (tentu style tidak akan sama).
3. Mulai bosan menggunakan iconset yang itu-itu saja.

Beberapa kali saya sempat mencoba membuat icon sendiri menggunakan Adobe Photoshop dan juga Illustrator, namun tools tersebut terasa terlalu rumit bagi saya yang memang saat itu belum paham sama sekali tentang shape, path, dll. Upaya tersebut ternyata justru menghabiskan waktu yang cukup banyak bahkan hanya untuk membuat sebuah icon sederhana.

Kemudian sekitar pertengahan tahun lalu ketika saya telah beralih ke Sketch app untuk membuat UI (sebelumnya pakai Photoshop), saya iseng mencoba belajar membuat icon lagi. Dan jujur, saya terkejut dengan cara kerja tool ini dimana semua fungsi dapat dipahami dengan mudah dan ringan sekali. Kemudian, seacara perlahan saya mengasah skill icon design saya, dan mulai membiasakan untuk membuat icon saya sendiri untuk setiap project yang saya kerjakan.

Mengapa perlu belajar membuat icon sendiri?

Yap, mungkin banyak yang masih bertanya-tanya seberapa penting membuat icon sendiri? Mengapa kita harus repot-repot meluangkan sekian banyak waktu untuk membuat icon jika kita bisa membeli sekali dan menggunakannya berulang-ulang? Berikut beberapa alasan yang menurut saya cukup vital.

1. Menambah skill baru. Sebagai seorang designer pasti kita haus akan ilmu-ilmu baru dan selalu ingin mangasah skill yang dimiliki. Jujur, siapa sih yang gak pengen jadi avatar alias penguasa semua elemen? Saya pribadi sangat tertarik untuk menguasai semua aspek UI design mulai dari UI, icons, dan animasi :D
2. Menambah nilai jual kita. Dengan merangkap juga sebagai icon designer, kita dapat menawarkan sebuah point plus ke client yaitu kita dapat membuat project mereka terasa spesial dan personal. Karena dalam design UI yg kita buat akan menggunakan icon yang dibuat khusus untuk project tersebut.
3. Bangga pada diri sendiri? Hmmm.. mungkin yang satu ini agak debatable. Pernahkah teman-teman mendengar ungkapan : biar jelek, milik pribadi? Saya yakin akan ada kepuasan tersendiri ketika kita post/publish design kita, dan kita sadar bahwa design tersebut seluruhnya adalah jerih payah kita sendiri.
4. Tak lagi kebingungan ketika memerlukan icon apapun karena kita dapat membuatnya sendiri.

Bagi teman-teman yang tertarik untuk belajar icon design, berikut saya akan sharing sedikit tentang proses saya dalam membuat icon. Perlu dicatat bahwa yang saya share ini adalah proses design saya, yang mungkin belum tentu ideal bagi teman-teman. Boleh nanti teman-teman juga share proses design kalian, supaya kita bisa saling berbagi pikiran tentang proses yang ideal itu baiknya seperti apa :D

Siapkan peralatan tempur

Tools yang biasa saya gunakan dalam membuat icon, sama persis dengan yang saya gunakan untuk membuat design interface (UI). Yaitu :

1. Laptop/komputer terinstall Sketch app
2. Buku sketsa dan pulpen/pensil
3. Kopi dan musik ☕☕☕

Mana yang harus didahulukan — icon atau UI?

Sebenarnya tidak ada keharusan untuk membuat icon atau UI terlebih dahulu. Namun saya pribadi biasanya mendahulukan membuat UI dengan sedetail mungkin (warna, konten, layout, dll) baru kemudian membuat icon di fase akhir. Ini membantu menentukan proporsi icon itu sendiri, baik dari style maupun tingkat kejelasannya ditengah seluruh komponen UI.

Sekali lagi ini bukan sebuah keharusan. Saya juga pernah beberapa kali membuat icon beriringan dengan membuat UI dan menurut saya tidak ada masalah/kendala sama sekali.

Buat list icon yang dibutuhkan, tentukan ukuran, lalu mulai membuat coretan

Pada artikel ini saya akan menggunakan contoh sebuah design interface untuk platform mobile.

Disini saya membutuhkan 4 icons untuk mewakili fitur discover, schedule, forum, dan profile. Saya menggunakan ukuran icon masing-masing 28x28 px. Teman-teman bisa menggunakan grid bila dirasa perlu (bisa pakai material design icons grid) agar icon terlihat seimbang secara keseluruhan.

Pikirkanlah hal-hal yang mewakili fitur/fungsi tersebut kemudian tuangkan dalam sketsa. Buat sketsa sebanyak dan sedetail mungkin.

Membuat versi digital

Tahap selajutnya adalah membuat icon-icon tersebut dalam versi digital menggunakan Sketch app. Pada artikel ini saya hanya akan memberi contoh 4 icon yang akan saya buat. Maaf ya kalau sketsanya acak-acakan :p

Icon Discover

Secara logika icon ini dapat dibuat dengan mengkombinasikan rectangle dan dua buah circle.

Pertama, buatlah rectangle terlebih dahulu (shortcut pencet “R” atau insert > shape > rectangle). Pada panel kanan (style) uncheck fills, lalu gunakan border dengan posisi center dengan tebal 2px (cek gambar 1). Lalu ubah setiap sudut menjadi rounded dengan cara mengklik icon setting di panel border tadi, lali pilih rounded pada ends dan joins (gambar 2).

Selanjutnya buat 2 buah lingkaran diatas rectangle tersebut masih dengan style yang sama (gambar 3). Bisa kita lihat bahwa rectangle masih nampak dibelakang 2 circle yang baru saja dibuat. Untuk menghilangkannya, kita akan menggunakan scissor tool. Caranya edit path rectangle (bisa dengan cara select rectangle lalu pencet enter, atau langung double click) lalu beri point baru di titik-titik yang akan dipotong (gambar 4).

kemudian klik menu Layer > Paths > Scissor (gambar 5). Lalu arahkan cursor ke garis yang ingin dipotong, lalu klik. Aplikasikan hingga rectangle dibelakang circle sudah tidak nampak lagi (gambar 7).

Icon Schedule

Icon ini dapat dibuat dengan menggunakan dua buah rectangle dan dua buah garis vertikal untuk bagian kepala kalender.

Langkah pertama, buat rectangle terlebih dahulu masih dengan style border 2px, center, dan rounded corner (style yang sama dengan icon sebelumnya). Kali ini kita akan memberi bagian bawah rectangle sedikit lengkungan agar icon tidak terkesan kaku. Lekukan dapat dilakukan dengan cara mengedit path, lalu select 2 point/titik rectangle bagian bawah, pada panel kanan isi corners value sebesar 4 (gambar 1). Setelah selesai, kemudian buat rectangle dengan width sama namun heightnya kita kurangi, sehingga akan membentuk header kalender (gambar 2).

Langkah terakhir, tambahkan 2 garis dengan line (insert > shape > line, atau bisa dengan shortcut “L”) lalu beri style yang sama dengan object sebelumnya (gambar 3).

Icon Forum

Icon ini dapat dibuat dengan mengkombinasikan rounded , editing point (corner radius), dan lines.

Langkah pertama, buat rounded rectangle (bisa dengan shortcut “U”, atau insert > shape > rounded) lalu isi radius maksimal (gambar 1). Kemudian edit shape rounded (double klik atau klik object lalu tekan enter), kemudian select point/titik sudut kiri bawah, kurangi corners hingga 0 (gambar 2).

Terakhir, tambahkan dua line dengan ukuran berbeda, namun masih dengan style yang sama (gambar 3).

Icon Profile

Icon ini sangat sederhana. Dapat dibuat dengan dua buah cricle, kemudian memotong circle bawah hingga menyisakan setengah saja.

Pertama buat dua buah circle, posisikan merapat tepat atas bawah (gambar 1). Circle yang di bawah biarkan keluar dari grid, karena nanti akan dipotong setengah. Kemudian dengan menggunakan tools “scissors”, potong setengah circle bawah tadi hingga membentuk shape seperti gambar 2.

Komplit Vroooohh

Demikian tadi tutorial singkat pembuatan icon dengan menggunakan Sketch app. Mudah bukan? Karena sebenarnya membuat icon secara teknis hanya bermain imajinasi dalam mengkombinasikan object-object saja :D

Active & Inactive state

Sedikit tambahan, biasanya diperlukan dua state dari masing-masing icon tersebut, yakni ketika aktif dan ketika tidak aktif. Untuk inactive state, biasanya saya hanya mengurangi opacity antara 40%–60%. Sedangkan untuk active state, biasanya saya melakukan eksplorasi-eksplorasi sesuka hati :D

Testing langsung di device

Jangan ragu untuk melakukan testing design dari device (mobile), untuk melihat apakah pemilihan shape, warna, dan ukuran sudah proporsional. Karena terkadang apa yang kita lihat di layar laptop/komputer, berbeda dengan yang dilihat user di device mereka.

Yang perlu diingat

Dalam membuat icon, perlu kita ingat selalu bahwa icon dibuat untuk memudahkan user mengenali suatu fungsi/fitur.

An icon must, of course, be ‘iconic’ of the metaphor it represents.

— Chris Spooner

Hindari menggunakan style yang berlebihan hanya karena kita ingin membuatnya terlihat cantik, karena justru hal itu bisa membuat icon tersebut susah dikenali. Nah, disinilah tantangannya, bagaimana membuat icon yang ciamik namun tetap simpel dan mudah dikenali.

Akhir kata

Demikian tadi sedikit pengalaman saya tentang proses membuat icon sederhana menggunakan Sketch app. Tutorial di atas hanyalah garis besar saja belum masuk ke detail teknis dan tentunya masih banyak kekurangan. Untuk teman-teman yang memiliki pertanyaan, kesulitan, atau ingin menambahkan, ditunggu komentarnya :)