Penerapan Rasio pada Desain

Rasio emas adalah sebuah rasio antara 1 sampai 1.1618. Rasio emas atau phi menemukan asalnya dari alam dimana terdapat keseimbangan antara rasio ini dengan diri kita. Penggunaan rasio ini dapat menjamin sebuah komposisi elemen yang seimbang. Sebelum melangkah lebih lanjut, perlu diketahui jika kita membagi angka pilihan dengan angka sebelumnya di dalam deret fibonacci, maka kita akan mendapatkan angka rata-rata 1.618. Angka inilah yang dijadikan notasi untuk nilai phi pada pembahas berikutnya.

Kenapa kita harus mengetahui mengenai rasio emas? Karena rasio emas juga berkaitan dengan desain. Salah satu contohnya adalah terdapat desain yang mewadahi banyak sekali bentuk rasio ini. Untuk membuat dua warna yang menandai dua kolom berbeda, terdapat perhitungan. Perhitungan ini lah yang menggunakan rasio emas.

Ketika kita akan menghitung lebar sebuah elemen berdasarkan pada rasio, kita perlu mengambil lebar elemen induk dan isinya. Setelah itu, kita dapat membaginya dengan phi. Hasilnya akan menunjukkan lebar elemen utama kita. Sekarang, kita hanya perlu mengurangi hasil dari elemen utama pada lebar asal sehingga kita bisa mendapatkan lebar pada kolom kedua. Dari situlah kita bisa mengetahui keterkaitan antara rasio dengan desain. 

Contohnya cara membuat sebuah grid 6 kolom di dalam canvas selebar 960 pixel. Pertama, kita harus membagi canvas kita menjadi 6 bagian dengan lebar yang sama setiap kolomnya yaitu 160 pixel. Kemudian, ketika kita mau membuat sebuah gambar di dalam satu kolom, kita perlu menduplikasikannya agar lebih mudah dan tidak perlu mengulangi langkah yang sama untuk tiap kolom. 

Tahap selanjutnya, kita perlu membuat gutter hendaklah pada kedua sisi kolom dengan cara membaginya menjadi 2 bagian. Jika tahap ini tidak dilakukan maka gutter yang kita miliki akan selebar 40 pixel. Setelah itu, kita sudah bisa menduplikasikan gambar hingga 960 pixel. Dengan demikian kita sudah berhasil membuat grid sederhana.

References:

https://webdesign.tutsplus.com/id/articles/mathematics-and-web-design-a-close-relationship–webdesign-1053 

Felicia