bildirgec.org - Nicj - beğendikleri

Web Tasarımında Boşlukları Verimli Olarak Kullanmak

Nicj — Thu, 22 Jan 2009 08:07:00 GMT

Beyaz Boşluk (White Space) Nedir?

Basitçe anlatmam gerekirse beyaz boşluk bir tasarımın farklı elementleri arasındaki boşluktur - metinler, resimler, paragraflar, başlıklar, altlıklar, bağlantılar vb. Bu boşluk bir sayfa üzerindeki farklı elementler arasındaki boşluktur, harfler arasındaki boşluk, bir paragrafın satırları arasındaki boşluktur.

Beyaz boşluk bir web sitesinin kolayca taranabilmesini sağlar. Ziyaretçinin sitenizi ziyaret ettiğinde gördüğü metin miktarını azaltır ve bu vesileyle okumayı daha da kolaylaştırır. Sayfanıza kutular ve çizgiler gibi yeni elementler eklemenize gerek kalmadan tasarım elementlerinin görsel olarak ayrımını kolaylaştırır. Bu boşluklar doğru kullanıldığında sayfanızın temiz ve profesyonel görünmesini sağladığı gibi, sitenizin karmaşık görünmemesini, taze görünümünü korumasını sağlar.

Beyaz boşluk ne yazık ki güçlü bir web tasarımında en az dikkate alınan elementlerden birisidir. Beyaz boşlukların parlak ve ışıldayan bir tasarımının olmamasının, onun web sitesi için önemli olmadığı anlamına gelmez.

Bu konudaki araştırmamıza başlamadan önce gelin tasarımlarında beyaz boşlukları verimli bir şekilde kullanan bazı web sitelerine bir göz atalım.

1. Made By Sofa

Made By Sofa web sitesi, sitenin üst kısmında büyük boyutlu bir imaj ve imajın alt kısmında ana içerik ve navigasyon öğeleri kullanılarak güçlü bir tasarım oluşturmuş. Sofa başlıklar, paragraflar ve slogan elementlerini birbirinden ayırmak için beyaz boşlukları kullanmış. Aşağıdaki yakınlaştırılmış resme bir bakın:

Not: Gölgelenmiş alanlar beyaz boşlukları temsil etmektedir

Beyaz boşlukların bu şekilde kullanımı sayesinde site daha organize ve bölümlenmiş bir yapıya kavuşurken, site ziyaretçilerinin de içeriği okuyabilmesi ve site içeriğini hızlı ve verimli bir şekilde taraması (tabir-i caizse şöyle bir göz atması) kolaylaştırılmış.

2. Information Architects

Information Architects web sitesi de beyaz alanları kullanarak logo, metin, paragraflar ve başlıklar gibi bazı site elementlerini birbirlerinden ayırmış ve site tasarımının temiz ve sade olmasının önünü açmış. Aşağıdaki imaj, ilgili sitenin tasarımının yakından bir görünümü.

Not: Gölgelenmiş alanlar beyaz boşlukları temsil etmektedir

Beyaz Boşlukları Nasıl Verimli Bir Şekilde Kullanabilirsiniz?

Beyaz alanları verimli bir şekilde kullanabilmek bazen zorlu bir iş olabilir. Yazının devamında size bu alanda yardımcı olabilecek bazı ipuçlarını listelemeye çalıştım:

1. Satır Aralığı (Line Spacing)
Bir paragraf içerisindeki satırların aralığı, konu sitenin okunabilirliği ve taranabilirliğine geldiğinde en büyük farkı oluşturan en önemli unsurlardan birisidir. Eğer satırlar birbirlerine çok yaklaştırılırsa, o sayfanın içeriğini taramak neredeyse imkansız hale gelir. Eğer satırlar birbirinden çok uzaklaştırılırsa, o zaman ziyaretçileriniz satırların birbirlerinden bağımsız olduğu hissine kapılacaklar ve konuyu bütünleştiremeyeceklerdir.

Siz de satır aralıklarınızın yukarıda iki örneğin arasında bir yerlerde (ne çok az ne de çok fazla) olmasını isteyeceksinizdir. CSS'de satır aralıkları hakkında teknik bir makale arıyorsanız, o zaman CSS line-height değeri makalesi size yardımcı olacaktır.

2. Marjlar (Margin)
Marj, bir tasarımdaki elementleri çevreleyen boşluklara verilen addır. CSS Marjları bu boşluğu kendi avantajınıza kullanabilmeniz için mükemmel bir yoldur. Marjlarla çalışırken hatırlamanız gereken birkaç unsur bulunmaktadır.

