Penggunaan grid sudah menjadi standar dalam desain web. Grid memungkinkan layout yang terstruktur rapi, logis, konsisten dan fleksibel. Bagi desainer atau developer penggunaan grid juga mempermudah dan mempercepat penataan layout.

Salah satu grid tool yang sangat populer adalah 960.gs. Kepopulerannya didukung oleh anggapan bahwa standar layout website yang paling optimal adalah selebar 960 px. Tetapi belakangan ini mulai berkembang tren website dengan konsep full-width dan responsif. Standar 960 px mulai banyak ditinggalkan, dan dengan sendirinya 960.gs pun mulai terlupakan.

Salah satu tool favorit saya untuk membuat grid dengan berbagai variasi ukuran adalah Modular Grid. Kita bisa mengeset lebar kolom, gutter (jarak antar kolom) dan baseline (spasi font) sesuai kebutuhan projek.

Tampilan situs Modular Grid

Penggunaan Modular Grid

Cara menggunakan Modular Grid cukup mudah, saya akan coba menjelaskan langkah demi langkahnya secara rinci.

Langkah 1: Membuat Grid Pattern di Situs Modular Grid

Masukkan angka lebar kolom, gutter, baseline dan jumlah kolom di form input yang tersedia (module height diset 0 karena jarang terpakai). Sesudah itu klik “Photoshop Pattern” untuk menyimpan grid yang kita buat dalam format Photoshop Pattern (‘.pat’ file).

Langkah 2: Memasukkan Grid Pattern ke Photoshop

Double-click pattern yang kita simpan untuk memasukkan pattern ke dalam Photoshop, secara otomatis Photoshop akan terbuka.

Langkah 3: Setting dokumen Photoshop

Buat dokumen baru di Photoshop dengan lebar sesuai dengan angka hasil kalkulasi dari Modular Grid (dalam contoh ini 1050px), tinggi dokumen bebas.

Langkah 4: Setting Grid di Photoshop

Klik ikon “Create new fill or adjustment layer” di panel Layers, pilih menu pattern.

Akan muncul daftar pattern yang tersedia di Photoshop. Pilih pattern yang kita buat di Modular Grid, secara otomatis grid akan muncul di dokumen dengan nama layer “Pattern Fill 1″. Pastikan untuk mengunci layer ini.

Setelah itu buat guide (View > New Guide) di tepi kiri dan kanan dokumen.

Lebarkan kanvas dokumen (Image > Canvas Size) untuk memberi white-space pada layout.

Selamat! grid Anda telah jadi, selanjutnya silakan mulai mendesain, jangan lupa sesuaikan elemen-elemennya sesuai dengan grid untuk menjaga konsistensi layout