Optimasi Garis 1 Pixel Pada Desain Website

2 minute read

desainhack.com - Walaupun secara visual kehadirannya sering terabaikan, tetapi bagi desainer yang teliti dan mengejar detail pada karyanya, 1 pixel itu kegunaannya sangat penting sekali. Terkadang pengunaan garis 1 pixel secara tepat bisa menjadi salah satu hal yang membedakan desainer baik dan desainer terbaik.

Desain website modern sekarang ini banyak menggunakan trik 1 pixel. Kegunaannya bisa bermacam-macam, selain untuk memberikan detail visual yang tidak terlalu berlebihan, garis 1 pixel juga bisa menambah faktor kenyamanan pengguna. Berikut beberapa contoh penggunaan garis 1 pixel pada desain website.

Memperjelas Batas

Yang ini sudah jelas fungsinya, yaitu untuk memberikan jarak antar konten satu dengan yang lain supaya pengguna mendapat ruang yang lebih nyaman dalam membaca. Biasanya di gunakan untuk memisahkan beberapa kelompok text/paragraf (contoh: Twitter Stream, News Feed, dll).

Trik untuk membuat efek pembatas seperti gambar di atas adalah dengan menggunakan 2 garis masing-masing berukuran 1 pixel. Lalu buat warna garis yang satu lebih terang dari warna yang lainnya, dan tempatkan keduanya saling berdempetan.

Mempertajam Bidang

Garis tipis 1 pixel juga bisa di gunakan untuk memoles garis luar bidang, sehingga hasil akhirnya akan terlihat lebih tajam dan berbeda. Efek ini memang tidak terlalu jelas kelihatan, tetapi bila di bedakan antara yang memakai dan yang tidak, baru akan terlihat mana yang lebih nyaman di mata.

Memberikan Detail Visual

Tombol yang simpel dapat terlihat menarik kalau kita menggunakan outline 1 pixel dengan warna yang tepat. Dan tentu saja tombol yang efektif adalah tombol yang lebih ‘mengundang’ pengguna untuk mengklik.

Contoh & Inspirasi

Kesimpulan

1 pixel memang kecil, namun memegang peranan penting terhadap hasil akhir suatu desain website. Dengan penggunaan dan trik yang tepat kita bisa menciptakan detail yang akan memberikan dampak signifikan.