Mendesain Web Dengan Rapi, Gunakan Grid

Komposisi dari sebuah karya visual(desain, lukisan, fotography) adalah penempatan atau penyusunan dari elemen visual, yakni pengaturan elemen-elemen tersebut. Grid banyak digunakan untuk membantu dalam menata tiap elemen karya visual, dalam hal ini web juga termasuk di dalamnya.
Grid memiliki proporsi dan jarak antar item yang konsisten dan pada akhirnya akan membantu dalam membuat website yang nampak profesional. Selain itu grid juga akan membantu memunculkan continuity antar halaman web yang mungkin menggunakan desain yang berbeda.
Berikut ini contoh penggunaan grid:

contoh rancangan web menggunakan grid

contoh rancangan web menggunakan grid

Pada gambar tersebut dapat kita lihat bagaimana grid membantu dalam menentukan posisi dari tiap elemen. Secara tidak langsung elemen yang disusun sedemikian rupa juga akan membentuk sebuah garis lurus yang jelas kita lihat. Hal ini juga akan sangat membantu memudahkan pengguna dalam membaca isi halaman web tersebut.
Anda bisa mendapatkan template grid untuk membantu anda dalam mendesain. Salah satu standart yang banyak dipakai adalah ukuran 960 pixel. Anda bisa mendownload template grid di www.960.gs dalam berbagai format, mulai dari pdf, Adobe Illustrator, Adobe Photoshop, Corel Draw dan lain-lainnya.
Dengan menggunakan ukuran 960 pixel, anda bisa membuat beberapa rancangan layout misalnya seperti berikut ini:

contoh rancangan layout dengan grid

Pada contoh rancangan di atas terdapat 12 kolom grid dengan lebar masing-masing 60 pixel. Setiap kolom memiliki margin 10 pixel sehingga saat dua kolom sejajar, akan muncul jarak 20 pixel dan jarak 10 pixel untuk tepian kanan dan kiri halaman. Contoh yang lainnya seperti berikut ini.

rancangan layout dengan grid

Melalui template grid, anda bisa mengembangkan rancangan lain dari sebuah layout. Misalnya rancangan berikut ini

rancangan layout dengan grid

 

Incoming search terms:

Be Sociable, Share!

Related Posts:

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *