Kamis, 04 Desember 2008

Antara Layout dengan satuan pixel dan persen

Sumber : Layout, Gavin Amborse & Paul Harris, London 2005
Layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam sebuah bidang sehingga membentuk susunan artistik. Hal ini bisa juga disebut manajemen bentuk dan bidang. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan.
di design web ada dua satuan yang umum di gunakan dalam membuat sebuah layout web adalah, satuan pixel dan satuan persen (menyesuaikan dengan lebar dan tinggi pixel komputer).

oke... sekarang kita liat contoh2 web yang mengunakan pixel dan persen:
SATUAN PERSEN

GAMBAR 1. Resolusi Monitor 1024x768 pixel




GAMBAR 2. Resolusi Monitor 800x600 pixel


dua gambar di atas adalah contoh yang layout nya menggunakan satuan persen,

tampilan tampak baik bila pada resolusi monitor 1024x768 pixel, karena size dari setiap elemen form (input text, listbox, tombol, dll) di asumsikan pada resolusi 1024x768.

Tetapi ketika resolusinya di turunkan ke 800x600 maka akan menjadi seperti GAMBAR 2, itu terjadi karena lebar layout di set 100% lebar monitor (800px) sedangkan lebar dari elemen form (input text, listbox, tombol, ) melebih 800pixel, hasilnya bablas melewati batas lebar monitor.

hal ini tentunya sangat mengurangi kenyamanan dalam menggunakan aplikasi dan tidak sesuai dengan estetika design web.



SEKARANG KITA BANDINGKAN DENGAN YANG MENGGUNAKAN SATUAN PIXEL


GAMBAR 1. Resolusi Monitor 1280x720 pixel




GAMBAR 2. Resolusi Monitor 1024x768 pixel

di kedua gambar di atas berisikan sebuah form yang lebarnya tidak terpengaruh oleh resolusi monitor, karna lebar layout nya di fix-kan (misalkan 800px).
dengan cara ini susunan dan posisi dari elemen-elemen form tidak akan berubah posisinya dan membuat kesan yang konsisten.



selanjutnya bisa dilihat perbedaan antara pixel dan persen dari kedua gambar di bawah ini :
GAMBAR 1. SATUAN PERSEN




GAMBAR 2. SATUAN PIXEL

gambar 1 menggunakan satuan persen, ketika ukuran window browser di resize maka hasil-nya berantakan.

gambar 2 menggunakan satuan pixel, ketika ukuran window browser di resize maka hasil-nya design akan terpotong tetapi tidak merubah susunan dan posisi elemen yang berada dalam halaman web.


oke... semoga ini bisa menjadi pertimbangan satuan (pixel/persen) apa yang paling tepat untuk aplikasi dan web yang akan di develop.

7 komentar:

  1. ooo gitu toh. Jadi cara merubahnya gimana dong ? tolong di jawab ya

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. Dendie mengatakan...

    menurut saya trend layout sekarang adalah menggunakan satuan pixel (tidak liquid) karena resolusi monitor sekarang bermacam-macam.. jadi untuk menjaga hasil design di berbagai monitor/lcd lebih baik menggunaka pixel, bagaimana cara membuat nya bisa dilihat di kumpulan video ini

    http://video.google.com lalu ketikan kata kunci
    how to create layout div

    BalasHapus
  4. gue pake layout persen gan. tolong masalah gw cuma klo windowsnya di resize jadi berantakan jadi ada solusinya??? jangan bilang suruh pake pixel, klo pixle gw pake monitor resolution 1024x768 beda lagi tampilanya kan jelek apalagi gw design di monitor 1280x800 atau sebaliknya kan jadi gak singkron. ada solusi?

    BalasHapus
  5. diberi langkah langkahnya mas brow..matur nuwun

    BalasHapus
    Balasan
    1. Berikut ini Untuk membuatlayout yang liquid / satuan persen-> http://www.likaliku.com/diary/pages/posts/membuat-desain-web-liquid-dengan-css56.php

      http://grietday22.wordpress.com/2011/07/23/tutorial-membuat-layout-website-dengan-liquid-layout/

      Berikut ini Untuk membuatlayout yang fix / pixel ->

      Hapus