Advertisement
  1. Code
  2. Web Development
Code

Golden Rasio dalam Mendesain Website

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Matematika itu indah. Terdengar sedikit aneh, bukan? Saya juga merasa seperti itu ketika saya baru mulai mendesain. Matematika terasa kaku dan seringkali membosankan, itu yang dulu saya rasakan. Namun anda akan terkejut ketika anda mengetahui bahwa desain yang terlihat sangat indah, karya seni, objek, dan bahkan manusia, berhubungan dengan matematika. Terutama Golden Rasio, yang juga dikenal sebagai proporsi sempurna yang dilambangkan oleh huruf Yunani Φ (phi). Tutorial ini akan membahas tentang anatomi dan layout dari sebuah website dan bagaimana mengaplikasikan Rasio Emas dalam hal-hal tersebut.


1. Bagian-bagian dari Sebuah Halaman Website

Bagian-bagian dari sebuah halaman website dapat diumpamakan seperti organ tubuh, mereka sangat penting untuk mendukung agar halaman website tersebut berfungsi dengan baik dan enak dipandang.

Ini adalah bagian-bagian utama dari suatu halaman website. Ada banyak cara lainnya untuk mengatur isi dari sebuah website namun layout ini adalah yang paling umum dan sering dipakai.


2. Kontainer

Semua halaman website menggunakan kontainer untuk satu tujuan yang sama; untuk memuat bagian-bagian dari halaman tersebut, namun cara menyusunnya dapat dilakukan dengan cara yang berbeda. Contoh yang paling sering digunakan adalah the body tag atau div. Dulu, orang-orang bahkan menggunakan tabel sebagai kontainer (jangan menggunakan tabel sebagai kontainer halaman anda, karena metode itu sudah tidak banyak digunakan). Bayangkanlah kontainer sebagai dinding luar rumah anda yang nantinya akan terisi oleh kamar tidur anda, dapur, ruang tamu dan lainnya.

Berikut ini adalah tipe-tipe dari kontainer:

  1. Liquid: Dapat menyesuaikan untuk memenuhi lebar dari jendela browser anda.
  2. Fixed: Menggunakan lebar yang spesifik sehingga tidak akan berubah berdasarkan ukuran jendela browser anda.


3. Header

Header tidak terlalu dianggap sebagai bagian tertentu dari suatu halaman, namun ada juga yang menganggapnya demikian. Biasanya istilah ini digunakan untuk menunjukkan bagian atas dari halaman web anda dimana logo, navigasi dan tagline anda berada. Banyak orang lebih memilih untuk menaruh bagian-bagian ini di dalam sebuah div dengan tujuan agar penataan halaman website lebih mudah,  pemisahan bagian-bagian halaman dan/atau untuk meletakkan bagian-bagian tersebut sesuai kontainernya. Header suatu website juga dianggap sebagai sebuah kontainer sehingga header juga memiliki dua tipe yang bisa anda pilih: liquid atau fixed seperti yang sudah disebutkan sebelumnya.


4. Logo

Logo adalah identitas dan branding anda. Logo biasanya diletakkan dalam header pada barisan sebelah kiri.  Kita membaca dari kiri ke kanan dan dari atas ke bawah, sehingga logo anda akan menjadi hal pertama yang dilihat oleh pengunjung website anda.


5. Navigasi

Navigasi halaman adalah salah satu bagian penting dari sebuah halaman web; pengunjung anda memerlukannya agar dapat menggunakan website anda. Navigasi sebaiknya mudah untuk ditemukan dan digunakan, oleh karena itu navigasi hampir selalu diletakkan di dalam header atau setidaknya di dekat bagian atas dari sebuah halaman. Kadang-kadang kedua tipe navigasi tersebut digunakan secara bersamaan dalam website high content.

Tipe-tipe navigasi:

  1. Horisontal: Rangkaian link yang ditampilkan dalam suatu barisan yang biasanya disebut sebagai “navigation”.
  2. Vertikal: Rangkaian link yang ditampilkan dalam susunan vertikal yang biasanya disebut sebagai “menu”.


6. Konten Utama

Seperti yang diketahui semua orang (atau harusnya diketahui oleh mereka), konten adalah yang paling utama! Ketika orang mengunjungi halaman anda, bagian inilah yang paling sering dicari oleh pengunjung website anda. Konten anda harus menjadi pusat perhatian yang utama dari halaman anda agar pengunjung web anda dapat menemukan apa yang mereka cari dengan cepat.


7. Sidebar

Sidebar adalah bagian dimana konten sekunder seperti iklan, site search, subscription links (RSS, Twitter, Email, etc), kontak dan lainnya berada. Bagian ini tidak selalu diperlukan meskipun banyak juga website yang menggunakannya. Biasanya sidebar terletak di baris sebelah kanan, namun sidebar juga bisa diletakkan di sebelah kiri atau bahkan pada dua sisi tersebut (dengan menggunakan dua sidebar) selama sidebar tersebut tidak menganggu tampilan konten utama anda. Untuk website yang menggunakan navigasi horisontal DAN vertikal, sidebar seringkali digantikan oleh navigasi yang berbentuk vertikal.


