Web Design yang Lucu (episode #3)

baca juga : episode #1, episode #2

Ingat jaman SD dulu ketika menulis tegak kita memakai kertas kotak-kotak untuk membantu kita membuat tulisan yang rapi atau membuat bentuk. Se-ingat gwe itu adalah penggunaan grid (garis bantu) pertama kali yang kita kenal. Grid dibuat dari jaman kambing masih pake tanduk, mungkin berasal dari alam bawah sadar manusia. Karena dengan adanya grid kita sangat-sangat dimudahkan, misalnya pemasangan susunan batubata pada tembok, coba bentuk batu batanya kayak krupuk udang apa kaga pegel tuh tukang masangnya…hihihihi….

Pembaca Budiman : “Soooompeee looooo?!”
Pembaca Budiman : “Kata pengantar yang basi sekali Bapak designer muda?!”
Designer Jumawa : “Udah baca aja, saya lagi sensitib ini…nanti muka kamu saya kotak’in!”
Pembaca Budiman : “Kenapa Grid begitu penting dalam desain website?”

Karena eh karena…

… dengan grid (garis bantu) kita bisa menentukan sebuah layout (images, content, listing, icon, dll) apakah sudah lineup (sebaris). Sebaris disini bukan berarti cuma tegak lurus horizontal atau vertikal…lineup secara diagonalpun dimungkinkan (*blok 3 & 5)

Line-up menjadi penting karena untuk sebuah desain website berbasis content (website yang memang lebih menonjolkan materi tulisan dengan sedikit artwork) akan sangat membantu pengunjung mencari informasi yang mereka butuhkan, atau membantu pemilik website menyampaikan informasi penting dalam websitenya, kepada pengunjung website.

2 Grid Awal
Pada awal pembuatan sebuah layout website kita akan membuat 2 garis bantu (grid) pertama yaitu batas pinggir kiri dan kanan. Grid pertama berada di 120 derajat lintang selatan dan grid kedua berada di 45 derajat lintang selatan (*mampos bingung2x deh luw)…hahaha Just kidding you geek!

Untuk artikel ini gwe akan pakai Macromedia Firework sebagai aplikasi alat bantu desain website, kalau sudah biasa pake Photoshop silahkan menyesuaikan. I use to be using Adobe Photoshop to layout but using Macromedia Fireworks make me a lot more productive, that’s all. Buatlah lembar kerja baru dengan ukuran 1024 x 768 dengan resolusi 72 px.
Sampai saat ini pertimbangan masih banyaknya internet user yang menggunakan resolusi monitor 800×600 membuat kita harus tetap menjadikan hal tersebut patokan ketika menentukan lebar layout desain website. Buatlah grid dikiri dan kanan yang berjarak 760 px. 760 px adalah lebar paling aman untuk resolusi 800 x 600 (gambar 2),

Jika desain kamu memakai efek glow atau shadow sesuaikan (kecilkan) lagi lebar content area supaya efek shadow/glow bisa ditampilkan pada resolusi monitor 800×600 (gambar 3)

Grid Berikutnya
Pada umumnya layout website bila dilihat secara horizontal dibagi menjadi tiga bagian yaitu : Header, Content Area dan Footer.

Grid berikutnya akan sangat ditentukan oleh kesedian materi dari website yang akan kita desain seperti :

1. Apakah kita akan memasang banner?
2. Apakah akan ada logo?
3. Apakah menu akan dibuat horizontal atau vertikal?
4. Kolom-kolom content yang akan dibuat?
5. Penempatan alinea-alinea text.
6. Penempatan Icon/Bulled/Number
7. Gambar pendukung.
8. Form
9. Copyright statement
10. dll.

Penggunaan grid juga akan sangat membantu ketika kita akan melakukan konversi layout kedalam code. Penentuan padding dan spacing akan sangat mudah ditentukan dan menjaga konsistensi dalam layout yang kita buat.

Perlu diingat wahai pembaca yang budiman, jangan sampai grid membatas kita untuk berkreasi dengan blok atau ornamen dalam membuat layout. Idealnya adalah kita lempar/tempatkan saja perkiraan blok-blok yang ada setelah semuanya di lembar kerja baru kita geser, resize, rotate dll. Grid bukan berarti layout kita harus kotak-kotak. Perhatikan contoh layout desain website pernikahan dibawah ini.

(*diperagakan oleh model, tokoh dalam gambar contoh hanyalah fiksi belaka bila ada persamaan bentuk tidak ada unsur kesengajaan dan maksud-maksud tertentu. Karena narsis adalah feature.)
Grid Links :

– The Funniest Grid You Ever Saw
– Five simple steps to designing grid systems
– Thinking Outside the Grid