Tahukah Kalian, Pengertian Grid System, Apa itu Sistem Grid dan Kisi? Sejarah, Jenis dan Contohnya serta Apa Tips dan Cara Menggunakannya dalam Desain? Ya, perlu kalian ketahui bahwa sistem kisi, tidak hanya berguna bagi kita sebagai graphic designer atau web designer, mereka juga baik untuk pengguna. Beberapa pembahasan blog Kami telah menekankan pentingnya menciptakan perjalanan dan pengalaman pengguna yang baik melalui desain Anda. setelah semua, pengguna ada untuk mengkonsumsi konten Anda dan kalian sendiri ingin menjadikannya sebagai pengalaman yang baik bagi mereka sebisa kalian.

Dengan memiliki grid system atau sistem grid yang solid untuk digunakan dalam desain (sebelum melanjutkan ke tahap pengembangan) akan memungkinkan Anda untuk melakukan hal yang Kami sebutkan di atas, dengan menciptakan konsistensi dan keakraban (membangun kredibilitas) dalam desain. Contohnya jika situs web Anda dirancang dengan baik, ini akan membantu Anda memproyeksikan kepercayaan kepada audience. Terkait hal itu, dalam postingan kali ini, Kami akan membahas secara lengkap tentang apa itu pengertian grid system atau sistem grid (kotak kisi) baik itu dalam desain grafis maupun web. Berikut ini adalah ulasannya!

Pengertian Grid System

Berarti sistem kisi atau kotak dalam graphic design atau desain grafis, grid system adalah penggunaan kerangka kerja dua dimensi untuk menyelaraskan dan meletakkan elemen desain berdasarkan simpulan Kami yang mengacu pada Situs Technopedia.

Memecah ruang desain tunggal ke dalam kisi dapat membantu memposisikan komponen individu dengan cara yang dapat menarik perhatian audiens (baca pengertian audiens di sini), membuat aliran pengguna dan membuat informasi dan visual lebih menarik dan dapat diakses oleh khalayak.

Sedangkan dalam web design, sistem grid adalah struktur yang terdiri dari serangkaian garis horizontal dan vertikal, yang digunakan untuk mengatur konten. Contohnya seperti grid system dari Bootstrap yang digunakan untuk tata letak, khususnya tata letak responsif.

Apa itu Sistem Grid (Kisi)?

Jadi, apa itu sebenarnya yang dimaksud dengan sistem grid atau kisi ini? Memang, tidak ada hal yang lebih buruk bagi seorang seniman selain kanvas kosong.

Seperti yang sudah Kami sebutkan, grid system atau sistem kisi merupakan serangkaian pengukuran yang dapat digunakan dalam desain grafis (baca pengertian graphic design di sini) oleh graphic designer atau desainer grafis untuk menyelaraskan dan mengukur objek dalam format yang diberikan.

Meskipun ada beberapa jenis kategori sistem grid yang berbeda, tidak ada aturan ketat tentang apa yang bisa atau tidak bisa menjadi grid (kisi).

Apa relevan bagi kita adalah bagaimana grid atau kisi merupakan hal seperti konsep matematika yang ketat. Ini sempurna untuk manipulasi dalam code (kode).

Cara tradisional membuat kisi adalah dengan melakukannya dengan tangan di Photoshop atau Adobe Illustrator. Jika Anda tiba-tiba menyadari bahwa Anda menginginkan kisi atau kotak yang lebih ramping, Anda perlu membuat ulang kisi dan memindahkan semuanya dengan tangan atau mouse Anda.

Dalam dunia coding atau koding masalahnya sebenarnya bukanlah itu, kita bisa sangat fleksibel dan mencoba banyak iterasi dalam hitungan menit.

Hal juga memungkinkan kita untuk menggunakan beberapa sistem grid di atas satu sama lain, mengubah grid system dengan memutar atau menskalanya, serta membuat modul grid secara acak.

Konsep sistem grid generatif ini terbilang sangat kuat, tetapi juga sangat kurang dimanfaatkan. Bahkan hal sederhana seperti program grid yang fleksibel tidak ada saat ini. Ya, grid system adalah segala jenis kendala dasar yang dapat Anda letakkan pada canvas (kanvas).

