Bir web sayfası aynı anda başlık, açıklama, görsel, örnek iş, buton ve yardımcı bilgi taşıyabilir. Bu öğelerin hepsi doğru olsa bile aralarındaki ilişki belirsizse sayfa yorucu görünür. Grid ve görsel hiyerarşi, bilgiyi yalnız düzgün hizalamak için değil, hangi parçanın ne zaman okunacağını kurmak için kullanılır. İsviçre grafik tasarımından alınabilecek değerli derslerden biri, düzenin mesajın anlaşılmasına nasıl hizmet ettiğidir.
Josef Müller-Brockmann’ın Musica Viva afişi bu düşünceyi incelemek için somut bir referans sunar. Tarihsel afiş ile web arayüzü aynı kullanım koşullarına sahip değildir. Buradaki bağlantı doğrudan bir tarihsel köken iddiası olarak değil, ortak tasarım sorularını karşılaştıran bir yorum olarak kuruluyor. Sabit bir baskı yüzeyiyle ekran boyutu değişen, etkileşimli bir site arasında hangi ilkelerin aktarılabileceğini düşünmek gerekir.
Grid, görünür çizgilerden daha fazlasıdır
Grid, öğelerin konumunu ve ilişkisini belirleyen bir düzenleme sistemi olarak düşünülebilir. Sütunlar, kenar boşlukları, aralıklar ve hizalama çizgileri birlikte çalışır. Tasarım tamamlandığında bu çizgiler çoğu zaman görünmez; etkileri bilgi gruplarının düzeninde hissedilir. İki başlığın aynı başlangıç noktasında bulunması, farklı kartların ortak ritim taşıması veya açıklamaların aynı genişlikte ilerlemesi bu yapının sonuçları olabilir.
Grid kullanmak bütün öğeleri eşit yapmak anlamına gelmez. Önemli bir içerik birkaç sütunu kaplayabilir, yardımcı bilgi daha dar bir alanda durabilir. Bazı yerlerde sistemin dışına çıkmak da bilinçli bir vurgu yaratabilir. Ancak istisna, kuralın ne olduğunu bildiğinizde anlamlıdır. Her öğe farklı bir başlangıç ve aralık kullanıyorsa güçlü bir vurgu yerine ilişkisiz bir yüzey oluşabilir.
Musica Viva afişinden ne okuyabiliriz?
MoMA, Josef Müller-Brockmann’ın Musica Viva çalışmasını 1958 tarihli, linol baskı ve tipo baskı teknikleriyle üretilmiş bir afiş olarak kaydeder. Farklı yıllarda aynı konser dizisi için tasarlanmış işler bulunduğundan, görülen her Musica Viva afişini tek tarihle anmak doğru değildir. Bu yazının tarihsel referansı, MoMA’nın 7233 numaralı eser kaydıdır.
Eseri incelerken biçimlerin ve metnin yüzeyde nasıl bir ilişki kurduğuna bakabilirsiniz. Görsel düzenin yoğun ve sakin bölgeleri, okuyucunun bakışını farklı biçimlerde yönlendirebilir. Buradan web için çıkarılabilecek soru şudur: bir sayfada bütün alanlar aynı yoğunlukta olmak zorunda mı? Her bölüm aynı miktarda bilgi ve aynı görsel güç taşıdığında ana mesajın nerede olduğu zor anlaşılabilir.
Hiyerarşi, okuma sırası için bir öneridir
Hiyerarşi yalnız başlığı büyütmekten oluşmaz. Başlık, alt açıklama, örnek ve eylem arasında bir sıra kurar. Kullanıcı bu sırayı her zaman birebir izlemez; fakat tasarım hangi ilişkilerin önemli olduğunu işaret eder. Büyüklük, renk, kontrast, konum ve boşluk birlikte çalışır. Yalnız font büyüklüğüyle çözüm aramak, birbirine çok yakın önem düzeyleri üretip sayfayı gürültülü yapabilir.
Bir hizmet sayfasında ilk bölümün görevi hizmetin ne olduğunu ve kime uygun olduğunu anlatmak olabilir. Sonraki bölüm teslimleri açıklar; örnek işler bu açıklamanın nasıl uygulandığını gösterir; iletişim bağlantısı kullanıcının sonraki adımı seçmesini sağlar. Bu görevler ayrıldığında sayfa daha çok içerik taşıyabilir. Ayrılmadığında bütün bilgiler tek bir uzun tanıtım metninde sıkışabilir.
Bir hizmet sayfasını yeniden düşünmek
Temsili bir mimarlık ofisi için web sayfası düşünelim. Büyük proje görseli, güçlü bir atmosfer kurabilir; fakat ofisin hangi işleri yaptığı metinde anlaşılmıyorsa ziyaretçi yalnız görüntülere bakar. Başlığın yanında kısa bir kapsam açıklaması, altında ilgili proje türleri ve daha sonra detaylı örnekler bulunabilir. Grid, bu parçaların aynı marka dili içinde ayrı görevler taşımasını sağlar.
Her projeyi aynı kartta aynı miktarda metinle anlatmak zorunlu değildir. Öne çıkan proje daha büyük bir alan alabilir; diğerleri ortak bir listede sunulabilir. Karar, tasarımın estetik tercihiyle birlikte içerik önceliğine dayanmalıdır. “Burası boş kaldı” diye ilgisiz öğe eklemek yerine boşluğun bir bölümün sınırını ve önemini nasıl anlattığını inceleyin.
Masaüstünden mobile: kuralı taşımak
Masaüstünde yan yana duran üç alanın mobilde aynı genişlikte korunması genellikle mümkün değildir. Önemli olan sütun sayısını aynen taşımak değil, içerik ilişkisini korumaktır. Başlıkla açıklama ayrı bloklara geçebilir; örnek iş görseli metnin altına gelebilir; yardımcı bilgi açılır bir bölümde sunulabilir. Bu kararlar içeriğin hangi sırada anlaşılması gerektiğine göre verilir.
Mobilde görseli küçültüp metni alt alta dizmek tek başına yeterli bir uyarlama değildir. Kartların uzunluğu, bağlantıların dokunulabilirliği ve bölüm aralıkları yeniden değerlendirilmelidir. Ayrıca aynı içerik farklı uzunluklarda olduğunda düzen nasıl davranıyor diye bakılmalıdır. İki kelimelik başlıkla çalışan grid, altı kelimelik başlıkta kontrol edilmediyse gerçek içerik karşısında zorlanabilir.
Tutarlılık ve esneklik arasındaki denge
Tekrar eden öğeler için ortak kurallar kullanmak, ziyaretçinin siteyi öğrenmesini kolaylaştırabilir. Hizmet kartlarının aynı bilgi sırasını taşıması veya bağlantıların benzer görünmesi bu tür kararlardır. Ancak her bölümü aynı kalıba sokmak anlatımı tekdüze hâle getirebilir. Proje hikâyesi, teknik açıklama ve kısa iletişim bölümü farklı yoğunluklar isteyebilir. Tutarlılık, bütün bölümlerin birbirinin kopyası olması değildir.
Tasarım sisteminde bu dengeyi bileşenler üzerinden kurmak mümkündür. Ortak başlık yapısı, kart, buton ve görsel alanı temel kuralları taşır. İçerik gerektirdiğinde farklı yerleşimler bu bileşenleri başka ilişkilerde kullanabilir. Böylece her sayfa sıfırdan tasarlanmaz ama bütün sayfalar da tek bir uzun şablon gibi görünmez. Kapsam, ihtiyaç duyulan sayfa türlerine göre belirlenir.
Hangi grid hataları okunurluğu bozar?
Birbiriyle ilgili öğelerin uzak, ilgisiz öğelerin yakın durması ilk sorunlardan biridir. Kullanıcı başlığın hangi açıklamaya ait olduğunu anlamak için ek çaba harcayabilir. İkinci sorun, her bölümde farklı bir kenar boşluğu kullanmaktır. Bu düzensizlik bazen bilinçli bir etki yaratabilir; fakat çoğunlukla içeriklerin ortak bir yapıya ait olduğunu zayıflatır.
Üçüncü sorun, çok dar metin alanlarıdır. Sık satır kırılması açıklamayı zor okunur hâle getirebilir. Çok geniş metin alanlarında ise gözün satır başını bulması zorlaşabilir. Uygun genişlik; yazı boyutu, içerik türü ve ekran koşullarına bağlıdır. Bu nedenle tek bir sayı bütün sayfaların çözümü değildir. Gerçek metin ve gerçek ekran üzerinde kontrol yapmak gerekir.
Sadece güzel hizalamaya göre onay vermeyin
Bir arayüzü değerlendirirken önce hangi bilginin ilk dikkat çektiğini sorun. Bu gerçekten öncelikli bilgi mi? Sonra kullanıcının hangi eyleme ulaşabildiğini kontrol edin. Bir hizmetin kapsamı iyi anlatılıyor ama örnek işe veya iletişime geçiş bulunamıyorsa sayfa görevini tamamlamayabilir. Kompozisyonun düzenli görünmesiyle yolculuğun anlaşılması farklı kontrollerdir.
İçeriği küçük bir senaryoyla incelemek yararlıdır. “Bu işletmenin ambalaj tasarımı yaptığını anlamak ve örnek görmek istiyorum” gibi bir hedef seçin. Sayfanın bu hedefi hangi başlık, bağlantı ve görselle desteklediğine bakın. Bu inceleme estetik tartışmayı somutlaştırır. Renk veya boşluk hakkındaki yorum, görevle ilişkili olduğunda daha uygulanabilir geri bildirim olur.
Tarihsel referansı nasıl kullanmalı?
İsviçre grafik tasarımını yalnız belirli bir font, sert grid veya siyah beyaz görünüm olarak okumak eksik kalır. İlginç olan, bilgi ve biçim arasında kurulan ilişkidir. Markanızın tonu farklı olabilir; daha sıcak renkler, daha serbest görseller veya daha duygusal bir anlatım gerekebilir. Düzen düşüncesi bunlarla birlikte çalışabilir. Referans, markanın karakterini silmek zorunda değildir.
Bu yazıdaki çizimler tarihi afişin kopyası değildir. Sütun, hizalama, hiyerarşi ve ekran uyarlamasını anlatan özgün şemalardır. Musica Viva’nın kendisini resmi koleksiyon bağlantısında inceleyebilirsiniz. Kaynağı görmek, bir tasarım ilkesinin hangi gözlemden çıkarıldığını değerlendirmenizi sağlar. Son uygulamanın kararı ise markanızın içeriği, kullanıcı ihtiyacı ve teknik koşullarıyla verilir.
Uzun içerikle gridin sınırlarını denemek
Bir hizmet sitesinde üç kartın aynı satırda bulunduğunu düşünelim. İlk kartın başlığı iki kelime, ikincisinin altı kelime ve üçüncüsünün açıklaması oldukça uzun olsun. Kısa örneklerle güzel görünen düzen, gerçek içerikte dengesizleşebilir. Gridin görevi bu farkları yok saymak değil, içeriklerin ilişkisinin korunmasına yardımcı olmaktır.
Önce başlık ve açıklama görevlerini ayırın. Kartın tamamının aynı yükseklikte olması gerekiyorsa bunun nedenini belirleyin. Bazı alanlarda ortak hizalama karşılaştırmayı destekler; başka bir yerde metni gereksiz uzatabilir. Her içerik için eşit kelime sayısı üretmek yerine düzenin hangi çeşitliliği taşıyabileceğini incelemek daha yararlıdır.
Musica Viva afişindeki alan ilişkilerine yeniden bakıldığında, güçlü geometrik düzenin bütün öğeleri eşit göstermediği görülür. Bu gözlem web tasarımında da düşünülebilir. Ana mesaj, destekleyici açıklama ve yönlendirme farklı görsel ağırlık taşıyabilir. Grid, hiyerarşiyi ortadan kaldıran bir kutulama sistemi değildir; farklı görevleri ilişkilendiren bir yapıdır.
Mobil sürümde sütunların alt alta geçmesi tek başına yeterli olmayabilir. Görselin ve metnin hangi sırayla okunacağı değerlendirilir. Masaüstünde sağda bulunan kanıt, mobilde ana eylemden sonra kalırsa okuma ilişkisi değişebilir. Responsive tasarım, alanın küçülmesiyle birlikte bilgi sırasının da düşünülmesini ister.
Grid görünür çizgilerden mi oluşur? Tasarımda yardımcı çizgiler bulunabilir; finalde görünmeleri gerekmez. Hizalama, sütun ve boşluk ilişkileri düzeni taşır. Kullanıcı çizgileri görmeden öğelerin ilişkisini anlayabilir. Gridin kalitesi, çizgi sayısından çok gerçek içeriğin okunmasına katkısıyla değerlendirilir.
Her sayfa aynı sütun düzenini mi kullanmalı? Ortak sistem içinde farklı düzenler hazırlanabilir. Hizmet açıklaması, proje görselleri ve tablo başka alanlar isteyebilir. Temel boşluk ve tipografi ilişkisi korunduğunda bütünlük sürdürülür. Bütün sayfaları tek kompozisyona zorlamak, görevlerini zayıflatabilir.
Grid kullanmak tasarımı sıkıcı yapar mı? Düzen, güçlü görseller ve bilinçli hiyerarşiyle birlikte çalışabilir. İstisnalar da bir sistem içinde seçilebilir. Amaç her öğeyi eşit kutuya yerleştirmek değil, ilişkiyi anlaşılır kılmaktır. Konuya özel fotoğraflar ve farklı bilgi ağırlıkları, ortak yapı içinde çeşitlilik oluşturabilir.
Bu yaklaşımı briefte nasıl tarif ederim? “İsviçre tarzı olsun” yerine hangi sorunun çözülmesini istediğinizi belirtin. Kartlar karışıyor, başlıklar okunmuyor veya mobil sıra belirsiz olabilir. Tarihsel referans, bu problemi konuşmak için bir örnek sağlar. Final düzen, sitenizin gerçek metin ve görselleriyle denenmelidir.
Markanız için bir düzen kontrolü
Mevcut sitenizde üç farklı sayfayı yan yana açın. Başlıkların, açıklamaların ve eylem alanlarının ortak mantığını karşılaştırın. Tek bir sayfa düzgünken diğerlerinde farklı kurallar mı oluşmuş? Mobilde içerik sırası korunuyor mu? Uzun metinler ve farklı görsel oranları aynı sistemde çalışıyor mu? Bu inceleme yeniden tasarım ihtiyacının nerede başladığını gösterebilir.
Web UI/UX çalışmalarımı bu ilişkileri görmek için inceleyebilirsiniz. Sitenizde içerikler doğru olmasına rağmen ziyaretçiye dağınık görünüyorsa web tasarım ve yazılım hizmetimin kapsamını değerlendirip mevcut sayfalarınızı benimle paylaşın. İlk hedef, görünmez düzeni kullanıcı için anlaşılır bir yolculuğa dönüştürmektir.
Kaynaklar
- MoMA: Josef Müller-Brockmann, Musica Viva, 1958
- Tarihsel afişten web arayüzlerine kurulan ilişki ve tüm şemalar özgün editoryal analizdir.
Kapak görseli: Josef Müller-Brockmann, Musica Viva, 1958 / MoMA. Görselin orijinal kaynağı.