Web Tasarım Kavramları Bölüm 1. Bilgi Mimarisi - Bir Web Sitesini Planlama Giriş Bir web sitesinin planlama aşaması oldukça zahmetli bir süreç olabilir. Bu süreçte işinize karışacak birçok kişi olacaktır. Aynı zamanda kendi tercihlerinizi de uygulamak isteyebilirsiniz. Ancak bu aşamada aslında en önemli nokta, tek önemli şey şudur: Web sitesinin hedef kitlesinin düşünceleri. Bu dokümanda bir web sitesinin planlama aşamasına ve bilgi mimarisi adı verilen bir disipline değinilecektir. Bu disiplin şunları içerir: Hedef kitle Beklenilen bilgi ve servisler Bunların nasıl sunulacağı İnşa edilecek siteyi planlamalısınız Bu bölümde bir sitenin nasıl planlanmaya başlanacağı örnek bir senaryo üzerinden anlatılacaktır. Buradaki örnek senaryo The Dung Beatles (TDB) adı verilen bir müzik grubunun ihtiyacı olan bir web sitesine yöneliktir. TDB ye giriş Grup bilgisi aşağıdaki şekildedir: İngiltere de tanınan bir müzik grubudur. Bu grup 6 ay içerisinde ABD ye turne gerçekleştirecektir. Amaç, ABD tanınırlığını artırmak. Grubun istekleri özet bir şekilde şunlardır: Fanların buluşma noktası Grup tanıtımı Turne bilgileri Para geliri Hedef kitlesi de aşağıdaki şekilde tespit edilmiştir: Fanlar Grubu tanımayan müzik severler
Müzik grubunun isteklerine yönelik hazırlanan kaba taslak bir diyagram Şekil 1 de görülmektedir. Şekil 1. Müşteri ne istiyor? Bir web sitesi haritası çizme Web sitesi haritası genellikle organizasyon diyagramı şeklinde çizilir. Ancak bu diyagramları biraz daha bilgi ekleyerek oluşturmak daha verimli olmaktadır. Şekil 2 de istenilen web sitesinin haritası görülmektedir. Bu haritada istenilen her şey mevcut olmakla birlikte bilgilerin gruplandırılmadığı görülmektedir.
Şekil 2. Web sitesi yapısının ilk ürünü Bu diyagramın üzerinden geçilerek bir gruplandırma yapıldığı takdirde daha uygun bir site haritası ortaya çıkmıştır. Bu harita Şekil 3 de görülmektedir.
Şekil 3. Gözden geçirilmiş site yapısı Sayfaların isimlendirilmesi Sayfaların isimlendirilmesi bir web sitesi için oldukça önemlidir. Ziyaretçiler site içerisinde yollarını bulabilirler. Arama motorlarında sayfalarınızın bulunmasını kolaylaştırır. Detay ekleme Sayfalar hakkında her şeyi en başında belirlemek zorunda değilsiniz. Ancak sayfaların içerikleri hakkında özet bir takım bilgileri planlama aşamasında belirlemek oldukça faydalı olacaktır. Site yapısı oluşturulduktan sonra aşağıdaki Şekil 4 de görüldüğü gibi özet içerikleri yazarsanız ileride rahat edersiniz.
Şekil 4. Ana sayfanın, sayfa detayları Not: Bu materyalin orijinali Jon Lane tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, 6: Information Architecture - Planning out a web site adresinde daha sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak Information Architecture - planning out a web site adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.
Web Tasarım Kavramları Bölüm 2. İyi Bir Web Sayfası Neye İhtiyaç Duyar Giriş İyi bir web sitesinin ve web sayfalarının neler içermesi, nasıl olması gerektiğine dair bir takım bilgileri, önceki örneğimizden devam ederek anlatmaya çalışacağız. Bütün bu bilgiler web sayfaları geliştirilmeden önce bilinmesi gereken önemli noktalardır. Ana sayfa Yanlış anlama: Birçok insan göreceği ilk sayfa olan ana sayfa ile işe başlayalım. Ana sayfadan başlamak genellikle iyi pratik değildir. Sitenin tamamı ana sayfa değildir. Herşeye ilişkin bilgi ve bağlantı ana sayfada yer almak zorunda değil. Yanlış anlama: Ziyaretçiler ilk olarak ziyaret edeceği sayfa ana sayfamız olacak. Ziyaretçiler genellikle sitenizin alt sayfalarına gelirler. Direk adres yazarlar. Arama motorları kullanırlar. Ne yapılmalı? Bilgi güzel bir şekilde kategorilere ayrılmalı ve her bilgi kendi sayfasında sunulmalı. Ziyaretçiler geldikleri sayfada aradıklarını bulabilmeli ve orada diğer sayfalara geçiş yapabilmeliler. Ana sayfada yalnızca en önemli şeyler verilmeli ve oradan alt sayfalara bağlantılar yardımıyla erişim sağlanmalı. Navigasyon Yanlış anlama: Her sayfa en fazla üç tık ötede olmalı. Site derinliğine göre sayfalar birden fazla bağlantı aracılığıyla ulaşılabilir. Önemli olan ziyaretçilerin aradığını bulabilmesi ve nerede olduğunu ve nereye nasıl gideceğini bilmesi. Şekil 1 de Opera web sitesi örneği görülmektedir.
Şekil 1. Opera geliştirici web sitesi örneği Diğer ortak elemanlar Navigasyonun yanı sıra sitelerin kimliklerine de dikkat etmek gerekir. Logo Başlık Renk Bağlam herşeydir
Her sayfa eşsiz olmalıdır. Bir web sayfası bir veya birkaç şey yapmalı ve yaptığı şeyleri iyi yapmalı. İlgili içerik İçerik ilgili ve ayrık olmalıdır. Matıksal olarak sıralı olmalıdır. Başlıklar Her bir bölüm bir başlık ile gösterilmelidir ve kısaca bilgi verilmelidir. Kullanılabilirlik Bir site, akla yatkın ve beklenilen şekilde çalışmalı. Kişilere kullanılabilirlik analizi yaptırılmalı ve aşağıdaki sorulara cevap aranmalıdır. Aradıkları sayfaları bulabiliyorlar mı? Site içi arama onlara ilgili içeriği gösteriyor mu? Resim, ses ve video dosyaları tarayıclarında çalışıyor mu? Herhangi bir şeyden rahatsız oldular mı? Herhangi bir şey hoşlarına gitti mi? Erişilebilirlik Site, engelli kişiler tarafından erişilebilir ve kullanılabilir olmalı. Görme engelliler, renk körleri vb. Not: Bu materyalin orijinali Mark Norman Francis tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, 7: What does a good web page need? adresinde daha sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak What does a good web page need adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.
Web Tasarım Kavramları Bölüm 3. Renk Teorisi Giriş Renk veya grafikler olmasaydı bütün web siteleri Jakop Nielsen in rüya sitesi gibi olurdu. Bir siteye kullanılabilirliğini azaltmadan stil vermek mümkündür. Dizayn eden kişiler olmasanız da renk hakkında belli bilgiler edinerek uyumlu görünümlü web siteleri oluşturabilirsiniz. Renkler web sayfalarında hexadecimal (hex) notasyon kullanılarak belirtilir. Örn. (Beyaz: #ffffff) Renkler, açık renkler, koyu renkler Üç çeşit renk mevcuttur. Ana renkler Başka renklere ihtiyaç duymadan oluşturulabilen renkler. Kırmızı (#ff0000) Sarı (#ffff00) Mavi (#0033cc) İkincil renkler Ana renklerin birleşimiyle oluşan renkler. Kırmızı + Sarı = Portakal rengi (#ff9900) Sarı + Mavi = Yeşil (#00cc00) Mavi + Kırmızı = Mor (#660099) Üçüncül renkler İkincil renklerin birleşiminden oluşan renkler.
Şekil 1. Önemli renkler Önemli terimler Açıklık - Tint: Bir rengin beyaz eklenmiş hali Ton - Tone: Bir rengin gri eklenmiş hali Gölge - Shade: Bir rengin siyah eklenmiş hali Şekil 2. Renk paleti Renk şemaları Bir web sayfası dizayn edilirken bir renk şeması tercih edilir. Bir veya daha fazla ana renk tercih edilir. Bu renklerin renk şemasına göre farklı tonları web sayfasında kullanılır. Başlıca renk şemaları Tek renkli (monochromatic) renk şeması
Tamamlayıcı (complementary) renk şeması Üçlü (triadic) renk şeması Dörtlü (tetradic) renk şeması Şemalara göre uygun renk tonları Color Scheme Designer web sitesi yardımıyla belirlenebilir. Tek Renkli (Monochromatic) Renk Şeması Tamamlayıcı (Complementary) Renk Şeması
Sıcak ve soğuk renkler
Üçlü (triadic) renk şeması
Dörtlü (tetradic) renk şeması
Not: Bu materyalin orijinali Linda Gion tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, 8: Colour Theory adresinde daha sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak Colour theory adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.
Web Tasarım Kavramları Bölüm 4. Bir site çerçevesi oluşturma Giriş Bu bölümde bir ticari web sitesinin tasarımının nasıl yapılacağını öğreneceksiniz. Bu bölümde öğreneceğiniz adımları kullanarak bir kontrol listesi oluşturup, bunu ileride tasarlayacağınız sitelerde, müşterileriniz ile iletişim kurarken kullanabilirsiniz. Bu bölümde özetle aşağıdaki adımlar anlatılacaktır. Her ne kadar renk ve dizayn önemli olsa da, müşterilerinizin web sitesi ile ne amaçladıklarını anlamak, web sitesinin görünümü üzerinde ciddi bir etki oluşturacaktır. Tasarım aşamasına geçmeden önce, müşterinizin ihtiyaçlarını belirleyecek bir kontrol listenizin olması gerekmektedir. Şirketin önceki reklam çalışmalarından ve marklaşma bilgilerinden haberdar olmalısınız. Bu sitenin tasarımında etkin bir rol oynayacaktır. Temin ettiğiniz bilgiler doğrultusunda, sitenin görsel tasarımını gerçekleştireceksiniz. Böylelikle müşteriniz bu tasarım üzerinde size yol gösterebilecek. Ne bilmelisiniz Görsel dizayndan önce site ile ne amaçlandığını öğrenmelisiniz. Alışveriş sitesi Uzun vadeli site Kısa vadeli, belli bir hedef kitlesi olan site Günce yer alacak mı? Fotoğraf olacak mı? Şirketin kurumsal kimliği mevcut mu? Logosu mevcut mu? Ürün ve servislerini markalaştırmış mı? Eğer kurumsal kimlik yok ise bunun için profesyonellerden yardım alabilirsiniz. Eğer mevcutsa, varolan kurumsal kimliği üzerinden, web sitesi kimliği oluşturulabilir. Site, engelliler de dahil olmak üzere kişiler tarafından kolay kullanılabilir olmalı HTML ve CSS yardımıyla basit kod yazmalı ve tasarımınızı aynı ölçüde basit tutmalısınız. Mümkünse Flash kullanmamaya özen gösterin.
JavaScript kullanacağınız noktaları özenle seçin ve dikkatli kullanın. İlk adımlar Bu bölümde örnek bir ticari kuruluş üzerinden, atılması gereken ilk adımları öğreneceksiniz. Bu örnekte, şirketin kurumsal kimliği, logosu ve site içeriğinin önceden hazırlanmış olduğu varsayılmıştır. Eğer bunlar mevcut değilse sizlerin bunları hazırlaması gerekmektedir. Geliştirici olarak, tasarıma başlamadan önce aşağıda yer alan listedeki bilgileri müşterinizden edinmelisiniz. Şirket hayal ürünü olsa da, bu liste hayal ürünü değildir. Bu listeyi, muhakkak uygulamanız gerekmektedir. 1. Web sitesinin adı: Web sitesinin adı, şirketin online çalışmaları ile örtüşmeli. Bu örnekte web sitesinin adı, şirketin adı olan Wiki Whatevers. Şirket aynı zamanda bir slogan da kullanmak isteyebilir. Bu durumda, logo, şirket adı (web sitesi adı) ve slogan birlikte web sayfasında yer alır. 2. Logo ve marka: Şirketin bundan önce oluşturduğu her türlü materyali isterim. Örneğin broşürler, reklam kampanayaları, logo vb. bilgiler. Bunlar dahilinde şirketin kimliğine ilişkin ciddi bilgi sahibi olurum. Eğer logo, kimlik vb. mevcut değilse profesyonellere bu işi sevk ederim. 3. Web sitesi alan adı: Web sitesi adı ile birlikte web sitesinin alan adını araştırır ve bu adın müsait olup olmadığını kontrol ederim. Buna her ne kadar mecbur olmasam da şirketin alan adı, tasarım üzerinde etkili olabileceğinden, ilgili alan adının alınabileceğinden emin olurum. 4. Rekabet araştırması: Rekabet halindeki diğer şirketlerin, web sitelerinin tasarımı, grafikleri, içeriğini inceleyerek eşit düzeyde, mümkünse daha iyi bir alt yapı oluşturmaya çalışırım. 5. Bilgi mimarisi: Sitede tam olarak ne sunulacak, navigasyon nasıl gerçekleştirilecek? İleride web sitesi, genişleyecek mi, eklentiler yapılacak mı? 6. Site içeriği: Site içeriği hazır mı? Eğer mevcutsa, navigasyon, tip tasarımı ve sayfa düzenini daha iyi belirleyebilmek için bu içeriği hemen edinmelisiniz. İçeriği gruplandırmak da faydalı olacaktır. Eğer içerik yoksa, tasarımı bekletmelisiniz. 7. Web barındırma (hosting) şirketlerinin araştırması: Siteye ev sahipliği yapacak olan sunucuları tahsis eden web barındırma şirketlerinin araştırılması, müşterinizin hali hazırda bir şirketi varsa bile önemlidir. Alternatifler her zaman önemlidir. Bakılacak özellikler şunlar olabilir: a. Veritabanı sistemleri ve erişimi b. Ziyaretçi limitleri c. Veri limitleri d. Çalışma zamanı istatistikleri 8. Yönlendirilmiş ayrılma: Müşteriniz, ziyaretçileri web sitesini terkederken bunu kontrol etmek istiyor mu? Örneğin çıkmadan önce, anket yapmak, reklam göstermek, yönlendirme yapmak gibi hedefleri mevcut mu?
9. Son teslim tarihleri: Sitenin ne zaman hayata geçeceğini net olarak belirleyin. Bu örneğimizdeki site gibi küçük sitelerin hayata geçmesi için 8 hafta yeterlidir. Bunlar hazırsa, planlamaya başlayabilirsiniz. Planlama aşamasında arama motoru uzmanlarına danışmanızda da fayda vardır. Hayali örnek site Wikiler için açık kaynak kod sunan bir site tasarlamanız isteniyor. Sitenin adı Wiki Whatevers olarak belirlendi. Hizmet ücretsiz olduğundan ötürü, reklamlar, bağışlar vb. diğer faaliyetler aracılığı ile gelir etmek istenmekte. Sitenin içeriği hazır: kod örnekleri, programcıların biografileri, makaleler vb. Veritabanı olarak MySQL tercih edildi. Ve yüksek trafiği karşılayacak uygun bir web barındırma şirketi belirlendi. Şimdi elimizde olan verilerle işleme başlayalım. 1. Şirketin önceki logosunun sayısal hali hazırlanacak. a. Tarayıcı ile logo taranacak. b. Photoshop, Gimp vb. program ile işlenecek. c. Minimum 72 dpi çözünürlükte kaydedilecek. Hızlı indirme için. 2. Progamcıların fotoğrafları, çalışanlar sayfasında görüntülenecek. a. Fotoğraflar sayısal formda temin edilecek. b. 300 dpi olmasına özen gösterilecek. 3. Müşteri bir günce kullanmak istiyor. Bu sebepten ötürü, hazır günce servisi sunan bir web barındırma şirketi ile anlaşıldı. 4. FTP programı kullanarak, (örn. Filezilla, fireftp vb.) hazırlanmış olan statik bir İnşa halinde sayfasını alanıma yükleyeceğim. a. Klasik inşa halinde sayfası iticidir. b. Bunun yerine şirketin kısa bir tanıtımı, siteden sunulacak servislerin kısa bir açıklaması daha güzel olur. c. Sitenin açılış tarihi de burada kullanıcılara gösterilmelidir. d. İsteyen kullanıcıların, e-posta ile haberdar edilmek için bilgi bırakmasına izin verilmelidir. 5. Alınan içerik ve bilgiler ışığında ve reklam talepleri doğrultusunda sitenin mimarisi hazırlanacaktır. 6. Logodaki renkleri kullanarak, müşteriye birkaç renk şeması önereceğim. 7. istock, Comstock vb. fotoğraf sitelerinden işle ilgili fotoğraflar ve çizimler seçeceğim. Lisans problemi olmayacak. Logo Logo bir markanın en önemli parçalarından bir tanesidir. İşe başlamadan önce logonun ve uygun kimlik bilgilerinin olduğundan emin olun. Eğer yoksa edinmek için önerilerde bulunun. Wiki Whatevers şirketinin logosu ve renkleri Georgia Tech üniversitesinden alınmış, zira kurucuları oranın mezunu. Ve logo basılı halde mevcut.
Sorun şu: Bu basılı bir logo ve CMYK formatında. Bu logoyu renklerini bozmadan web için uygun hale, yani RGB formatında getirmek gerek. Bunun için aşağıdaki alternatifler mevcut: Baskı renklerini tespit et. Logonun, yazıcıdan bir çıktısı alındıktan sonra, yine yazıcıdan bu çıktıda kullanılan renklerin neler olduğu bilgisi edinilebilir. Yazıcılar genellikle Pantone renkleri kullanırlar. Pantone Renk uyarlama sistemi ile bu renklerin hangi web renklerine karşılık geldiği tespit edilebilir. Bu uyarlama sistemi de genellikle yazıcılarda mevcuttur. Dolayısıyla bu araçlara ek para ödemek gerekmeyebilir. Logo, Georgia Tech üniversitesinin renklerinden oluştuğu için, üniversitenin web sitesi ziyaret edilerek ilgili renkler tespit edilebilir. Web sitesinin bir ekran görüntüsü kaydedilir ve istenilen noktalardaki renkler çeşitli grafik programları yardımıyla öğrenilir. Göz ile tepit yapmaya çalış. Logoyu tara ve Photoshop un Pantone Renk Değiştirici sistemi ile renkleri tespit et. Nadiren de olsa, kurumsal kimliği olmayan şirketlerle karşılaşabilirsiniz. Bu tür şirketler sizin tasarımlarınızı kabul edecektir. Bunlar için uygun bir tasarım yapabilir ya da kurumsal kimlik için, profesyonellere başvurabilirsiniz. Sayfa Düzeni Basitlik için burada bir sayfa düzeni seçtim. Seçilen sayfa düzeninde, bir günce düzeni tercih edildi. En güncel gelişmeler sayfanın en üstünde gösterilecek. Sayfa, katlama düzeninde olacak. Bir gazete sayfası gibi, yenilikler sayfanın katlanmış üst kenarında, eski bilgiler ise katlanmış alt tarafında kalacak.
Amaç ziyaretçinin, dikkatini üst taraftaki yeniliklere çekmek olacak. Aşağıdaki şekilde, bu görülmektedir. Seçilen düzen tüm site boyunca aynı kalacak. Tutarlılık önemlidir. Yukarıdaki şekilde görünen içeriklerin açıklamaları aşağıda verilmiştir. 1. Başlık: Küçük olacak, sayfada çok yer kaplamayacak. Logo geleneksel yerinde olacak ve ana sayfaya geçiş için kullanılacak. 2. Navigasyon: Başlığın hemen altında olacak. Aynısı bir de altbilgi kısmında olacak. Eskiden kalma alışkanlık ancak ekran okuyuclar için ideal. Aynı zamanda gezintiyi de kolaylaştırır. 3. En yeni günce girdisi: İlk gösterilecek bilgi olacak. Dikkat çeken noktada. 4. Önceki günce girdileri: Önceki girdileri okumak isteyenlere, alt tarafta gösterilecek.
5. Sağ sütun: Günce içeriğine kategorik bir şekilde erişmek, arşivlere erişmek ve diğer içeriğe erişmek için kullanılacak olan bağlantılar yer alacak. 6. Alt bilgi: Alt bilgi de oldukça önemlidir. Şirket hakkında genel bilgi, küçük bir logo, site bağlantıları vb. bilgiler alt bilgi kısmında da gösterilirse oldukça faydalı olur. 7. Reklam: İki reklam alanı mevcuttur. Ana içerik ve önceki güncelerin hemen altında. Kullanıcıyı çok fazla rahatsız etmeden verilmelidir. Bir sitede reklam yapmak hakkında Reklam alınırken, sitenin içeriğine uygun reklamların gösterilmesi müşterinizin lehine olacaktır. Bunun için Google Adsense gibi içerik ilgili reklamlar sunan servisleri tercih edebilirsiniz. Reklam almadan önce, sitenizde gösterilen reklam bilgilerinin, arama sonuçlarını nasıl etkileyeceğini öğrenmek için, bir arama motoru optimizasyon uzamnından (SEO) yardım almalısınız. Aşağıdaki bağlantıları takip ederek siz de bu konuda bilgi birikiminizi artırabilirsiniz. Intelligent site structure for better SEO!, Joost de Valk. Semantic HTML and search engine optimization, Joost de Valk. How Affiliate Programs Can Affect Search Rankings, Fredrick Marckini. New Report Explores how PPC Rank Affects Traffic, Jennifer Laycock. Buna mecbur olmasanız da bu konuda bilginizi artırmak, işinize daha profesyonel yaklaşmanıza yardımcı olacaktır. Sayfa düzeninin, doğrulama ve müşteri ile kontrol edilmesi Kodlamadan önce sayfa düzenini müşteri ile paylaşmalısınız. Müşterinizden onay aldıktan sonra sayfa düzenini kodlayarak, W3C vb. kurumların doğrulama servislerinden faydalanarak sayfalarınızın standartlara uygun olup olmadığını doğrulamalısınız. Diğer bir önemli nokta erişilebilirliktir. Engelli kişilerin de sayfanızı gezebileceğinden emin olmalısınız. Bunu özel uygulamalar yardımıyla gerçekleştirebilirsiniz ancak bizzat engelli kişilerden bu konuda yardım almak en etkili yöntemdir. Sayfa düzeninizi, farklı işletim sistemlerinde ve farklı web tarayıcılarda test etmelisiniz. Bu işlemlerinizden sonra müşterinizi, sayfa düzeninin kodlandığı ve doğrulandığı konusunda bilgilendirmeli ve diğer tasarım aşamalarına geçmelisiniz. Bunları yapmadan diğer aşamalara geçmeye çalışırsanız sık sık geri dönüşler yaparak, iş yükünüzü artırmış olursunuz. Özet Renk ve grafiklerden önce web sitesinin üzerinde oturacağı temeli bina etmek çok önemlidir. Not: Bu materyalin orijinali Linda Gion tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, 9: Building up a site wireframe adresinde daha
sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak Building up a site wireframe adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.
Web Tasarım Kavramları Bölüm 5. Renk şemaları ve tasarım maketleri Giriş Web sitesinin mimarisini ve çerçevesini müşterinize gösterip onay aldıktan sonra sitenin, renkler ve grafik öğeler kullanarak nasıl görüneceğine karar vermeniz gerekir. Bu bölümde bundan bahsedilecektir. Temel fikrimiz basit tut olacaktır. Böylelikle daha geniş kitlelere hitap edebilirsiniz. Bu bölümde değinilecek konular şu şekildedir: Başlıklar, alt başlıklar ve gövde için tipografiye karar verme ve diğer tipografik özelliklere karar verme Web sitesi için farklı renk kombinasyonları planlama Müşterinizin renk ve grafiklere karar verebilmesi için maket inşa etme Sitenin yayına başlamasından önce yapılacak olan testin planlanması İlk adım: tipografiye karar verme Bir sonraki bölümde tipografinin detaylarına bakacaksınız ancak bu bölümde bunlara giriş yapacağız. Yazı tipleri, metin, rakam ve karakterler ve diğer sembolleri göstermek için kullanılırlar. Yazı tipleri belli kriterlere göre sınıflandırılırlar. Aile (sans-serif, serif vb.) Stil (yatık, normal vb.) Biçim (normal, küçük harf vb.) Ağırlık (koyuluk vb.) Esneme (yükseklik veya genişliğin değişimi) Tipografi, bir metnin düzenlemesi ve görüntüsüdür. Dolayısıyla yazı tiplerinin nasıl görüntülendiği ile ilgilenir. Sayfalarınızda tipografinin görüntüleme durumunu belirlemek için kullanacağınız en etkili araç CSS olacaktır. Bir web sitesinin tasarımında verilen ilk kararlardan birisi kullanılacak olan yazı tipini belirlemektir. Çok fazla yazı tipi kullanılırsa, kullanıcılarda soru işaretleri oluşur. Öte yandan tek bir yazı tipi çok monoton olur.
Bu noktadaki öneri, başlıklar ve alt başlıklar için bir yazı tipi ve gövde metinleri için bir yazı tipi seçimi yapmaktır. Böylelikle sayfalarda devamlılık duygusu sağlanır. Ayrıca reklam verenler, reklamlarında zaten çok fazla yazı tipi kullanacaklardır. Genellikle gövde metinleri için Verdana ve başlıklar için ise Times Roman veya Georgia kullanılır. Verdana sans-serif ailesinden, diğer ikisi ise serif ailesinden yazı tipleridir. Bu örnekte gövde Verdana olarak belirlenirken, başlıklar, logodan ötürü Arial Black olarak belirlendi. Bazen ihtiyaçlara göre de yazı tipi seçimleri gerçekleştirilir. Yazı tipleri hakkında 4 ana yazı tipi mevcuttur. Serif sans-serif El yazısı Özel yazı tipleri (monospace vb.) İlk dikkat edilmesi gereken şey, aynı ebat değerine sahip olmalarına rağmen, yukarıdaki tüm metinlerin aynı boyutta görünmediğidir. Diğer dikkat edilmesi gereken nokta, tüm sistemlerde aynı yazı tipleri bulunmayabilir. Bundan ötürü yazı tipi belirlemelerinde, isim bilgisinin yanı sıra yazı tipi ailesi bilgisini de vermek yerinde olacaktır. Tüm sistemlerde aynı şekilde görünecek içerik için, metinlerin resim halinde sayfalara konulması gerekir ki bu da iyi bir pratik değildir. Yazı tipini tamamen kontrol etmeye çalışmanız iyi bir pratik olmaz. Bunun yerine basit düşünüp yalnızca bir iki yazı tipi ailesine karar verirseniz rahat edersiniz. Okunabilirlik hakkında Sitenizin kullanıcıları, serif, sans-serif yazı tipleri hakkındaki ayrımı bilmeyeceklerdir. Bununla da ilgilenmezler. İlgilendikleri tek şey web sitenizdeki yazıların okunabilirliğidir. Bundan ötürü aşağıdakilere dikkat etmeniz gerek: Yazı tipi boyutunuz, farklı tarayıcı çözünürlüklerinde görüntülenebilecek büyüklükte olmalıdır. Buna ulaşmanın en kolay yolu, pixel cinsinden boyut bilgisi vermek yerine yüzde ya da ems cinsinden boyut bilgilerini vermektir. CSS kullanarak bunu yapabilirsiniz.
Arka plan ve metniniz arasında yeterli kontrast bulundurmalısınız. Yeterli kontrast olmazsa, kullanıcılar, metni seçmekte zorlanır ve okuyamayabilirler. Başlıklar, gövde metninden elbette büyük olmalıdır. Sayfanın hızlı bir şekilde gezilmesini ve içeriği hakkında ön bilgi alınmasını kolaylaştırır. Gövde metninizin, tarayıcı ekranının genişliğinin tamamını kaplayacak şekilde olmamasına dikkat etmelisiniz. Tarayıcının eninin tamamını kaplayan sayfalarda ziyaretçiler bilgileri okurken, gözlerinin yanı sıra başlarını da çevirmek zorunda kalır ve odaklanamayarak, içeriği iyi bir şekilde okuyamaz. Aynı zamanda hoş bir arka plan sunarak gözlerin yorulmasını da engelleyebilirsiniz. Aşağıda farklı çözünürlüklerde aynı şekilde okunabilen örnek bir güzel sayfa görülmektedir. Her ne kadar hedef kitleye göre değişse de genellikle, uygun bir satır genişliğinin ortalama 40-60 karakter civarında olması gerektiği tavsiye edilir. Son olarak tipografinizi test edip herhangi bir yazım hatası yapmadığınızdan emin olursanız güzel bir sayfa yapmış olursunuz. İkinci adım: tipografi eklemek Sitede kullanılacak olan yazı tiplerine karar verildikten sonra yapılacak iş başlıklar, alt başlıklar ve gövde metinlerinin düzenlemesini gerçekleştirmektir. Örneğimizde önceden oluşturmuş olduğumuz site çerçevesini müşterimiz beğendi. Dolayısıyla bunun üzerinden devam edeceğiz. Sitenin çerçevesi oldukça kaba bir çizimdir. Bunun bir örneği aşağıdaki şekilde görülmektedir.
Sıradaki aşamada bu çerçeve içerisine örnek metinler ve logo konulmalıdır. Site çerçevemizin örnek metinler ve logo eklenmiş hali aşağıdaki grafikte gösterilmiştir. Şekilden de açıkça görüldüğü gibi site çerçevesi renk kazanmış ve sitenin akışı net bir şekilde sergilenmiştir. Sitenin içerisinde kullanılan örnek yazılar el ile yazmak zorunda değilsiniz. Bu tür yazıları sizin hazırlayan Lorem Ipsum hazırlayıcı siteler mevcuttur. Burada hazırlanmış olan örnek içerik, site yayına başlamadan evvel gerçek içerikle doldurulacaktır.
Hizlamaya dikkat etmek Gövde metninin hizalanması da önemlidir. Gövde metinleri genellikle sola yaslanarak hizalanır. Aşağıda, yapılan tercihin ayrıntılı bir şeklini görmektesiniz.
Logo, şirket adı ve slogan yan yana durmaktadır. Logo biraz küçültülmüş ve şirket adı logonun üst kısmı ile hizalanacak şekilde ayarlanmıştır. Şirket adının altında kalan kısım, logonun altına kadar slogana ayrılmıştır. Bu noktada başlıklar için ilk seçilen Georgia yazı tipinin çok uygun olmayacağına karar verdim. Ve burada logo ile benzer fakat aynı zamanda gövde metni ile de farklı bir yazı tipi olan Arial Black yazı tipini seçmenin daha uygun olacağını düşündüm. Gövde metninin logo ve başlığa nazaran biraz içeriden başladığına dikkat edin. Burada tüm içerik aynı hizada olabilirdi. Ancak gövde metninin biraz daha içeride olması, ziyaretçinin hızlı bir şekilde başlıkları gezebilmesine olanak tanımaktadır. Böylece daha uygun bir sayfa akışı olacağına karar verdim. Gövdeyi bu şekilde içeriye almanın bir diğer faydalı tarafı ise, gövde metninin sınırlarını bir boşlukla belirlemek ve okuyucuya daha iyi bir okuma tecrübesi sağlamaktır. Sizler de web sayfalarını ziyaret ederken, bu tür ayrıntılara dikkat edin ve hangi sayfalarda kendinizi daha rahat hissettiğinizi anlamaya çalışarak, bu tür tasarımlara aşina olmaya çalışın. Bu noktada neden alt başlıklarda da Arial Black seçmediğim sorulabilir. Alt başlıklar için serif türü bir yazı tipi olan Times Roman tercih ettim. Bunu, sayfaya bir kontrast eklemek ve sayfayı durağanlıktan kurtarmak için tercih ettiğimi söyleyebilirim. Üçüncü aşama: renk Sitenin çerçevesini hazırladıktan sonra, eğer mümkün olursa müşteriye çerçevesinin örnek metinler, logo ve hatta örnek reklamlar eklenmiş halini kodlayarak sunarım. Böylelikle, yapılacak sitenin mümkün olduğunca gerçekçi bir maketini müşteriye sunmuş olurum ve kimsenin aklında soru işareti bırakmam.
Renk, sitelerdeki her şeyi yerli yerine oturtan en önemli elemanlardan birisidir. Renk seçimleri bir siteyi çok güzel yapabileceği gibi olduğundan daha kötü de gösterebilir. Renk örneklerini müşterinize sunmadan önce mümkün olduğunca daraltırsanız, müşterinin kafasını karıştırmadan daha uygun bir seçim yapmasını temin edebilirsiniz. Bu örneğimizde müşterimin bütçesi kısıtlı olduğu için ona yalnızca bir renk şeması seçeneği sundum. Müşterinin logosundaki ana rengi (altın rengi) renk şemasında incelediğimde, tek renkli bir renk şemasının biraz monoton olacağına karar vererek, mavi-mor karışımı bir renk ile birlikte tamamlayıcı bir renk şeması kullanmanın daha uygun olacağını düşündüm. Renk şemasından aldığım renkler ile aşağıdaki örneği oluşturdum.
Bu örnekten görüldüğü üzere renkler çok koyu ve ağır oldu. Dolayısıyla renklere biraz donukluk/ saydamlık katmak gerektiğine karar verdim. Gezinti çubuğuna %75, renk bölümlerine ise %20 saydamlık kattığımda aşağıdaki görüntü ortaya çıktı.
Gezinti çubuğundaki şeffaflık, onu biraz daha logoya yakınlaştırdı. Renk bölmelerindeki şeffaflık ise, bağlantı rengine yakınlaştırdı. Slogandaki koyu renk ise tamamlayıcı renk olarak, sitedeki renk uyumunu pekiştirdi. Bu seçimler burada çok kolaymış gibi görünse de, bu renk tercihleri üzerinde çalışırken çeşitli denemeler gerçekleştirdim. Bir sitenin çerçevesinin oluşturulmuş olması, bir maket üzerinde çalışma imkanı sunarak renk seçimlerinin kolaylaşmasına ciddi anlamda katkıda bulunmaktadır. İşleri ne kadar basit tutarsanız tasarımınız o kadar zarif olur. Son noktalardan birisi de başlıklardır. Başlıkları sitenizde, h1, h2, h3 gibi etiketlerle belirtmek, strong, em gibi stillerle belirlemekten daha erişilebilir olacaktır. Stilleri daha sonra CSS yardımıyla değiştirebilirsiniz. Son olarak, sayfama resimler ekleyeceğim. Elinizde hazır resim içeriği yoksa kendiniz örnek resimler kullanın. Ancak bu resimleri kullanırken yine, resimlerin içinde bulunan renklerin
sayfanızda kullandığınız renkler ile uyumlu olmasına dikkat edin. Aşağıda bunun uygulamasını görüyorsunuz. Dördüncü aşama: test Test etme işlemi, bütün sayfaların hatalara karşı incelenmesi aşamasıdır. 1. Tipografi ve bağlantıların test edilmesi: Arkadaşlarınızı, profesyonel editörleri, ailenizi sayfalarınızdaki yazım hataları konusunda test etmek için yardıma çağırabilirsiniz. Bu noktada dikkat etmeniz gereken bir husus vardır. Siteniz yayınlanmaya başlamadan önce, test eden kişilerin, sitenizin içeriği hakkında üçüncü şahışlara bilgi vermeyeceklerinden emin olmanız gerekmektedir. Bu konuda gizlilik anlaşması
(nondisclosure agreement - NDA) imzalayabilirsiniz. 2. Kod doğruluğunun testi: W3C nin doğrulayıcılarını kullanarak, sitenizdeki kodunuzun doğrulunu test edin. Reklamlar bu doğruluğu bozabilir. Buna yapacak birşey yoktur. 3. Tarayıcı uyumluluğu testi: İmkanınız olduğu ölçüde farklı tarayıcılarda ve farklı işletim sitemlerinde sitenizi test edin. Bunun için yine yakın çevrenizdeki arkadaşlarınızdan, ailenizden yardım alabilirsiniz. Eğer daha profesyonel olmak ve ciddi bir iş yapmak istiyorsanız bu konuda hizmet veren kurumlara başvurup küçük bir miktar para karşılığında sitenizin uyumluluk testlerinin gerçekleştirilmesi temin edebilirsiniz (örn. BrowserCam). 4. Kullanılabilirlik ve erişilebilirlik testi: Çeşitli çevrimiçi araçlardan bu konularda yardım alabilirsiniz. Test aşaması oldukça zahmetli ve bıktırıcı olabilir. Sitenizdeki hataları görmek hoşunuza gitmeyebilir. Ancak, bu hataları görmek ve düzeltmek, sitenizin, farklı ortamlarda, farklı kişiler tarafından daha çok ulaşılabilmesine olanak tanıyacaktır. Özet Renkler, grafik, sayfa düzeni, tipografi, reklamlar vb. birçok unsur bir sitenin yapımında ele alınması gereken kriterlerdir. Bütün kriterleri uygun bir sıra ile ele alıp, sistematik bir çalışma ile, ve işleri basit tutarak oldukça güzel web siteleri tasarlayabilirsiniz. Not: Bu materyalin orijinali Linda Gion tarafından yazılmış ve öncelikle Opera Web Standarts Curriculum çalışmasının bir parçası olarak, 10: Colour schemes and design adresinde daha sonra ise W3C Web Standarts Curriculum çalışmasının bir parçası olarak Color schemes and design mockups adresinde yayınlanmıştır. Bu materyal de orijinal materyal gibi Creative Commons Attribution, Non Commercial - Share Alike 2.5 lisansı ile lisanslanmıştır.