Rasio Emas: Panduan Utama untuk Memahami dan Menggunakannya

Desainer di mana pun harus tahu tentang Rasio Emas. Ini adalah rasio matematis yang menciptakan desain yang estetis. Karena Rasio Emas begitu sering ada di alam, tidak mengherankan jika hasilnya terlihat alami.

Foto oleh Bogomil Mihaylov di Unsplash

Rasio Emas juga memiliki beberapa nama lain:

• Proporsi Ilahi
• Berarti Emas
• Bagian Emas
• Phi (huruf Yunani)

Matematika Dibalik Rasio Emas

Saya akan menjelaskan matematika Rasio Emas sesederhana mungkin dan tanpa membahas detail yang sebenarnya tidak perlu Anda ketahui. Jika Anda bisa mengikuti matematika, bagus. Tetapi jika Anda tidak bisa, tidak apa-apa – Anda tetap dapat menggunakan konsep tersebut dalam desain Anda.

Untuk memahami Rasio Emas, Anda harus terlebih dahulu memahami Persegi Panjang Emas

Golden Rectangle adalah persegi panjang besar yang memiliki persegi di dalamnya. Sisi persegi sama dengan panjang terpendek dari persegi panjang:

Sumber: Wikipedia

Rasio Emas adalah angka yang (semacam) sama dengan 1,618, sama seperti pi kira-kira sama dengan 3,14, tetapi tidak persis.

Anda mengambil garis dan membaginya menjadi dua bagian – bagian panjang (a) dan bagian pendek (b). Seluruh panjang (a + b) dibagi (a) sama dengan (a) dibagi (b). Dan kedua angka itu sama dengan 1,618. Jadi, (a + b) dibagi dengan (a) sama dengan 1,618, dan (a) dibagi dengan (b) juga sama dengan 1,618.

Kembali ke Golden Rectangle, karena lebih mudah dipahami

Saat Anda menempatkan persegi di dalam persegi panjang, itu menciptakan persegi panjang lain yang lebih kecil. Abaikan garis hitam dan lihat kotak merah dan hijau:

Persegi merah memiliki empat sisi yang sama panjang, dan panjang tersebut sama dengan panjang terpendek dari persegi panjang. Dengan membagi persegi itu, Anda secara otomatis membuat persegi panjang lain yang lebih kecil (diuraikan dalam warna hijau). Bersama-sama, mereka membuat tata letak Rasio Emas yang lengkap dan dasar untuk Spiral Emas.

Anda juga dapat membuat Persegi Panjang Emas baru dari persegi panjang yang lebih kecil, seperti yang telah saya uraikan dengan warna biru ini:

Diagram Rasio Emas tradisional memiliki delapan Persegi Panjang Emas:

Dan inilah Rectangle Emas terkecil, #8:

Jika Anda mulai dari kiri bawah dan membuat lengkungan untuk menghubungkan sisi terjauh dari setiap penampang persegi dan persegi kecil, Anda akan mendapatkan Spiral Emas.

Deret Fibonacci

Deret Fibonacci cukup sederhana untuk dipahami: Anda mulai dengan nol dan 1, lalu dapatkan angka berikutnya dengan menjumlahkan dua angka sebelumnya. 0 + 1 = 1, lalu 1 + 1 = 2, dst. Beberapa angka pertama dalam barisan tersebut adalah 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Jika Anda menggunakan angka-angka itu untuk membuat kotak dengan lebar itu, Anda bisa membuat Golden Spiral:

Sumber: Matematika itu Menyenangkan

Lingkaran Emas

Terkadang, Anda akan melihat lingkaran yang digambar dalam kotak, bukan atau di samping spiral. Jika Anda menggambar lingkaran sempurna di kotak hamparan Rasio Emas, mereka akan memiliki rasio 1:1,618 dengan satu lingkaran yang berdekatan.

Sumber: Departemen Limelight

Logo Pepsi dan Twitter menggunakan Lingkaran Emas:

Sumber: Pembicaraan Hibrida

Anda Pernah Melihat Ini Sebelumnya, Banyak

Alam penuh dengan Rasio Emas. Ada dalam flora, kerang, cuaca ...

Sumber: Foto oleh Annie Spratt di Unsplash

