Bir tasarımın kötü göründüğünü çoğu zaman birkaç saniye içinde anlıyorum. Fakat “Nesi kötü?” diye sorulduğunda cevap her zaman bu kadar hızlı gelmiyor.

Renkler uyumludur. Kullanılan font kötü değildir. Görseller kaliteli, butonlar düzgün, sayfa da mobil uyumludur. Teknik tarafta belirgin bir sorun görünmez. Buna rağmen sonuç bir türlü oturmamıştır.

Böyle durumlarda tasarımı toparlamak için genellikle renklerle oynamaya başlanır. Arka plan değiştirilir, başlık büyütülür, köşeler biraz daha yuvarlatılır. Birkaç gölge ve dekoratif şekil eklenir. Tasarım düzelmek bir yana daha da karmaşık hâle gelir.

Çünkü sorun çoğu zaman renklerde değildir. Sorun, sayfadaki parçaların birbirleriyle kurduğu ilişkidedir.

Kod Çalışıyor, Tasarım Çalışmıyor

Frontend tarafında bir bölümü hazırlarken teknik olarak kontrol ettiğimiz şeyler bellidir. Grid yapısı doğrudur, bileşenler taşmıyordur, mobil görünüm bozulmuyordur ve buton görevini yerine getiriyordur.

Bunların hepsi gereklidir. Ama iyi bir tasarım için yeterli değildir.

Bootstrap kullanılarak kurallara tamamen uygun bir alan hazırlanabilir. Container doğru yerde, kolonlar doğru genişlikte olabilir. Buna rağmen bölümün üstünde gereğinden fazla, altında ise neredeyse hiç boşluk yoksa sonuç düzensiz görünür.

Başlık çok geniş bir alana yayılmış, açıklama dar bir kutuya sıkıştırılmış olabilir. Buton doğru konumdadır ama çevresindeki metinlerle o kadar iç içedir ki kendine ait bir alanı yoktur. Görsel kaliteli olmasına rağmen bölümdeki diğer unsurlarla aynı ağırlıkta olmadığı için sanki sonradan eklenmiş gibi durabilir.

Kod açısından bunların hiçbiri hata değildir.

Tasarım açısından ise hepsi hatadır.

Uzun zamandır hem tasarım hem de yazılım tarafında çalıştığım için bu ayrımı sık sık görüyorum. Geliştirici gözüyle baktığımda yapı doğrudur. Tasarımcı gözüyle baktığımda ise bölüm nefes almıyordur.

İki tarafın aynı anda doğru olması gerekiyor.

Sorun Çoğu Zaman Boşluk, Oran ve Sıralama

Bir tasarımda ilk baktığım şey renkler değil, boşluklardır.

Başlık ile açıklama arasındaki mesafe ne kadar? Açıklama ile buton birbirine fazla mı yakın? Bölümün üst ve alt boşlukları dengeli mi? Kartların içindeki metinler kenarlara mı sıkışmış? Yan yana duran elemanlar gerçekten aynı yapının parçaları gibi mi görünüyor?

Boşluk yalnızca estetik bir tercih değildir. İçeriğin nasıl okunacağını belirler.

Bir başlık ile açıklaması birbirine yakın olmalıdır. Bir sonraki içerik grubu ise bunlardan biraz daha uzakta başlamalıdır. Bu ilişki kurulmadığında kullanıcı hangi metnin hangi bölüme ait olduğunu anlamak için gereksiz bir çaba harcar.

Benzer bir durum oranlarda da yaşanır.

Bazen sayfayı kaplayan büyük bir başlığın altında küçük ve etkisiz bir buton görürüz. Bazen geniş bir kartın içine gereğinden küçük bir görsel yerleştirilir. Bazen de iki satırda anlatılabilecek bir metin, dar bir alana sıkıştırıldığı için beş satıra çıkar.

Buradaki problem kullanılan parçalar değildir. Parçaların birbirlerine göre ölçüleridir.

Hazır temalarda bu durum daha belirgin hâle gelir. Tema, kısa İngilizce başlıklar ve özenle seçilmiş örnek görsellerle gayet iyi görünür. Gerçek Türkçe metinleri eklemeye başladığınızda başlıklar uzar, kart yükseklikleri değişir ve tasarımın dengesi bozulur.

Bu noktada metni sürekli kısaltarak tasarımı kurtarmaya çalışmak doğru değildir. Tasarım gerçek içeriği taşıyamıyorsa sorun içerikte değil, tasarımdadır.

Bir diğer önemli konu da sıralamadır. Kullanıcı sayfayı açtığında önce nereye bakacağını anlamalıdır. Başlık, açıklama, görsel, buton, ikon ve dekoratif şekiller aynı anda dikkat çekmeye çalışıyorsa ortada bir hiyerarşi yoktur.

Her şeyi öne çıkarmaya çalıştığınızda hiçbir şey öne çıkmaz.

Ana başlık ilk bakışta anlaşılmalı, açıklama onu desteklemeli ve buton kullanıcının bir sonraki adımını göstermelidir. Dekoratif öğeler ise bütün bunların arkasında kalmalıdır. Bir şekil veya efekt içerikten daha fazla dikkat çekiyorsa görevini yanlış yapıyordur.

Daha Fazla Şey Eklemek Tasarımı Kurtarmaz

Bir bölüm boş veya zayıf göründüğünde ilk refleksimiz yeni bir şey eklemek oluyor.

