Embed Size (px)
DESCRIPTION
Web tasarımında sayfa tasarımı ve yerleşimi
Citation preview
WEB TASARIM
PAGES AND LAYOUT
BAHADIR ÇAKMAK
İÇİNDEKİLER
• BİR WEB SAYFASININ ANATOMİSİ
• BİR WEB SAYFASININ EBATLARI
• SAYFA TASARIM TEOREMLERİ
• SAYFA ÖLÇÜLERİ
• SAYFA TÜRLERİ
• Web sayfasını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.
• Sayfa bir web sitesinin kalbi olarak nitelendirilir. Çünkü temelde kullanıcıların web tarayıcıların ilk gördükleri şey sayfamızdır
•BİR WEB SAYFASININ ANATOMİSİ
Bir web sitesini oluşturan elementlere kısaca bakarsak ;
Header (Başlık) : Başlıklar aslında bir elementi tanımlamazlar 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.
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 web sitenizi 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.
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) : reklam, site araması, abonelik bağlantıları (RSS, Twitter, Elektronik posta vs.), iletişim yöntemleri gibi öğeleri içerebilecek bir elementtir. 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.
SAYFA BOYUTLARI
Bir web sayfasının teoride ölçüsü sonsuz uzunluk ve sonsuz genişlikte olabilir. Fakat uzun ve geniş sayfalar okuması zordur, bundan dolayı kullanıcıların kolaylığı için sayfalar kabul edilebilir ölçülerde olmak zorundadır.
Bu nedenle Sayfa ölçülendirmesinde dikkat etmemiz gereken ilk şey elimizdeki konu ve amaca göre sayfa boyutu seçmemizdir.
Belirli bir pikselin monitördeki görüntüsüne göre bakarsak ;
Birçok tasarımcı kullanıcının ekran ölçüsünü önemsemez. Fakat eğer kullanıcı çözünürlükleri farklı olursa her bir sayfa farklı görünür. Çeşitli işletim sistemleri standart bir ekran çözünürlüğü kullanır fakat buda sayfamızda duruma göre taşımaya yada küçülmeye sebep olabilir.
Mümkünse uygun bir genişlikte sayfa tasarımı gerçekleştirmeliler. Mümkün olduğunca web tarayıcıyı aşan genişlikten kaçınmalılar. Çünkü kullanıcılar sayfada gezinirken sağa kaydırma çubuğunu kullanmaktan hoşlanmıyorlar ve genelde böyle sayfalardan da kaçınıyorlar.
Tasarımcılar ekran ölçüsü ile çeşitli yollarla ortak bir nokta bulmaya çalışırlar.Bazı tasarımcılar kullanıcıları göz ardı ederek sitelerinin en iyi görünebileceği çözünürlük değerini sayfalarında kullanıcılara sunmaktadırlar.Bu düşünce içerisinde genelde ekranda bir mesaj olur.Bu aslında güzellikle kullanıcılara eğer sisteminiz bu
çözünürlüğü desteklemiyorsa gidin demektir.
SAYFA TASARIM TEOREMLERİ
A-) Altın Oran : Altın oran dediğimiz oran 1.62 sayısına karşılık gelen bir değerdir.Bu doğadaki her şeyde güzeli,muhteşemliğin hissinin uyandırdığı düşünülen bir orandır. Sanatta özelikle Leonardo Da vinci’nin “Vitruvian Man” adlı eseri ile ünlü olan bu oran günümüzde estetiğin matematikleşmiş halidir diyebiliriz.
Diyelim ana içerik ve yan bar sütunlarınızın genişliğini buldunuz. İçerik alanınızın toplam genişliğini aldınız (aşağıda örneğimizde 900px kullanacağız) ve onu 1.62'ye böldünüz.Ö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 olmalı.
B ) Izgara Teoremi ( Grid Teroem ) : 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. Izgara sistemleri tasarımı kolaylaştırmak ve çabuklaştırmakla kalmaz, onları estetik olarak göze hoş gelen bir çatıya yerleştirir.
BAĞLANTILI SAYFA ÖLÇÜSÜ
Sayfa ölçümü yaklaşımı olarak ekran çözünürlüğü yerine içerik bilgi yapısına bakılır. Pencereyi küçülttükçe içerik de ona adapte olacak şekilde tasarlanır. CSS( Katmanlı Stil Sayfaları ) kullanılarak çeşitli uygulamalar gerçekleştirilebilir. Bağlantılı ölçeklendirmede % işlemleri ile yapılığından sayfamız üzerindeki resim veya belli başlı nesnelerin bu yüzdelik ölçümde bozularak görüntüde sorun çıkartabilir.
SAYFA TÜRLERİ
Web sitesi içinde başarılı bir yolculuk süreci giriş sayfası ile başlar içerik ve navigasyonlar ile devam eder çıkış sayfası ile terk edilerek süreç tamamlanır.Ana anahtar kullanıcı başlangıç ve bitiş arasındaki süreçte site içinde kendini kaybetmemesidir.
GİRİŞ SAYFALARI Teoride eğer kullanıcı gireceği URL adresini biliyorsa bir site
içerisindeki her sayfa giriş sayfası olarak hizmet edebilir.Ana sayfa ( Home Page ) bir sitenin temel giriş sayfası olarak kullanılır. Fakat eğer özel bir URL adresi veya spesifik domain adresi varsa bazı önemli kısımlı sayfalar ile alt ana sayfalarda bir sitede duruma göre giriş sayfası olarak adlandırılabilirdi.
ANİMASYONLU GİRİŞ SAYFALAR
Bu sayfalar siteye giriş için kullanılan ve güçlü etki bırakan sayfalardır. Genellikle animasyon, grafik hatta ses kullanılarak etkili olması sağlanır. Fakat bazı kullanıcılar için devamlı hareketli logolar veya benzeri eylemler siteyi terk etmek için sebep bile olabilir.Ayrıca bazı siteler içinde çok önemli bir kısımda olabilir. Animasyonlu giriş Sayfalar üzerine kullanıcılar için kolaylıkla geçebilecekleri bir bağlantı yada düğme konulabilir. Genellikle intro’yu geç ( Skip İntro ) veya kısaca geç ( Skip ) şeklinde küçük bir linkle burayı hızlıca geçilmesine olanak sağlamak gerekir.
ANA SAYFALAR Genelde kullanıcı siteyi ziyaret ettiği zaman karşılaşılan ilk sayfadır.Sitenin
ana giriş noktasıdır. Anasayfa görünüşü diğer sayfalardan farklı olmalıdır. Anasayfa kullanıcının hatırladığı sayfadır.
Anasayfa renk, grafik stili, font stili gibi sitenin tasarım elemanlarının nasıl olduğu belirtilir. Kullanıcılar ana sayfa da gördükleri grafik arayüzünü diğer sayfalarda da bulmayı umarlar.
Ana sayfalar belli aralıklarla güncellenmeli buda kullanıcıya çeşitli şekillerde haber verilerek kullanıcını siteyi yenilendiğinden haberdar olması sağlanıp kullanıcının her daim ziyaret etmesi sağlanmalı.
ALT SAYFALAR Ana sayfadan kullanıcılar bir link seçerek gezinmeye başlarlar.Ana sayfa ile
alt sayfaların görsel tasarımları birbirleri ile bağlantılı olmalıdır.Bu demek değildir ki tamamen birbirlerine benzemelidirler.Çünkü o zamanda kullanıcı nerde olduğunu şaşırır. Genelde navigasyon menüsünün yeri logo ve renk fonları aynı olmalı.Alt sayfalardan navigasyon ve içerik arasında dengeli bir ilişki olmalı aksi halde birbirinden bağımsız olursa yetim sayfa adını verdiğimiz sayfalar oluşur.
SIKÇA SORULAN SORULAR SAYFALARI
Bu sayfalar hemen hemen bir çok sitede kullanılan sayfalardır. SSS Sayfalar o site ile ilgili ortak çok sık sorulan sorunlarla ilgili bilgiler bulundurulur. Genel biçim olan tek bir sayfadan oluşan uzun ve kaydırma çubuğu ile kontrol edilir. Ana amaç kullanıcıların geleceğe yönelik referans olabilecek sorular sorulması istenir.
