Web arayüz tasarımı: ekranın altındaki ölçü sistemi

Bu sayfa, arayüzün teknik anatomisiyle ilgilidir. Kullanıcı araştırması, akış haritası, tel kafes ve kullanılabilirlik testi gibi süreç adımlarını ayrıca UI/UX tasarım sayfasında anlattık. Burada ise onaylanan akışın ekranda hangi ölçülerle hayata geçtiğini bulacaksınız.

Izgara ve boşluk ritmi

Her arayüz bir ızgara üzerine kurulur. Sütun sayısı, sütun arası boşluk ve kenar payı belirlendiğinde sayfadaki her kutunun nereye oturacağı tartışma konusu olmaktan çıkar. Buna eşlik eden ikinci sistem boşluk ritmidir: kullandığımız tüm iç ve dış boşluklar tek bir temel birimin katlarıdır. Sonuç, göz için fark edilmesi zor ama hissedilmesi kolay bir düzendir; sayfa “dağınık” görünmez.

Ritim ayrıca bakımı ucuzlatır. Bir bölümün boşluğunu değiştirmek istediğinizde tek tek kutuları elle düzeltmeniz gerekmez, ölçek üzerindeki bir adımı değiştirirsiniz ve sayfa bütün olarak tepki verir.

Tipografi ölçeği ve okuma konforu

Başlıklardan gövde metnine kadar tüm boyutlar rastgele değil, oransal bir ölçekten seçilir. Gövde metninin satır uzunluğunu 60–75 karakter aralığında tutmaya, satır yüksekliğini rahat okunacak kadar açmaya ve başlık ile paragraf arasındaki farkı yeterince belirgin bırakmaya dikkat ediyoruz. Küçük ekranlarda başlıklar orantılı olarak küçülür, ama gövde metni asla okunamayacak boyuta inmez.

Renk jetonları ve karanlık zeminde kontrast

Renkleri ekranlara doğrudan yazmıyoruz; önce anlamlı isimlerle jeton hâline getiriyoruz: zemin, yüzey, kenarlık, metin, sönük metin, vurgu, hata, başarı. Bileşenler yalnızca bu jetonları kullanır. Böylece marka rengi değiştiğinde ya da ikinci bir tema gerektiğinde tek bir katmanı güncellemeniz yeterli olur.

Karanlık zeminli arayüzlerde en sık yapılan hata, neon tonların gövde metninde kullanılmasıdır. Parlak bir vurgu rengi büyük başlıkta iyi durur ama küçük metinde okuma yorucu hâle gelir. Kontrast oranlarını gövde metni için en az 4,5:1 olacak şekilde ölçüyor, gerektiğinde neonu vurguda bırakıp metin rengini açık tarafa taşıyoruz.

Bileşen durumları: asıl iş burada

Bir bileşenin “normal” hâlini çizmek işin küçük kısmıdır. Arayüzü gerçek dünyada ayakta tutan şey, diğer durumlardır. Her bileşen için şunları tanımlıyoruz:

• Üzerine gelme ve basılı tutma: fare ve dokunmatik için ayrı ayrı düşünülür.
• Klavye odağı: koyu zeminde açıkça görünen bir odak halkası şarttır.
• Pasif ve yükleniyor: buton çift tıklanmaya karşı kilitlenir, kullanıcı beklediğini bilir.
• Hata ve başarı: mesaj alanın yanında, rengin yanı sıra metinle de anlatılır.
• Boş durum: liste henüz doluyken değil, boşken ne yazacağı baştan kararlaştırılır.

Bu durumlar tasarım aşamasında yazılmazsa uygulama aşamasında birileri tarafından doğaçlama uydurulur; site yayına girdikten sonra en çok düzeltme isteği de tam buradan gelir.

Kırılım noktaları ve içerik önceliği

Kırılım noktalarını cihaz modellerine göre değil, içeriğin bozulduğu genişliklere göre belirliyoruz. Bir tablo dar ekranda okunamaz hâle geliyorsa kırılım oradadır. Her bölüm için mobilde hangi öğenin öne geçeceğini, hangisinin gizleneceğini ve hangi bilginin katlanacağını tek tek karara bağlıyoruz. “Masaüstünde tasarlayalım, mobilde daralır nasılsa” yaklaşımı, mobil trafiğin çoğunlukta olduğu bir sitede en pahalı hatadır.

Hareket: ölçülü ve kapatılabilir

Arayüzdeki hareket dikkat yönlendirmek içindir, gösteri için değil. Geçiş süreleri kısa tutulur, yalnızca gerçekten değişen özellik animasyonlanır ve işletim sisteminde hareket azaltma tercihi açık olan kullanıcılarda tüm hareket kapatılır. Bu tercih, hareketten rahatsız olan kullanıcılar için erişilebilirlik gereğidir; ayrıca düşük donanımlı cihazlarda arayüzün akıcı kalmasını sağlar.

Koda devir dosyası

Tasarımı geliştiriciye görsel olarak değil, ölçülerle devrediyoruz: jeton listesi, tipografi ölçeği, boşluk basamakları, bileşen durum tablosu, kırılım noktaları ve ikon seti. Uygulamayı biz yapıyorsak bu dosya iç kullanım içindir; kendi ekibiniz yapacaksa aynı dosya devir belgesi olur. Kodlama tarafındaki çalışma biçimimizi web tasarım hizmetleri sayfasında ayrıntılandırdık.