Tutarlılık
Anahattınız üzerindeki marjlarınızın geneli birbirleri ile tutarlı olsun. Boşuklarınızda ne kadar tutarlı olabilirsiniz, siteniz o kadar profesyonel ve organize görünecektir. Marjları düşünürken hem dikey hem de yatay marjları göz önünde bulundurun, zira bunların her ikisinin de tasarımın geneline önemli etkileri bulunmaktadır.
Çok fazla olmasın
Marjlarınızı çok yüksek tutmayın. Birbirlerinden olması gerektiğinden fazla ayrılmış site elementleri, yukarıdaki satır aralığı örneğimizde de görebileceğiniz üzere içeriğin birbirleri ile olan ilişkisini kaybetmesine yol açabilir. Ayrıca bir sayfaya sadece sınırlı sayıda pikselin sığabileceğini de unutmayın, bu sebeple ekranın büyük kısmını boşluklarla da doldurmayın (tabi eğer sitenizin içeriği bu tip marjların kullanılmasını gerektirmiyorsa).
Çok az da olmasın
Unutmayın, burada beyaz alanları öğrenmeye çalışıyoruz, bu sebeple tasarımlarınızda en azından biraz beyaz boşluğun olmasına özen gösterin. Bir metnin resme, yan çubuğua, başlığa, navigasyon çubuğuna ya da sitenin diğer herhangi bir elementine çok yakın olması durumunda tasarımınız biraz sıkışık görünecektir ki bu da ziyaretçilerinizi rahatsız eder. Ziyaretçilerinizin biraz nefes alabilmesi için bu boşluklara özen gösterin.

3. Minimalist Tasarım Beyaz Boşluğa Eşit Değildir

Modern tasarım dünyasının problemlerinden biri de pek çok insanın beyaz boşlukları minimalist tasarımlarla bütünleştiriyor oluşu. Bu kesinlikle yanlıştır. Bir sitede çok miktarda metin bulunuyor olabilir ancak bu o sitenin kolayca okunabilir ve taranabilir bir web sitesi ol(a)mayacağı anlamına gelmez. Beyaz boşlukların doğru kullanımı ile bu pek tabi mümkündür.

Örnek olarak Smashing Magazine'yi ele alalım. Bu sitenin tabir-i caizse kulaklarından içerik fışkırıyor, bununla birlikte site yöneticileri sitenin taranılabilirliğini ve okunabilirliğini en yüksek seviyede tutmayı başarabilmişler. Site yönetimi bunu renklerin ve metin boyutlarının doğru seçimi ile beyaz boşlukların doğru kullanımı ile başarmışlar.

Yine aşağıda site tasarımına yakından bir bakış atalım:

Site tasarımında metinlerle resimlerin, navigasyon elementleri ile içerik ve yan barın arasındaki görsel ayrımı fark edebildiniz mi? İşte bu tümüyle beyaz boşlukların doğru kullanımı ile sağlanmış durumda.

4. Başlıklar (Headings)
Bşlıklar site içeriğinizi yönetilebilir parçalara ayırabilmek için mükemmel bir yoldur. Bu makaleyi okurken 4 farklı başlığın kullanıldığını görmüşsünüzdür: H1, H2, H3, H4. Bu başlıklar büyük, koyu, altı çizili "bölüm başlıkları"ndan oluşuyor ve siz bu makale süresince bunu görebiliyorsunuz.

Çevirmenin notu: Makalenin orjinal yazarı kendi site tasarımında başlıkları kullanım şekline göre makalenin bu kısmını yazmış. Bildirgec üzerinde, üzülerek söylüyorum, başlık yönetimi beni pek tatmin etmiyor. Makalenin bu kısmında adı geçen kullanım örneğini görmek için yazının sonunda göreceğiniz kaynak bağlantısına tıklayınız.

Burada yapmanız gereken başlıkların alt ve üst kısımlarındaki boşluğa ve bu boşlukların makalenin taranabilirliğini nasıl etkilediklerine dikkat etmektir. Örneğin, sitenin H2 etiketlerinde (ikinci en büyük başlık) metin ile alt çizgi arasında 5 piksel boşluk bulunuyor. Ayrıca yine aynı etiketin üst ve alt kısmında 15'er piksellik marj yer alıyor. Bu beyaz boşluklar makalenin bölümlerini sizin görsel olarak ayırabilmenizi ve içeriği tararken onları kolayca seçebilmenizi sağlıyor.

