Grid
----

**Grid** adalah struktur yang terdiri dari serangkaian berpotongan lurus ( vertikal, horizontal, dan angular ) atau melengkung yang berguna sebagai panduan struktur konten. Grid juga bisa bermanfaat dalam pembuatan buku, majalah, web, atau halaman aplikasi.

Jenis - Jenis Grid
------------------

Berikut adalah jenis - jenis grid dalam desain, yaitu :

1. Baseline
2. Column
3. Modular
4. Manuscript
5. Pixel
6. Hierarchical

### 1. Baseline

Jenis grid ini merupakan garis tebal dengan garis horizontal dan menggunakan jarak yang sama. Dengan jenis ini bisa menentukan dimana teks akan diletakkan dan juga bisa digunakan untuk memastikan bahwa garis teks di setiap kolom sejajar merata di seluruh *spread.*

### 2. Column

Jenis ini berfungsi untuk membagi halaman menjadi kolom. Tipe ini merupakan jenis yang paling banyak desainer gunakan dalam membuat website, bahkan banyak majalah dan surat kabar yang menggunakan grid ini.

### 3. Modular

Modular Grid merupakan kisi kolom dan baris yang bisa memberitahukan bagaimana penempatan sumbu X dan sumbu Y pada formulir. Modular biasanya melibatkan pengambilan kisi kolom, kemudian menambahkan baris ke dalamnya.

### 4. Manuscript

Manuscript adalah kisi satu kolom yang menentukan pada bagian mana suatu teks akan diletakkan, Biasanya jenis ini bisa diterapkan pada buku klasik ' tradisional ' dengan tata letak halaman yang biasanya saling berhadapan.

### 5. Pixel

Pixel adalah salah satu jenis sistem dalam desain yang biasanya berguna untuk melihat jumlah pixel suatu dokumen dan foto. Adapun caranya, yaitu memperbesar dalam jarak dekat sebuah dokumen pada saat menggunakan Photoshop. Cara lain yang bisa digunakan adalah dengan menggunakan *tools* foto untuk mengetahui jumlah pixel.

### 6. Hierarchical

Jenis grid yang terakhir adalah Hierarchical. Sistem ini tidak memiliki spasi yang sama antar modul. Sistem ini merujuk pada setiap kisi yang tidak beraturan yang mengakomodasi kebutuhan suatu konten. Grid ini mungkin sepenuhnya berbentuk bebas atau terdiri dari dua grid yang berlapis atau bahkan bisa berbentuk grid tambahan lainnya.

Tips Menggunakan Grid
---------------------

Sistem grid terdiri dari tiga elemen penting, yaitu kolom, *glutters,* dan, *margin.* Setiap material tersebut memiliki tips tertentu dalam penggunaannya.Berikut adalah beberapa tips dalam menggunakan sistem grid;

### 1. Kolom

salah satu tips penggunaan grid yaito konten diratakan di area layar yang berisi kolom. Dalam menentukan lebar kolom bisa menggunakan persentase bukan nilai tetap. Hal ini memiliki tujuan untuk memungkinkan konten secara fleksibel dengan ukuran layar apa pun. Sedangkan, untuk jumlah kolom, sebaiknya tampilkan dalam petak rentang seukuran layar yang masih bisa terlihat baik untuk seluler, tablet, dan perangkat lainnya.

### 2. Gutters

Gutters merupakan ruang antar kolom yang dapat membantu dalam memisahkan konten. Untuk rentang *breakpoint-*nya bisa menyesuaikan dengan kebutuhan agar desain tampak lebih menarik dan rapi. Glutters yang lebih lebar akan cocok untuk perubahan yang lebih besar pada *breakpoint* yang berbeda. Selain itu, gutters yang lebih lebar bisa menciptakan ruang kosong yang lebih banyak antara kolom.

### 3. Margin

Margin adalah ruang antara tepi kiri dan kanan layar. Margin yang lebih lebar untuk layar yang lebih besar. Hal ini untuk menghindari terlalu banyak ruang kosong pada konten yang malah akan membuat konten tampak tidak menarik.

Manfaat Grid
------------

Sistem grid juga diartikan sebagai serangkaian pengukuran yang bisa digunakan dalam desain grafis oleh desainer. Grid berfungsi untuk menyelaraskan dan mengukur objek dalam format yang sudah diberikan. Berikut adalah manfaat menggunakan grid untuk mendesain sebuah website.

### 1. Tidak Perlu Membuat CSS

Dengan memanfaatkan sistem grid, tidak perlu untuk membuat CSS atau *Cascading Style Sheet* di awal. Hal itu terjadi karena sudah disediakan semua di sistem Grid.

### 2. Website Mudah Dipahami

Manfaat sistem grid selanjutnya adalah membuat website yang di kelola mudah di pahami. Karena informasi yang sudah ada pada *layout* sudah sangat jelas dan terarah. Tidak hanya itu, penggunaan grid juga akan memudahkan pengguna dalam menemukan konten yang di inginkan.

### 3. Mempermudah Kerjasama Desainer Dan Depeloper

Grid memudahkan kerjasama desainer dan developer karena adanya tempale PSD. Grid juga akn memudahkan developer untuk mengidentifikasikan *block* yang desainer gunakan, karena semua sudah tertata sangat rapi.

### 4. Konten Dan Elemen Tertata Rapi

Manfaat Grid selanjutnya adalah konten dan elemen bisa tertata dengan rapi. Hal tersebut dikarenakan adanya jarak antar konten. Sehingga, secara tidak langsung akan sangat bermanfaat untuk yang memiliki banyak konten. Tampilan website yang dikelolapun ajan menjadi lebih dinamis sehingga lebih menarik.

### 5. Pengerjaan Lebih Cepat

Dengan sistem grid, tidak perlu membuat template atau CSS karena semua yang dibutuhkan sudah tersedia. Sehingga, proses desain bisa dilakukan lebih cepat dan waktu tidak terbuang banyak dalam melakukan pekerjaan.

### 6. Memudahkan Pagination

Pagination adalah pengaturan halaman. Dengan sistem grid bisa melakukan pagination dengan mudah. Hal ini akan bermanfaat untuk menampilkan konten lebih tertata.

### 7. Menaikkan Conversion Rate Website

Manfaat sistem grid yang selanjutnya adalah bisa menaikkan conversion rate website. Sistem ini bisa membuat website lebih menarik dan pengunjung akan betah untuk berlama - lama melihat website dan akan bermanfaat untuk menaikkan trafik dan conversion rate website.

1. ↑  Forte, Vincent J. (2010-01). "Smart Grid at National Grid". *2010 Innovative Smart Grid Technologies (ISGT)*. IEEE. doi:10.1109/isgt.2010.5434729.  Periksa nilai tanggal di: `|date=` (bantuan)