- Learn the basic terms
Sebelum kita mendalami praktik terbaik untuk menyiapkan kisi tata letak Anda, pertama-tama mari kita uraikan istilah dasar sistem kisi. Berikut representasi visual dari sistem grid dalam desain ui.
- 5pt or 8pt grids
Kisi 5px mungkin lebih cocok untuk tata letak kolom tetap dengan jarak yang lebih padat, sedangkan 8px mungkin lebih cocok untuk tata letak yang lancar dengan lebih banyak ruang untuk bernapas. Lihatlah betapa lebih padatnya kisi 5px dibandingkan dengan kisi 8px.
- Fixed grids
Untuk grid tetap kita bisa menggunakan bootstrap grid 12 kolom, lebar kolom 65 sampai 80px dan lebar selokan antara 15-30px. Itu semua tergantung pada seberapa kompak Anda membutuhkan desain Anda. Ini akan memberi kita lebar kotak 1100px untuk dikerjakan.
- Fluid grids
Kisi standar saya untuk desain situs web dibangun di atas bingkai 1440 px. Saya cenderung meninggalkan setidaknya 10% margin di samping tetapi biasanya, saya menggunakan margin 96px. Ini memberi saya area aman 1248 px untuk membangun desain saya. Saya menggunakan kisi 12 kolom dengan talang 24px.
- Soft grid vs hard grid
Saya jarang menggunakan grid baris (garis dasar) untuk memberi jarak pada elemen saya. Saya menambahkan kolom vertikal saya dan memastikan bahwa semua elemen pas dalam wadah horizontal dan selalu memastikan bahwa elemen saya kosong dengan peningkatan 8 atau 5 px.
- Mobile grid Settings
Untuk aplikasi, saya selalu mulai mendesain di bingkai iPhone 14 Mini atau Android Large karena jauh lebih mudah untuk memperbesar desain. Saya menggunakan margin minimal 16px di samping dengan talang 8-16 px dan membangun antarmuka saya di kisi 4 kolom. Hampir selalu 🙂
- Aligning main containers
Saat menyelaraskan wadah terluar Anda, Anda harus berusaha menyesuaikan dengan lebar kolom yang diberikan sehubungan dengan lebar selokan. Ini akan membuatnya lebih mudah untuk mendesain ketika elemen Anda disejajarkan pada grid. Ingat tentang menambahkan bantalan di dalam wadah Anda!
- Aligning your elements
Namun, jangan khawatir tentang penyelarasan elemen Anda di dalam wadah. Pastikan Anda menggunakan angka bulat untuk memberi jarak dan memberikan cukup ruang bagi elemen penampung Anda untuk bernapas dan menambahkan padding dalam setidaknya 20-40px sehingga ketika Anda mulai mengubah ukuran elemen Anda, mereka tidak tumpang tindih