Muhteşem Bir Kullanıcı Arayüzü Tasarlamanın 7 Kuralı (Bölüm 2)

Meraklısından bir görsel estetik kılavuzu


Bu iki bölümlük bir serinin ikinci kısmı. Önce ilk bölümünü okumalısınız.

Sanat okuluna gitmek zorunda kalmadan, temiz ve sade kullanıcı arayüzü tasarlamanın kuralları hakkında konuşuyoruz.

İşte kurallar:

  1. Işık gökyüzünden gelir (bkz: Bölüm 1)
  2. Önce siyah — beyaz (bkz: Bölüm 1)
  3. Beyaz alanınızı iki katına çıkarın (bkz: Bölüm 1)
  4. Görsel üzerine metin yerleştirme yöntemlerini öğrenin
  5. Metni öne çıkarın — ve arka plana itin
  6. Sadece iyi fontları kullanın
  7. Bir Sanatçı Gibi Araklayın

Kural 4: Görsel üzerine metin yerleştirme yöntemlerini öğrenin

Güvenilir ve güzel bir şekilde metni görsel üzerine yerleştirmenin yalnızca birkaç yolu vardır. İşte 5 — bir de bonus — yöntem.

Eğer iyi bir tasarımcı olmak istiyorsanız, nasıl cezbedici bir şekilde görsel üzerine metin yerleştireceğinizi öğrenmek zorundasınız. Bu her iyi kullanıcı arayüzü tasarımcısının iyi ve bütün kötü kullanıcı arayüzü tasarımcısının kötü yaptığı bir şey — ya da hiç yapmadığı, ki durumda bu bölümü okuduktan sonra kocaman bir adım önde olacaksınız.

Yöntem 0: Metni doğrudan görsele uygulayın

Bunu buraya dahil etme konusunda bile tereddüt ediyorum ancak teknik olarak bir metni doğrudan görsele uygulanması ve elde edilen sonucun iyi görünmesi mümkün.

Otter Surfboards. Modern ve Instagram’lık ancak okuması biraz zor.

Bu yöntemde çok çeşitli sorunlar ve dikkat edilmesi gereken noktalar var:

  1. Görsel koyu renkli olmalı, yüksek kontrastlı kenarları olmamalı
  2. Metin beyaz olmalı — daha temiz ve sade tersini kanıtlayan bir örnek bulmanız konusunda meydan okuyorum size. Cidden. Tek bir örnek.
  3. Okunabildiğinden emin olmak için her boyuttaki ekranda ve pencere ölçüsünde test edin.

Profesyonel bir proje için hiç görsel üzerinde doğrudan metin kullnadığımı sanmıyorum ve aslında burada da sadece bir “kontrol” yöntemi olarak bahsi geçiyor. Bununla birlikte, gerçekten havalı bir etki yapmak mümkün — ancak dikkatli olun.

Aquatilis’in sitesi– kesinlikle ziyaret edilmeye değer.

Yöntem 1: Tüm resmi arkaplana yayın

Görsele bir metin yerleştirmenin belki de en kolay yolu görseli arkaplana yaymaktır. Görsel yeterince koyu renkli değilse, hepsini yarı saydam siyah katman ile kaplayabilirisiniz.

İşte koyu renkli kaplamalı bir modern bir giriş ekranı.

Upstart’ın sitesinde 35% opaklıkta bir siyah filtre var.

Firebug’ı başlatıp, kaplamayı kaldırırsanız orijinal görselin, üzerindeki metnin okunabilmesi için aşırı parlak ve kontrastlı olduğunu görürsünüz. Ama koyu bir kaplama varsa hiçbir sorun yok!

Bu yöntem mini resim ve küçük resimlerde de çok işe yarıyor.

Charity:water sitesindeki mini resimler.

Siyah kaplama en sade ve farklı amaçlara en uygun seçenek olsa da tabii ki başka renklerde kaplamalarda bulabilirsiniz.