Apa itu Grid atau Grids?

Kemudian, apa itu yang dimaksud dengan grid atau grids (jamak)? Kisi-kisi dalam desain grafis atau web yaitu kembali ke awal sistem penulisan manusia.

Dalam desain grafis, grid adalah sistem untuk mengatur tata letak. Tata letak bisa untuk cetak (seperti buku, majalah, atau poster), atau untuk layar (seperti halaman web, aplikasi, atau antarmuka pengguna lainnya).

Banyak sistem grid terdiri dari kotak, kotak, dan persegi panjang. Komponen desain dapat ditempatkan di dalam kotak-kotak ini untuk mencapai tujuan daripada tata letak.

Jenis kisi-kisi lain mencakup bentuk geometris yang lebih beragam, dan dapat digunakan pada desain asimetris (tidak simetris) seperti gambar manusia atau hewan.

Dalam kasus tersebut, sistem grid menggunakan garis-garis geometris untuk memecah ruang total menjadi satu set komponen geometris. Kemudian, elemen desain grafis (atau web) diterapkan pada masing-masing bidang ini, untuk menciptakan hasil yang seragam.

Sejarah Grid System atau Sistem Grid

Agar lebih memahami tentang apa itu pengertian grid system, tentunya kita juga harus mengenal bagaimana sejarah awal mereka bukan?

Sistem grid pertama kali digunakan untuk mengatur tulisan tangan di atas kertas dan kemudian dalam penerbitan untuk mengatur tata letak halaman yang dicetak.

Mengingat bahwa halaman yang dicetak dan halaman virtual memiliki banyak kesamaan, seharusnya tidak mengejutkan bahwa Kami sendiri juga menggunakannya dalam desain web dan aplikasi.

Ya, perlu kalian ketahui bahwa sistem grid dimulai sebagai garis bantu untuk buku-buku tertulis. Ini kemudian ditransfer ke jenis atau tipe yang bergerak, di mana pengaturan tipe itu sendiri terdiri dari kotak.

grid line atau garis kisi juga digunakan untuk membantu printer dalam pengaturan huruf. Ini seringkali bisa jadi sesederhana garis dasar yang menentukan skala heading (atas) dan body (badan).

Dengan munculnya permintaan besar revolusi industri untuk berbagai karya cetak, dalam banyak hal, font (baca pengertian font di sini) seperti Slab-Serif, diterima sebagai bagian dari revolusi periklanan.

Di bawah ini adalah penggunaan sistem grid majalah Futuris Lacerba yang menyelidiki penggunaan sistem grid, dan bagaimana cara memainkan batasan-batasan ini.

Sistem grid di sini digunakan untuk membagi ruang halaman menjadi segmen yang lebih kecil, untuk digunakan untuk iklan. Semakin besar ruang, semakin banyak biaya untuk iklan.

Hal ini terus digunakan hingga sekarang karena pada dasarnya prinsip kerjanya adalah sama yaitu untuk membagi ruang.

Jenis dan Contoh Grid System (Sistem Grid)

Setelah mengetahui arti dan pengertian grid system serta apa itu grid, di sini Kami juga akan menjelaskan tentang apa saja macam, jenis dan contoh dari sistem grid ini.

Sebelumnya, perlu kalian ketahui bahwa grid atau kisi manuskrip (naskah) adalah bentuk kisi yang paling dasar. Itu dibuat berdasarkan 1 (satu) persegi panjang yang menentukan margin formatnya.

Oke, di bawah ini adalah apa saja jenis-jenis dari grid system atau sistem grid dan contohnya yang harus kalian ketahui.

a. Baseline Grid

Jenis grid system yang pertama adalah kisi kotak dasar atau baseline grid, ini adalah garis tebal dengan garis horizontal dengan jarak yang sama yang menentukan di mana teks akan diletakkan.

Baseline grid dasar sering digunakan dalam kombinasi dengan grid kolom, untuk memastikan bahwa garis teks di setiap kolom sejajar secara merata di seluruh spread.

Sepert yang kalian lihat pada gambarnya di atas, contoh sederhana dari garis dasar adalah selembar kertas aturan, seperti yang mungkin Anda gunakan dalam sekolah Anda!

b. Coloum Grid

Disebut sebagai kolom kisi, coloum grid membagi halaman menjadi kolom, dan mungkin merupakan tipe grid yang paling banyak dan paling umum digunakan oleh desainer grafis dan web.

Ini melibatkan mengambil halaman dan membaginya menjadi sejumlah bidang vertikal, yang kemudian disejajarkan dengan objek. Perlu kalian ketahui bahwa surat kabar dan majalah menggunakan kisi kolom ini secara luas.

c. Modular Grid

Jenis berikutnya adalah kisi modular atau modular grid, ini adalah kisi kolom dan baris yang tidak hanya memberi tahu Anda penempatan sumbu-x pada formulir Anda, tetapi juga panduan pada sumbu-y.

Ini merupakan jenis ekstensi dari kisi kolom, modular grid melibatkan pengambilan kisi kolom dan menambahkan baris ke dalamnya.

Baris dan kolom yang bersilangan membuat “modul” yang kemudian dapat digunakan untuk mengatur keputusan pembuatan tata letak.

Seperti yang kalian lihat pada gambar di atas, biasanya majalah dan laporan perusahaan sering menggunakan kisi modular yang memiliki tata letak seperti itu.

d. Manuscript Grid

Selanjutnya yaitu kisi manuskrip (naskah) atau manuscript grid adalah kisi satu kolom yang hanya menentukan di mana dalam suatu halaman teks akan diletakkan.

Sebagaimana yang kalian lihat pada gambar contohnya di atas, ini biasanya diterapkan pada buku klasik “tradisional” dengan tata letak halaman yang saling berhadapan.

e. Pixel Grid

Jenis grid system selanjutnya adalah jenis kisi kotak piksel atau pixel grid. Jika Anda pernah memperbesar dekat sebuah dokumen dengan menggunakan Photoshop, Anda mungkin telah melihat kotak pixel muncul.

Layar digital terdiri dari kotak mikroskopis jutaan piksel, dan kadang-kadang perancang mendekati untuk mengedit gambar piksel demi piksel seperti gambar contohnya di atas.

f. Hierarchical Grid

Jenis grid system terakhir ini sering disebut dengan hiearchy atau hierarki, meskipun ini seperti semacam “tangkap semua” yang berbeda dengan kategori sebelumnya.

Kisi (kotak) hierarkis atau hierarchical grid dijelaskan dengan tidak memiliki spasi yang sama antara modul yang merujuk pada setiap kisi tidak beraturan yang mengakomodasi kebutuhan konten tertentu.

Grid hierarkis mungkin sepenuhnya berbentuk bebas, atau mungkin terdiri dari dua grid yang dilapiskan, atau elemen grid tambahan lainnya seperti yang kalian lihat pada contoh gambarnya di atas.

Tips dan Cara Menggunakan Grid System dalam Desain

Dalam membahas mengenai apa itu pengertian grid system (sistem grid) dan artinya, adalah merupakan hal yang penting bagi Kami untuk juga menjelasakan bagaimana dan apa saja tips dan cara menggunakannya dalam desain.

Sebelum itu, perlu kalian ketahui bahwa grid system dipopulerkan dengan gelombang desain grafis gaya Swiss. Intinya yaitu adalah untuk bekerja secara kreatif di dalam grid, tetapi juga membebaskannya ketika Anda membutuhkannya.

Bahkan, sebuah kotak sederhana memberi Anda banyak variasi dalam menempatkan konten Anda. Anda dapat menggunakan modul sebagai dasar untuk area konten yang lebih besar, di mana hal ini akan menciptakan keselarasan dan keseimbangan dalam desain Anda.

Baiklah, berikut adalah beberapa tips dan cara praktis dan sederhana untuk menggunakan grid system atau sistem kisi dalam desain Anda:

