Matematik güzeldir. KulaÄŸa garip mi geliyor? Ben de tasarım yapmaya ilk baÅŸladığımda aynısını düşünmüştüm. Matematik esnek deÄŸildir ve genellikle sıkıcıdır, en azından ben öyle düşünürdüm. Pek çok sanat eserinin, estetik olarak göze hoÅŸ gelen tasarımların, nesnelerin hatta bazı insanların ortak matematiksel deÄŸerleri paylaÅŸtığını duyunca ÅŸaşıracaksınız. Yunanca Φ (phi) harfinden esinlenen ve ilahi oran olarak da bilinen altın oran özellikle bunların başında geliyor. Bu rehber bir websitesinin anatomisini ve çatısını kapsıyor ve Alton Oran’ın buna olan etkisini inceliyor.
Web Sayfasının Anatomisi
Web sayfananın öğeleri organlar gibidir, estetik olarak göze hoş gelen ve düzgün işleyen bir web sayfası için hayati önem taşımaktadır.
Bunlar bir web sayfasının ana elementleridir. Bunları organize etmek için pek çok yöntem bulunmakla birlikte en sık kullanılan şablon budur.
Container (Kapsayıcı)
Tüm web sayfaları kapsayıcılar kullanır ve aynı amaca, sayfa elementlerini kapsama amacına hizmet etmek için de olsa kullanım şekli değişkendir. Örneğin body etiketi ya da div en sık kullanılan şeklidir. Geçmişte tablolar bile bu amaçla kullanılmıştır (siz tabloyu sayfanızda kapsayıcı olarak kullanmayın, bu yöntemin değeri kayboldu). Kapsayıcıları, yatak odanızın, mutfağınızn, salonunuzun ve oturmanızın içine döşendiği, evinizi kapsayan fazladan bir duvar olarak düşünün.
Kapsayıcı tipleri:
- Likit (Liquid): Tarayıcı penceresini dolduracak şekilde genişler.
- Sabit (Fixed): Seçtiğiniz genişliğe sahiptir ve tarayıcı pencere boyutuna göre değişkenlik göstermez.
Header (Başlık)
Başlıklar aslında bir elementi tanımlamalazlar ancak bazıları onu bu şekilde kullanabilir. Genellikle web sayfasınızın logosunu, navigasyonunu, sloganını vs. kapsayan bölüm için kullanılır. Pek çok kişi bu elementleri daha kolay sayfa stillemek, element bölümlemek ve/veya sınırlamak için bir div içerisinde taşırlar. Başlıklar da birer taşıyıcı olarak algılanabilecekleri için yukarıda anlatıldığı gibi Likit ya da Sabit formda kullanılabilir.
Logo
Logonuz kimliğiniz ve markanızdır. Logonuz için en uygun yer başlık içerisinde sol kısımdır. Soldan sağa ve yukarıdan aşağı doğru okuruz, bu sebeple logonuzun ziyaretçilerinizin bakacağı ilk nesne olması muhtemeldir.
Navigasyon
Sayfa navigasyonu en önemli elementlerden birisidir, ziyaretçilerinizin websitenizi kullanabilmesi için gereklidir. Kullanması ve bulunması kolay olmalıdır, ki bu sebeple genellikle başlık bölümünde ya da sayfanın üst kısmına yakın bir yerde konumlandırılır. Bazen yoğun içeriğe sahip websitelerinde her iki tip navigasyonun kullanıldığı görülür.
Navigasyon tipleri:
- Yatay: Birbiri ardına dizilmiÅŸ ve genelde “navigasyon” diye tabir edilen bir dizi link.
- Dikey: Alt alta dizilmiÅŸ ve genelde “menü” diye tabir edilen bir dizi link.
Main Content (Ana İçerik)
Herkesin bildiği (ya da bilmesi gerektiği) gibi içerik kraldır! İnsanlar sitenizi ziyaret ettiklerinde genel olarak bakacakları element budur. Web sayfasının ana odak noktası olmalı ki ziyaretçiler aradıklarını kolayca bulabilsinler.
Sidebar (Yan Bar)
Yan bar; reklam, site araması, abonelik bağlantıları (RSS, Twitter, Elektronik posta vs.), iletişim yöntemleri gibi öğeleri içerebilecek bir elementtir. Bu elementi kullanmak her ne kadar gerekli olmasa da pek çok websitesi bunu kullanır. Genellikle sağa dayalı olarak kullanılsa da bazen sola dayalı, ya da ana içeriğin her iki yanında da kullanıldığı görülür. Burada unutulmaması gereken ana içerikten daha baskın hale gelmemesi gerekliliğidir. Dikey VE yatay navigasyon kullanan websitelerinde yan bar genellikle dikey navigasyon elementi ile birlikte kullanılır.
Footer (Altlık)
Web sayfasının altı genellikle altlık elementini kullanır ve bu element ziyaretçilerinizin sayfanın tamamlandığını anlamasını sağlar. Tıpkı başlık elementinde olduğu gibi altlık elementi de kullanması zorunlu bir element olmamakla birlikte daha çok bir kapsayıcı elementtir. Altlık içerisinde telif bilgileri, yasal uyarılar ve iletişim bilgilerinin kullanıldığı sık görülür. Web sitenizin ana sayfası, iletişim bilgilerinin yer aldığı sayfa gibi önemli sayfalara birkaç bağlantı içermesi de tercih edilid. Bazı websiteleri bu alanı sayfanın içeriği ile ilişkili başka içeriklerden ya da diğer önemli içeriklerden bahsetmek amacı ile kullanırlar.
“Whitespace” (BoÅŸluk)
Web sayfasının bu alanı tipografi ya da diğer içerikle doldurulmayan tüm alanlara verilen genel addır. Bazen her boşluğu doldurmak zorunda hissedebilirsiniz kendiniz ama bunun olmasına izin vermeyin. Boş alanlar iyi web tasarımının tıpkı içerik gibi önemli bir alanıdır. Bildirgeç websitesinde beyaz alanların kullanıcıların içerik arasında yolunu bulabilmeleri için zekice kullanıldığını, sayfa balansı oluşturduğunu ve içerik bölümlemesini sağladığını göreceksinizdir.
Altın Oran ve Izgara Kullanımı
Daha önce matematiÄŸin güzel olduÄŸunu söylediÄŸimi hatırlıyor musunuz? Görsel zevki altın oran temelinde algılıyoruz. Binlerce yıldır sanatçılar, tasarımcılar, mimarlar vb. bilerek ya da bilmeyerek göze hoÅŸ gelen eserlerin ortak bir oran kullanarak oluÅŸturdular. Peki bu sihirli numara nedir? 1.62 (aslında 1.618…) Bu numaranın kökenine deÄŸinmeyeceÄŸim ancak nasıl kullanabileceÄŸinizi göstereceÄŸim.
Altın oranı kullanmak çok kolaydır. Diyelim ana içerik ve yan bar sütunlarınızın geniÅŸliÄŸini buldunuz. İçerik alanınzın toplam geniÅŸliÄŸini aldınız (örneÄŸimizde 900px kullanacağız) ve onu 1.62′ye böldünüz. Yukarıdaki örnekte görüldüğü gibi 900px’i 1.62′ye bölerseniz 555.55px elde edersiniz. Sayının tam olmasına gerek yok, o yüzden biz 555px diyelim. Åžimdi ana içerik elementinin 555px olacağın, yan barın da 345px olacağını biliyorsunuz. Ne kolay deÄŸil mi?
Ama durun! Eğlence burada sona ermiyor. Altın oranı elementin yükseliği ile oranlayarak da kullanabilirsiniz. Bu, Altın Oran orantıları ile estetik olarak göze hoş gelen elementlerin oluşması ile sonuçlanacaktır.
Izgara (Grid) Kullanmak
Eğer siz de diğer pek çok insan gibiyseniz, bu oranı kullanmak istediğiniz her zaman hesap makinesine koşturmayacaksınız. Bu işlemi basitleştirmek için ızgara kullanabiliriz. Tek yapmanız gereken genişliğinizi ve/veya yüksekliğinizi üçerli bölümler halinde ayrıştırmaktır.
Her bölüm kendi içerisinde de üçerli gruplara ayrılarak daha detaylı ızgaralar oluÅŸturulabilir. EÄŸer daha önce yayımladığım BluePrint CSS Framework’ünü Kullanmak yazımı okuduysanız, BluePrint CSS iskeletinin detaylı bir ızgara sistemini kullandığını göreceksinizdir. Izgara sistemleri tasarımı kolaylaÅŸtırmak ve çabuklaÅŸtırmakla kalmaz, onları estetik olarak göze hoÅŸ gelen bir çatıya yerleÅŸtirir. EÄŸer halihazırda tasarımlarınızı yaparken ızgara sistemlerini kullanmıyorsanız, ÅŸimdi baÅŸlangıç için doÄŸru zaman olabilir. Fireworks, Photshop ve daha fazlası için http://960.gs üzerinden ızgara modellerini indirebilersiniz. 960.gs, CSS ızgara modelini kullanan bir baÅŸka iskelet sistemidir.
Yukarıdaki resimden de görebileceÄŸiniz üzere NetTuts Altın Oran’a iyi uyum saÄŸlamış görünüyor. Sayfanın üst üçte birlik kısmı kendi arasında yine üçe ayrılmış durumda ve hatta buradan baÅŸlık alanının kendi içerisinde de gruplara ayrıldığını görebiliyorsunuz. Altın Oran’a oldukça yakın. NetTuts tasarımının göze neden hoÅŸ geldiÄŸine ÅŸaÅŸmamak gerek.
EÄŸer tasarım iÅŸinde yeniyseniz, sizi bazı popüler siteler bulmanızı, onların element yayılımını ve Altın Oran ile ızgara sistemleri ile olan iliÅŸkisini incelemenizi ÅŸiddetle öneririm. Ardından biraz zaman ayırarak kendi elementleriniz üzerinde Altın Oran’ı uygulamaya ve sonucu ızgara üzerine yerleÅŸtirmeye çalışın.
Kaynak: NetTuts
