Elemen desain sepertinya ada di mana-mana akhir-akhir ini. Mereka merespons dalam beberapa cara berbeda, bergerak ke atas dan ke bawah, dari kiri ke kanan, dan bahkan secara diagonal. Apakah ada yang menggunakan jaringan lagi?
Semua skema desain ini benar-benar membuat kami berpikir tentang kisi dan penggunaannya dalam desain situs web modern. Apakah jaringan mati? Mengapa begitu banyak proyek terlihat seperti dirancang dari grid? Dan apakah ada perubahan mendasar dalam beberapa tahun terakhir?
Ini adalah topik yang cukup rumit (dan yang tidak memiliki jawaban yang sangat jelas).
Sejarah Grid dalam Desain Situs Web
Kisi-kisi adalah konsep lama, berasal dari desain grafis sejauh yang Anda bisa. Sebuah sistem yang menggunakan keberpihakan vertikal dan horizontal untuk memfasilitasi organisasi adalah penting untuk memastikan keterbacaan dan hirarki desain.
Kisi-kisi yang sama yang digunakan dalam desain cetak diterjemahkan ke web saat kami mulai membuat situs web dan Anda akan menemukan beberapa jenis kisi utama di sebagian besar tata letak grafis dan visual:
- Kisi kolom: Bagian vertikal yang membagi halaman untuk penyelarasan. Di web, kisi yang paling umum adalah kisi 12 kolom. Kisi 12 kolom populer karena dapat dibagi lagi dalam beberapa cara untuk fleksibilitas tertinggi, dalam bagian 12, 6, 4, 3, 2, atau 1 kolom yang semuanya berjarak sama.
- Kisi modular: Kombinasi kolom vertikal dan horizontal untuk membuat modul untuk elemen. Ini sering digunakan untuk mengurutkan elemen kartu pada halaman web.
- Jaringan batu: Seperti kisi modular, tetapi diperluas untuk memungkinkan elemen dengan bentuk atau ukuran berbeda, seperti kartu yang berukuran dua kolom atau baris dan masih muat ke dalam kisi.
- Kisi dasar: Garis horizontal tempat kolom teks beristirahat sehingga sejajar, hampir seperti Anda menulis di atas kertas bergaris.
- Kisi-kisi naskah/bacaan: Satu kolom yang menentukan kemana teks akan pergi. Kisi ini sering kali memiliki margin yang sama di kiri dan kanan, tetapi tidak selalu. Anggap saja sebagai kolom teks di blog, minus sidebar.
- Kisi piksel: Kotak persegi kecil, masing-masing berukuran satu piksel. Ini biasanya digunakan dalam desain ikon.
- Kisi hierarkis: Kisi tidak beraturan yang membuat hierarki elemen tetapi mungkin hanya diketahui oleh perancang. Jenis kisi ini bisa menjadi jawaban yang rumit untuk pertanyaan judul kami.
Apakah Grid Mati?
Kami percaya pada gagasan bahwa jaringan tidak mati sama sekali. Namun, ide matematika sempurna tradisional kami tentang mereka mungkin untuk web.
Daya tanggap dan begitu banyak ukuran situs web dan rasio aspek telah mengharuskan kisi-kisi untuk menyusut dan melipat dan memperluas berdasarkan ukuran perangkat, viewport, dan konten di dalamnya. Ini sangat rumit.
Kisi modular dan pasangan bata praktis ada di mana-mana, terutama jika Anda memiliki situs web dengan blog, galeri foto, atau jenis elemen desain apa pun yang dikelompokkan.
Bahkan jika tidak ada kisi yang jelas secara visual, kemungkinan besar ada. Pikirkan seperti ini:
- Pengembang harus mengembangkan kisi untuk menetapkan bagaimana dan di mana desain akan terpisah dari desktop ke seluler dan sebaliknya.
- Kisi-kisi kecil terlihat hampir terlihat oleh mata tetapi memiliki tujuan fungsional.
- Pembangun situs web sering kali menggunakan sistem kisi yang tidak pernah terpikirkan oleh perancang saat mereka membangun. (Ini juga bisa benar dengan tema WordPress apa pun dan editor blok Gutenberg.)
Diakui, ada beberapa jenis kisi yang digunakan jauh lebih sedikit dalam desain situs web. Grid dasar, misalnya, hanya penting untuk elemen teks multi-kolom, yang menjadi kurang umum sepanjang waktu. Kisi piksel terlalu kecil bagi desainer web untuk terjebak.
Kisi modular dan pasangan bata ada di mana-mana (terutama jika Anda memiliki situs web dengan blog, galeri foto, atau semua jenis elemen desain yang dikelompokkan).
Akhirnya, kisi-kisi hierarkis telah menjadi elemen dominan dalam desain situs web. Yang terkadang Anda harus melihat seluruh halaman, bukan hanya satu layar pada satu waktu, untuk melihatnya. Itu Visme blog menggambarkannya seperti ini: “Tujuan dari desain grid hierarkis adalah untuk mengatur elemen sesuai urutan kepentingannya. Masih disebut grid karena modul-modulnya masih terpasang di dalam grid manuskrip terukur. Grid hierarkis dapat diatur dengan gaya bebas, atau dengan grid modular sebagai panduan.”
Mengapa Banyak Situs Web Tampaknya Tidak Memiliki Kotak?
Alasan Anda mungkin mengira kisi-kisi sudah mati adalah karena Anda tidak selalu dapat melihatnya. Tetapi sebagian besar, desain situs web menggunakan kisi – meskipun fleksibel – dengan cara berulang untuk keseluruhan situs.
Bahkan jika Anda mencoba mendesain tanpa kisi, ada beberapa kisi yang sudah ada di sana, suka atau tidak suka (seperti aturan sepertiga atau bahkan 12 kolom).
Umumnya ini mungkin mencakup area pahlawan yang tampak seperti satu kolom, diikuti layar dengan dua kolom, lalu layar dengan tiga kolom, lalu area satu kolom lainnya. Semua kombinasi ini bisa memusingkan saat Anda memikirkannya, tetapi merupakan bagian dari grid yang sama – seringkali 12 kolom!
Dari perspektif hierarkis, perancang membuat blok, baris, dan kolom konten yang masuk dalam urutan kepentingan pada semua ukuran layar. Elemen multi-kolom dipecah menjadi kolom tunggal pada layar kecil. Tapi itu semua adalah bagian dari grid.
Biasanya Anda dapat memberi tahu situs web dengan kisi karena rasanya benar. Item memiliki beberapa elemen hierarki dan penyelarasan dengan pendekatan terorganisir, bahkan jika tidak ada kisi visual atau persepsi.
Ada juga ini: Bahkan jika Anda mencoba mendesain tanpa kisi, ada beberapa kisi yang ada di sana, suka atau tidak (seperti aturan sepertiga atau bahkan 12 kolom). Mata kita dilatih untuk melihat pengelompokan dan kesamaan ini untuk menciptakan organisasi visual.
Apa arti semua itu? Bahkan jika Anda tidak merencanakannya atau melihatnya, beberapa persepsi tentang kisi selalu ada. Bekerja melawannya dapat membuat situs web tidak terorganisir yang dapat membuat pengguna frustrasi. Bekerja dengannya menciptakan harmoni visual berdasarkan teori desain selama berabad-abad.
Kesimpulan
Planet UX mengatakan ini tentang sistem grid untuk web (dan kami sangat setuju):
“… kendala kreatif sangat berharga. Daripada membatasi kreativitas kita, kendala memberi kita titik awal dan menginvestasikan kebebasan untuk mengeksplorasi solusi yang mungkin. Nilai kendala kreatif adalah mengapa desainer terbaik selalu bersikeras untuk bekerja dari ringkasan desain yang kuat, yang menentukan persyaratan proyek.
“Sistem grid memberikan batasan untuk tata letak dan organisasi visual, yang secara bersamaan mengurangi jumlah opsi yang tersedia bagi perancang, namun juga membuka kemungkinan yang terbatas. Bahkan kisi modular sederhana dapat menampung ribuan opsi tata letak.”
Jadi, begitulah: Grid tidak diragukan lagi tidak mati.