PayPal ekran tasarımı

Örnek olsun deyyu güzel bir ekran tasarımı:

Normalize olmuş bir yapının resmi

GUI Tasarım İpuçları

Kaynağı: http://bryant2.bryant.edu/~dgannon/cis314/data/guttip.html

Akış - 1

• Akış dikey ya da yatay olmalı. En önemli bilgiler ekranın sol üst köşesinde yer almalı.
  
• İlişkili kontroller bir çerçeve ile bir arada tutulmalı.
  
• Küçük marginler ile kontrolleri bir arada tutmalı.
  

Komut Düğmeleri - 2

• Komut düğmelerini ekranın altında ortada ya da üst/alt sağ köşelerde tutmalı.
  
• Ekranda 6 dan fazla komut düğmesi barındırmamalı.
  
• En önemli düğmeyi ilk sırada kullanmalı.
• Komut düğmeleri diğerlerine göre daha ebatlı olmalı(görünürlüğü sağlanmalı)
• Eğer komut düğmeleri ekranın altında ortalı ise her düğme aynı yükseklikte olmalı ama farklı genişliklerde olabilir.
• Eğer komut düğmeleri bir köşede yığılmışlarsa, hepsi aynı yükseklikte ve genişlikte olmalılar.
  

Düğmeler - 3

• Düğmelere anlamlı metinler yazın.
  
• En az bir ya da en fazla 3 kelime tek satırda olmak üzere düğme metinleri oluşturun.
  
• Düğme metinlerinde baş harfleri büyük olmalı.
  

Etiketler - 4

• Arayüzdeki her kontrolü etiketle. Tek satırda en fazla üç kelime olsun.
  
• Her etiketi sola ve kontrolün ister üstüne ister soluna yerleştir.
  
• Etiketi ":" işareti izlesin ve ilk harf büyük olmalı.

Pencere - 5

• Pencere kenarının 2 veya 3 nokta berisinden başlamalır.
• Kontroller arasında 2 den 4 e kadar nokta aralıklarla konumlanmalı.

Resimler - 6

• İnsan gözü metinlerden önce resimleri farkeder. Eğer gerekliyse grafik kullanmak dikkat çekici olur, kullanımı hızlandırır.
• Estetik olmasını istiyorsanız küçük resimler kullanın ki dikkat dağıtıcı olmasın.
  

Yazı Tipleri - 7

• 8, 10, ya da 12 punto fontlar kullanmalı.
• Bir ya da iki font boyutları kullanılmalı.
  
• Sans Serif font tipini metinlerde kullanmalısınız.
  
• Tüm metinler için sadece bir font tipi kullanmalısınız.
  
• Eğik ve altı çizgili yazılardan uzak durmalısınız.
  

Renkler - 8

• İnsan gözü siyah beyaz renklerinden önce renklilere dikkat eder.
  
• Arayüzde siyah beyaz ve gri renkleri öncelikle kullanmalı, sonra gerçekten kullanmak için iyi bir nedeniniz varsa renklileri ekleyebilirsiniz.
  
• İster beyaz, kirli beyaz, açık gri, uçuk mavi(pastel mavi) veya pastel sarı renklerini uygulamanın arka planı için kullanıp metinleri siyah renk tercih etmeli.
  

Renkler - 9

• Daima koyu renkleri metinler için açık renkleri arka planlar için kullamalısınki okunması kolay olsun.
  
• Asla koyu renkli arka plana açık renkli metinler kullanma.
• Kullanacağın renkleri 3e kadar sınırla (siyah beyaz ve griden başka)
• Asla arayüz elemanlarının tanımlamasında renkleri kullanma.