Sumber: Foto oleh NASA di Unsplash

Dan karena kita sering melihatnya, otak kita lebih menyukainya. Daya tarik bawaan itulah mengapa tata letak ini sangat kuat untuk digunakan para desainer.

Rasio Emas dalam Seni dan Desain

Terkadang Rasio Emas sangat mudah dikenali:

Sumber: staceysdetailinginc.com

Kadang-kadang Anda berkata, “Saya tidak tahu apa yang Anda bicarakan… oh, tunggu. Sekarang saya melihatnya. Menurut saya."

Sumber: Orang Dalam Pemasaran

Di lain waktu Anda bisa menjadi gila melihatnya ...

Sumber: Widewalls

…tetapi jika Anda membidik pada Rectangle Emas utama, itu menjadi sedikit lebih jelas:

Mari kita lihat contoh yang sering dirujuk: Parthenon

Sumber: Creative Block

Pada awalnya, Anda mungkin melihat ini dan berkata, “Itu hanya terlihat simetris bagi saya. Bagaimana apa yang saya lihat cocok dengan benda Spiral Persegi Panjang Emas itu?”

Rasio Emas bukan tentang bagaimana setiap bagian dari desain cocok sepenuhnya dan hanya ke dalam bagian tertentu. Jika itu masalahnya, sisi kanan Parthenon akan menjadi satu blok besar dan sisi kiri akan dibagi menjadi blok-blok yang lebih kecil.

Sebaliknya, rasio digunakan untuk menciptakan harmoni dan proporsi, dan itu dapat ditafsirkan dalam beberapa cara berbeda.

Sementara Rasio Emas didasarkan pada matematika, rasio ini dapat disesuaikan dengan cara yang kreatif. Dalam kasus Parthenon, Rasio Emas menentukan ketinggian dan penempatan komponen desain. Plus, ada beberapa cara untuk meletakkan diagram Rasio Emas di atasnya:

Sumber: Archinect

Sumber: Esther Sugihto di Medium

Sumber: GoldenNumber.net

Rasio Emas dan Desain Situs Web

Apakah Anda menyukai matematika atau kepala Anda akan meledak, Rasio Emas sedikit lebih mudah dipahami dalam hal desain. Anda telah melakukan angkat berat. Sekarang saatnya untuk mengambil overlay dasar dan membuat komponen web Anda sangat menyenangkan.

Rasio Emas dan Tata Letak

Jika Anda menginginkan tata letak Rasio Emas yang sempurna, atur dimensi ke 1:1.618. Misalnya, Anda dapat mengatur lebar menjadi 960 piksel dan tinggi menjadi 594 piksel. Persegi Panjang Emas adalah 594 piksel di setiap sisi dan persegi panjang mengambil sisa tata letak (594 x 366).

Calculator Soup memiliki kalkulator Rasio Emas yang berguna di mana Anda dapat mengatur istilah apa pun (A, B atau A + B) untuk menemukan nilai Rasio Emas yang benar.

Atau, Anda cukup menggunakan jenis tata letak dua kolom ini, di mana satu kolom sedikit lebih lebar dari kolom lainnya. Ini terorganisir dan jelas menunjukkan hierarki.

Sumber: National Geographic

Saya menggunakan ini di situs web saya karena beranda adalah kumpulan posting blog saya, dan saya merasa ini adalah salah satu tata letak yang paling dikenal untuk blog:

Namun, menurut saya, tata letak simetris yang kami gunakan pada Tema Elegan lebih modern:

Rasio Emas dan Spasi

Rasio Emas dapat membantu Anda menentukan di mana menempatkan elemen desain Anda, proporsi yang akan digunakan, dan di mana harus meninggalkan ruang negatif. Berikut adalah contoh sederhana, dan Anda hampir dapat melihat hamparan Rasio Emas tanpa harus meletakkannya di atas:

Sumber: Digiarts 2011

Berikut tampilannya saat saya menerapkan Golden Spiral di Photoshop:

Sekali lagi, Rasio Emas didasarkan pada matematika, tetapi ketika diterapkan pada desain, itu tidak sempurna. Desain itu tidak dibuat pada Persegi Panjang Emas, jadi Spiral Emas berada di luar proporsi normal. Namun, Anda dapat melihat bagaimana hal itu dapat memandu seorang desainer untuk memilih di mana menempatkan elemen terbesar dari desain, serta elemen terkecil dan ruang negatif.

Anda juga dapat melapisi hamparan Rasio Emas untuk menerapkannya ke elemen berbeda dari desain yang sama:

Sumber: Branding oleh Lemongraphic. Contoh dari Canva.

Rasio Emas dan Konten

Ketika Anda memikirkan tata letak dan jarak Rasio Emas bersama-sama, Anda dapat mulai memutuskan di mana menempatkan konten di situs web Anda.

Mari kita lihat lagi situs web National Geographic, kali ini dengan hamparan Rasio Emas Canva di atasnya:

Tata letak dibagi sehingga konten berbaris di sepanjang garis tengah spiral. Di sebelah kiri, ada blok besar konten. Di sebelah kanan, konten menjadi lebih padat dan ada lebih banyak ruang negatif. Menuju lengkungan tengah spiral, Anda akan melihat logo National Geographic kedua – tidak ada cara yang lebih baik untuk membawa pulang branding selain menempatkannya di tempat yang biasa dilihat mata.

Berikut adalah contoh yang bagus tentang bagaimana Golden Spiral dapat mengarahkan mata Anda melalui sebuah desain, bahkan melewati komponen utamanya. Ini berguna jika Anda memiliki banyak konten untuk dimasukkan ke dalam satu halaman. Anda juga akan melihat bahwa bahkan dengan desain yang begitu padat dan detail, masih ada ruang negatif di sana.

Sumber: Desain oleh Helms Workshop. Contoh dari Canva.

Honorable Mention: Rasio Emas dan Gambar

Rasio Emas juga digunakan dalam komposisi fotografi. Alih-alih membuat Spiral Emas, Rasio Emas membagi gambar menjadi enam blok. Rasio Emas yang sama digunakan dalam jenis kisi ini: lebar dan tinggi bagian adalah 1 atau 0,618.

Sumber: Canva

Anda kemudian menggunakan persimpangan untuk menyusun bidikan. Tujuannya adalah untuk menempatkan subjek atau bagian utama subjek pada salah satu garis berpotongan – subjek tidak boleh berada di tengah, dan beberapa blok harus dibiarkan kosong (dalam kebanyakan kasus, setidaknya – fotografi makro dan potret jarak dekat akan mengisi hampir semua frame). Dengan melakukan ini, Anda membuat potret yang lebih menarik daripada jika subjek berada di tengah.

Cara yang lebih sederhana dan lebih mudah diakses untuk mengikuti aturan ini adalah dengan menggunakan kisi Rule of Thirds, yang mungkin Anda miliki di kamera internal ponsel atau DSLR Anda.

Ini foto yang saya ambil dari anak sepupu saya. Saya telah meletakkan kisi Rule of Thirds di atasnya untuk menunjukkan kepada Anda di mana subjek mengisi bingkai dan tidak mengisi bingkai.

Juga, lihat bagaimana Spiral Emas membungkus subjek dengan hampir sempurna:

Rasio Emas berbeda dari Aturan Sepertiga karena kisi Aturan Sepertiga memiliki bagian dengan panjang dan lebar yang sama. Namun, ini sangat dekat – dan jauh lebih mudah – sehingga inilah yang biasa digunakan fotografer saat membuat atau mengedit foto.

Membungkus

Rasio Emas dapat digunakan apa adanya atau disesuaikan dengan tujuan Anda dan disesuaikan untuk ukuran – matematika mungkin memiliki aturan yang sulit dan cepat, tetapi kreativitas tidak. Meskipun Anda dapat menggunakan Rasio Emas sejak awal untuk memandu desain Anda, Anda juga dapat menggunakannya setelah Anda mulai mendesain untuk membuat penyesuaian dan peningkatan. Tujuannya adalah agar rasio memandu Anda, bukan memaksakan desain ke dalamnya.

Siap bermain dengan tata letak situs web Anda lebih jauh lagi? Lihat artikel kami tentang menggunakan opsi tinggi dan lebar baru Divi untuk membuat desain responsif.