• Atur overlay grid Anda ke desain Anda; Jika Anda merasa nyaman mendesain di browser (untuk web designer) menggunakan framework atau kerangka CSS Anda maka hal itu baik-baik saja. Tetapi sebaliknya, Kami pribadiselalu merekomendasikan membuat overlay sistem grid Anda untuk sebuah desain. Baik Anda menggunakan Photoshop atau program grafik favorit lainnya, atur layer teratas yang menampilkan grid dan menguncinya di tempatnya. Dengan begitu, maka akan selalu tersedia pilihan bagi Anda untuk meng-enable dan men-disable-nya.
• Buat beberapa panduan untuk membantu Anda; Jika Anda memiliki overlay, hal berikutnya yang harus dilakukan adalah membuat beberapa panduan untuk membantu kita. Secara umum, Kami suka membuat panduan untuk setiap awal dan akhir kolom di sistem grid.
• Cobalah bekerja dengan kendala dan batasan; Banyak yang mungkin berpikir bahwa bekerja dengan grid system saja adalah resep yang baik untuk bekerja dengan cara yang lebih terbatas, tetapi masalahnya bukanlah itu. Bekerja dengan sistem grid terutama saat membuat milik Anda, sangat mudah untuk membuat sistem yang memungkinkan 16 kolom, walaupun dengan hanya 6 (enam) saja sudah cukup sederhana. Belajar mendesain dengan kendala, tidak hanya di dalam sistem grid Anda, akan membantu Anda dalam jangka panjang, karena Anda akan dapat memfokuskan desain Anda pada apa yang paling penting dan relevan bagi pengguna Anda.
• Perhatikan spacing atau jarak Anda; Banyaknya fokus dalam sistem grid yang biasa Kami gunakan dalam desain adalah pada jumlah kolom yang ada, seperti lebar kolom, lebar celah antar kolom (jumlah ruang antara setiap kolom) dan berapa banyak ruang yang harus diberikan di sekitar elemen-elemen itu. Namun, pada gilirannya, jangan lupa pastikan ruang vertikal tersedia untuk Anda dan pastikan juga bahwa Anda menggunakan grid Anda untuk membantu kalian dengan spasi yang tersedia di sana. Misalnya, ketika menggunakan gutter-width dan vertical spacing, maka itu dapat bekerja dengan luar biasa untuk desain Anda dan bagaimana masing-masing elemennya diberi jarak.

Kesimpulan

Oke, Kami rasa sudah cukup jelas sekarang. Baiklah berdasarkan pembahasan dan penjelasan tentang Pengertian Grid System, Apa itu Sistem Grid dan Kisi? Sejarah, Jenis dan Contohnya serta Apa Tips dan Cara Menggunakannya dalam Desain di atas, dapat kita simpulkan bahwa sistem grid atau grid system adalah struktur yang terdiri dari serangkaian garis horizontal dan vertikal yang berpotongan dan kemudian digunakan untuk mengatur isi. Dalam istilah yang bahkan lebih mendasar untuk memahaminya, ini adalah cara untuk menyediakan sistem yang dapat bekerja dengan seorang desainer untuk menyusun dan menyajikan konten dan gambar dengan cara yang lebih mudah dibaca dan dikelola.

Dengan menggunakan sistem grid dalam graphic design atau website design Anda, maka itu merupakan salah satu cara untuk mencapai tingkat konsistensi yang terbilang akan sangat sulit untuk dikuasai dan digambarkan dalam desain Anda.

Penutup

Demikianlah ulasan yang dapat Kami bagikan dalam postingan kali ini yang membahas mengenai Pengertian Grid System, Apa itu Sistem Grid dan Kisi? Sejarah, Jenis dan Contohnya serta Apa Tips dan Cara Menggunakannya dalam Desain. Semoga tulisan ini dapat bermanfaat dan dapat menambah wawasan Kita semua dalam mengetahui istilah-istilah teknologi di dunia IT yang harus diketahui dalam belajar graphic design (desain grafis).

Silahkan bagikan artikel atau tulisan Kami di sini jika kalian rasa ini bermanfaat untuk teman, kerabat serta rekan kerja Anda semua. Sekian dari Saya Rifqi Mulyawan, Terima Kasih.

Postingan ini juga tersedia dalam versi: