Tasarım

Boşluk Kullanımı: Daha Anlaşılır Tasarımlar Oluşturmak

Öğeler arasındaki mesafe, kenar payı ve satır aralıklarıyla bir tasarımı daha anlaşılır hâle getirmek; boşluğu bilgi ilişkilerinin parçası olarak kullanmak.

Tasarım kategorisine özel geometrik SVG kapak

Bir duyuruda başlık, tarih, açıklama ve iletişim bilgileri birbirine çok yakın durduğunda bütün içerik tek bir blok gibi görünebilir. Her bilgi sayfada bulunur, fakat nerede başladığı ve hangi öğeyle ilişkili olduğu kolayca anlaşılmaz. Aynı içerik uygun aralıklarla düzenlendiğinde daha rahat taranabilir. Boşluk kullanımı, tasarımın bu ilişkileri görünür kılan araçlarından biridir. Yeni bir renk veya çerçeve eklemeden de bölümlerin ayrılmasını ve ilgili öğelerin bir arada görünmesini sağlayabilir.

Boşluk hakkında düşünmek, bütün sayfayı seyrek hâle getirmek değildir. İçeriğin miktarı, görevleri ve kullanılacağı alan önemlidir. Bir afiş, uzun bir yazı ve küçük bir bilgi kartı farklı ölçüler gerektirir. Bu yazı; öğeler arası mesafe, iç boşluk ve kenar payları üzerinden sade bir yaklaşım sunuyor. Her tasarıma aynı ölçüyü uygulamak yerine, boşluğun hangi ilişkiyi anlatmasını istediğinizi belirlemek daha iyi bir başlangıçtır. Görsel kararın amacı, içerikle birlikte anlaşılır olmalıdır.

Boşluğu ilişkileri göstermek için kullanın

Bir başlıkla ona ait açıklama birbirine yakın, başka bir bölümden daha uzak durabilir. Bu düzen, hangi öğelerin birlikte okunacağını gösterebilir. Eğer bütün aralıklar aynıysa sayfadaki gruplar belirsizleşebilir. Önce içerikteki ilişkileri tanımlayın: Bu tarih hangi etkinliğe ait, bu açıklama hangi görseli anlatıyor ve bu düğme hangi işlemi yapıyor? Boşluk kararları bu sorulara destek olabilir. Tasarım, okuyucunun bütün bağlantıları kendisinin tahmin etmesini gerektirmemelidir.

Yakınlık ve ayrım birlikte çalışır

İki öğeyi yakınlaştırırken başka bir öğeyle arasındaki mesafeyi de düşünün. Yalnızca tek bir aralığı değiştirmek, bütün düzen içinde beklenen etkiyi yaratmayabilir. Örneğin başlık açıklamaya yaklaşsa da önceki bölümle arasında hiç mesafe yoksa ilişki yine karışabilir. Bir grup içindeki boşluklarla gruplar arasındaki boşlukların farklı görevleri vardır. Bu ayrımı göz önünde tutmak, kutular veya çizgiler eklemeden düzen oluşturmanın temel yollarından biridir.

Kenar payı, içeriğe bir alan verir

Metnin sayfanın veya kartın kenarına fazla yaklaşması sıkışık bir görünüm oluşturabilir. Kenar payı, içeriğin bulunduğu sınırla ilişkisidir. Bir kart içindeki başlık ve açıklama için benzer paylar kullanmak, ortak bir hizalama yaratabilir. Ancak bütün öğelere aynı payı zorunlu olarak uygulamak gerekmez. Görselin kenara kadar uzandığı bir kartta metin alanı ayrı bir düzen taşıyabilir. Önemli olan bu kararın rastgele değil, açık bir amaçla verilmesidir.

Bir sayfada dış kenar payı ile içerideki öğe aralıklarını birlikte değerlendirin. Dış pay çok dar, iç aralıklar çok genişse denge farklı görünebilir. Tersi durumda içeriğin kendisi küçük bir alana sıkışabilir. Tasarımı normal boyutta ve gerçek içerikle gözden geçirin. Büyük çalışma alanında rahat görünen pay, küçük telefonda fazla alan tüketebilir. Ölçünün görevi değişmediği hâlde değeri ekran ve içerik koşullarına göre uyarlanabilir.

Tipografik boşlukları ayırın

Harfler, satırlar, paragraflar ve bölümler arasında farklı türde aralıklar bulunur. Bunların hepsi aynı işi yapmaz. Satır aralığı paragraf içindeki okumaya, paragraf aralığı düşünceler arasındaki geçişe, bölüm aralığı daha büyük yapı değişimine destek olabilir. Bir sorunu yalnızca yazıyı küçülterek çözmeye çalışmak yerine bu ilişkileri inceleyin. Metin sıkışık görünüyorsa satır veya paragraf düzeni etkili olabilir. Her durumda tek bir ölçüyü değiştirmek yeterli olmayabilir.

Başlığın hangi metne ait olduğu

