Tentang Grid pada UI Design — Bagian 1 — Intro

1. Apa itu Grid?

Biasanya terbuat dari garis vertical , garis horizontal ataupun garis diagonal. Berfungsi membantu designer untuk menyusun konten (gambar, paragraf, dan lain nya) dengan rapi dan terstruktur.

Berikut adalah tampilan grid yang sering digunakan

Sumber: https://visme.co/blog/layout-design/

2. Penggunaan Grid

Grid sering sekali digunakan pada pembuatan grafik design diantara nya adalah poster, seperti gambar di bawah ini

Sumber: https://en.m.wikipedia.org/wiki/Grid_(graphic_design)

Pada gambar diatas, dengan menggunakan grid, seorang designer dengan mudah menempatkan konten nya secara terstruktur dan menghasilkan design yang rapi.

Contoh lain penggunaan grid adalah pada layout design buku, seperti pada gambar dibawah ini

Sumber: http://thinkingwithtype.com/grid/

3. Grid pada UI Design

— Intermezzo
Kira kira 9 tahun yang lalu pertama kali mendengar istilah grid pada UI Design. Waktu itu grid yang paling populer adalah 960 grid system (Web nya masih di akses di 960.gs).

960 adalah lebar container ataupun tempat untuk menaruh konten utama (menu, gambar, paragraf, dll).

Waktu itu standar ukuran layar desktop adalah 1024px, sehingga dengan ukuran 960, masih memberikan jarak 32px di bagian kiri dan kanan. Sehingga konten utama tidak terlalu mepet dengan pinggir layar.

Contoh contoh penggunaan grid pada website

— Website dengan grid 16 kolom

Grid dengan 16 kolom — Sumber: https://960.gs/

— Website dengan grid 12 kolom

Grid dengan 12kolom — Sumber: https://960.gs/

4. Manfaat menggunakan grid pada pembuatan UI Design

• Membuat konten menjadi lebih rapi sehingga mempermudah scanning konten oleh pembaca atau pengunjung website.
• Mempermudah designer, karena dengan mudah menentukan peletakan konten dibanding jika tidak menggunakan grid yang harus mengira ngira ukuran konten nya.
• Konsistensi jarak antar elemen lebih terjaga.
• Mempermudah developer untuk mengonversikan design menjadi website, karena tinggal mengikuti jumlah dan lebar grid yang digunakan.

What’s Next?

— Pada artikel selanjutnya akan kita bahas mengenai penggunaan grid pada pembuatan desain website.

— Bagaimana mengatur grid yang tepat, apakah harus menggunakan 12 kolom atau 16 kolom atau 8 kolom?

— Apakah seorang designer harus menggunakan grid atau tidak?

Tunggu artikel berikutnya :)

Referensi

1. Grid — Wikipedia
2. 15 reasons why a grid based approach will improve your designs — Canva
3. Grid — Thingkingwithtype
4. A Quick Look at Types of Grids for Creating Professional Designs — Visme