Bir ikon daha ekleyelim. Arka plana şekiller koyalım. Butona gölge verelim. Başlığın yanına küçük bir rozet yerleştirelim. Altına birkaç istatistik yazalım.

Bunların her biri tek başına güzel görünebilir. Ama tasarımın asıl problemi çözülmeden eklenen her yeni detay, sorunu biraz daha gizler ve düzenlemeyi zorlaştırır.

Bazı bölümlerde yapılması gereken şey eklemek değil, çıkarmaktır.

Bir öğeyi kaldırdığımda tasarım daha iyi görünüyorsa o öğenin orada bulunması için güçlü bir neden yoktur. Görsel bir unsur bilgi vermiyor, kullanıcıyı yönlendirmiyor veya dengeye katkı sağlamıyorsa yalnızca yer kaplıyordur.

Bu yüzden “minimal tasarım” denildiğinde aklıma bomboş beyaz sayfalar gelmiyor. Benim için minimal tasarım, gereksiz olanın ayıklandığı tasarımdır.

İhtiyaç duyulan her şey vardır ama hiçbir şey sırf alan dolsun diye eklenmemiştir.

Mobilde Alt Alta Gelmesi Yeterli Değil

Bir tasarımın masaüstünde düzgün görünmesi de işin bittiği anlamına gelmiyor.

Masaüstünde yan yana duran iki alanı mobilde alt alta getirdiğimizde teknik olarak responsive bir sonuç elde ederiz. Ancak bu, mobil tasarım yaptığımız anlamına gelmez.

Mobil ekranda içerik sırası yeniden düşünülmelidir. Masaüstünde iyi görünen büyük bir başlık, telefonda ekranın neredeyse tamamını kaplayabilir. Geniş bölüm boşlukları sayfayı gereksiz yere uzatabilir. Dekoratif şekiller içeriğin üzerine binebilir veya kullanıcının dikkatini dağıtabilir.

Bazen görselin metinden önce, bazen sonra gelmesi gerekir. Bazı dekoratif öğelerin ise küçük ekranda tamamen kaldırılması daha doğru olur.

Responsive tasarım, masaüstündeki her şeyi küçültüp alt alta sıralamak değildir. Aynı içeriği daha dar bir alanda yeniden düzenlemektir.

Tasarım Ne Zaman Tamamlanır?

Bir tasarımın ilk hâliyle son hâli arasındaki fark çoğu zaman büyük değişikliklerden oluşmaz.

Başlığı birkaç piksel yukarı almak, satır yüksekliğini azaltmak, kartın iç boşluğunu artırmak veya bölümün altına biraz daha alan bırakmak küçük müdahalelerdir. Fakat bu küçük müdahaleler bir araya geldiğinde tasarımın kalitesini belirler.

Ben bir bölüme baktığımda “olmuş mu?” sorusunun cevabını tek bir ölçüte göre vermiyorum.

Metinler rahat okunuyor mu? Gözüm ilk olarak doğru yere mi gidiyor? Bölüm sayfanın genişliğiyle uyumlu mu? Elemanlar birbirine gereğinden fazla mı yakın? Üst ve alt boşluklar dengeli mi? Bir şey bulunduğu konumu kaybetmiş gibi görünüyor mu?

Bu sorulardan biri bile rahatsız ediyorsa bölüm henüz bitmemiştir.

Bazen çözüm birkaç CSS düzenlemesidir. Bazen de mevcut CSS’i düzeltmeye çalışmak yerine bölümü baştan yazmak daha mantıklıdır. Çünkü yanlış kurulmuş bir yapının üzerine eklenen her yeni kural, bir sonraki ekran boyutunda başka bir soruna dönüşür.

Sonuç olarak bir tasarımın teknik olarak doğru olması, iyi görüneceği anlamına gelmiyor. Kod bize çalışan bir yapı verir. O yapının düzenli, anlaşılır ve güven veren bir arayüze dönüşmesi için boşlukların, oranların ve içerik sırasının ayrıca düşünülmesi gerekir.

Kullanıcı yazdığımız CSS’i görmez. Ama ortaya çıkan düzensizliği hemen hisseder.

Çalışması Yetmiyor, İyi de Görünmeli

Bir web tasarımının teknik olarak sorunsuz çalışması önemlidir ama tek başına yeterli değildir. Kullanıcı kodun ne kadar düzenli yazıldığını, hangi grid sisteminin kullanıldığını veya responsive yapının nasıl kurulduğunu görmez. Karşısındaki sayfanın düzenli, anlaşılır ve güvenilir olup olmadığına bakar.

Tasarım kötü görünüyorsa hemen renkleri değiştirmek veya yeni detaylar eklemek yerine temel yapıya dönmek gerekir. Boşluklar dengeli mi, içerik doğru sırada mı, ölçüler birbiriyle uyumlu mu ve kullanıcının dikkati doğru yere yönlendiriliyor mu?

Bazen birkaç küçük düzenleme yeterli olur. Bazen de mevcut yapıyı yamamaya devam etmek yerine ilgili bölümü baştan yazmak gerekir. Önemli olan çalışan bir sayfayla yetinmemek ve tasarımın gerçekten oturup oturmadığını dürüstçe değerlendirebilmektir.

Çünkü kullanıcı teknik sorunları her zaman fark etmeyebilir. Ancak düzensizliği, sıkışıklığı ve bir şeylerin yerinde olmadığı hissini birkaç saniye içinde fark eder.