Bir alt başlık önceki paragrafla çok yakın, altında başlayan metinle daha uzak duruyorsa göz bağlantıyı yanlış kurabilir. Başlık öncesindeki ve sonrasındaki boşluğu birlikte kontrol edin. Aynı düzeydeki başlıkların benzer aralıklar taşıması, belgenin yapısını korur. Çok uzun bir başlık iki satıra bölündüğünde de düzeni gözden geçirin. Yalnızca kısa örnek başlıklarla yapılan tasarım, gerçek içerikte farklı bir ilişki yaratabilir. Metnin kendisi boşluk kararının parçasıdır.

Az sayıda tutarlı ölçü belirleyin

Her öğe için rastgele yeni bir aralık seçmek, uzun bir sayfada tutarsızlık oluşturabilir. Bunun yerine küçük, orta ve geniş aralık gibi birkaç temel ölçü tanımlanabilir. Bu isimler evrensel değerler değildir; kendi tasarımınızın ilişkilerini anlatır. Kart içindeki küçük ayrım ile iki ana bölüm arasındaki geniş ayrım farklı görevler taşır. Sınırlı bir ölçü seti, sayfayı genişletirken aynı mantığı sürdürmenizi kolaylaştırabilir. Ancak gerektiğinde içerik özel bir düzen isteyebilir.

Tutarlılık, bütün öğelerin aynı mesafede olması demek değildir. Aynı görevi taşıyan öğelerin benzer biçimde davranmasıdır. Bir listede maddeler arası aralık aynı olabilir; listenin önceki paragrafla mesafesi ise başka olabilir. Bu ayrımı açıklayabildiğinizde düzenin kuralları daha anlaşılır hâle gelir. Tasarım büyüdüğünde yeni bir bölüm eklemek de kolaylaşır. Her seferinde “göze iyi gelen” rastgele bir mesafe seçmek yerine, öğenin hangi gruba ait olduğunu düşünün.

Yoğunluğu içeriğin amacına göre ayarlayın

Bir bilgi tablosu ile bir tanıtım sayfası aynı yoğunluğu taşımaz. Tablo, karşılaştırılacak çok sayıda değeri yakın tutabilir; tanıtım alanı ise tek mesajı öne çıkarmak için daha geniş boşluk kullanabilir. Her yerde büyük aralıklar kullanmak, bilgi bulmayı da uzatabilir. Kullanıcının görevi nedir, ona bakın. Bir adresi hızlıca görmek, uzun bir yazıyı okumak veya farklı seçenekleri karşılaştırmak ayrı kullanım biçimleridir. Boşluk, görevi destekleyecek yoğunluğu oluşturmalıdır.

Bir sayfa çok kalabalık görünüyorsa önce içerik önceliklerini inceleyin. Gerçekten gerekli olmayan tekrarlar var mı? Aynı mesaj farklı yerlerde gereksiz biçimde yeniden veriliyor mu? Boşluk artırmak bazı sorunları çözebilir, fakat içerik yükünü tek başına yönetmez. Tasarım ve içerik kararları birlikte çalışır. Her şeyi aynı önemde tutup sadece aralık eklemek, dikkat sırasını netleştirmeyebilir. Önce neyin birlikte, neyin ayrı ve neyin öncelikli olduğunu belirleyin.

Mobil görünümde boşluğu yeniden düşünün

Dar ekranda büyük dış paylar, metnin kullanım alanını azaltabilir. Buna karşılık payları tamamen kaldırmak da sıkışık bir görünüm yaratabilir. Aynı ilişkinin küçük ölçülerle nasıl korunacağını inceleyin. Masaüstünde yan yana duran iki kart mobilde alt alta geçtiğinde aralarındaki mesafe farklı bir görev üstlenir. Bir satır içindeki ayrım, artık iki içerik bloğu arasındaki ayrım olabilir. Bu nedenle sadece genişliği küçültmek değil, yerleşim değişince ilişkileri yeniden görmek gerekir.

Düğmeler veya bağlantılar birbirine çok yakın olduğunda dokunma sırasında seçim zorlaşabilir. Öğenin kendi boyutu ve çevresindeki alan birlikte değerlendirilmelidir. Tasarım dosyasında rahat görünen bir aralık, gerçek telefonda farklı hissedilebilir. Sayfayı parmağınızla kullanmayı, metni büyütmeyi ve uzun içeriklerle dolaşmayı deneyin. Kontrolün amacı yalnızca ilk ekranın güzel görünmesi değildir. Günlük kullanım boyunca ilişkilerin ve seçimlerin açık kalması önemlidir.

Sonuç

Boşluk, içerikteki ilişkileri görünür kılan bir tasarım aracıdır. İlgili öğeleri bir arada, farklı bölümleri ayrı göstermek için kullanılır. Kenar payı, satır aralığı ve bölüm mesafesi farklı görevler üstlenir. Az sayıda tutarlı ölçüyle başlayıp gerçek içerik ve farklı ekranlarda kontrol edin. Bir tasarımın daha anlaşılır hâle gelmesi bazen yeni öğe eklemekten değil, mevcut öğelere doğru alanı vermekten geçer.