- Bunlara mutlaka uymak zorunda değilsiniz, ancak bu kuralları olduğu gibi uygulamak her zaman güvenlidir
Saf siyah/beyaz yerine siyaha ve beyaza yakın renkler kullanın
- Saf siyah ekranda doğal görünmez, saf beyaz ise fazla parlaktır
- #000000 ve #FFFFFF yerine #222222 ve #F2F2F2 kullanın
- Bundan sonra siyah/beyaz dendiğinde bu renklerden bahsediyoruz
Nötr renklere ton katın
- Nötr renkler genelde siyah/beyaz/gri olur
- Renk kullanacaksanız, nötr renklere yalnızca çok az renk ekleyin (
grey yerine açık kırmızı, black yerine koyu mavi gibi)
- Bu, renk paletinin daha tutarlı hissettirmesini sağlar
- HSB kullanıyorsanız yaklaşık %5 veya daha az doygunluk eklemeniz yeterlidir
Önemli öğelerde yüksek kontrast kullanın
- Kullanıcının dikkat etmesi gereken tüm öğeler: butonlar, içerik vb.
- Ayırıcı çizgiler, drop shadow gibi unsurlarda kontrastı mümkün olduğunca düşük tutun
Tasarımdaki her unsur bilinçli olmalı
- Boşluk, hizalama, boyut, aralık, renk ve gölge dahil her şey
- Biri tasarımın belirli bir kısmını sorduğunda neden öyle yaptığınızı açıklayabilmelisiniz
Optical (görsel) hizalama çoğu zaman matematiksel hizalamadan daha iyidir
- Bazı biçimler, göze hizalı görünecek şekilde yerleştirildiğinde daha iyi sonuç verir
- Göze göre hizalama pratik ister, ancak düzenli yaparsanız bunu hızlıca fark etmeye başlarsınız
Büyük yazılarda harf aralığını ve satır yüksekliğini azaltın, küçük yazılarda artırın
- Bu tüm metinler için geçerlidir
- Yazı büyüdükçe harfler ve satırlar arasında daha az boşluk gerekir. Tersi de aynı şekilde geçerlidir
Kapsayıcının kenarlığı, kapsayıcı ve arka planla kontrast oluşturmalı
- Kenarlık, kapsayıcının içiyle arka plan rengi arasındaki bir ton değil, arka plandan daha koyu bir renk olmalıdır
Her şey başka bir şeyle hizalı olmalı
- Hizalama, nesnelerin birbiriyle ilişkili olduğunu gösterir
- Bir şey başka bir şeyle hizalı değilse, tasarıma ait değilmiş gibi hissedilir
- İdeal olarak her öğe, bir tür mantık doğrultusunda diğer öğelerle hizalanmalıdır
Paletinizdeki renklerin kendine özgü parlaklık değerleri olmalı
- Renklerin parlaklık değerleri farklıysa, yalnızca tonlarında değil, parlaklıklarında da kendilerine özgü bir görünüm ve his kazanırlar
- Böylece renkler birbiriyle fazla rekabet etmez ve daha iyi bir renk paleti elde edilir
Nötr renklere ton katacaksanız, Warm veya Cool içinden yalnızca birini kullanın. İkisini birden kullanmayın
- Nötr renklerde sıcak/soğuk tonları birlikte kullanırsanız renk paleti tutarlı hissettirmez
Boyutlar matematiksel olarak ilişkili olmalı
- Öğeler arasındaki boşluklar ve boyutlar bir tür ölçeğe göre belirlenmelidir. Bu, tasarımın tutarlı görünmesine yardımcı olur
- Örnekte tüm öğeler 8'in katları olarak kullanılıyor. Aralıklar 8/16/24/32, satır yükseklikleri 48/40/24, metin boyutları 40/32/16
Öğeler görsel ağırlık sırasına göre yerleştirilmeli
- Bir satırda ya da sütunda birden fazla öğe varsa ve bunların bazıları diğerlerinden görsel olarak daha ağırsa (örneğin 2 buton ve 3 link gibi),
görsel olarak en ağır öğe önce gelmeli ve daha hafif öğeler sırayla en sona doğru yerleşmelidir
- Dikkat edilmesi gereken nokta, görsel olarak en ağır öğenin en dışta yer alması gerektiğidir
Yatay grid kullanacaksanız 12 kolon kullanın
- Kolon bazlı bölerseniz 12 kolon; 1, 2, 3 ve 4 kolonlu düzenler kurmanıza izin verdiği için büyük esneklik sağlar
Yüksek kontrastlı noktalar arasında boşluk bırakın
- Gözlerimiz öğelerin kenarlarını kontrasta göre algıladığı için, kontrastlı noktalar arasında boşluk olmasını bekleriz
Daha yakın öğeler daha parlak olmalı
- Ekrandaki öğeler kullanıcıya ne kadar yakınsa (yani daha öndeyse) o kadar parlak olmalıdır
- Bu, light/dark mode için de geçerlidir. Çünkü gerçek dünyada da sistem böyle işler
Drop shadow blur değerini mesafe değerinin iki katı yapın
- Y ekseninde 4 piksel uzanan bir gölge ayarlıyorsanız, blur değerini 8 piksel yapın
- Öğe izleyiciye “yaklaştıkça” gölgenin opacity değerini de azaltmak iyi olur
Karmaşık olanın üstüne sade olanı, sade olanın üstüne karmaşık olanı yerleştirin
- Karmaşık bir arka plan (gösterişli bir gradient gibi), ön plandaki öğe (metin) sade olduğunda en iyi görünür
- Ön plan karmaşıksa, sade bir arka plan en uygunudur
- Sadenin üstüne sade de mümkündür ama düz görünebilir
- Karmaşığın üstüne karmaşık koymak görsel karmaşa yarattığı için kaçınılmalıdır
Kapsayıcı renklerini parlaklık sınırları içinde tutun
- Arka plan ile kapsayıcı arasındaki parlaklık farkı, koyu arayüzlerde %12'yi, açık arayüzlerde ise %7'yi geçmemelidir (HSB renk sistemindeki parlaklık değeri olarak)
- Bu sonuç, iyi tasarlanmış yaklaşık 100 web sitesinde kapsayıcı parlaklığının arka planla karşılaştırıldığı bir incelemeden elde edildi
Dış padding, iç padding ile aynı ya da daha büyük olmalı
- Kapsayıcının iç padding'i, kapsayıcı içindeki öğeler arasındaki boşluktur. Dış padding ise öğelerle kapsayıcının kenarı arasındaki boşluktur
- Dış padding, iç padding ile aynı ya da daha büyük olmalıdır
Gövde metnini 16px veya üzerinde tutun
- 16px, çoğu tarayıcıda varsayılan metin boyutudur
- Bunun altındaki metinleri okumak zor olduğu için, gövde metninde kullanmamak güvenlidir
Yaklaşık 70 karakterlik satır uzunluğu kullanın
- Satır uzunluğunun 60 ya da 80 olması çok kritik değildir, ancak iki uçta da okunabilirlik sorunları ortaya çıkabilir
Butonlarda yatay padding'i dikey padding'in iki katı yapın
- Standart buton deseni, yüksekliğinden daha geniş olmaktır
- İnsanların bunu buton olarak algılamasını istiyorsanız bu deseni takip etmek iyi olur
En fazla 2 yazı tipi kullanın
- İkinci yazı tipi, tasarımın arkasındaki konsepti güçlendirmek için bir fırsattır
- Ayrıca tasarıma çeşitlilik katmaya yardımcı olur
- İkiden fazla kullanmak neredeyse hiç gerekmez ve tasarımın görsel olarak karmaşık hissettirmesine yol açabilir
İç içe geçmiş köşeleri doğru ele alın
- Bazen iki veya daha fazla yuvarlatılmış köşe iç içe geçer
- Doğru görünmesi için iç köşe yarıçapını, dış köşe yarıçapından ikisi arasındaki mesafeyi çıkararak ayarlayın
- Örn. dış köşe yarıçapı 30px ve iç köşe ondan 20px içerideyse, iç köşe yarıçapı 10px olmalıdır
İki ayırıcı çizgiyi yan yana koymayın
- Arka plan geçişleri, kapsayıcı kenarları ve bölücü çizgileri görsel olarak ayırt etmek zordur
- İki veya daha fazla ayırıcı çizginin bitişik durmasına izin vermeyin
6 yorum
@xguru
Ben, GeekNews'te okunabilirlik için aşağıdaki gibi stillendirerek görüntülüyorum. ;-)
https://userstyles.org/styles/179148#comments-section-wrapper
Teşekkürler.
Bu gerçekten çok iyi.. tasarım her zaman düşündüğüm bir konuydu ama böyle bir rehber olursa üretkenliği büyük ölçüde artırabiliriz.
Çeviri için teşekkürler! Çok yardımcı oldu.
Çok güzel!
@xguru
Bir çeviri hatası var, belirtmek istiyorum
"Daha yakın öğeler daha hafif olmalı" -> "Daha yakın öğeler daha parlak olmalı"
Aa, öyleymiş, teşekkürler~!