Optimasi Garis 1 Pixel Pada Desain Website

Ada 39 Komentar Seru

Oleh: Richard Fang

18 February 2010

optimasi_1pixel

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).

Optimasi_1Pixel_Garis_Pembatas

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.

Optimasi_1Pixel_Garis_Pembatas_Trik

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.

Optimasi_1Pixel_Garis_Pertajam_sebelum

Optimasi_1Pixel_Garis_Pertajam_sesudah

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.

Optimasi_1Pixel_Garis_Detail_visual

Contoh & Inspirasi

optimasi_1pixel_contoh1

optimasi_1pixel_contoh2

optimasi_1pixel_contoh3

optimasi_1pixel_contoh4

optimasi_1pixel_contoh5

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.

Jadi, kalau sekarang kamu sudah selesai mendesain website, coba cermati kembali supaya hasilnya adalah sebuah desain website yang ‘matang’.

Apakah kamu sering menggunakan trik ini juga? Atau ada trik detail yang lain? Silakan berbagi di kolom komentar :)

Jangan lupa bergabung di Grup Flickr Jurus Grafis untuk memamerkan karya kamu, temui juga Jurus Grafis di Twitter dan Facebook. Mari berlangganan Jurus Grafis melalui Email atau RSS.

Tentang Penulis

/ Richard Fang

Menikmati proses rancang website, khusus nya dari sisi tampilan antar muka dan penggunaan. Tidak bisa hidup tanpa Gmail, Google Reader dan Twitter. Sering menghabiskan waktu mengarungi samudra informasi.
Share to Facebook
Tweet This!
Share

Ada 39 Komentar Seru Tentang Posting Ini

  1. 18 February 2010
    Yofie Setiawan bilang,

    wanjrit! ini yang gw cari2 selama ini chad wkwk… maklum masih pemula, thanks for the info bro..!!

    Reply
  2. 18 February 2010
    Yofie Setiawan bilang,

    eh tanya, trik kalau garisnya lengkung gmn? kayak button itu… atau sometimes ada border yang lengkung…

    Reply
    • 18 February 2010
      Richard Fang bilang,

      untuk button rounded, pake inner shadow yop, prinsipnya sama seperti ngasih efek drop shadow inset pada text, cuma ini inner shadow :)

      Reply
  3. 18 February 2010
    Vincent Hadi Wijaya bilang,

    Mantab infonya. :)
    jangan pernah meremehkan hal-hal yang kecil. hehe..

    Reply
  4. 18 February 2010
    ajir bilang,

    nice info neh..
    jadi sadar..slama ini sering kurang merhatiin detail.. :D

    Reply
  5. 18 February 2010
    Hexacreative bilang,

    greatarticlesir! <-sebelum
    sesudah membaca artikel ini
    great article sir <-sesudah

    hal yang sepele tetapi penting untuk keseluruhan.

    Reply
  6. 18 February 2010
    Entertica bilang,

    Mantab nih ulasannya. Bahasanya enak bgt. Semoga kapan2 kami bisa sumbang artikel yah ^^

    Reply
  7. 18 February 2010
    andrewbenardski bilang,

    Another great post from Jurus Grafis, Maknyos!
    Ttg garis 1pxl, “Space for sale” nya Jurus grafis yg warna ijo, bisa dijadiin sample jg tuh, kerenn…

    Nice share Om Fang! ;)

    Reply
    • 18 February 2010
      Richard Fang bilang,

      thanks! :D

      @ Entertica – boleh banget! di tunggu loh hehehe :)

      @ Hexacreative – hahaha bisa aja tuh :P

      @ ajir & vincent – sip thanks! :D

      Reply
  8. 18 February 2010
    zam.web.id bilang,

    wew thanks banget, nice posting
    selama ini sering dipakai
    tapi saya belum pernah baca reviw soal 1 pixel
    di website lain selain di @jurusgrafis

    :D

    Reply
    • 18 February 2010
      -goenrock- bilang,

      Sepakat banget sama Pak Zam, sering dipakai, tapi malah baru kali ini lihat tipsnya :D

      Reply
  9. 18 February 2010
    kharis sulistiyono bilang,

    garis pembatas semacam itu ternyat kombinasi 2 garis 1px toh! tak kirain pake efek gradient overlay. Pantesan pas gue nyoba pake gradient gak match gitu :P . Thanks for big boss of webdesign.

    Reply
  10. 18 February 2010
    Didik Wicaksono bilang,

    Great tips! Saya juga sudah menduga pasti inspirasinya dari situs2 Envato! :D

    Share juga, masih seputar satu pixel, kalau kamu pengen memperoleh efek “Bevel/Emboss” yang cantik dengan CSS, pakai 1 pixel shadow. Warna dari shadow-nya adalah warna yang kontras dengan background :)

    contoh:

    text-shadow: #fff 0 1px;

    Best of luck,
    Didik.

    Reply
    • 18 February 2010
      Yofie Setiawan bilang,

      wah ada sample nya ga mas didik?

      Reply
      • 18 February 2010
        Didik Wicaksono bilang,

        Wah, banyak. Sudah banyak yang pakai. Silakan lihat salah satunya di navigasi atas woothemes.com

        Untuk estetika, lebih baik menggunakan 1 pixel saja, dan dengan warna yang sedikit kontras dengan warna background :) seperti kode yg sudah saya beri sebelumnya.

        Reply
    • 18 February 2010
      Yofie Setiawan bilang,

      Mungkin mksdnya mas didik seperti di http://scraplr.com/

      Reply
  11. 18 February 2010
    uberVU – social comments bilang,

    Social comments and analytics for this post…

    This post was mentioned on Twitter by andrewbenardski: Optimasi Garis 1 Pixel Pada Desain Website http://tr.im/OFU2 (via @jurusgrafis)…

    Reply
  12. 18 February 2010
    Arya bilang,

    Jadi inget Nirmana 2D :D .

    Reply
  13. 18 February 2010
    raainattack bilang,

    keren richard…
    simple namun penting.
    :D

    Reply
  14. 19 February 2010
    Graha@GDesain bilang,

    The first article about 1px I’ve ever seen!!!

    Reply
  15. 19 February 2010
    masova bilang,

    biasanya saya gunakan 1px itu untuk bekgron yang tile gitu, biar sizenya gk berat banget kalo di-load.. :D

    Reply
  16. 20 February 2010
    Jauhari bilang,

    Mantap… saya malah jarang pake dengan teknik grafis.. paling sering cuma main main dengan CSS doang :D

    Reply
  17. 22 February 2010
    Aditya Brahma Yoga bilang,

    Posting yang oke Mr.Fang, simple tapi layak untuk dishare,

    Kalo boleh share dikit..sebenernya triknya sama kayak tips oke dari Didik wicaksono tapi kalo diPhotoshop saya biasanya bikin highlight 1px itu dari blending InnerShadow untuk dapetin efek highlight-nya, contoh kasus dalam pembuatan garis pembatas konten (separator) seperti ditulis diatas, bisa juga pake DropShadow 1px untuk dapetin efek highlight, tampak seperti 2 garis tpi cuma 1 layer saja..irit layer juga jadinya, ga perlu layer tambahan untuk buat 2 garis, jadi jangan percaya kalo shadow itu selalu gelap hehehe

    Reply
  18. 23 February 2010
    Rayi Christian Wicaksono bilang,

    wiw, baru nyadar ane,.. 1 garis cuman 1px aja,.. hihih
    nice share bro!

    Reply
  19. 26 February 2010
    kakday bilang,

    kan ku inget pesan anda Fang, 1 pixel dari desain anda akan mempengaruhi kedetailan dan keprofesionalan karya anda.

    ada pertayaan fang “Bagaimana menentukan 2 warna garis 1px itu?”

    terima kasih

    Reply
  20. 9 March 2010
    Kresna bilang,

    yes yes mantips!

    Reply
  21. 12 March 2010
    ardianzzz bilang,

    Nice gan, inspiratif :)
    ane juga pernah tahu kalau garis 1px bisa buat bikin efek tree view

    Reply
  22. 23 March 2010
    hafidz bilang,

    ajib…tutorial yg keren…banyak membantu nih..terima kasih

    Reply
  23. 2 April 2010
    Onnay Okheng bilang,

    Wah… bener tuh, makasih sudah mengingatkan..
    bener-bener membantu :D

    Reply
  24. 12 April 2010
    Redesain Bloggingly April 2010 bilang,

    [...] 2 piksel: Optimasi Garis 1 Pixel Pada Desain Website (Jurus [...]

    Reply
  25. 9 October 2010
    Topan Aprilia bilang,

    nice article..
    mo nanya nemas Bedanya icon yg di resize ma yg ga di resize pa,,??
    padahalkan gambarnya sama z,,
    maklum bukan nak DKV,,,

    Reply
    • 9 October 2010
      Richard Fang bilang,

      yang pasti ya ukuran nya beda, lebih besar atau lebih kecil.. biasanya yg besar di kecilin, ga mungkin sebaliknya.. kecuali icon nya dalam bentuk vektor..

      Reply
  26. 16 October 2010
    Andy bilang,

    Bro Richard, U are really the best….. artikel nya bermanfaat banget buat gue yang newbie ini…

    Reply
  27. 8 November 2010
    ifud bilang,

    Wah, bener juga.. ini dia hal kecil yang membuat pengaruh besar hehehe.. padahal cuman 1 pixel :D

    Mantab bro.. thanks artikelnya

    Reply
  28. 10 December 2010
    dony bilang,

    satu dari sekian banyak tips berkualitas wahid di web ini

    Reply
  29. 24 January 2011
    Alfin bilang,

    kak richard.gimana sich caranya buat slider kayak punya bang richard.postingin tutorialnya bang.please

    Reply
  30. 6 March 2011
    kangzayin bilang,

    Bang Ricard, minta ijin ngutip beberapa poin penting dari artikel ini (dan artikel lainnya yg berhubungan) buat bahan posting dan sy sunting sesuai kebutuhan, trim’s kalo berkenan…

    Reply
  31. 10 March 2011
    Windyasari bilang,

    hal kecil, tapi cukup penting :D

    Reply
  32. 30 April 2011
    ino putro bilang,

    gan kode script garis 1 pixel apa’an,,,????

    Reply
  33. 8 November 2011
    aloenk bilang,

    nice nih…
    tp cara masukin ke web gmn nih…?
    biar jaraknya g’ jauh dr tulisan..

    Reply
  34. 24 November 2011
    Membuat Garis Batas 1 Pixel dengan CSS « Web Development Labs bilang,

    [...] Mempejelas batas antar konten/layout. [...]

    Reply
  35. 4 June 2010
    Richard Fang bilang,

    1 pixel memang ga bisa di resize, lebih baik buat dengan ukuran sebenarnya, baru di kasih 1 pixel
    hasil nya akan lebih tajam daripada di buat dulu baru di resize

    Reply

Mari Berkomentar!

*informasi yang di perlukan

Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here

Posting Populer

Mari Berbagi Informasi

    • Digital Painting (Illustration)30 January 2012

      Bagaimana cara membuat ilustrasi digital dengan Tablet Pen

    • Membuat Tulisan Berbentuk Wajah Dengan Photoshop Cs531 October 2011

      Dalam tutorial Photoshop membuat tulisan berbentuk wajah ini kita juga akan belajar menggunakan beberapa teknik Photoshop sekaligus yang dikemas dalam satu paket hemat, cepat, murah lagi. Seperti teknik menyeleksi rambut dengan teknik Refine Edge, teknik seleksi Photoshop dengan menggunakan Color Range, kemudian bagaimana cara membuat Brush Photoshop sendiri.

    • Simple Trik Berkreasi Dengan Brush Photoshop7 October 2011

      Tutorial photoshop kali ini saya mencoba membuat photo menjadi seperti gambar di samping. Entah apa itu namanya, yang penting hasilnya seperti itu. Kalau boleh saya akan menamainya dengan efek poster atau mungkin juga efek stiker (maaf jika namanya kurang tepat), tapi itu terserah anda mau menyebutnya sesuatu apa.

    • Cara Membuat Stempel Lingkaran Dengan Photoshop6 October 2011

      Tutorial Photoshop cara membuat stempel berbentuk lingkaran ini saya buat sebagai alternatif saja bagi anda belum bisa menggunakan Corel Draw ataupun software pengolah gambar vektor lainnya, namun disisi lain anda cukup menguasai Photoshop.

    • Free Download Ebook Tipografi - Meet Your Type4 October 2011

      Kadang urusan mengatur tata letak dan jenis huruf dapat menjadi sesuatu yang sangat menyebalkan. Tapi jika di pelajari lebih lanjut hal ini bisa jadi menarik

    • Tips Optimalisasi Gambar Untuk Web30 September 2011

      Di sini saya akan menyampaikan beberapa tips cara mengoptimalkan gambar untuk website.

    • Membuat papernote dengan photoshop28 September 2011

      Mendesain papernote atau catatan kecil dengan photoshop. Tutorial oleh psdesain.net yang mudah di ikuti dengan langkah step-by-step berbahasa indonesia.

    • Color Droid25 September 2011

      Color Droid adalah aplikasi color palette dan color picker berbasis android yang diperuntukkan bagi para designer web dan grafis untuk mencari warna yang tepat dan menyimpan warna tersebut guna mempermudah pekerjaan mereka.

    • Manipulasi tangan swirl dengan photoshop22 September 2011

      Belajar photoshop bagaimana memanipulasi efek brush swirl dengan photoshop.

    • Photomontage"The lost city"16 September 2011

      Didalam tutorial ini kita akan menggunakan proses masking memainkan blending mode dan menjaga keseimbangan warna.

Galeri Pembaca

Mau Berlangganan Jurus Grafis Melalui Email? Ya! tentu saja!