Apa itu sistem grid?
Sistem grid membantu menyelaraskan elemen halaman berdasarkan kolom dan baris yang diurutkan. Saya menggunakan struktur berbasis kolom ini untuk menempatkan teks, gambar, dan fungsi secara konsisten di seluruh desain. Setiap elemen memiliki tempatnya yang dapat kita lihat secara instan dan direproduksi di tempat lain.
Pertimbangkan grid yang saya temukan di peta, pulau, kota, danau akan muncul tepat di bagian peta, pada koordinat Utara-Selatan / Timur-Barat. Mereka akan selalu muncul di tempat yang sama di peta lain. Sebuah GPS mengakses koordinat ini untuk membantu memandu penggunaan membayangkan kekacauan jika tidak ada sistem grid untuk itu untuk mengunci dan membuat kita tetap di jalan !.
Tata letak terbaik adalah yang tidak memberikan gangguan dari konten. Berkat ketepatan matematisnya, sistem grid adalah contoh yang bagus dari tata letak semacam ini.
Section Artikel
Tata Letak Responsif
Grid tata letak desain material terdiri dari tiga elemen. Kolom, Gutters , Margin. Selain tata letak responsif ada yang namanya grid modular yang ditandai dengan adanya pemandu vertikal dan horizontal. Sebuah modul terbentuk di persimpangan. Ini adalah persegi panjang dengan tinggi dan lebar yang mendasari komposisi.
KOLOM
Konten diratakan di area layar yang berisi kolom. Lebar kolom ditentukan menggunakan persentase, bukan kolom berisi tetap. Lebar kolom ditentukan menggunakan persentase, bukan nilai tetap, untuk memungkinkan konten secara fleksibel mengadopsi ukuran layar apa pun. Jumlah kolom yang ditampilkan dalam petak ditentukan oleh rentang breakpoint (rentang ukuran layar yang telah ditentukan) di mana layar dilihat, apakah itu breakpoint untuk seluler, tablet, atau ukuran lain
Saya menggunakan standar grid 12 kolom yang digunakan karena lebih mudah untuk dipecah menjadi ukuran lain dengan 6,4,3, dan 2 kolom
Gutters
Gutters adalah ruang antar kolom. Mereka membantu memisahkan konten. Lebar talang adalah nilai tetap di setiap rentang breakpoint. Untuk menyesuaikan dengan layar dengan lebih baik, lebar talang dapat berubah pada breakpoint yang berbeda. Gutters yang lebih lebar lebih sesuai untuk perubahan yang lebih besar pada breakpoint yang berbeda. Gutters yang lebih lebar lebih cocok untuk layar yang lebih besar, karena membuat lebih banyak ruang kosong antar kolom.
Margin
Margin adalah ruang antara konten dan tepi kiri dan kanan layar, lebar margin ditentukan sebagai nilai tetap di setiap rentang breakpoint. Untuk mengadopsi layar dengan lebih baik, lebar margin dapat berubah pada breakpoint yang berbeda. Margin yang lebih lebar, lebih sesuai untuk layar yang lebih besar, karena mereka menciptakan lebih banyak ruang kosong di sekeliling konten.
Margin dalam desain :
Sebagai langkah awal, blok 4×4 dipilih, karena untuk sebagian besar perangkat umum, ukuran layar dalam piksel adalah kelipatan delapan, oleh karena itu akan lebih mudah untuk mengembangkan desain antarmuka untuk perangkat dengan ukuran ini.
Bagaimana Cara Menggunakannya Dan Berapa Ukuran Yang Pas Untuk Digunakan ?
Saya merekomendasikan menggunakan sebuah modul persegi 4×4. Ukuran layar dalam piksel adalah kelipatan empat untuk perangkat yang paling umum, oleh karena itu akan lebih mudah mengembangkan desain antarmuka untuk perangkat di bawah sistem ini.
Semua sistem penulisan harus diperbaiki dengan jarak grid ini, ukuran komponen, identasi internal dan ekternal, ikon, dll .
WEB
Untuk Desktop saya menggunakan grid dengan ukuran
1152px = (72px * 12) + (24px * 11) + (12px + 12px)
TABLET
Untuk tablet saya menggunakan kisi
764 = (102px * 6) + (24px * 5) + (16px + 16px)
MOBILE
Untuk seluler saya menggunakan grid
320PX = (136px * 2) + (16px * 1) + (16px + 16px)
Manfaat Menggunakan Pada Pembuatan UI Design :
- Manfaat menggunakan grid pada pembuatan UI Design
- Membuat konten menjadi lebih rapi sehingga mempermudah scanning konten oleh pembaca atau pengunjung website.
- Mempermudah designer, karena dengan mudah menentukan peletakan konten dibanding jika tidak menggunakan grid yang harus mengira ngira ukuran konten nya.
- Konsistensi jarak antar elemen lebih terjaga.
- Mempermudah developer untuk mengonversikan design menjadi website, karena tinggal mengikuti jumlah dan lebar grid yang digunakan.
