Selamat Datang

Web Design Menggunakan Grid

Bagaimanakah cara web designer mendesain sebuah website sehingga website tersebut memberi manfaat maksimal kepada penggunanya? sehingga pengguna bisa menkonsumsi informasi yang ada di web tersebut dengan nyaman, pengguna bisa menggunakan web tersebut dengan efisien, pengguna bisa mendapatkan apa yang mereka cari di website tersebut dengan cepat. Dengan kata lain pengguna bisa mendapatkan pengalaman yang menyenangkan dari website tersebut yang disebut dengan user experience (UX).

Banyak hal yang bisa dibahas berkaitan dengan user experience ini karena cakupannya begitu luas. Namun salah satu yang akan saya bahas berkaitan dengan user experience  di artikel ini adalah aspek layout, yakni grid — Web design menggunakan grid.

Grid

Apa itu grid?

Grid adalah struktur yang terdiri dari garis-garis horizontal atau gabungan garis vertikal dan horizontal yang saling bertemu yang digunakan untuk mengatur layout atau interface. Dengan grid ini kita membagi suatu layout berdasarkan kolom-kolom, selanjutnya dengan kolom – kolom ini content diatur dan ditempatkan.

Grid bukanlah sesuatu yang baru di dunia graphic design, grid digunakan sebagai alat bantu untuk mendesain media cetak seperti layout buku, brosur, poster dan sebagainya. Grid memberi guideline kepada desainer dimana elemen desain seharusnya ditempatkan dalam suatu layout.

Manfaat Grid pada Web Design

Salah satu tujuan dari web designer adalah membuat interface yang mana pengguna mudah memahaminya, mudah melakukan navigasi, mudah pula membaca contentnya dan juga  membantu pengguna dalam mengikuti alur informasi yang disampaikan lewat website. Untuk itu dibutuhkan desain yang efisien, yakni desain yang tidak menyita waktu pengguna  namun juga efektif, yakni desain  yang berhasil mengantarkan pesan kepada penggunanya.

Grid membantu desainer memetakan berbagai elemen-elemen desain yang berbeda untuk ditempatkan pada layout dan menghubungkan elemen-elemen yang menyusun layout halaman web tersebut. Sehingga memberi kesan keteraturan pada halaman web, yang pada akhirnya secara visual menghasilkan struktur layout yang jelas dan terorganisir.

Tujuan yang dicapai dengan Grid

Apapun metode ataupun teknik yang digunakan dalam mendesain suatu website tentu prioritasnya utamanya adalah pengguna, bukan pemilik atau si desainer sendiri. Bagaimana mendesain web yang memudahkan pengguna dalam mengaksesnya, nyaman dalam mencari informasi yang mereka butuhkan, tidak ada hal-hal yang mengganggu kenyamanan pengguna, navigasi tidak membingungkan, segala sesuatunya jelas dan teratur. Kata kuncinya adalah user experience, hal penting dan menjadi pertimbangan utama setiap keputusan di dalam proses desain.

Dengan demikian apa peran grid dalam mencapai tujuan yang disebutkan di atas? Sehingga pengguna bisa mendapatkan pengalaman yang menyenangkan dari website tersebut. Peran grid disini adalah membantu desainer mendesain web yang terstruktur dan terorganisir dari sisi layout, sistem grid membantu desainer menempatkan elemen – elemen yang berbeda namun tetap harmonis dan seimbang. Sehingga menghasilkan desain yang efisien, efektif namun tetap menarik dari sisi visual.

Baca Juga:

Penerapan Grid pada Web Design

Penggunaan grid pada web design adalah dengan cara membuat garis – garis vertikal pada website layout yang akan dibuat. Garis – garis vertikal ini akan membentuk kolom-kolom dengan lebar yang sama dengan jarak antar kolom dengan lebar yang sama pula. Proses ini kita lakukan saat tahap desain baru pada tahap wireframe draft atau bisa juga pada tahap lebih lanjut yakni saat pembuatan design comp.

Baca Juga:

grid

Gambar 1

grid2Gambar 2

 

Pada contoh di atas (Gambar 1) menggunakan 960 grid system yang populer di kalangan web designer maupun developer. Pada contoh di atas menggunakan 12 kolom dengan lebar total 960px, lebar tiap kolom 60px. Kolom diwakili oleh blok vertikal berwarna pink. Dengan menggunakan sistem grid ini kita menyelaraskan elemen desain yang kita buat berdasarkan kolom-kolom tersebut.

Kita ambil contoh elemen navigasi (menu), katakanlah ada tiga menu (menu1, menu2, menu3) pada web ini. Tiga menu ini secara total akan menyita 12 kolom, berarti tiap menu akan menyita empat kolom secara  merata.  Untuk melihat hasil dari grid tersebut terhadap designnya bisa dilihat di (Gambar 2). Pada (Gambar 2) kita bisa melihat bahwa grid membantu desainer untuk membuat desain menjadi lebih terorganisir, lebih terstruktur dengan lebar masing-masing elemen seimbang.

Kesimpulan

Untuk mendapatkan user experience yang baik pada suatu website ada banyak hal yang harus dikerjakan. Hal ini dikarenakan user experience mencakup semua hal yang ada di website itu sendiri, seperty typography, interface, information architecture,content, readability, bahkan sampai ke masalah  aksesibilitas web itu sendiri yang terjamin dan tidak terkendala oleh downtime.

Layout/interface adalah satu aspek dari user experience penting, karena layout/interface berkaitan dengan aspek visual dari web itu sendiri. Tampilan interface yang kacau, tidak menarik, membingungkan, tidak akan bisa menarik pengguna untuk masuk dan memperoleh informasi yang kita sediakan. Bisa dibayangkan bila web tersebut adalah media bagi kita untuk menjual produk atau jasa, sulit rasanya menarik kepercayaan pengguna yang bisa saja sebenarnya adalah calon customer/client bagi produk atau jasa kita. Kepercayaan (trust) pengguna bisa dibangun lewat desain yang  terstruktur, terorganisir yang menghasilkan desain yang efisien dan efektif. Desain seperti ini bisa dicapai dengan menerapkan grid pada web design





Penulis :

Web designer, graphic designer and illustrator, love digital design. View all posts by iwan setiawan

Comments

7 thoughts on “Web Design Menggunakan Grid

  1. Tono Hartono says:

    Keren Gan

  2. Apakah ada cara untuk membuat element website menjadi terstruktur, selain menggunakan GRID SYSTEM ?

  3. dedy says:

    kapan kapan ane coba gan ….

  4. tyo says:

    jadi lebih rapi ya gan websitenya kalo pake grid

  5. yogi says:

    bs minta link download cssnya ?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development