Disclaimer: tulisan ini adalah opini, bukan fakta, bukan standar industri.
"Kalau di sini, kita pakai prinsip 'pixel-perfect'. Udah pernah denger?"
Awal Mula
Pertanyaan di atas itu salah satu pertanyaan yang saya dapat dari calon atasan ketika interview untuk posisi frontend web developer.
Waktu itu istilah "pixel-perfect" masih asing di telinga saya, tapi cukup sederhana untuk dilogika. Secara sederhana, pixel artinya pixel (hmm), dan perfect artinya sempurna. Sempurna pixelnya.
Intinya hasil slicing persis seperti desain, tidak ada kesalahan satu pixel pun.
Pixel-perfect = hasil slicing persis seperti desain
Sebagai contoh, kalau di desain jaraknya 5px
, jarak di hasil slicing-nya juga harus 5px
. Kalau di desain ukuran profile picture-nya 50px
x50px
, hasil slicing-nya juga harus 50px
x50px
. #DilarangKorupsiPixel
Toleransi
Pada kenyataannya, kesempurnaan hasil slicing ini tergantung situasi dan kondisi yang akhirnya melahirkan toleransi.
Contoh toleransi di sini kira-kira begini:
- Jika jarak antar elemen
50px
, - lalu ada toleransi
5px
, - maka hasil slicing
45px
bisa diterima. - Sedangkan hasil slicing
56px
ditolak. - Jarak antar elemen pada hasil slicing harus di antara
(50-5)px
sampai(50+5)px
.
Jenis-jenis toleransi
Toleransi ini tidak terbatas dalam satuan pixel ya. Ada juga toleransi dalam bentuk persen (%) dan toleransi dalam bentuk chemistry antara developer dan designer (yang bisa jadi membantu atau jadi problematik).
Contoh kasus, jika toleransi 5px
diterapkan pada elemen kecil seperti button group, bisa jadi hasil slicing-nya ditolak.
Jika di desain jarak antar button pada button group itu 5px
, lalu toleransinya 5px
, maka implementasi jarak antar elemen 0px
harus ditolak walaupun toleransi 5px
tidak terlanggar.
Tugas kita sebagai frontend web developer lah untuk mengubah toleransi 5px
menjadi persentase. Misalnya toleransi 5px
aman untuk jarak sebesar 50px
, berarti toleransinya kurang lebih sebesar 10%. Jika diterapkan ke jarak antar button yang hanya 5px
, maka toleransinya sebesar (10%*5)px
, yaitu 0.5px
. Jarak antar button minimal 4.5px
, maksimal 5.5px
.
Pembulatan
Kalau ada angka di belakang koma seperti 0.5px
, bulatkan saja ke angka yang lebih masuk akal misalnya 1px
, sehingga kalkulasinya lebih mudah. Misalnya toleransi 0.5px
untuk jarak 5px
, pembulatan toleransi jadi 1px
, maka minimalnya 4px
dan maksimalnya 6px
.
Hasilnya mungkin tidak terlalu pixel-perfect, tapi kita bisa mendapat benefit lain seperti: source code lebih bersih, mudah dibaca dan dikembangkan.
Pengaruh Toleransi
Semakin besar toleransinya, semakin cepat mengerjakannya, tapi semakin berkurang kualitas slicing-nya. Semakin tidak "pixel-perfect".
Jadi usahakan nilai toleransi selalu kecil mendekati 0, kalau memungkinkan.
Hasil slicing yang 100% sama dengan desain (pixel-perfect) sudah pasti berkualitas. Hasil slicingnya yang berkualitas ya, kalau desainnya berkualitas atau tidak, itu di luar scope pembahasan kali ini.
Sekian pembahasan kali ini, follow saya untuk pembahasan lainnya ya. Silakan berpendapat di kolom komentar selagi masih boleh berpendapat.
Discussion