Yöntem 2: Kutuda metin

Bu son derece basit ve çok güvenilir bir yöntem. Hafif saydam bir dikdörtgen oluşturuverin üzerine bir beyaz metin kondurun. Üstteki kaplama yeterince opak ise, altta hangi resim olursa olsun metin hep tamamen okunur olacaktır.

Miguel Oliva Márquez’in Modern Honolulu iPhone Konsepti.

Biraz renk de ekleyebilirsiniz — ama, her zaman ki gibi, sağgörülü olun.

Şimdi de pembe. Mark Conlan’dan.

Yöntem 3: Görseli bulanıklaştırın

Üstteki metni okunur yapmanın şaşırtıcı derecede iyi bir yolu alttaki resmin bir bölümünü bulanıklaştırmaktır.

Copious, Snapguide üstteki katmanı bulanıklaştırıyor. Bulanıklaştırılan alanların aynı zamanda koyulaştırıldığına da dikkat edin.

Vista da bunu oldukça etkili bir şekilde kullanmış olsa da son zamanlarda iOS 7 arka planı bulanıklaştırmayı bayağı bir olay yaptı.

Fotoğrafın odağı dışındaki bölümlerini de bulanıklaştırma olarak kullanabilirsiniz. Ama dikkatli olun — bu yöntem diğerleri kadar dinamik değil. Görseliniz değişiyorsa, metnin sürekli bulanıklaştırılmış bölümlerin üzerinde olduğundan emin olun.

Teehan + Lax

Demek istediğim, aşağıdaki alt başlığı bir okumaya çalışın.

Şu dünyada iyi olan her şey aşkına, nasıl oldu da bu onaylandı?

Yöntem 4: Zemin karartma

Alt kenarına doğru yavaşça siyaha geçen bir resim ve o resim üzerinde beyaz metin varsa buna zemin karartma deniyor. Bu yaratıcı bir yöntem, Medium’dan önce bunu kim yaptı bilmiyorum ama ben ilk burada fark ettim.

Sıradan bir gözlemciye bu Medium koleksiyonları bir resim üzerine beyaz metin yapıştırılmış gibi görünüyor — ama buna cevaben, ben “Yanlış!” diyorum. Resmin ortasından (%0 opaklıkta siyah) başlayan alt kenarında (hmmm belki de yaklaşık %20 opaklıkta) biten son derece belirsiz bir gradyan var.

Görmesi zor ama kesinlikle orada ve kesinlikle okunabilirliği arttırıyor.

Medium koleksiyon küçük resimlerinin, okunabilirliği daha da arttırmak için çok az miktarda metin gölgesi kullandığına da dikkat edin. Bu adamlar iyi!
Kesin sonuç şu: Medium herhangi bir metni herhangi bir görselin üzerine koyabilir ve yine de okunabilir sonuç elde edebilir.

Ha, bir şey daha var — resim altta neden mi siyaha geçiş yapıyor? Cevap için, Kural 1'e bakın — ışık her zaman yukarıdan gelir. Gözümüze doğal görünmek için, tıpkı gördüğümüz her şey gibi, resmin alt kısmının biraz koyu olması gerekiyor.

İleri düzey hareket: bulanıklaştırmayı zemin karartma ile birleştirin… karşınızda, Zemin Bulanıklaştırma.

SnapGuide’daki “zemin bulanıklaştırma”. Anne bak, hiç kaplama yok!

Bonus Yöntem: Saydam Kumaş

Nasıl oluyor da Elastica blog’un her defasında dinamik bir görselin üzerinde okunabilir bir başlığı oluyor. Görseller:

  • Çok da koyu değil
  • Biraz kontrastlı gibi

Yine de metnin neden bu kadar okunabilir olduğunu açıklamak zor. Bir göz atın:

Cevap: Saydam kumaş.

Saydam kumaş, ışığı yumuşatan bir fotoğrafçılık ekipmanıdır. Artık aynı zamanda, üstteki metnin daha okunabilir olması için kullanılan bir görsel tasarım tekniği.