8. Footer

Bagian akhir dari sebuah website harus menggunakan footer agar pengunjung anda mengetahui bahwa mereka telah sampai ke bagian akhir dari website anda. Seperti header, footer bukanlah bagian utama dari halaman web anda tapi lebih sebagai bagian yang mengandung informasi. Footer anda akan berisi copyright, legal, dan kontak utama anda. Anda juga bisa meletakkan beberapa link ke bagian penting dari website seperti halaman atas, halaman utama, contact page dan lainnya. Website lainnya menggunakan bagian ini sebagai kesempatan untuk menyebutkan materi terkait lainnya atau informasi penting lainnya.


9. “Whitespace”

Ini adalah bagian dari halaman web anda yang tidak dipenuhi oleh tulisan atau konten lainnya. Anda mungkin berkeinginan untuk memenuhi semua space yang kosong, namun sebaiknya anda jangan melakukan itu! Ruang kosong pada website anda sama pentingnya dengan desain website yang bagus dan konten yang akan digunakan. Anda bisa melihat bagaimana situs NetTuts menggunakan space yang kosong secara efektif untuk membantu pengunjung menemukan konten, menyeimbangkan halaman, dan memberikan pemisah yang rapi pada konten website tersebut.

Jadi, itulah bagian-bagian dari suatu halaman web. Sekarang, mari kita lihat bagaimana Rasio Emas berpengaruh pada  bagian-bagian ini.


10. Golden Rasio dan Penggunaan Grids

Apakah anda ingat saat saya mengatakan bahwa matematika itu indah sebelumnya? Kita melihat keindahan visual berdasarkan sebuah rasio (contohnya Golden Rasio). Selama beribu-ribu tahun seniman, desainer, arsitek dan lainnya telah menggunakan rasio umum (secara sadar maupun tidak) yang membuat karya mereka terlihat indah saat dipandang. Berapakah angka rasio ajaib tersebut? Angka tersebut adalah 1.62 (lebih tepatnya 1.618...). Saya tidak akan menjelaskan asal-usul dari angka ini namun saya akan memberitahu anda bagaimana cara menggunakannya.

Cara menggunakan rasio emas sangatlah mudah. Misalnya anda ingin mengetahui lebar dari Konten Utama dan kolom Sidebar anda. Anda dapat menjumlahkan lebar total dari area konten anda (kita akan menggunakan 900px sebagai contohnya) dan membaginya dengan 1.62. Seperti yang bisa anda lihat pada contoh, kita akan membagi 900px dengan 1.62 dan mendapatkan 555.55px sebagai hasilnya. Kita tidak perlu memasukkan nilai pastinya, jadi kita bisa membulatkannya ke 555px. Sekarang anda sudah bisa mengetahui bahwa konten utama memiliki lebar 555px dan sidebar anda memiliki lebar 345px. Sangat mudah bukan?!

Tapi tunggu dulu! Keseruan ini belum selesai. Anda juga bisa menggunakan Rasio Emas untuk mengatur lebar elemen lainnya agar sesuai dengan panjangnya atau sebaliknya. Proses ini akan menghasilkan bagian-bagian halaman web yang enak dipandang dengan menggunakan proporsi Rasio Emas.


11. Menggunakan Grids

Jika anda sama seperti orang-orang pada umumnya, anda tidak perlu mengeluarkan kalkulator setiap kali anda ingin menggunakan rasio ini. Untuk mempermudah prosesnya, kita dapat menggunakan grid sederhana. Yang perlu anda lakukan hanyalah membagi lebar atau/dan panjang halaman anda dengan sepertiganya.

Setiap kotak dapat dibagi lagi dengan sepertiganya, untuk menghasilkan grid yang lebih detail. Jika anda membaca artikel sebelumnya "A Close Look At the Blueprint CSS Framework" anda akan melihat bahwa framework Blueprint CSS tersebut menggunakan sistem grid. Grid tidak hanya membuat pekerjaan mendesain anda menjadi lebih mudah dan lebih cepat namun juga membuat layout anda menjadi indah dipandang. Jika anda belum pernah menggunakan grid saat mendesain, sekarang adalah saat yang tepat untuk mencobanya. Anda dapat mengunduh template grid untuk fireworks, photoshop dan lainnya dari http://960.gs, sebuah framework CSS fantastis lainnya yang menggunakan grids.

Seperti yang bisa anda lihat, Tuts+ mengikuti Rasio Emas dengan cukup baik. Bagian sepertiga yang berada di atas dibagi kembali untuk menunjukkan bagaimana header tersebut dapat dibagi menjadi bagian lainnya dengan sangat rapi, dan sangat mendekati Golden Rasio. Tidak heran kalau desain NetTuts terlihat sangat menarik!

Jika anda baru saja mulai dalam mendesain, saya sangat merekomendasikan anda untuk melihat situs populer dan menganalisa bagian-bagian layout mereka dan bagaimana situs tersebut menggunakan Golden Rasio dan grids. Lalu, luangkan waktu anda untuk berlatih menggunakan Rasio Emas pada bagian-bagian dari layout anda dan meletakkannya dengan menggunakan grid.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.