Matematika itu indah. Apakah itu terdengar sedikit aneh? Saya yakin berpikir begitu ketika saya pertama kali mulai mendesain. Matematika sangat kaku dan sering kali membosankan, atau begitulah menurut saya. Anda akan terkejut mengetahui bahwa desain, karya seni, objek, dan bahkan orang yang paling menyenangkan secara estetika memiliki persamaan matematika. Secara khusus Rasio Emas , juga dikenal sebagai proporsi ilahi, yang ditunjukkan dengan huruf Yunani ? ( phi ). Tutorial ini akan mencakup anatomi dan tata letak situs web dan bagaimana Rasio Emas berhubungan.

1. Anatomi Halaman Web

Elemen halaman web seperti organ; mereka sangat penting untuk halaman web yang berfungsi dengan baik dan estetis.

Ini adalah elemen utama dari halaman web. Ada banyak cara berbeda untuk mengaturnya, tetapi ini mungkin tata letak dasar yang paling umum digunakan secara online.

2. Wadah

Semua halaman web menggunakan wadah dan untuk tujuan yang sama; untuk memuat elemen halaman, namun cara melakukannya bervariasi. Misalnya, tag body atau div paling sering digunakan. Di masa lalu, bahkan tabel telah digunakan (jangan gunakan tabel sebagai wadah halaman Anda, ini adalah metode terdepresiasi). Pikirkan wadah sebagai dinding luar rumah Anda tempat kamar tidur, dapur, ruang tamu, dll.

Jenis wadah:

·         Liquid : Memperluas untuk mengisi lebar jendela browser.

·         Repair : Lebar tertentu yang Anda pilih yang tidak berubah terlepas dari ukuran jendela browser.

3. Tajuk

Header sebenarnya bukan elemen spesifik meskipun beberapa mungkin menganggapnya demikian. Ini lebih umum digunakan untuk merujuk ke bagian atas halaman web Anda di mana logo, navigasi, tagline, dll. Anda berada. Banyak orang lebih suka menyimpan elemen-elemen ini di dalam div untuk penataan halaman yang lebih mudah, pemisahan elemen, dan/atau penahanan elemen. Header akan dianggap sebagai wadah sehingga memiliki dua jenis untuk dipilih: cair atau tetap seperti yang disebutkan di atas.

4. Logo

Logo Anda adalah identitas dan branding Anda. Penempatan paling umum untuk logo ada di dalam header, rata kiri. Kami membaca dari kiri ke kanan, atas ke bawah, sehingga logo Anda kemungkinan besar akan menjadi elemen pertama yang dilihat pengunjung Anda.

5. Navigasi

Navigasi halaman adalah salah satu elemen terpenting; pengunjung Anda memerlukannya untuk menggunakan situs web Anda. Itu harus mudah ditemukan dan digunakan, oleh karena itu hampir selalu terletak di dalam header atau setidaknya di dekat bagian atas halaman. Terkadang kedua jenis navigasi tersebut digunakan untuk situs web dengan konten tinggi.

Jenis navigasi:

·         Horizontal: Serangkaian tautan yang ditampilkan sebaris, biasanya disebut sebagai "navigasi".

·         Vertikal: Serangkaian tautan yang ditampilkan sebagai tumpukan vertikal, biasanya disebut sebagai "menu".

6. Konten Utama

Seperti yang diketahui (atau seharusnya) semua orang, konten adalah raja! Saat orang mengunjungi situs Anda, ini adalah elemen yang terutama mereka cari. Itu harus menjadi titik fokus utama halaman web sehingga pengunjung menemukan apa yang mereka cari dengan cepat.

7. Bilah samping

Sidebar adalah elemen dengan konten sekunder Anda seperti iklan, pencarian situs, tautan berlangganan (RSS, Twitter, Email, dll), metode kontak, dll. Elemen ini tidak diperlukan meskipun banyak situs web yang menggunakannya. Ini paling sering rata kanan tetapi bisa rata kiri atau keduanya (dua sidebar) selama tidak mengganggu tampilan konten utama. Untuk situs web yang menggunakan navigasi horizontal DAN vertikal, sidebar sering diganti dengan elemen navigasi vertikal.

8. Catatan kaki

Akhir halaman web harus selalu menggunakan footer untuk memberi tahu pengunjung Anda bahwa mereka telah mencapai penyelesaian halaman web Anda. Seperti header, footer sebenarnya bukan elemen khusus tetapi lebih merupakan bagian yang berisi. Di dalam footer Anda akan ada informasi hak cipta, hukum, dan kontak terutama. Sebaiknya sertakan beberapa tautan ke bagian terpenting situs Anda seperti bagian atas halaman, halaman beranda, halaman kontak, dll. Beberapa situs web menggunakan area ini sebagai kesempatan untuk menyebutkan materi terkait atau informasi penting lainnya.

9. "Ruang kosong"

Ini adalah area halaman web mana pun yang tidak tercakup oleh tipografi atau konten lainnya. Anda mungkin merasakan dorongan kuat untuk mengisi ruang kosong sebanyak mungkin, tetapi jangan lakukan itu! Ruang kosong sama pentingnya untuk desain halaman web yang bagus dengan konten yang akan digunakan. Anda dapat melihat bagaimana situs NetTuts menggunakan ruang kosong dengan sangat efektif untuk membantu memandu pengunjung menelusuri konten, menciptakan keseimbangan halaman, dan memberikan pemisahan konten yang baik.

Sehingga mencakup anatomi halaman web. Sekarang mari kita lihat bagaimana Rasio Emas berhubungan dengan unsur-unsur ini.

10. Rasio Emas dan Penggunaan Grid

Ingat sebelumnya ketika saya mengatakan matematika itu indah? Kami merasakan daya tarik visual berdasarkan rasio (yaitu The Golden Ratio ). Selama ribuan tahun seniman, desainer, arsitek, dll. Secara sengaja atau tidak sengaja menggunakan rasio umum yang menyenangkan secara estetika dalam karya mereka. Apa angka ajaibnya? 1,62 (sebenarnya 1,618...) Saya tidak akan membahas asal usul angka ini, tetapi saya akan memberi tahu Anda cara menggunakannya.

Menggunakan rasio emas sangat sederhana. Katakanlah Anda ingin menemukan lebar kolom Konten Utama dan Bilah Samping Anda. Anda akan mengambil total lebar area konten Anda (kami akan menggunakan 900px untuk contoh ini) dan membaginya dengan 1,62. Seperti yang ditunjukkan pada contoh di atas, kita membagi 900px dengan 1,62 dan mendapatkan 555,55px. Kita tidak perlu tepat jadi kita akan membulatkannya menjadi 555px. Sekarang Anda tahu elemen konten utama Anda akan memiliki lebar 555px dan sidebar Anda akan menjadi 345px! Betapa mudahnya itu ?!

Tapi tunggu! Kesenangan tidak berhenti di situ. Anda juga dapat menerapkan Rasio Emas ke lebar elemen lain sehubungan dengan tingginya atau sebaliknya. Ini menghasilkan elemen yang menyenangkan secara estetika dengan proporsi Rasio Emas.

11. Menggunakan Grid

Namun, jika Anda seperti kebanyakan orang, Anda tidak ingin mengeluarkan kalkulator setiap kali Anda ingin menggunakan rasio ini. Untuk mempermudah prosesnya, kita bisa menggunakan grid sederhana. Yang Anda lakukan hanyalah membagi lebar dan/atau tinggi Anda dengan sepertiga.

Setiap divisi dapat dikurangi lebih jauh menjadi sepertiga, menghasilkan kisi yang lebih detail. Jika Anda membaca artikel sebelumnya " Melihat Lebih Dekat Pada Framework Blueprint CSS " Anda akan melihat bahwa framework Blueprint CSS menggunakan sistem grid yang detail. Grid tidak hanya membuat desain lebih mudah dan lebih cepat, tetapi juga menciptakan tata letak yang estetis! Jika Anda belum menggunakan kisi saat mendesain, sekarang mungkin saat yang tepat untuk mencobanya. Anda dapat mengunduh templat kisi untuk kembang api, photoshop, dan lainnya dari http://960.gs , yang merupakan kerangka kerja CSS fantastis lainnya yang menggunakan kisi.

Seperti yang Anda lihat, Tuts+ mematuhi Rasio Emas dengan cukup baik. Sepertiga bagian atas halaman dibagi lagi menjadi sepertiga untuk menunjukkan bagaimana bahkan bagian tajuk dipecah menjadi sepertiga yang lebih kecil, sangat dekat dengan Rasio Emas. Tidak heran mengapa desain NetTuts begitu menarik!

Jika Anda baru dalam mendesain, saya sangat menyarankan Anda untuk menemukan beberapa situs populer, evaluasi tata letak elemennya dan bagaimana kepatuhannya terhadap Rasio Emas dan kisi. Kemudian luangkan waktu untuk berlatih menggunakan Rasio Emas dengan elemen Anda dan menempatkannya di tata letak Anda menggunakan kisi.