Bu boşlukları oluşturarak içeriğin taranması büyük ölçüde kolaylaştırılırken, ziyaretçinin hangi imi ya da hangi başlığı okumak istediğine karar vermesi kolaylaşıyor. Eğer başlıklar doğru kullanılmamış olsaydı, okur tüm makaleyi okumak zorunda bırakılırdı ki bu da bu tip uzun makaleler için okuyucu açısından tam bir işkencedir.

Eğer siz de benim H2 etiketini nasıl stillendirdiğimi merak ediyorsanız, o zaman aşağıdaki kodu style.css dosyanıza kopyalamanız yeterli.


h2 {
font-size: 28px;
padding-bottom: 5px;
border-bottom: 3px solid #2a2a2a;
letter-spacing: -1px;
color: #2A2A2A;
margin-top: 15px;
margin-bottom: 15px;
}

5. İmajlar

İmajlarla metnin arasında kullanacağınız boşluk, bir tasarımın güzel ya da çirkin olup olmayacağını belirleyebilecek kadar önemlidir. Eğer kelimeler imaja çok yakın olursa, o zaman içerik çok karmaşık görünecek ve okunması da bir o kadar zorlaşacaktır. Eğer kelimeler imajdan çok uzak olurlarsa, o zaman birbirleri ile olan bağlantısı kopacaktır.

Web Design Tuts websitesinde imajlarımı organize etmek ve onların görsel olarak mümkün olduğu kadar çekici olabilmesini sağlayabilmek için bazı özel imaj sınıfları kullanırım. Ne zaman bunun gibi bir makale yazsam, bir imaj için aşağıdaki kodu kullanırım.

<img class="imagelist" src=# />

Bu imajı da CSS ile stillemek için aşağıdaki yöntemi kullanırım:


.imagelist {
border: 5px solid #cacaca;
margin-top: 15px;
margin-bottom: 15px;
}

Kullandığım imajlar ile başlıkların üst ve alt kısımlarında 15'er piksellik boşluklar bırakarak tutarlılığı nasıl koruduğumu fark edebildiniz mi?

Modern Web Tasarımında Beyaz Alanlar
Eğer makaleyi buraya kadar okuduysanız, o zaman beyaz boşluğun neden önemli olduğunu artık anlamışsınızdır: Siteyi temiz göstermek, okuyucular için okunmasını kolaylaştırmak ve sitenin daha profesyonel görünmesini sağlamak bunlardan sadece birkaçı. Yine makale süresince beyaz alanların birbirleri ile tutarlı marj, metin ayrımı ve imajlarla başlıkların görsel ayrımı için kullanıldığından da bahsetmiştim. Ancak halen beyaz alanların "iyi" kullanımının ne olduğunu merak ediyor olabilirsiniz.

Aşağıda listelediğim web siteleri, beyaz alanların doğru kullanılarak ziyaretçileri ile iletişimi güçlendiren web sitelerine iyi birer örnektir.

1. Surfstation

Kullanılan beyaz alanın nasıl site içeriği ile yan çubuğu birbirinden ayırdığına dikkat edin. Site ziyaretçilerinin siteyi taramasını kolaylaştıran ve ihtiyaçları olan içeriği kolayca bulabilmelerini sağlayan yegane unsur işte budur.

2. Jason Santa Maria

Jason'un web sitesi çizgilerin ve beyaz boşlukların zekice kullanılmış kombinasyonu ile içeriğini temiz ve verimli bir şekilde ziyaretçilerine aktarabiliyor.

3. Digital Mash

Avustralyalı Tasarımcı Rob Morris'ın web sitesi Digital Mash, navigasyon, ana resim ve sayfanın alt kısmında bulunan dört adet içerik alanını içeren çok sade bir tasarımı kullanıyor. Marjların nasıl birbirleri ile uyumlu ve içeriğin nasıl kolayca okunabilir olduğuna ve metinler arasındaki boşluklar ile başlıkların ve simgelerin nasıl güzel kullanılmış olduğuna bir bakın.

4. Odd Web Things

Metin tabanlı bir web sitesi olan Odd Web Things, beyaz boşlukları kendi logolarını yan çubuktan, yan çubuğu kendi portfolyalarından ve portfolyalarından da kendi bloglarını ayırmak için kullanmış.

5. Vitor Lourenco

