Penggunaan Grid pada desain website

Dwinawan
Dwinawan
Jan 30 · 4 min read
Image for post
Image for post

Andi: “Seperti apa bentuk grid?”

Image for post
Image for post

Andi: Lalu apa itu Grid?

Image for post
Image for post

Andi: “Apakah penggunaan grid harus 12 kolom?”

Andi: “Lalu bagaimana menentukan berapa kolom yang harus digunakan?“

Andi: “Kayaknya kebanyakan menggunakan 12 kolom grid deh”

Andi: “Bisa contohin penggunaan grid?”

Image for post
Image for post

Toni: “Untuk memunculkan grid, klik frame nya lalu pada sidebar sebelah kanan klik pada bagian layout grid dan atur seperti gambar”

Image for post
Image for post

Toni: “Setelah itu, kamu tinggal menempatkan elemen elemen design mu sesuai dengan grid”

Image for post
Image for post

Andi: “Cukup mudah ya? , penempatan elemen elemen nya jadi rapih. Tapi bikin design jadi terlihat boring ya? soalnya jadi kayak terstruktur gitu”

Image for post
Image for post

Andi: “Oh, aku kira untuk menempatkan sebuah elemen harus dimulai dari ujung garis berwarna merah, kayak gini…”

Image for post
Image for post

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…”

Image for post
Image for post

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…”

Image for post
Image for post

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”

Image for post
Image for post

Andi: “Oh paham, jadi mindset nya per block atau per bagian gitu ya?”

Image for post
Image for post
Image for post
Image for post

Andi: “Oiya katanya tadi boleh pake berapapun grid untuk bikin desain website?”

Image for post
Image for post

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

Image for post
Image for post

Insight

UI, UX, Bisnis Design

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Have a question? find me on twitter.com/dwinawan_

Insight

Insight

UI, UX, Bisnis Design

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Have a question? find me on twitter.com/dwinawan_

Insight

Insight

UI, UX, Bisnis Design

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store