Matematika itu indah. Kedengarannya agak aneh? Saya yakin begitu ketika pertama kali mulai mendesain. Matematika sangat membosankan. Anda mungkin terkejut saat mengetahui bahwa desain, karya seni, benda, dan bahkan manusia yang paling indah, semuanya memiliki kesamaan matematika. Terutama rasio emas, juga dikenal sebagai rasio ilahi, yang diwakili oleh huruf Yunani Φ (phi). Tutorial ini akan menguraikan tata letak situs web dan cara membaginya menjadi rasio emas
Kerangka halaman web
Ini adalah elemen utama halaman web. Ada banyak cara berbeda untuk mengaturnya, namun tata letak ini mungkin yang paling umum digunakan.
Wadah
Semua halaman web menggunakan wadah, terutama untuk tujuan yang sama: memuat beberapa elemen halaman. Namun, metode ini diterapkan secara berbeda. Misalnya tag body atau div yang paling umum digunakan. Bahkan tabel yang biasa digunakan di masa lalu (jangan gunakan tabel sebagai wadahnya, ini metode yang rusak). Bayangkan sebuah wadah sebagai dinding luar rumah Anda, yang berisi kamar tidur, dapur, ruang tamu, dll.
Jenis kontainer:
Liquid : Isi sesuai lebar browser.
Memperbaiki: Lebar yang ditentukan tidak akan berubah sesuai dengan lebar browser.
Tajuk
Header sebenarnya bukanlah elemen spesifik, meskipun beberapa orang berpendapat demikian. Ini lebih banyak digunakan di tingkat atas halaman web tempat Anda menempatkan logo, bilah navigasi, dan tagline. Banyak orang lebih suka menyertakan elemen ini dalam div untuk memfasilitasi pemisahan gaya halaman dan konten. Header akan dianggap sebagai wadah, sehingga memiliki dua jenis pilihan yaitu cair atau tetap yang disebutkan di atas.
logo
Logo Anda adalah identitas dan merek Anda. Cara yang paling umum digunakan adalah dengan menempatkan logo di pojok kiri atas header Anda. Kebiasaan membaca kami adalah dari kiri ke kanan dan atas ke bawah, jadi log Anda harus ditempatkan di tempat yang dapat dilihat pengunjung pada pandangan pertama.
Navigasi
Navigasi halaman adalah salah satu elemen terpenting; pengunjung Anda memerlukannya untuk menggunakan situs Anda. Ini harus mudah ditemukan dan digunakan, itulah sebabnya kebanyakan orang meletakkannya di bagian header, setidaknya di dekat bagian atas halaman.
jenis navigasi:
Horizontal: tampilan horizontal, disebut 'navigasi'
Vertikal: tampilan vertikal, disebut 'menu'
Konten Utama
Semua orang (harus) tahu bahwa konten adalah raja! Ketika orang datang mengunjungi situs Anda, itu adalah elemen utama yang ingin mereka lihat. Ini harus menjadi titik fokus halaman web, sehingga pengunjung dapat dengan cepat menemukan apa yang mereka cari.
Bilah samping
Sidebar adalah elemen yang menempatkan konten sekunder Anda, seperti beberapa iklan, pencarian situs, tautan berlangganan (RSS, Twitter, Email, dll.), metode kontak, dll. Elemen ini tidak diperlukan, meskipun banyak situs menggunakannya. Sebagian besar ditempatkan di sebelah kanan, tetapi Anda juga dapat meletakkannya di kiri atau di kedua sisi, asalkan tidak mengganggu penelusuran konten utama. Situs web menggunakan navigasi horizontal atau vertikal, dan sidebar sering kali menggunakan navigasi vertikal.
catatan kaki
Selalu ada footer di akhir halaman web untuk memberi tahu pengunjung Anda bahwa ia telah mencapai akhir halaman web Anda. Seperti halnya header, footer bukanlah elemen khusus. Sertakan hak cipta, pemberitahuan hukum, dan informasi kontak utama di footer Anda. Sebaiknya sertakan beberapa link penting, seperti halaman beranda, halaman kontak, dll. Beberapa situs web menggunakan area ini untuk menyediakan materi relevan atau informasi penting lainnya.
"Spasi putih"
Anda mungkin mempunyai keinginan yang kuat untuk mengisi bagian yang kosong di halaman ini, tapi tolong jangan. "Ruang putih" juga sangat penting. Anda dapat melihat bagaimana situs web NetTuts secara efektif menggunakan ruang putih untuk menciptakan keseimbangan halaman dan memberikan kesan yang baik.
Di atas adalah kerangka halaman web. Sekarang mari kita lihat bagaimana membagi elemen-elemen ini menjadi bagian emas.
Bagian Emas dan Penggunaan Grid
Ingatkah sebelumnya ketika saya mengatakan matematika itu indah? Menurut kita, daya tarik visual didasarkan pada proporsi (misalnya, bagian emas). Selama ribuan tahun, seniman, desainer, arsitek, dll. secara sadar atau tidak sadar menggunakan proporsi yang sama untuk meningkatkan keindahan karya mereka. Apa angka ajaib ini? 1.62 (sebenarnya 1.618...) Saya tidak akan memberi tahu Anda asal usul angka ini, tetapi saya akan memberi tahu Anda cara menggunakannya.
Menggunakan bagian emas sangat sederhana. Misalnya, Anda mungkin ingin mencari lebar konten utama dan daftar sidebar. Anda akan mengambil total lebar area konten Anda dan membaginya dengan 1,62. Hasilnya adalah 555,55px. Kita tidak perlu terlalu presisi, jadi kita cukup menggunakan 555px. Sekarang Anda tahu bahwa elemen konten utama Anda memiliki lebar 555px dan sidebar Anda 345px. Lihat betapa mudahnya?!
Tapi tunggu dulu, keseruannya tidak berhenti sampai disitu! Anda juga bisa menerapkan bagian emas pada lebar dan tinggi elemen lainnya.
Menggunakan Grid
Jika Anda seperti kebanyakan orang, Anda tidak ingin harus memegang kalkulator untuk menghitung rasio emas setiap saat. Maka cara termudah adalah dengan menggunakan grid. Jadi yang perlu Anda lakukan adalah membagi lebar atau tinggi menjadi tiga.
Untuk menghasilkan grid yang lebih detail, teruskan membaginya menjadi tiga. Jika Anda membaca artikel sebelumnya “Kontak Intim dengan Blueprint CSS Framework”, Anda akan melihat bahwa framework Blueprint CSS menggunakan sistem grid yang detail. Desain grid tidak hanya lebih mudah dan cepat, tetapi juga menciptakan tata letak yang indah. Jika Anda belum pernah menggunakan desain grid, ini adalah kesempatan bagus untuk mencobanya. Anda dapat mengunduh templat kisi untuk kembang api, photoshop, atau perangkat lunak lainnya dari http://960.gs.
Seperti yang Anda lihat, NetTuts mengikuti rasio emas dengan sangat baik. Sepertiga atas halaman sekali lagi dibagi menjadi tiga, sangat mendekati rasio emas. Tidak heran desain NetTuts begitu menarik!
Jika Anda akan membuat desain baru, saya sangat menyarankan untuk mencari beberapa situs populer dan meninjau tata letaknya serta cara mereka menerapkan rasio emas dan kisi. Kemudian luangkan waktu untuk berlatih menggunakan bagian emas dan menggunakan kisi dalam tata letak Anda.