Vitor'un sitesi tümüyle beyaz bir arkaplan üzerinde oraya buraya yerleştirilmiş tipografi kullanmış. Koyu navigasyon, güçlü bağlantılar ve kullandığı sade renk şeması bu websitesini işler kılmış.

Beyaz Alanlar'a Dair @Twitter Görüşü

Bu makaleyi yazarken beni Twitter üzerinden takip eden bazı kişilerin görüşlerini aldım. Onlara şu soruyu sordum: "Bir web tasarımında beyaz alanlar sizce neden önemlidir?" İşte onların cevapları:

@Brendan: - Beyaz alanlar! Bence beyaz alanların doğru kullanılması, odağın içeriğin kendisine çekilebilmesi ve profesyonel görünüm için önemlidir.

@Brandon: - Önemlidir çünkü bilgi ve tasarım elementleri, büyük bir karmaşa yaratmaktansa birbirleri ile ilişkilendirilebilir.

@sthursby: - Bir ziyaretçiyi web sitenize bağlayabilmek için sadece birkaç saniyeniz varken, o süreyi ziyaretçinin aradığı içeriğe kolayca ulaşabilmesi için doğru kullanmak gerek.

@Hyermish - Beyaz alanlar, sadeliğin bir illüsyonu olmakla birlikte bazen karmaşıklığı da giderebilir.

@Drew_Douglass - Benim beyaz alanları kullanmaktaki ana sebebim, odağı sayfanın bir elementine çekmek ve bakışları o içeriğe yönlendirmektir.

Kaynak: Web Design Tuts

CSS ve Kullanılabilirlik Üzerine Yazdığım Diğer Yazılar

Bu yazı Nicj tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği

Nicj — Sat, 18 Jul 2009 08:49:00 GMT

Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.

1- CSS Anahatları Oluşturmak

CSS Anahatları Oluşturmak: PSD'yi XHTML'ye dönüştürmek için en iyi dersler

CSS Anahatları: 40+ Ders, İpucu, Demo ve en iyi yöntemler

2- Stilleme ve Listeler Kullanma

3- Kutu Modeli ve Pozisyonlamayı Anlamak

4- Daha iyi CSS Tipografisi

5- Formları Stillemek

6- CSS Çatılarını (Frameworklerini) Kullanmak

En çok kullanılan 12 CSS frameworkü ve onları nasıl anlayacağınız.
Web tasarımı için hangi CSS ızgara frameworkünü kullanmalı?
CSS Frameworkleri + CSS Sıfırlama: Sıfırdan tasarlama.

7- Optimize Etme ve En İyi deneyimler

8- CSS Hileleri ve İpuçları

9- CSS Düğmeleri, Kutuları ve Yuvarlatılmış Köşeler

Kaynak: acomment.

CSS İle İlgili Yazdığım Diğer Yazılar

Bu yazı Nicj tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Bir Saldırı kaynağı: fillbest.com

Nicj — Tue, 11 Nov 2008 13:16:00 GMT

Web sitelerinin kaynaklarını tüketmek, onlara zarar vermek amaçlı botnet'lerin sayısı giderek artıyor. Bu amaca yönelik botlardan bir tanesi de fillbest.com. Bu bot sitenizi amerika (ABD) tabanlı tıklamalara boğuyor ve bant genişliğinizi (bandwidth) hızla tüketiyor. Sitede forum kullanımı varsa spam saldırıları (attack) da yapabiliyor.

Fillbest.com, siteme yaptığı referans ziyaretlerinin sıklığı, amerika tabanlı olması ve aslında böyle bir sitenin olmaması ile dikkatimi çekti. Bu bot ile karşılaşanların dikkat etmelerini, kaynaklarının tüketilmesi nedeni ile paralarının boşa gitmemesi için önlem almalarını öneriyorum.

Bu ve benzeri bot saldırı sitelerinin engellemenin htaccess dosyası ile çözümü şu şekilde:

RewriteEngine on
RewriteCond %{HTTP_REFERER} ^http://.*fillbest\.com [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://.*example\.com [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://.*saldirisitesi\.com [NC]
RewriteRule .* - [F]

Bu önlem ile artık bu kaynağı fillbest gözüken botlardan ziyaretçi almayacaksınız ve size ait resim vb. dosyaları kullanamayacak.

.htaccess dosyası ve özellikleri ile ilgili bilgi almak isterseniz şuraya bakabilirsiniz.

Bu yazı Nicj tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage