Membuat Golden Ratio Grid System

Saat ini telah banyak webdesainer yang mengimplementasikan teori golden ratio dalam merancang interface web. Salah satu web yang mengimplementasikan golden section pada tampilan antarmukanya adalah Twitter.

Ok, sebenarnya apa itu golden ratio? Menurut Wikipedia, golden ratio adalah rasio yang memiliki jumlah kuantitas dengan kuantitas yang lebih besar sama dengan perbandingan jumlah yang lebih besar untuk yang lebih kecil. Golden ratio adalah konstanta matematika irasional, sekitar 1,6180339887. Nama lain yang sering digunakan untuk rasio emas adalah the golden section. Bingung? sama :D, mungkin gambar di bawah ini dapat membantu memahami pengertian golden ratio.

golden ratio

Teori sudah, sekarang saatnya praktek.

Praktisnya, kita bisa menggunakan golden ratio calculator untuk menentukan nilai perbandingan yang sesuai. Kemudian kita implementasikan pada grid system. Contoh berikut ini adalah membuat grid system sederhana — berbasis 1kbgrid — dengan menerapkan golden ratio. Kita bisa menggunakan tools seperti goldenratiocalculator untuk menghitung perbandingan yang tepat.

Baca Juga:  Bagaimana Menghubungkan Twitter ke Status Facebook

Lebar keseluruhan grid adalah 864px, jika dibagi dua bagian sesuai kaidah golden ratio adalah 534px dan 330px. Kemudian bagian yang 534px dibagi lagi menjadi 324px dan 200px. Kita sudah mendapatkan angka-angkanya, yang perlu dilakukan adalah mengurangi beberapa pixel sebagai margin. Hasilnya adalah:

.grid-t {width:190px;}
.grid-x {width:524px;}
.grid-y {width:320px;}
.grid-z {width:314px;}
.grid-f {width:864px;}

.column {
	margin: 0 10px;
	overflow: hidden;
	float: left;
	display: inline;
}
.row {
	width: 884px;
	margin: 0 auto;
	overflow: hidden;
}
.row .row {
	margin: 0 -10px;
	width: auto;
	display: inline-block;
}

Ok, kode saja tidak cukup, berikut ini adalah screenshotnya sedangkan demo bisa dilihat disini. Selamat berhitung. 😀

golden ratio grid

Daftar Bacaan

Komentar

comments

ardianzzz

Male, CSS carver who worked at Kaskus

grain storage instagram türk takipçi satın al