bildirgec.org

Bir websitesini stillemek onun sadece nasıl görüneceğini belirlemek demek değildir. Bundan çok daha fazlasıdır. Bu, ziyaretçiyi nasıl daha rahat hissetirebileceğinizi, nasıl web sitenizi daha çok seveceğini ve onu nasıl daha fazla kendi evinde hissetirebileceğini tasarlamaktır.

Mükemmel tasarım ziyaretçinin web sitesini kullanmasına yardım eder ve ince bir zekayı yansıtır. Ziyaretçinin onu beğenmesi yetmez

Bir haber sitesini ele alalım. Ziyaretçi, “lezzetli” gradyanlarınıza ve seksi görünümlü yuvarlatılmış köşelerinize bakıp saatler geçirmemeli. Ziyaretçi, değerli web zamanını değerli içeriğinizi okuyarak geçirmeli. Biz ona aradığı içeriğe en kısa sürede ulaşmasına yardımcı olmalı, onu mümkün olduğu kadar çok makale okumaya teşvik etmeli, sitede daha uzun süre kalmasını sağlamalı ve sitenizi ilk kez ziyaret eden bir ziyaretçiden kalıcı bir ziyaretçiye dönüştürmeliyiz.

Tüm bunlara ulaşabilmek için sayfamızdaki her element üzerinde bir harmoni ve benzerlik sunmalıyız, küçük ve önemsiz elementlerde bile. Bunların karışımı bize arzulanan sonucu verecektir.

Harmoni. Anlamı gibi kulağa hoş gelen bir kelime. Peki anahat (layout) tasarımında buna nasıl ulaşabiliriz? Cevabı “Altın Oran”.

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.

Türkçe’ye CSS İskeleti olarak çevirebileceğimiz CSS frameworkleri, CSS tabanlı web siteleri hazırlarken bize zaman kazandıran en büyük yardımcımız. Blueprint CSS de en popüler CSS iskeletleri arasında yer alıyor ve geliştiricilere büyük kolaylıklar sunuyor. Ben de bu yazımda daha önce CSS iskeletleri ile çalışmamış kullanıcılara Blueprint CSS ile nasıl kolayca web sitesi oluşturulabileceğini anlatmaya çalışacağım.

Blueprint CSS iskeleti, HTML ve CSS içeren tüm projeler üzerinde çalışırken size zaman kazandıran bir proje. İster statik bir sayfa üzerinde çalışıyor olun, isterseniz Rails ya da PHP gibi sunucu tabanlı betikleri kullanın, BluePrint CSS iskeleti işinize oldukça yarayacaktır.

BluePrint CSS nedir?
Eğer siz de benim gibi bir tasarımcıdan ziyade geliştirici iseniz, o zaman yeni bir projeye başlarken CSS ile ne yapacağınıza karar verme sürecinin zorluklarından ve bu sürecin her yeni bir proje için tekrar ediyor oluşunun zorluğu ve sıkıntısından haberdarsınızdır. Proje ilerledikçe tasarımınız muhakkak değişecektir, ancak siz daha başlangıçtan iyi görünümlü bir tasarım istiyorsunuz. Siteniz için CSS yazmaya başladınız ve Firefox ile Safari üzerinde sorunsuz çalıştığını gördünüz, ama bir dakika, IE’yi unutmayalım. Ardından biraz HTML yazdınız ve tüm boşlukları doğru hesapladığınızdan emin olmak için kodunuzu tekrar tekrar kontrol ettiniz. Süper! Bitti! Üç gün sonra, projenin gereksinimleri değişti ve kendinizi site şablonunu yeniden kodlarken buldunuz. Hmm…

Şimdi, tüm CSS öğelerini yalamış yutmuş muhteşem bir tasarımcı olsanız, ya da bir PSD şablonu üzerinden çalıştığınız için tasarımın değişmeyeceğinden emin olsanız bile, bu öğrenebileceğiniz yeni şeylerin olmayacağı anlamına gelmiyor. İşte BluePrint tam bu noktada devreye giriyor ve size işinize yarayabilecek bir dizi aracı sunuyor.

Zamanınızı yenilikler için harcayın, tekrar etmek için değil

SenCSS Logo

SenCSs bir CSS iskeleti olup anahat iskeleti ve ızgara sistemler dışında her şeyi kontrol altına almak isteyen kullanıcılar için geliştirilmiştir. İskeletin desteklediği öğeler arasında:

• yaz tipleri ve boyutları
• dolgular (padding)
• marjlar (margin)
• renkler
• tablolar ve listeler
• başlıklar, alıntı blokları (blockquote) ve geri kalan her şey yer alıyor.

SenCSs‘nin formlar için de desteği bulunuyor. Bu sayede web tabanlı formlarınız daha güzel görünüyor. Framework’ün gelecek sürümlerinde daha iyi form desteği vaadediliyor.