User Interface

Best Practice Grid System Untuk Desain Website

Pinterest LinkedIn Tumblr

Ketika kamu sedang merancang sebuah UI (user interface) untuk sebuah website menggunakan software design, apakah kamu menerapkan gird system? karena jika tidak, maka bisa jadi desain yang kamu buat itu akan tampil tidak konsisten dalam penataan layout dan juga hasilnya berantakan.

Definisi umum dari grid yaitu merupakan garis semu berbentuk vertikal dan horisontal yang digunakan sebagai patokan dasar dalam membangun layout sebuah desain agar tersusun rapih.

Jika desain yang kita buat itu merupakan desain digital maka akan merujuk pada media yang akan kita gunakan sebagai hasil akhir, baik itu desain cetak ataupun ukuran layout sebuah device .

website grid
Tampilan Grid pada User Interface Website

Best Practice Grid System Untuk Desain Website
Grid pada layout cetak buku (sumber)

Karena cakupan grid system ini cukup luas, maka saya akan memfokuskan implementasinya pada desain website saja, dan penggunaan grid system pada website juga merupakan salah satu topik yang cukup menarik bagi para desainer terutama UI/UX Designer.

Best Practice Grid System Untuk Desain Website
Illustrasi grid

Komponen yang terdapat pada grid diantaranya;

  1. Column atau kolom dalam bahasa Indonesia, merupakan garis vertikal dalam layout grid yang terdapat ruang diantaranya untuk menandakan satu hitungan kolom. Lebar dari satu gitungan kolom ini umumnya berukuran 65px.
  2. Gutter merupakan ruang atau jarak diantara kolom yang memisahkan satu kolom dengan kolom lainnya dalam bentuk vertikal, jadi setiap kolom pasti memiliki gutter di setiap sisinya. Untuk besarannya sendiri bisa bervariatif tergantung acuan mana yang digunakan, namun umumnya memiliki nilai 30px (15px di setiap sisi kolom). Gutter juga dapat berbentuk horizontal untuk menentukan besaran sebuah elemen dengan hitungan tertentu.

Umumnya kombinasi grid yang paling banyak dipakai yaitu 12 Grid system, yaitu grid yang terdiri dari 12 kolom yang mempunyai gutter di dalamnya. Salah satu framework front-end populer yaitu Bootstrap, memiliki sistem grid di dalamnya dan menggunakan 12 grid system.

grid bootstrap
Tabel informasi grid pada framework bootstrap

Mengimplementasikan grid system ketika merancang UI website membantu desainer dalam menyusun tata letak layout setiap elemen desain dengan lebih terstruktur. Penggunaan grid system juga sangat berpengaruh terhadap hasil akhir desain website, terutama ketika proses konversi desain yang dilakukan oleh developer.

Desain website yang menerapkan grid system dengan baik di dalamnya akan sangat memudahkan developer website dalam mengkonversi layout ketika proses koding berlangsung, karena pada dasarnya semua elemen website itu memiliki satuan nilai/ value masing-masing yang harus di definisikan mulai dari elemen terkecil (Child element) sampai dengan elemen pembungkusnya (Parent element).

Penggunaan sistem grid yang proporsional juga berpengaruh pada possibility untuk dimensi layout sebuah desain, yang mana hal tersebut juga ikut menentukan apakah elemen desain tersebut dapat di implementasikan secara real pada sebuah website atau tidak.

Karena device modern saat ini memiliki resolusi layar yang tinggi dan juga bervariasi, maka kita perlu memperhatikan ukuran kanvas yang akan kita gunakan, lalu barulah kita implementasikan grid system sebelum membangun setiap elemen UInya.

sketch app
Layout setting pada software desain Sketch App

Sebagai UI desainer yang bijak, ada baiknya sebelum kita memulai mendesain sebuah website kita berkonsultasi terlebih dahulu kepada tim developer yang akan mengerjakan desain website kita untuk menentukan besaran layout yang sesuai dalam mendesain atau sekedar berdiskusi mengenai rancangan layout yang akan dibangun, karena setiap website dapat memiliki besaran width yang berbeda-beda tergantung kebutuhan dan tujuan website dibuat.

Nesting Grid

Sebuah grid juga memiliki sifat bersarang atau nesting, jadi dalam satu elemen kolom terdapat kolom lain di dalamnya. Penggunaan elemen nesting ini paling sering dijumpai ketika membuat elemen card pada sebuah website.

Best Practice Grid System Untuk Desain Website
Illustrasi nesting grid pada dokumentasi Boostrap

Pada contoh grid nesting di atas menunjukkan dalam satu kolom dengan nilai 9 kolom yang mana di dalamnya terdapat dua kolom yang masing masing bernilai 6 kolom dan pada kondisi responsif memiliki nilai masing-masing 8 dan 4 kolom.

group of card
Contoh layout elemen card pada website dengan nesting grid

Grid System Bukanlah Batasanmu

