Andi: “Seperti apa bentuk grid?”
Toni: “Seperti dibawah ini…”
Andi: Lalu apa itu Grid?
Toni: “Garis bantu untuk memudahkan desainer saat membuat desain. Desain yang dihasilkan akan lebih rapih, dan dengan menggunakan grid akan memudahkan proses development, karena susunan layout nya menjadi terstruktur. Grid = Developer Friendly. Ingin teman developer mu hidup bahagia? gunakan lah grid 😁👍”
Andi: “Apakah penggunaan grid harus 12 kolom?”
Toni: “Enggak harus. Bebas mau menggunakan berapapun kolom grid. Bahkan kalau membuat desain website menggunakan 2 kolom grid pun tidak masalah”
Andi: “Lalu bagaimana menentukan berapa kolom yang harus digunakan?“
Toni: “Kompleksitas konten. Contohnya, jika kamu membuat desain website, dan konten nya hanya sedikit dan kamu hanya perlu membagi desain website tersebut menjadi 2 kolom, maka gunakan saja 2 kolom grid”
Andi: “Kayaknya kebanyakan menggunakan 12 kolom grid deh”
Toni: “12 kolom grid sangat bagus untuk meng-handle konten yang kompleks dan konten yang simple, maka dari itu banyak yang menggunakan. Tetapi 12 kolom grid ini bukan sebuah keharusan”
Andi: “Bisa contohin penggunaan grid?”
Toni: “Bisa banget, aku pakai figma untuk mempraktekkan penggunaan grid. Pertama, buka Figma lalu bikin project baru dan buat sebuah frame”
Toni: “Untuk memunculkan grid, klik frame nya lalu pada sidebar sebelah kanan klik pada bagian layout grid dan atur seperti gambar”
Toni: “Setelah itu, kamu tinggal menempatkan elemen elemen design mu sesuai dengan grid”
Andi: “Cukup mudah ya? , penempatan elemen elemen nya jadi rapih. Tapi bikin design jadi terlihat boring ya? soalnya jadi kayak terstruktur gitu”
Toni: “Siapa bilang?, kamu bisa bikin design seperti dibawah ini dengan menggunakan grid”
Andi: “Oh, aku kira untuk menempatkan sebuah elemen harus dimulai dari ujung garis berwarna merah, kayak gini…”
Toni: “Kayak gitu juga sebenernya enggak salah. Tapi penggunaan grid enggak sekaku itu.
“Mungkin mindset nya yang perlu dirubah. Jika kamu berpikiran menggunakan grid seperti gambar diatas, berarti mindset penggunaan grid kamu masih seperti dibawah ini…”
Toni: “Kamu masih berpikir bahwa logo dan menu menu adalah sebuah elemen terpisah, jadi penempatan nya harus diujung garis merah.
“Mindset nya bisa diubah bahwa Logo dan menu menu adalah satu kesatuan bernama navigasi, ketika mindset mu seperti itu maka penempatan elemen nya menjadi seperti dibawah ini…”
Toni: “Jadi kalau diperhatikan menu menu nya itu terlihat melewati garis merah. Tapi sebenarnya tidak masalah. Karena menu menu tersebut berada di dalam satu kotak bernama navigasi. Dan kotak tersebut ditempatkan persis di ujung garis merah”
“Begitu juga dengan design dibawah ini… kalau diperhatikan secara detail, semua elemen ditempatkan persis di ujung garis merah”
Andi: “Oh paham, jadi mindset nya per block atau per bagian gitu ya?”
Toni: “Betul sekali. Coba kita lihat gambar di bawah ini, kamu pasti bakal jadi lebih paham gimana penempatan elemen menggunakan grid”
Andi: “Oiya katanya tadi boleh pake berapapun grid untuk bikin desain website?”
Toni: “Yup betul, ini contohnya…”
Di artikel berikutnya kita akan membahas tentang penggunaan grid pada responsive design.
Btw, gimana penjelasan mengenai grid diatas? apakah mudah dipahami? boleh minta pendapatmu ya… terima kasih 😄
Kunjungi dwinawan.com untuk konten konten kreatif lain nya
