Selamat Datang

Anatomi Sistem Grid dalam Web Design

Anatomi Sistem Grid dalam Web Design – Saat ini web aplikasi dan website dari semua jenisnya telah berubah dan secara dramatis semakin meningkat, ini tentu berkat kerangka (framework) yang menggabungkan prinsip-prinsip grid yang kuat seperti Bootstrap, Foundation, Skeleton, dll.

Desain web responsif membawa apresiasi baru dari peran grid dalam dunia digital. Desainer tidak lagi hanya memikirkan membuat website untuk satu layar saja (desktop). Namun mereka sudah berfikir untuk menciptakan website yang bisa dibuka dengan baik di berbagai ukuran layar. Penampilan website yang dituntut untuk baik disetiap layar memaksa para pembuat website untuk berfikir dalam hal sistem grid yang dinamis dibandingkan dengan labar layar yang tetap (fixed).

Desain digital masih dalam usia yang relatif remaja dan penggunaan sistem Grid juga masih baru. Desainer dan developer harus melihat kebelakang untuk membawa desain digital ke masa depan. Sudah lebih dari 500 tahun sejak mesin cetak ditemukan dan hampir 300 tahun sejak revolusi industri. Grid telah melalui banyak gerakan desain, pendekatan, dan perbaikan. Meskipun sejarah ini, grid masih dalam masa pertumbuhan dalam desain interaksi.

Berikut adalah unsur-unsur yang berbeda yang membentuk kotak. Beberapa terminologi telah diadopsi oleh komunitas desain digital dan beberapa tidak. Ada alasan yang jelas mengapa beberapa istilah dari media cetak tidak harus dimasukkan ke dalam desain interaksi.

Column

Kolom adalah bagian vertikal grid. Semakin banyak kolom dalam grid fleksibilitas yang lebih besar.

columns

Rows

Baris adalah bagian horizontal grid. Mereka sering diabaikan dalam desain web. Grid dengan baris dan kolom disebut grid modular.

rows

Modules

Modul adalah unit ruang yang diciptakan oleh persimpangan baris dan kolom.

modules

Regions

Daerah adalah pengelompokan kolom, baris, atau modul yang membentuk unsur komposisi.

regions

Gutter

Kolom dan baris dibagi dengan jarak. Jarak yang dalam, ketegangan visual dibuat. Grid dengan jarak lebar menghasilkan layout menenangkan karena unsur-unsur komposisi tidak terlalu tegang atau tidak terlalu rapat di antara mereka.

gutter

Margin

Margin adalah ruang luar kolom grid dan baris. Jangan bingung dengan padding, yang merupakan ruang dalam baris dan kolom.

margins

Flowline

Flowline biasanya digunakan untuk memecah bagian dari komposisi. Mereka membuat pemberhentian alami dan mulai mengambil tempat dalam desain.

flowline

Marker

Marker adalah daerah yang berisi secondary content. Buku umumnya berisi judul bab, nomor halaman, dll di area marker.

marker

Baca Juga:


Tipe-Tipe Grid


Hierarchical

Hirarkis grid adalah grid intuitif dibangun untuk berfokus pada proporsi unsur-unsur dalam desain. Jenis grid sering digunakan untuk konten yang tidak standar dan berulang-ulang.

hierarchical-grid

Manuscript

Manuscript grid adalah tipe grid yang paling tua yang digunakan di print media. Ini biasanya hadir sebagai persegi panjang yang berisi konten pada halaman atau layar.

manuscript-grid

Column Grid

Column grid sejauh ini adalah grid paling banyak digunakan dalam desain web karena lebar layar terbatas, tidak seperti tinggi, yang dapat berlangsung selamanya jika pengguna memiliki kemampuan untuk menggulir (scroll). Kebanyakan grid kolom yang digunakan di web adalah 12 kolom, tapi yang seharusnya tidak menghentikan desainer dan pengembang untuk menjelajahi alternatif lain.

column-grid

Modular Grid

Modular grid dirancang oleh baris dan kolom yang membentuk modul tumpang tindih. Modular grid adalah jenis grid yang paling kompleks. Ini harus digunakan bila ruang vertikal dan horizontal berada pada concern yang sama. Jenis grid ini menjadi lebih populer di media digital dengan timbulnya perangkat yang dapat dipakai yang mengandalkan ‘kartu’ untuk berkomunikasi.

modular-grid

Semoga anda bisa memahami anatomi dan mengenali macam-macam tipe grid yang ada dan sering kita temua dalam dunia desain digital.

Sampai jumpa pada postingan Tutorial Web Design Indonesia selanjutnya.

disatur dari medium





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

6 thoughts on “Anatomi Sistem Grid dalam Web Design

  1. iskael says:

    keren sih pake grid, tapi aku masih belum eksplorasi ke sana
    jadinya masih awam dan belum tahu keuntungannya secara jauh daripada menggunakan tidak grid

  2. Pen Quran says:

    okelah kalau begitu gan, artikel yang bagus dan sangat bermanfaat

  3. velli, md. says:

    ternyata banyak juga ya jenis2 grid,, dapet ilmu baru neh

  4. ferry says:

    keren mantap gan nambah wawasan

  5. adnan says:

    udh lama gak di update2 lagi gan tutorialnya..

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development