Monday, January 24, 2011, 11:06

Memahami Layout dalam Web Design

Telah banyak studi yang menunjukkan bahwa halaman web yang di-desain dengan baik akan memberikan inspirasi bagi pengguna website tersebut. Berikut ini beberapa hal yang patut dicermati sebagai dasar membuat layout website yang baik.

Seberapa lebar halaman website yang disarankan?

Menurut w3schools.com, sebagian besar pengguna internet menggunakan resolusi layar 1024×768 atau lebih tinggi. Dengan memperhitungkan scroll bar dan tepi browser, lebar sebuah halaman website keseluruhan yang dianjurkan adalah 960 pixel.

http://www.chrislongley.com

Monitor lebih besar memungkinkan pengguna untuk membuka beberapa jendela browser sekaligus dengan mengaturnya pada ukuran yang lebih kecil. Anda dapat memilih untuk membuat situs Anda lebih kecil – misalnya, 750 pixel atau lebih.

Saat ini mulai banyak monitor yang memiliki resolusi lebih dari 1024×768 pixel, tapi pada umumnya website memiliki lebar 960px atau bisa juga Anda atur sebagai fluid layout yang berarti lebar website akan mengikuti lebar browsernya, tentunya dengan berbagai pertimbangan.

Gunakan “White Space”

Pengertian white space secara singkat adalah bagian pada halaman website yang tidak mengandung konten di dalamnya. White space adalah bagian penting dari desain halaman Anda. Manfaatkan bagian ini untuk memisahkan area konten dan sebagai panduan mata pengguna pada halaman website.

Gunakan fixed-width pada setiap Halaman

Dari berbagai alasan – yang paling penting dalam hal ini adalah readibility. Sebuah paragraf lebih mudah dibaca sebagai kolom dengan lebar terbatas. Penggunaan fluid layout dan memungkinkan pengguna untuk meregangkan sebuah halaman website membuat paragraf anda terlalu panjang, dan tentu Anda akan kehilangan minat pembaca yang menginginkan kemudahan. (Lihat juga referensi website berita online, seperti situs berita BBC dan perhatikan bagaimana pengaturan paragraf pada website tersebut).

Layout yang baik menciptakan visual-logic (susunan yang jelas antar elemen website), dan halaman website yang menggunakan fixed-width memungkinkan Anda untuk mengontrol desain website dengan mudah. Layout yang benar adalah jika penempatan teks, elemen gambar dan white space membantu pembaca dalam menemukan konten dengan cepat dan mudah.

Gunakan tabel hanya untuk data tabular

http://www.yahoo.com

Tabel seharusnya tidak lagi digunakan untuk tata letak. Tapi tabel masih merupakan cara terbaik untuk menampilkan data tabular.

Buat Design sebagai panduan mata pengguna

Gunakan informasi visual (tata letak halaman, tipografi, ilustrasi) untuk memandu mata pembaca melalui halaman website. Halaman website yang sebagian besar mengandung teks akan memberikan efek buruk pada struktur informasi Anda.

Sebaliknya, halaman yang dirancang secara berlebihan, dengan grafik yang terlalu menonjol atau header terlalu besar akan mengalihkan perhatian pengguna dari konten utama website Anda. Gunakan white space untuk menarik pandangan pengguna ke bagian-bagian penting (navigasi, pemberitahuan, dan sebagainya) dan untuk memberikan kesan pengaturan informasi yang rapi. Berikan ‘berat’ yang sama pada bagian penting dari halaman website Anda.

Letakkan bagian terbaik dari website ‘above the fold’

Bayangkan sebuah surat kabar yang dijual di pinggiran jalan: bagian yang paling eye-catching muncul di bagian atas pada lipatan surat kabar tersebut (above the fold). Hal yang sama juga berlaku pada halaman web.

Mungkin itu dulu yang bisa saya share kali ini. Ada yang mau menambahkan?

Referensi: http://www.caltech.edu/

5 komentar di “Memahami Layout dalam Web Design”

  1. Brian Arfi says:

    Wow. mbak Natha nulis lagi :) terusin sharenya mbak!

  2. Rizki says:

    terkadang ‘melanggar aturan’ bisa membuat web tampil lebih menarik, seperti ini http://www.webdesignerdepot.com/2009/06/10-web-design-rules-that-you-can-break/

  3. nucreativa says:

    klo saya biasanya membuat width website antara 960px s/d 1000px. truz tableless. table hanya digunakan untuk menampilkan data yang dalam kondisi perulangan (for, while, foreach, dll). namun tidak menutup kemungkinan menggunakan div juga untuk hal tsb. lalu yang yg paling penting dalam membuat sebuah layout/desain secara keseluruhan yaitu pemilihan warna. hal ini penting, karena pengunjung tentunya akan menyukai website kita jika penggunaan warna di website kita pun enak dilihat (warna yg tidak nabrak klo istilah saya)

  4. mungkin saya bisa dikasih sample template ideal tp SEO taste gt mbak. Maklum bukan bidang saya tp sy pengen gunakan web saya buat jualan tp dengan tampilan yg readibility dan elegan

Tinggalkan Komentar

*