Ana sayfa İnternet İyi bir arayüz için 3 kural

İyi bir arayüz için 3 kural

0

İyi bir arayüz için 7 kural

Kural 1: Işık Gökyüzünden Gelir

Gölgeler, insan beynine hangi kullanıcı arayüzüne baktığımızı anlatan paha biçilemez ipuçlarıdır.

Bu belki de UI tasarımıyla ilgili öğrenilecek bariz olmayan en önemli şeydir: ışık gökyüzünden gelir. Işık, o kadar sık ve tutarlı olarak gökyüzünden gelir ki doğrusu aşağıdan gelmesi ürkütücü görünür.

Işık gökyüzünden geldiğinde, nesnelerin üstünü aydınlatır ve altlarına gölge düşürür. Nesnelerin üst kısımları daha açık, alt ksımları daha koyudur.

İnsanların alt göz kapaklarının özellikle gölgeli olduğunudüşünmezsiniz ama üzerlerine biraz ışık tuttuğunuzda birden karşınızda şeytani bir kız bulursunuz.

Aynı şey kullanıcı arayüzü için de geçerlidir. Nasıl yüz hatlarımızın bütün alt kısımlarında az miktarda gölge varsa bulabileceğiniz bütün kullanıcı arayüzü ögelerinin alt kısımlarında gölgeler vardır.Ekranlarımız düz ama üzerlerinde gösterilen her şeyin üç boyutlu görünmesini sağlamak için büyük miktarda sanatsal emek harcadık.

 

Bu sadece bir butondu ancak burada ışığın bu dört efekti mevcut. Burdan çıkarılacak ders bu. Şimdi bunu her şeye uygulayacağız.

Genellikle gömülü olan elementler:

Metin giriş alanları
Tıklanmış butonlar
Kaydırma rayları
Radyo butonu (seçilmemiş)
Onay kutucukları

Genellikle çıkkın olan elementler:

Butonlar (tıklanmmamış)
Kaydırma butonları
Aşağı doğru açılır kontroller
Kartlar
Seçilmiş radyo butonunun buton kısmı
Açılır pencereler

 

Kural 2: önce Siyah — Beyaz

Renkleri eklemeden önce gri tonlama ile tasarım yapmak, görsel tasarımın en karmaşık ögesini basitleştirir — ve sizi nesneler arasındaki boşluğu ve nesnelerin sayfa üzerindeki dağılımı üzerinde odaklanmaya zorlar.

UX tasarımcıları bugünlerde gerçekten “önce-mobil” için tasarlamakla ilgileniyorlar. Bu, sayfaların ve etkileşimlerin zilyon piksellik Retina ekranınızda hayal etmeden önce bir telefonda nasıl göründüğü hakkında düşünmeniz anlamına geliyor.

Bu tür bir kısıtlama harika. Düşüncelerinizi netleştirir. Daha zor problem (minicik bir ekranda kullanılabilir uygulama) ile başlıyorsunuz sonra da çözümü daha kolay bir probleme (büyük bir ekranda kullanılabilir uygulama) uyguluyorsunuz.

İşte size benzer başka bir kısıtlama: önce siyah-beyaz tasarlayın. Daha zor olan, uygulamayı güzel ve mümkün olan her açıdan kullanılabilir yapma problemi ile başlayın ama renklerden yararlanmadan. En son rengi ekleyin, o zaman geldiğinde bile gerçekten belirli bir amaç uğruna ekleyin.

Bu, uygulamaları “temiz” ve “sade” tutmanın güvenilir ve kolay bir yolu. çok farklı yerlerde çok fazla renk bulundurmak gerçekten temiz/sade bir tasarımı mahvetmenin kolay bir yoludur. öSB (önce Siyah-Beyaz) tasarlamak sizi öncelikli olarak aralıklar, ölçüler ve sayfa düzeni gibi şeyler üzerinde odaklanmaya zorlar. Bunlar da temiz ve sade bir tasarımının ana meseleleridir.

 

Kural 3: Beyaz alanınızı iki katına çıkarın

Tasarlanmış gibi görünen bir kullanıcı arayüzü yapmak için, olabildiğince nefes alacak alan bırakın.

İkinci kuralda öSB”nin (önce Siyah-Beyaz), tasarımcıları renkten önce aralıkları ve sayfa düzeni hakkında düşünmeye zorladığını ve bunun neden iyi bir şey olduğunu anlatmıştım. Şimdi ise aralık ve sayfa düzeni hakkında konuşmamızın zamanı geldi.

Daha önce sıfırdan başlayarak HTML”de kodlama yaptıysanız muhtemelen HTML”in var sayılan olarak sayfada nasıl göründüğüne aşinasınızdır.

Aslında her şey ekranın üst kısmına doğru sıkıştırılmıştır. Fontlar küçük; satır arlarında kesinlikle hiç boşluk yoktur. Paragraflar arasında biraaazcık boşluk bulunur ama fazla değil. Paragraflar, ister 100 piksel ister 10000 piksel olsun, sayfanın sonuna doğru uzanır gider.

Estetik açıdan bu korkunç. Tasarlanmış gibi görünen bir kullanıcı arayüzü yapmak için, olabildiğince nefes alacak alan bırakın.

Bazen gülünç miktarda.

 

Medium Türkiye sitesinde, orijinalini Erik D. Kennedy‘nin yazdığı makalenin Ahmet özkale tarafından yapılan çevirisinden kısaltılarak alınmıştır.

Orijinalini okumak için tıklayın.

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here