there’s something about geometry + architecture

April 2, 2012

Golden Ratio and Web Design

Kita mengetahui bahwa golden ratio ataupun golden section telah menjadi acuan dalam membuat sesuatu dengan proporsi yang sempurna sehingga berpengaruh terhadap nilai estetika dan keindahan suatu karya. Bukan hanya berpengaruh dalam segi estetika saja, namun juga berpengaruh dalam keberhasilan suatu karya. Seorang ahli matematika dan filosof Adolf Zeising menemukan bahwa golden ratio muncul dalam komposisi akar tanaman dan jaringan daun, tidak hanya itu, Adolf Zelsing juga menemukan golden ratio pada tulang-tulang hewan, tanaman, bahkan manusia. Hingga ia melihat golden ratio sebagai sebuah aturan universal, bukan hanya sekedar estetika dan keindahan, namun juga berperan dalam  fungsi dan efektifitas suatu hal.

 

Lalu dari situ saya tertarik untuk mengaitkan fungsi golden section terhadap efektifitas dan keberhasilan dari sebuah web design. Dunia maya telah berkembang sedemikian pesat, berawal hanya sebagai media informasi, namun dengan banyaknya situs yang bermunculan, semakin diperlukan desain web yang dapat menyampaikan isi web nya dengan semudah mungkin, seefisien mungkin, serta semenarik mungkin, hingga dapat dapat bersaing diantara banyaknya web yang bermunculan dan dapat menarik sebanyak banyaknya pengunjung yang betah berlama lama di web tersebut.

 

Coba kita lihat salah satu situs yang, mungkin oleh beberapa dari kita, merupakan situs yang paling sering dikunjungi, twitter.com. Dengan membawa konsep micro-blog, jejaring sosial tersebut sukses menarik banyak mengunjung yang membuat akun sendiri didalamnya, lalu apa yang membuat jejaring sosial tersebut dapat bertahan dan tetap menarik, tentunya karena layout dan desain dari webnya sendiri yang cukup simpel, dan mudah dipahami. Apakah desain web tersebut hanya “kebetulan” merupakan desain yang baik, ataukah ada hal lain?

Terlihat situs tersebut memang dibuat berdasarkan golden ratio, hal tersebutlah yang dipercaya membuat situs jejaring sosial tersebut lebih efektif, efisien, dan mudah dipahami.

Lalu coba kita bandingkan dengan situs lain yang tidak mengikuti golden ratio, dan tidak ditemukan aturan grid didalamnya.

 

Terlihat sekali perbedaannya dengan situs lama Havenworks dan Yale School of Art diatas, walaupun sama-sama mengusuk desain web yang simpel, namun pada desain diatas tidak terlihat efisien, dan saya rasa kurang efektif dalam penyampaian informasinya. Dari sini dapat diketahui bahwa sebuah desain web yang efektif bukanlah sekedar sebuah desain yang sederhana.

 

Sebenarnya ada cara yang cukup mudah mengaplikasikan pemakaian golden ratio dalam sebuah desain web. Dalam golden ratio, terdapat sebuah angka yang penting, yaitu 1,618, yang merupakan dasar dari aturan dalam golden ratio. Dari angka tersebut dapat dibuat pembagian halaman web yang berbanding 1:1,618. Contoh, dalam sebuah halaman web, yang umumnya berukuran 960 pixel, kita bagi menjadi dua bagian dengan perbandingan 1:1,618 yang menghasilkan 594 pixel dan 366 pixel. Hal yang sama dapat dilakukan jika menginginkan layout vertikal.

 

Layout dengan perbandingan itulah yang dipercaya oleh beberapa desainer dapat meningkatkan nilai efektifitas dari sebuah web design. Namun selain cara tersebut, terdapat cara lain yang lebih sederhana, yaitu dengan mengikuti aturan grid, yang berbasis pada spiral Fibonacci.

Bentuk kotak tersebut harus disusun dengan jumlah yang sama pada sisi vertikal dan horizontalnya untuk mendapatkan proporsi yang sempurna. Dari situlah didapatkan sistem grid yang bisa digunakan sebagai basis dalam membuat sebuah web design.

 

 

Selain aturan aturan diatas, masih banyak lagi aturan yang berbasis dari golden ratio, seperti rule of the thirds dan aturan lainnya. Yang perlu diperhatikan disini adalah, golden ratio dalam web design ini bukanlah hanya mempersalahkan nilai estetika seuatu web, namun juga sebagai pembentuk nilai efektifitas yang lebih tinggi, dimana hal tersebutlah yang merupakan hal terpenting dari sebuah web. Jadi, menurut saya pun golden ratio memang bukanlah sekedar aturan untuk membentuk suatu nilai estetika, namun juga dapat dikatakan sebagai sebuah aturan pembentuk dari berbagai hal.

 

Sumber:

http://uxmovement.com/content/applying-the-golden-ratio-to-web-layouts-and-objects/

http://www.joshuagarity.com/web-design/the-golden-ratio/

http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design/

http://www.webdesign.org/web-design-basics/design-principles/the-golden-ratio-in-web-design/

 

1 Comment »

  1. Mungkin sedikit tambahan saja. Kalau menurut saya efektivitas dan efisiensi dari suatu penyampaian informasi (dalam hal ini website) sangat dipengaruhi oleh bagaimana sang manusia melihat sesuatu benda. Kita sebagai manusia pasti akan selalu menginginkan yang namanya praktis, dan mudah dimengerti. Akhirnya secara tidak sadar kita sudah menciptakan sebuah bentuk keteraturan yang menentukan bagaimana kita akan mengganggap sesuatu yang kita lihat mudah dicerna atau tidak. Dan sebenarnya karena inilah juga muncul golden section itu sendiri, karena manusia menginginkan yang namanya keteraturan, sehingga benda apapun yang dia lihat akan lebih mudah diproses oleh pikirannya. Apabila dikaitkan dengan web desain, saya sangat setuju dengan post anda dimana desain web yang bagus (efisien, efektif dan informatif) belum tentu sama dengan desain yang simple, karena adanya sebuah aturan keteraturan di dalam pikiran manusia yang menentukan apakah desain web tersebut sudah enak dibaca dan dilihat atau belum. Jadi ternyata memang mendesain sebuah web itu tidak mudah ya ^^

    Comment by kreshnapatrian — April 3, 2012 @ 22:28


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: