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 : 30px

Grid 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 :

  1. Twitter Bootstrap
  2. Zurb Foundation

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

Set Artboard Sketch
Set Artboard Sketch App

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.

Set Grid 1170 Figma

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)

Set 1170px Grid AdobeXD

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.

Author

Dei, ber-profesi sebagai tukang gambar, netpreneur, handsome Daddy 😁 dan mantan penulis. Mencoba aktif menjadi penulis lagi. Lihat portfolio saya di theprojekts.com

Write A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.