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.
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 TutsCSS ve Kullanılabilirlik Üzerine Yazdığım Diğer Yazılar
* Mobil Web’i Nasıl Herkes İçin Daha İyi Yaparız?* 10 Kullanışlı Web Uygulaması Arayüzü Tekniği* Kullanıcı Geri Bildirimleri İle Sitenizin Kullanılırlığını Arttırmak* Web Tasarımcılarının Kodlama Yapmalarının 6 Gereği* Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği* Modern CSS’de Altın Oran* Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu (Progress Bar)* Web Tasarımcıları İçin 10 Kullanılırlık İpucu* Web Tasarımında Altın Oran* BluePrint CSS Framework’ünü Kullanmak* jQuery’siz, mootools’suz Basit Sekmeli İçerik Oluşturalım* SenCSS: Layout Dışındaki Herşey İçin CSS Framework’ü
