Pakket Icon — Our new icon system
Melanjutkan tulisan sebelumnya Lion Parcel Color System: When We Try to Define It Clearly in Code and Design. Topik kali ini tidak kalah penting, terutama untuk team Lion Parcel.
Yaa, icon adalah hal yg crutial dan cukup penting buat kami. Setidaknya kami menggunakan icon dibanyak tempat entah itu sebagai label, pengganti CTA, bahkan berperan penting pada informasi yang akan pengguna terima.
Kenyataanya memang sepenting itu kan… icon adalah salah satu cara komunikasi antara pengguna dan system. Dengan bentuk yang sederhana icon dapat menggambarkan kondisi dan keadaan aplikasi.
Simple, Clear & Straight
Simple, Clear & Straight adalah principles yang kami gunakan untuk Pakket Icon. Aplikasi Lion Parcel menggunakan icon dibanyak case dan skenario, sehingga icon yang mudah dipahami, sederhana dan informatif akan membuat user mudah mengerti konteks yang disampaikan.
Mungkin terkadang principles hanya sebagai formalitas, tapi sebenarnya itu yang akan manjaga konsistensi ketika membuat set icon.
Icon seperti apa yang harus di buat, bentuk dan style apa yang akan selalu digunakan.
Style icon “outiline” dan “filled” adalah tipe style icon yang kami pilih diluar itu ada yang style duotune, lineal color, hand drawing, dll. Jika kita lihat di “dribble” atau “flaticon” tentunya akan lebih banyak lagi style icon yang ada saat ini.
System icon material.io adalah referensi icon system yang menurut kami paling clear, diluar dari itu banyak icon system yang menjadi referensi kami seperti IBM Design Language, Feather Icon, Heroicons — Tailwind.
Base Grid
Hal yang paling technical pada pembuatan icon namun setidaknya teori ini sangat membantu dalam standar pembuatan icon. Kembali lagi ke material.io disana bisa kalian dapatkan standar pembuatan icon yang jelas.
Dari yang ada pada material.io kami mengikuti beberapa ukuran dasar yaitu. Pakket Icon menggunakan base grid 24px, Draw area 20px, dan margin 2px sebagai save area.
Basic Shape
Sederhananya basic shape ini adalah petunjuk bentuk dalam pembuatan icon. Basic shape akan menjaga keseimbangan secara posisi dan visual, namun bukan sebagai batasan baku, karna setiap pembuatan icon terkadang tetap menggunakan common sense dan felling designer 😄
Alasan kenapa masih dibutuhkan common sense pada pambuatan icon. Base gird dan basic shape adalah aturan yang sangat jelas dan membantu membuat setiap icon menjadi konsisten.
Namun tidak ada salahnya untuk keluar dari aturan tersebut selama icon yang dibuat tetap memenuhi kebutuan dan tetap pada prinsip yang sama.
2px, Rounded, Radius
Hal yang kami perhatikan selanjutnya adalah stroke, dan radius. Ketebalan icon akan mempengaruhi komposisi sebuah icon pada sebuah halaman. Umumnya icon dibuat dengan ketebalan 1px — 2px, numun terkadang juga ada yang menggunakan 3px seperti pada Uber Iconography.
Ketebalan garis yang sama, serta bentuk ujung yang membulat akan membuat set icon terlihat harmonis. Dengan ujung setiap garis yang membulat akan memberikan kesan visual icon yang ringan dan sederhana.
Yang paling penting dari semua itu adalah bagaimana membuat icon selalu terlihat seimbang secara visual. Pastikan jarak antar element setidaknya sama dengan ketebalan garis atau lebih (≥2px).
Naming / Categories
Kategorisasi itu penting. Kenapa? Lion Parcel saat ini memiliki 300+ icon dengan 2 style. Pengelompokan icon akan sangat membantu ketika melakukan pencarian. Selain itu kategori akan sangat membantu ketika ada penambahan icon-icon baru. Dimana icon baru harus disimpan dan di kelompokkan.
Satu hal yang paling penting pada pembuatan icon adalah nama. Nama adalah salah satu hal yang sangat diperhatikan dalam pembuatan icon. Selain pengkategorian icon nama akan sangat membantu designer dalam pencarian icon yang mereka butuhkan.
Pada dasarnya nama yang digunakan harus sederhana dan dapat merepresentasikan icon tersebut.
Pakket icon yang Lion Parcel buat saat ini masih terus berkembang. Dengan masih banyaknya permintaan icon dari setiap squad jenis kategori dan jumlah icon akan terus bertambah. Mempertahankan konsistensi Simple, Clear & Straight akan sangat menantang kedepannya.
Epilog
Ada satu tools yang cukup menarik kami eksplore yaitu IcoMoon. Tools ini dapat membantu kita untuk mengatur icon set agar lebih mudah di konsumsi oleh engineer. Tools yang dapat merubah format icon set SVG biasa menjadi Polymer, XAML, CSH, icon font with ligatures, or good old PNG/CSS sprites.
Tulisan ini saya akhiri sampai sini. Semoga tulisan diatas dapat membantu. Stay safe & healthy 😊
✨ Special thanks to Lion Parcel Design Team Anggita Prameswara Putri— Design Manager, dan semua Product Design yang terlibat di project ini arif malik, Sena Rizcky Hadi, Nabilah Ulfah Aulia, Ika Magdalena, Rezian Al-islami, Rizki Dwi