Meskipun penerapan grid system merupakan hal yang sangat direkomendasikan dalam merancang UI, namun hal tersebut bukanlah batasan untukmu berkreasi dalam mendesain.

Seringkali desainer terpaku pada lingkup grid yang mereka rancang sendiri sehingga desain yang mereka buat menjadi kaku. Padahal sebaliknya, grid system itu hanyalah sebuah panduan dasar untuk kerangka desain, namun kamu masih bisa bebas berkreasi di luarnya.

Tidak semua elemen pada real website itu selalu berada dalam satu kolom grid, dikarenakan semua komponen website itu flexibel dan kita dapat memodifikasinya sesuai dengan kebutuhan. Ada beberapa komponen dalam website yang bersifat Fluid atau memenuhi seluruh lebar halaman seperti kebanyakan elemen pada bagian header dan juga footer.

grid pada live website
Contoh tampilan live website dengan grid


Website modern yang ada saat ini biasanya sudah bersifat responsif terhadap banyak ukuran layar/ device. Ketika kamu mendesain UI menggunakan software desain, kamu merepresentasikan gap antar elemen dengan satuan Px (pixel), namun kenyataannya pada proses pemrograman di front-end, tidak semua elemen dalam desain akan direpresentasikan menggunakan satuan pixel melainkan menggunakan satuan % (persen).

Sebagai contoh sebuah layout halaman website didefinisikan memiliki 100% lebar kontainer dengan besaran kontainer 1140px. Jika di dalammnya terdapat 12 kolom grid maka 1140px = 100% akan dibagi jumlah besaran kolom yang digunakan, 2 kolom (12/ 2 = 6 atau 50%), 3 kolom (12/ 4 = 3 atau 25%), 4 kolom (12/ 3 = 4 atau 33.33%).

Pemakaian besaran kolom biasanya menggunakan angka genap atau bisa dibagi dua dari total 12 kolom grid, namun dalam kondisi tertentu kita bisa mengguanakn satuan ganjil untuk mendefinisikan kolom, semisal dalam satu kontainer 12 kolom grid, di dalamnya terdapat 2 kolom yang masing-masing bernilai 5 kolom dan satu lagi 7 kolom jadi totalnya 12 kolom.

grid-column
Contoh layout kolom website dengan proporsi ganjil (7 dan 5 kolom)

Jika kamu adalah seorang UI desainer, jangan kaget ketika kamu mendesain UI website dengan satuan pixel, lalu pada tahap development terjadi beberapa perbedaan nilai ukuran dibandingkan dengan nilai ukuran yang kamu buat pada software desain ketika kamu cek secara live pada browser.

Best Practice Grid System Untuk Desain Website
Hasil inspect element pada kolom grid bootstrap

Jika kita perhatikan pada gambar hasil inspect element di atas, lebar kolom memiliki nilai pixel desimal yaitu 191.48 x 50. Hal tersebut cukup lumrah terjadi dikarenakan besaran kolom ini di hitung dengan satuan persen seperti yang telah saya jelaskan sebelumnya.

Selama desain hasil konversi ke website masih memiliki bahasa desain yang merepresentasikan hasil mockup maka kamu tidak perlu khawatir.

Hal terpenting dari sebuah website selain memiliki user interface yang menarik ialah fungsi yang terdapat pada website itu dapat berjalan dengan baik dan goals/ tujuan yang ingin kamu capai dari user experience website tersebut dapat terpenuhi tanpa menimbulkan distraksi untuk user.

Jika berkaca dari pengalaman saya pribadi selama bekerja sebagai web designer, ketika saya melakukan proses konversi mockup ke website dan saya menemukan ada elemen desain yang bias dari desain yang saya terima (jika UI desain bukan buatan saya), maka hal pertama yang akan saya lakukan adalah bertanya kepada desainer mengenai goals apa yang ingin kamu tuju dari elemen tersebut? ketika saya sudah paham tujuannya apa, saya akan lebih leluasa memeberikan opsional atau mungkin flow yang lebih efektif untuk elemen desain tersebut dari perspektif web programing.


Kesimpulan

Menerapkan grid sistem pada sebuah desain inteface merupakan hal yang esensial, selain membantu kita memetakan setiap elemen desain dengan terstruktur dengan baik, hal tersebut juga membantu saat proses konversi pada tahap web development dan membuat desainmu lebih mudah untuk dibaca oleh developer website.

Jika kalian suka dengan artikel ini, kalian bisa share dan kalau ada pertanyaan seputar pembahasan mengenai grid system ini, kamu dapat menuliskan pertanyaan pada kolom komentar, dan saya akan dengan senang hati membantu kalian. Terima Kasih 🙂 

Hallo kawan-kawan semua nama saya Dwi Priyatmoko, content creator sekaligus co-founder blog BackslashID. Saya seorang Web Designer yang juga menyukai ilmu seputar User Experience. Diluar kegiatan ngoding dan desain, saya hobi melakukan olahraga outdor taril run dan juga bermain game mobile. Kebetulan saat ini juga tertarik pada custom mechanical keyboard.

Write A Comment