Newest Info

Berita, info dan pengumuman terbaru berkaitan dengan perkembangan teknologi

Penggunaan Grid pada desain website

31 Januari 2021 | Dwinawan via medium
post image

Toni: “Seperti dibawah ini…” 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 ????????” Toni: “Enggak harus. Bebas mau menggunakan berapapun kolom grid. Bahkan kalau membuat desain website menggunakan 2 kolom grid pun tidak masalah” 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” 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” 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” Toni: “Siapa bilang?, kamu bisa bikin design seperti dibawah ini dengan menggunakan grid” 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” Toni: “Betul sekali. Coba kita lihat gambar di bawah ini, kamu pasti bakal jadi lebih paham gimana penempatan elemen menggunakan grid” 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 ????. IndonesiaIT 2021, [...], Artikel ini di ambil dari feed medium, untuk pengalaman baca yang lebih baik, silahkan kunjungi situ aslinya. IndonesiaIT - Software Developer Terbaik. Baca Selengkapnya.