Rasio Emas digunakan dalam semua jenis tata letak grafis, terutama untuk menyeimbangkan konten yang padat teks. Ini dapat membantu desainer membuat hierarki dan menarik perhatian pengguna ke area tertentu. Lihat contoh situs web berikut dan lihat bagaimana desainer memanfaatkannya!

Apa itu Rasio Emas?

Rasio Emas adalah hubungan matematis, umumnya ditemukan di alam, dan digunakan dalam teori desain klasik untuk menciptakan komposisi yang seimbang. Kira-kira sama dengan 1,6180, juga dikenal sebagai "The Golden Mean", "Golden Section", dan dilambangkan dengan huruf Yunani Phi "?".

Sebuah "Golden atau Golden Rectangle" adalah persegi panjang yang panjangnya 1,6180 kali lebarnya. Misalnya, divyang memiliki sisi 300px dan sisi lainnya 300 * 1,6180 ? 485px dapat dikatakan sebagai persegi panjang emas.

Jika Anda memotong persegi panjang yang sempurna dari persegi panjang emas ini, Anda akan mendapatkan persegi panjang emas lainnya.

Anda dapat melakukan hal yang sama dengan persegi panjang yang lebih kecil, lalu melakukan hal yang sama lagi, tanpa batas, memberi Anda gambar yang sudah dikenal:

Deret Fibonacci

Urutan Fibonacci mirip dengan Rasio Emas, tetapi tidak persis sama. Ini adalah serangkaian angka di mana angka berikutnya dalam urutan adalah jumlah dari dua angka sebelumnya. Contoh: 0,1,1,2,3,4,7

Jika kita mulai dengan kuadrat sempurna, lalu kita tambahkan yang lain dan kita memiliki persegi panjang.

Terus tambahkan kotak ke sisi terpanjang.

Jadi kami menambahkan kotak lain, sama dengan panjang terpanjang dari keseluruhan bentuk:

Dan lagi:

Ini dapat berlanjut tanpa batas waktu, memberi kita efek yang sama seperti Persegi Panjang Emas kita, tetapi kali ini meningkat bukannya menurun. Rasio Emas dan Deret Fibonacci memberi kita rasio yang sama menariknya.

Sekarang mari kita lihat situs web tempat kita dapat melihatnya beraksi.

Contoh #1: YStudio

Tentang Apa Situs Web Ini?

"Studio Lokal Anda" adalah studio desain dan pengembangan yang berbasis di Kopenhagen, Denmark. Dia berspesialisasi dalam bekerja dengan konsep visual dalam bentuk apa pun untuk menciptakan pengalaman yang meningkatkan lingkungan.

Bagaimana Anda menggunakan Golden Mean?

Situs web di sini menggunakan Golden Mean pada dua dari tiga halamannya. Halaman beranda adalah ikhtisar konseptual dari bagian-bagian penting dari pekerjaan. Namun, ketika Anda mengunjungi halaman studio, itu mencampurkan sedikit tata letak web tradisional dengan bentuk rata-rata emas persegi panjang saat Anda menggulir ke bawah halaman.

Mengapa Efektif?

Apakah Anda ingin menonjol dari keramaian? Yourlocalstudio (YLS) telah melakukannya dengan menggunakan rasio emas dalam desain situs web mereka. Desain menyajikan aspek progresif dengan sistem grid yang ditentukan. Anda dapat berargumen bahwa semuanya tampak seperti bootstrap hari ini ... lihat semakin banyak situs yang ingin menarik perhatian dengan tata letak yang lebih dinamis secara struktural.

Contoh #2: Mashable

Tentang apakah Situs Web itu?

Mashable adalah situs berita; sumber informasi, pengetahuan dan sumber daya untuk "generasi terhubung".

Cara Menggunakan Golden Mean

Saya telah menggunakan uji UX Triggers Golden Ratio untuk mendemonstrasikan bagaimana Mashable menggunakan deret Fibonacci dalam tata letaknya. Tata letak kontennya fleksibel, dengan tajuk utama di sebelah kiri dan tautan ke lebih banyak berita di sebelah kanan, dipisahkan oleh kisi-kisi.

Mengapa Efektif

Rasio Emas efektif di sini, karena memungkinkan situs berbasis konten memberikan ruang tipografi untuk bernafas . Situs serupa dapat tampil lebih padat dengan konten, menggunakan tata letak kisi tradisional, tetapi Mashable membuktikan bahwa Rasio Emas dapat efektif bahkan saat tidak terlihat.

Contoh #3: Jackson & Kent

Tentang apakah Situs Web itu?

Jackson & Kent adalah agen produksi web dari Perancis. Mereka berspesialisasi dalam layanan digital seperti HTML5, CSS3, Drupal, WordPress, PHP/MySQL, Flash, dll.

Cara menggunakan ukuran emas

Tangkapan layar di atas menunjukkan bagaimana tata letak mencakup sebagian besar pekerjaan dari klien sebelumnya. Itu juga menampilkan blok konten tentang agensi itu sendiri dan bilah navigasi di tengah layar. Tombol kontak, seperti yang ditunjukkan di bawah, juga menggunakan rata-rata emas sebagai sistem kisi untuk mengatur tata letak dengan cara yang unik.

Mengapa Efektif

Contoh di sini mendorong Anda untuk membagi situs web dan menjelajahi kontennya secara horizontal. Tampilan kisi dan bentuk blok dengan ukuran berbeda membuat konten lebih menarik secara visual. Karena pengguna cenderung melihat konten di komputer desktop (serta tablet), ada nomor paginasi di navigasi sumbu horizontal. Ini adalah cara inovatif untuk melihat setiap konten, tetapi juga keseluruhan UI.

Kesimpulan

Rasio emas secara alami menarik perhatian pengguna ke titik tertentu dalam antarmuka pengguna. Sebagai sebuah konsep, ini dapat membantu Anda memikirkan tentang penempatan konten dan menggunakan hierarki secara efektif. Kombinasi tata letak, tipografi, warna, dan prinsip umum akan membantu Anda membawa desain Anda ke level selanjutnya.