Tarayıcıda Elastica blog’u uzaklaştırırsak, olup biteni daha açıkça görebiliriz.

“145,000 Salesforce Users Come out to Celebrate…” başlığının etrafında gradyanlı bir opaklık kutusu var. Net mavi arka planla fark etmek yukarısındaki kontrastlı fotoğrafla olacağından daha kolay.

Bu muhtemelen görsel üzerine güvenli bir şekilde metin yerleştirmenin mümkün olan en üstü kapalı yolu ve başka bir yerde hiç görmedim (ama oldukça gizli kapaklı). Bir kenara yazın yine de. Ne zaman ihtiyaç duyacağınız belli olmaz.


Kural 5: Metni öne çıkarın — ve arka plana itin

Metni güzel ve duruma uygun şekilde biçimlendirmek çoğu zaman karşıt şekillerde biçimlendirme meselesidir. — daha büyük ama açık, örneğin.

Bence, güzel bir kullanıcı ara yüzü tasarlamanın en zor yanlarından biri, metni biçimlendirmek — ve bu mevcut seçeneklere aşina olmadığımdan değil. İlkokulu bitirdiyseniz, muhtemelen gördüğümüz bir metne dikkat çekme veya ondan dikkati uzaklaştırmanın bütün yollarını kullanmışsınızdır:

  • Boyut (daha büyük veya küçük)
  • Renk (daha fazla veya daha az kontrast; gözü kendine çeken açık renkler
  • Yazı boyutu (kalın veya ince)
  • Büyük harf kullanımı (küçük harf, BÜYÜK HARF veya Başlık Yazımı)
  • Eğik yazma
  • Harfler arası boşluk (veya — havalı terim kullanma uyarısı — izleme!)
  • Kenar boşlukları (teknik olarak kendisi metni ait olmamakla birlikte dikkat çekmek için kullanılabiliyor bu yüzden listeye girmeyi başarıyor)
Renk, büyük-küçük harf ve boşluk kullanımının sağlam örneği @workjon’un oğlundan. Ayrıca, @workjon’u takip edin, tasarım üzerine yazıları MUHTEŞEM.

Dikkat çekmek için kullanılabilecek, o kadar da kullanılmayan veya önerilmeyen, başka seçenekler de var:

  • Altını çiz. Bugünlerde altı çizili olmak link olmak anlamına geliyor ve bunu başka bir şey anlatmak için kullanmak, bana sorarsanız, uğraşmaya değmez.
  • Metin arka plan rengi. Yukardaki kadar yaygın değil ama 37signals’ın sitesi bir süredir bunu link biçimi olarak kullanıyor.
  • Üzeri çizili. Uzak dur, seni gidi 90’ların CSS sihirbazı seni!

Kendi kişisel deneyime dayanarak söyleyebilirim ki, “doğru” metin biçimlendirmesini bulamadığım bir metin ögesi ile karşılaşırsam, bunun nedeni büyük harf veya daha koyu bir renk kullanmayı unutmam değil — en iyi çözümün “rakip” seçeneklerin doğru kombinasyonunu tutturmak olmasıdır.

Ön plana çıkar ve arka plana it

Bütün metin biçimlendirme yöntemlerini iki gruba ayırabilirsiniz:

  • Metnin görünürlüğünü arttıran biçimler. Büyük, kalın, büyük harfli vb.
  • Metnin görünürlüğünü azaltan biçimler. Küçük, düşük kontrastlı, daha az kenar boşluğu vb.

Tasarımcıların en beğendiği sıfatın hatırına, bunlara “ön plana çıkarma” ve “arka plana itme” biçimleri diyeceğiz. “Görsel ağırlık” demeyeceğiz çünkü öylesi sıkıcı.

Hugeinc.com’dan bir vaka çalışması başlığı

“Material Design” başlığında olup biten bol miktarda ön plana çıkarma işi var. Büyük; yüksek kontrastlı; çok kalın.

Diğer yandan sayfanın dibindeki bu ögeler, arka plana itilmiş. Küçükler, az kontrastlılar ve daha hafif bir font ağırlıkları var.

Şimdi asıl önemli kısma geçelim.

Sayfa başlıkları tamamı ön plana çıkarılması gereken tek ögedir.
Geriye kalan her şey için
öne çıkarmaya ve — arka plana itmeye ihtiyacınız var.

Bir sayfa ögesinin vurgulanması gerekiyorsa hem ön plana çıkarma hem de geriye itme stilleri kullanın. Bu, ekrandaki şeylerin yorucu gelmesini bu engelleyecektir ancak farklı ögelere sahip olmaları gereken görsel ağırlığı da verin.

Bir görsel stil dengesi

Blu Homes’un kusursuzca tasarlanmış sitesinde bazı büyük başlıklar var ama vurgulanan kelime küçük harflerle yazılmış — bir şeyi aşırı vurgulamak bunaltıcı olabilir.

Blu Homes’un sitesindeki bu rakamlar, boyut, renk ve dizilişleriyle gözünüzü üzerilerine çekiyor — ancak çok hafif font ağırlığı ve koyu griden daha az kontrastlı renkleriyle bu rakamların aynı zamanda vurgularının azaltılmış olduğuna dikkat edin.

Rakamların altındaki küçük etiketler ise gri ve küçük olsalar da büyük harflerle yazılmış ve çok kalınlar.

Her şey dengeyi sağlamakla ilgili.

contentsmagazine.com

Contents Magazine öne çıkarma/arkaya itmeyle ilgili iyi bir vaka çalışması örneği.

  • Makale başlıkları aslında sayfa da eğik yazılmamış tek öge. Bu durumda, eğikliğin olmaması gözü çekme konusunda daha etkili (özellikle kalın font ağırlığıyla birleştiğinde)
  • Yazarın ismi künye bölümünde kalınlaştırılmış, bu da normal ağırlıktaki “by” kelimesinden daha çok dikkat çekmesini sağlıyor.
  • Küçük, düşük kontrastlı “ZATEN ARKADA OLAN” metin ayak dolaşığı olmuyor — ama büyük harfleri, cömertçe kullanılmış harfler arsı boşluğu ve büyük kenar boşlukları ile baktığınız anda görebilirsiniz.

Seçili ve üzerinde gezilen (hover) biçimler

Seçilmiş ögeleri ve üzerinde gezme efektlerini ayarlamak aynı oyunda, başka bir raund — ama daha da zor.

Genelde, yazı tipi boyutunu, büyük-küçük harfi veya yazı tipi ağırlığını değiştirmek bir metnin kapladığı alanı etkiler; bu da üstünde gezinme efektlerini sınırlandırır.

Peki, bu elinizde ne çalışabileceğiniz ne bırakıyor?

  • Metin rengi
  • Arkaplan rengi
  • Gölgeler
  • Altını çizmek
  • Hafif animasyonlar- yükselme, aşağı inme vb.

Sağlam bir seçenek: beyaz ögeleri renklendirmeyi veya renkli ögeleri beyazlaştırmayı deneyin ama arka planı koyulaştırmayı değil.

Seçilen ikon renkliyken beyaz oluyor ancak araka planına olan kontrastını koruyor.

Size şunu söyleyeyim: Metin biçimlendirmek zor iş.

Yine de ne zaman “Belki de bu metnin doğru düzgün görünmesi imkansız” dediysem, hep yanıldım. Sadece biraz daha kendimi geliştirmem gerekiyordu. Sadece çalışmaya devam etmeliydim.

Bu yüzden size teselli olarak şunu sunayım: iyi görünmüyorsa, endişelenmeyin — iyi görünebilirdi eğer siz daha iyi olsaydınız. Ama bakın, çalışmaya devam edelim ve kendimizi geliştirelim.


Kural 6: İyi font kullanın

Bazı fontlar iyidir. Onları kullanın.

Not: Bu bölümde konu olarak çalışacak bir strateji veya başka bir şey yok. Ücretsiz indirip kullanabileceğiniz birkaç fontu listeleyeceğim sadece burada.

Çok farklı bir kişiliği olan siteler çok faklı bir font kullanabilir. Ancak çoğu kullanıcı arayüzü tasarımı için sadece temiz ve sade bir şeyler istersiniz. Doğru duydun dostum, Wisdom Script’i bir kenera bırak.

Ayrıca sadece ücretsiz fontları kullanmanızı öneriyorum. Neden mi? Bu kılavuz öğrenmekte olan kişiler için. Sıfır dolar etiketiyle gerekenden fazla şey var. Onları kullanalım.

Hepsini şimdi indirmenizi ve sonra da projenizin görsel tasarımına başladığınızda indirdiğiniz fontlara bakınmanızı öneririm.

The Font Book uygulamasındaki “User” kategorisi ne indirdiğinizi hatırlaak için iyi bir yol.
Ubuntu

Ubuntu (yukarıda). Bol miktarda ağırlık. Bazı uygulamalar için biraz gereğinden fazla belirgin — bazıları içinse mükemmel bir seçim. Google Fonts’ta mevcut.

Open Sans

Open Sans (yukarıda). Okuması kolay, popüler bir font. metin gövdesi için iyidir. Google Fonts’da mevcut.

Bebas Neue

Bebas Neue (yukarıda). Başlıklar için harika bir seçim. Tamamı büyük harf. Müthis bir “Bebas Neue örnekleri” galerisi bulunan Fontfabric’te mevcut.

Montserrat

Montserrat (yukarıda). Sadece iki ağırlık var ama yeterince iyi. Gotham ve Proxima Nova için kesinlikle en iyi ücretsiz alternatif, yine de o ikisi kadar iyi olmanın yanından geçemez. Google Fonts’ta mevcut.

Raleway

Raleway (yukarıda). Başlıklar için iyi; belki de esas metin için biraz uygun değil (şu w harflerine de bir bakın!). Google Fonts’ta mevcut.

Cabin

Cabin (yukarıda). Google Fonts’ta mevcut.

Lato

Lato (yukarıda). Google Fonts’ta mevcut.

PT Sans

PT Sans (yukarıda). Google Fonts’ta mevcut.

Entypo Social

Entypo Social (yukarıda). Bu bir ikon fontu Entypo’yu kullanma bir başladığınızda her yerde görmeye başlayacaksınız ama bu sosyal ağ butonları saf altın. Tekrar tekrar küçük renkli çemberler içinde sosyal medya ikonları oluşturmak istemiyor musunuz? Güzel, ben de. Entypo.com’da mevcut.

Sizi şu kaynaklarla baş başa bırakayım:

Güzel Google web fontları. Google Fonts’un ne kadar iyi görülebileceği gösteren bir vitrin. İlham almak için defalarca bu basit sayfaya geri geldim.

FontSquirrel. Ticari kullanım için uygun fontlardan oluşan en iyi koleksiyon ve tamamen ücretsiz.

Typekit. Adobe Creative Cloud kullanıyorsanız, (örn. Photoshop veya Illustrator aboneliği vb.) bir sürü muhteşem fonta ücretsiz erişiminin var demektir. Ve evet, Proxima Nova da dahil.


Kural 7: Bir sanatçı gibi araklayın

Oturup da bir uygulama ögesi — bir buton, tablo, şema, açılır pencere ya da her neyse — tasarlamayı ilk denediğimde, o ögenin iyi görünmesi için ne kadar az şey bildiğimi ilk defa fark ettim.

Neyse ki şimdiye kadar hiç bir kullanıcı arayüzü ögesini sıfırdan icat etmek zorunda kalmadım. Bu, her zaman başkalarının nasıl yaptığını görüp en iyilerinden uygun olanı seçebildiğim anlamına geliyor.

Ama en uygununu nereden seçmeli? İşte müşteriler için tasarım yaparken en kullanışlı bulduğum kaynaklar. Yukarıdan aşağıya doğru:

1. Dribbble

Sadece davetiye ile katılabilinen “tasarımcılar için bir göster-anlat” sitesi olan bu site istisnasız internetteki en kaliteli UI işlerine sahip. Neredeyse her şeyin en iyi örneğini burada bulabilirsiniz.

Aslında, dribbble’daki çalışmalarımı buradan takip etmelisiniz. Takip etmeniz gereken birkaç kişi daha var.

  • Victor Erixon. Çok özgün kişisel bir tarzı var ve bu tarzı müthiş. Güzel, temiz, düz tasarımlar. Adam yaklaşık 3 yıldır tasarım yapıyor ve şimdiden işin zirvesinde.
  • Focus Lab. Bu adamalar “Dribbble ünlüleri” ve çalışmaları da bu ünü hak ettiklerini gösteriyor. Gerçeken çeşitli; daima en üst seviyede.
  • Cosmin Capitanu. Harika bir joker. Gösterişli olmadan gerçekten yaptıklarını geleceğe aitmiş gibi gösteriyor. Renklerle arası çok iyi. Aslında o kadar da kullanıcı deneyimine odaklanmıyor — bu aynı zmanda dribbble’ın geneline yapılan bir eleştiridir.
Work by Victor Erixon, Focus Lab, and Cosmin Capitanu, respectively

2. Flat UI Pinboard

“Warmarc”ın kim olduğu hakkında en ufak bir fikrim bile yok ama telefon kullanıcı arayüzü panosu, birbirinden farklı güzel UI örnekleri bulmaya çalışırken bana son derece faydalı oldu.

3. Pttrns

Mobil uygulama ekran görüntülerinden oluşan bir rehber. Pttrns’in iyi yanı tüm site — sıkı durun — UX örüntülerine göre organize edilmiş. Giriş sayfası, kullanıcı profili veya arama sonuçları vb. olsun hangi arayüz üzerinde çalışıyorsanız çabucak araştırma yapmanızı kolaylaştırıyor.


Her sanatçının en iyisini taklit etmekte iyi bir düzeye gelinceye kadar kopyalaması gerektiğine gerçekten inanıyorum.

Bu süre zarfında hadi hırsızların yaptığını yapalım.

Bu bölümün ruhuna uygun olarak “Bir Sanatçı Gibi Araklayın” başlığı, çoğunlukla adı, sayfaların içerebileceği her şeyi özetliyor gibi göründüğü için okumadığım bir kitaptan araklandı.


Sonuç

Bunları yazdım çünkü ben de kısa bir süre önce aynı şeyleri görmek isterdim. Umarım sie yardımı dokunur. UX tasarımcısıysanız telkafesleri çizdikten sonra iyi bir model hazırlayın. Geliştirici iseniz, bir sonraki yan projenizi elinize alın ve iyi görünmesini sağlayın. Kullanıcı arayüzünün, doğru düzgün yapabilmek için sihirli sanat okulu yetenekleri gerekiyormuş gibi görünmesini istemiyorum. Sadece gözlem, taklit ve arkadaşlarınıza neyin işe yaradığını söylemek.

Her neyse, şu ana kadar bunları öğrendim ve ben her zaman acemiyim.


Hâlâ benimleyseniz, toplamda 5000 kelimelik iki makale okudunuz ve çok sayıda tasarım ve ekran görüntüsü gördünüz. Ancak henüz ölmedim o yüzden daha bitmedi.

Başka tasarım analizleri ve benzer şeyler için tasarım bültenime katılmalısınız!

Son olarak: Bunu geçimimi sağlamak için yapıyorum. Serbest UX/UI tasarımcısı mı lazım? Beni işe alın.

Bizi Takip Edin