in Like, web design

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)
contoh grid dalam desain website

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

Write a Comment

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Replay :
    #1 sahrudin : ye si abang kemana ajeee…makanya nonton tuh gosip pagi hare di tipi-tipi hihihi

    #2 dian ina : wahaihaiahiai…ahk nggak asing bijimane? khan cuma fiksi ilmiah…wah sebelum may kalaupun memang berubah deatlinenya…bisa saja… *injak-injak kalender sobek! hahaha …muah buat Ina!

  2. wah..wah… bertele tele kale tu tutorial sir!
    apa gak bisa di kompres dikit pake winzip sampe meler neh ingus saya ngebacanya.
    tapi…*sambil meremas remas dada..
    bagus tug..

  3. to :
    The Kecek’s : Kamu pikir buku pelajaran ada yang 2 lembar? Ini baru tutorial coba baca kamus indonesia – inggris – jepang – indonesia – jerman – indonesia (…eh ada nggak yah?),…yang meler bukan ingus hidung, ingus “adik” kamu mungkin juga meler hahaha

    Andriansah : wah situ pasti SD-nya di metropolitan, eke SD-nya di kaki Gunung sih…toko buku harus ditempuh melewati dua sungai dan 3 belantara.

    hericz : Situ juga lucu kok,.. 😛 Masa sih pernah kenal? Ahk… itu hanya perasaan dik kodok ngerock saja…