Di artikel kali ini saya ingin membahas mengenai cara membuat grid Design Grid System 1170px, bagi yang belum tau apa itu design grid system itu. Design grid system adalah sebuah guideline dalam bentuk kolom berjumlah 12 column. Masing – masing kolom berukuran 70px dan jarak antar kolom adalah 30px.
Grid 12 - 1170px
Columns Width : 70pxp
Gutter : 30pxGrid pada umumnya digunakan untuk Front-End devleoper, dan kebanyakan developer menggunakan Framework HTML dalam membuat sebuah website. Umumnya secara default framework saat ini menggunakan grid 1170px sebagai container, framework populer saat ini diantaranya :
Lalu kenapa desainer harus menggunakan Grid system dalam membuat desain? Alasanya cukup simple. Agar mempermudah Front-end developer dalam meng-convert desain kedalam bentuk HTML terutama dalam penggunaan columns.
Baca juga artikel lainya
5 Situs Freelancer Terbaik di Tahun 2020 Menjadi Seorang Freelancer Designer Pemula Sketch, Figma atau AdobeXD Pilih mana? Cara Membuat Estimasi Project Dan Revisi Design Di Upwork Tips submit proposal upwork lebih cepat diterima
Cara membuat grid pada artboard
Biasanya para pemula terkadang salah dalam mebuat sebuah grid pada artboard design aplikasi design tool seperti SkecthApp, Figma, AdobeXD atau bahkan Adobe Photoshop. Tanpa memperhatikan ukuran grid cointaner, columns, dan gutter.
Melakukan adjustment berdasarkan columns di atas yang telah saya jelaskan. caranya cukup mudah, di setiap masing-masing design tool. Caranya seperti berikut:
SketchApp
Saya mulai dengan aplikasi SketchApp terlebih dulu. cara membuat artboard dengan mengaktifkan gridnya. Buat artboard untuk website dengan ukuran 1920 (rekomendasi saya buat sebagai default) tingginya di sesuaikan. Umumnya layar monitor sekarang standar sudah mendukung 1920px
Dilanjutkan dengan klik tombol view di pojok kanan atas, lalu pilih layout settings, lalu ubah value inputan dengan :
Total Width : 1170px
Offset : 375
Number of columns : 12
Gutter on outside : uncheck
Gutter width: 30px
Column Width: 70px
Jika sudah, maka klik tombol confirm dan akan terlihat grid sebagai guideline. Dan di lajutkan dalam pembuatan layout.
Figma
Untuk di figma, hal sama seperti di sketch cara pembuatanya. buat terlebih dulu artboard, lalu set widthnya menjadi 1920px. Lalu di menu kanan terdapat layout grid, lalu klik dan pilih menjado columns lalu set. set widht dan gutternya sama seperti di atas.
AdobeXD
Jika di AdobeXD agak triki sebenarnya jika akan membuat grid serta gutternya. Tidak semudah di figma atau di sketch, tapi masih bisa coba. caranya hampir sama seperti di Figma. Check list grid, lalu pilih columns 12, set gutter width 30px dan columns 70px dan offsetnya 375px (Jika ukuran artboardnya itu 1920px)
Nah begitu cara membuat grid 1170px di sketch, figma & adobeXD. khususnya untuk pembuat desain website, dengan 3 aplikasi yang berbeda. Semoga artikel ini bermangfaat bagi kamu dan menambah wawasan serta skill. Selamat mencoba.
