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 50pxx50px, hasil slicing-nya juga harus 50pxx50px. #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.