Minggu, 07 April 2013

MENDESAIN WEB BERBASIS GRID SYSTEM

Menggembangkan weblog atau template berbasis "Grid System" adalah salah satu alternatif untuk mempermudah penempatan dalam pembagian kolom. Sebagai kerangka tata letak halaman, supaya terlihat seimbang dan tertata rapih.

Ragam Jenis Framework dan Tool untuk Menggembangkan Grid

Ada beraga jenis tools dan framework yang dapat memandu anda mengembangkan desain weblog berbasis grid. Mulai dari yang kompleks seperti Blue Print dan 960 Grid System, sampai yang sederhana seperti The 1KB Grid dan Simple-css-grid.

Lihat Ultimate Guide To Grid-Based Web Design: Techniques and Tools lebih lengkapnya.

Prinsip Dasar Menggembangkan Desain Weblog Berbasis Grid

Prinsip dasar membangun desain grid adalah keseimbangan antar kolom berdasarkan rasio, yaitu:

1. Lebar Keseluruhan Layout

Lebar keseluruhan layout ini yang pertama perlu anda pastikan sebagai kerangka. Standart saat ini mungkin lebar yang tepat digunakan adalah 960 pixel (berdasarkan pertimbangan jenis monitor dan resolusi yang digunakan).

Lebar Keseluruhan Layout berdasarkan grid itu = Jumlah Kolom+ Lebar Kolom+Jarak antar Kolom.

2. Jumlah Kolom

Lajimnya kita dapat membuat jumlah kolom dalam suatu layout yaitu: 9, 10, 12, 14 atau 16. Jumlah kolom ini sebagai kerangka pembagian ruang elemen seperti Header, Post, Sidebar dan Footer.

3. Lebar Kolom

Masalah lebar tiap kolom ini berkaitan dengan jumlah kolom yang anda tentukan, atau sebaliknya. Lebar tiap kolom bisa 40, 60, atau 80 pixel.

4. Jarak antar Kolom

Jarak antar kolom ini adalah ruang terbuka, bisa sebagai pembatas tiap kolom. Lebar jarak antar kolom ini standarnya 10 atau 20 pixel.

Gambar dibawah adalah contoh Penerapan Grid System. Jumlah Kolom: 12, Lebar Kolom: 60px, Jarak antar Kolom: 20px, Lebar Layout keseluruhan: 960px.



Empat hal diatas bisa menjadi dasar kerangka grid. Namun untuk masalah detilnya anda dapat mengembangkan sendiri tanpa terpatok ukuran standar diatas.

Mark Boulton dalam Five Simple Steps to designing grid systems, menjelaskan mengenai sistem grid secara lengkap.

'Subtraction.com' : Contoh Kreatif Penerapan Grid

Membangun Weblog atau template yang berbasis grid, sebenarnya tidak perlu menggunakan jasa seperti framework atau tool grid. Anda dapat mengembangkannya sendiri dengan kemampuan teknik CSS.

Subtraction.com, bisa kita jadi contoh atau inspirasi untuk mengembangkan sistem grid yang menarik, tidak terlihat kaku. Blog yang bermain warna putih dan hitam ini sudah sangat populer untuk masalah grid, banyak sudah yang mereviewnya.



Lihat bagaimana desain grid yang diterapkan pada template yang merapat kekiri ini. Pembagian komposisi kolom yang menarik pada artikel untuk tanggal, judul, dan jumlah komentar.

Halaman berikut ini Grid Computi, mengambarkan bagaimana blog tersebut mengembangkan sistem grid di blognya.



Kreatifitas sipengembang desain berbasis grid tersebut yang membuat blog diatas terlihat elegan.

Penutup

Grid system hanyalah sebuah kerangka atau acuan desain weblog atau template agar terdapat keseimbangan ruang. Anda bebas mengembangkan desain berbasis grid sesuai kreatifitas anda.


Tambahan: Grid system juga bisa diterapkan dengan lebar berdasarkan fluid. lihat Fluid 960 Grid System

Tidak ada komentar:

Posting Komentar