Technology

Atur Layout Website Anda dengan Grid

 

Loading...

Salah satu faktor yang membuat sebuah desain Web menjadi apik dan tertata rapi adalah adanya layout.

layout-grid-1

Apabila layout di atas diterapkan dalam pembuatan website, anda akan mendapatkan hasil seperti:

layout-grid-2

Atau layout berikut ini:

layout-grid-3

Layout sebuah website tidak harus terpacu pada 3 jenis di atas. Layout bebas anda kembangkan lagi dengan berbagai modifikasi. Namun yang perlu saya tekankan di sini adalah bagaimana caranya membuat layout yang konsisten dan presisi. Sebab layout yang seperti ini mampu memudahkan positioning setiap elemen – elemen penyusun sebuah website anda; seperti banner, product list, dlsb.

Nah, salah satu alat yang dapat membantu anda menjaga konsistensi ini adalah GRID. Pada Photoshop, anda dapat menampilkan fungsi dari Grid pada menu View > Show > Grid. Atau tekan tahan tombol CTRL dan (petik satu). Anda juga dapat mengatur besar ukuran Grid yang dibutuhkan pada menu Edit > Preferences > Guide, Grid & Slice…

Konsistensi elemen yang dapat dibuat oleh sebuah Grid

Mari kita bandingkan konsistensi positioning yang dibangun dengan Grid dengan yang tidak.

layout-grid-4

Dengan Grid seperti gambar di atas, maka peletakan image dan teks akan jadi lebih mudah.

layout-grid-5

JagFamily bisa lihat, tanpa Grid akan sangat sulit meratakan image yang satu dengan lainnya. Sedangkan dengan Grid, maka positioning gambar akan menjadi lebih mudah. Hasilnya pun jadi lebih konsisten seperti gambar di bawah:

layout-grid-6

Selain positioning image seperti ilustrasi di atas, Grid dapat membantu peletakan image, background, dan typography (pengaturan teks) anda agar layout website anda akan tertata lebih rapi. Nah JagFamily, sudah jelas kan fungsi dan kemudahan Grid. Jadi, mari mulai manfaatkan untuk website anda.

FYI, Grid tidak digunakan untuk membuat dan mendesain website saja. Tetapi juga dapat digunakan untuk layout majalah, koran, brosur dan hal – hal lain yang berhubungan dengan tata letak pada proses pengerjaan desain. Semoga bermanfaat ;-) [Bagus]

Loading...

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *