Arayüz Tasarımı, Renk & Yazı Tipi

Renk paleti ve ton basamakları üreten araç. Coolors gibi palet üreteçlerinden farkı erişilebilirlik (kontrast) denetimini paletin içine yerleştirmesi: arayüzde kullanılacak renkleri daha baştan okunur seçiyorsun.

Daha iyi ve tutarlı tasarımlar için tasarım ilkeleri listesi. Bileşen kitaplarından farkı somut bileşen değil, şirketlerin ve ekiplerin yayımladığı tasarım ilkelerini toplaması.

Kurallarla yönlendirilen, yeniden kullanılabilir bileşen sistemleri (design system) listesi. UI kitlerinden farkı yalnız bileşenleri değil, ilkeleri ve belgeleriyle birlikte yayımlanmış gerçek şirket sistemlerini toplaması.

Fikirden ürüne tasarım sürecini kapsayan kaynak listesi. UI kit listelerinden farkı süreç odaklı olması: araştırma, prototipleme, kullanılabilirlik testi ve devir teslim.

Dijital tasarımcılar için web tasarımı kaynak listesi. Geliştirici listelerinden farkı tasarımcıya yönelik olması: ilham, tipografi, renk ve tasarım araçları.

Öne çıkan web tasarımlarını ödüllendiren ve sergileyen galeri. Rastgele ilhamdan farkı jüri değerlendirmesiyle kaliteyi süzmesi.

App Store ekran görüntüsü tasarımları arşivi. Genel arayüz galerilerinden farkı yalnız mağaza görsellerine odaklanması — mağaza sayfası dönüşümü doğrudan bu görsellere bağlı olduğu için dar ama isabetli bir kaynak.

Adobe'nin portföy platformu; tekil görsel yerine uçtan uca proje vaka çalışmaları sunar.

Bileşen ve sayfa bazında uygulanabilir UI/UX kontrol listeleri. Genel UX yazılarından farkı her bileşen için somut, işaretlenebilir maddeler vermesi.

Topluluk oyuyla derlenmiş, kullanıma hazır renk paletleri kataloğu. Coolors gibi üreteçlerden farkı rastgele üretim yerine başkalarının beğendiği hazır paletlerden seçmen.

Bir sonraki renk şemanı seçmene yardım eden kaynak listesi. Coolors gibi tek bir palet üretecinden farkı, üreteçleri, paletleri ve renk kuramı kaynaklarını birlikte toplaması.

Fotoğraf ve sanattan öğrenerek uyumlu renk paletleri öneren yapay zekâ üreticisi. Coolors’tan farkı rastgele kombinasyon yerine öğrenilmiş bir modelden palet üretmesi.

Renk paletleri ve tipografiyi bir arada sunan tasarım kaynağı. Yalnız palet ya da yalnız font sunan sitelerden farkı ikisini birlikte, uyumlu eşleşmeler olarak göstermesi.

Elle seçilmiş renk paletleri deposu; her palet (bilerek abartılı) bir tanımla geliyor. Coolors gibi üreteçlerden farkı rastgele üretim değil küratörlü bir koleksiyon olması.

Renk paleti üreteci; boşluk tuşuyla yeni kombinasyon deniyor, beğendiğini kilitleyip gerisini yeniliyorsun. Color Hunt gibi hazır palet kataloglarından farkı paleti kendin üretmen; kontrast denetimi de var.

Tasarımcıların iş örneklerini paylaştığı ilham topluluğu. Behance’ten farkı kısa “shot”lar paylaşılması; gerçek ürünlerden çok konsept çalışma ağırlıklı.

Arayüz tasarımında en yaygın kullanılan araç; Dev Mode ile geliştiriciye ölçü ve token aktarıyor. Sketch gibi masaüstü araçlardan farkı tarayıcıda çalışması ve eşzamanlı düzenleme — o araçların sonunu getiren de bu.

Ön yüz için uyumlu düz (flat) renkler sunan etkileşimli palet. Serbest renk seçicilerden farkı önceden seçilmiş, birbirine uyan renklerle çalışması.

Google fontlarını tek tek, hızla çevirerek kendi metninle karşılaştıran araç. Google Fonts kataloğunda gezmekten farkı karar vermeye odaklanması: beğenmediğini eliyor, beğendiğini ayırıyorsun.

Birbiriyle iyi giden Google font çiftlerini gösteren araç. Tek tek denemekten farkı uyumlu başlık-gövde eşleşmelerini örnekle sunması.

Açık kaynak yazı tiplerini npm paketi olarak kendi sunucunda barındırmanı sağlıyor. Google Fonts CDN’inden farkı dış bir sunucuya istek atılmaması: gizlilik ve çevrimdışı çalışma için.

Etkileşimli arayüz ve site tasarlayıp yayına alan tasarım aracı. Figma’dan farkı tasarımın bir maket değil, doğrudan yayına alınan çalışır bir site olması.

Oyun arayüzlerini ekran türüne göre sınıflandırıyor: envanter, harita, ayarlar, yükleme ekranı. Dribbble gibi genel galerilerden farkı bu sistematiklik — başka alanda bu kadar düzenli bir arayüz arşivi yok.

Açık lisanslı yazı tipi kataloğu; dosyaları indirip kendi sunucundan servis edebiliyorsun. Ticari font dağıtıcılarından farkı tümünün ücretsiz ve açık lisanslı olması; CDN’den çekmek Almanya’da GDPR gerekçesiyle dava konusu oldu, indirmek daha güvenli.

Yüklediğin görselin üzerine tıklayarak HEX/RGB kodu alıyor ve görselden bir palet çıkarıyor. Tarayıcının damlalık aracından farkı sayfa yerine kendi görselin üzerinde çalışması.

Arayüz tasarımı için ilham galerisi. Dribbble gibi sitelerden farkı konsept çalışmalar yerine gerçek ürünlerden alınmış ekranları göstermesi.

İyi tasarlanmış web sitelerinin küratörlü galerisi; sektöre, üsluba ve renge göre süzülebiliyor. Awwwards gibi ödül sitelerinden farkı gösterişli deneysel işler yerine gerçekten yayında olan ürün sitelerini toplaması.

Gerçek mobil ve web uygulamalarının arayüz akışlarını aranabilir ekran görüntüleriyle topluyor. Dribbble’dan farkı konsept değil yayındaki ürünleri göstermesi; tam erişim ücretli.

Tarayıcıda tel kafes ve prototip; Figma’nın tasarım derinliği yok ama hızlı bir akış şeması ya da ekran taslağı için yeterli ve daha hafif.

Tek sayfalık web sitelerinin ve şablonların galerisi. Awwwards gibi geniş tasarım galerilerinden farkı tek bir biçime odaklanması — açılış sayfası tasarlayanın aradığı da genelde bu.

Bir paleti gerçek bir arayüz üzerinde canlı önizliyor. Palet üreteçlerinden farkı renkleri renk kutucukları yerine bağlamında — metin, buton, arka plan — görmen.

Açık kaynak Figma arayüz şablonları koleksiyonu. Genel Figma topluluk dosyalarından farkı SaaS ürün arayüzlerine odaklanması.

Bütünsel tasarım dili örnekleri için galeri; tipografi ve hareket kullanımı güçlü siteler derleniyor. Bileşen galerilerinden farkı tek tek parçaları değil sitenin bütün dilini göstermesi.

Aynı arayüz bileşenini farklı tasarım sistemlerinde yan yana gösteren referans.

Bir oran seçip görsel tipografik ölçek üreten ve CSS’ini veren hesaplayıcı. Başlık boyutlarını elle seçmekten farkı hepsinin tek bir orandan türemesi: tutarlı bir hiyerarşi.

Her gün yayımlanan ücretsiz arayüz bileşeni tasarımları; kaynak dosyaları Figma ve Sketch biçiminde indirilebiliyor. Ücretli UI kitlerinden farkı ücretsiz ve tek tek bileşen olarak gelmesi.

Bölüm bazlı tasarım örnekleri: hero, fiyatlandırma, SSS, footer ayrı ayrı. Tüm siteyi taramak yerine tek bir bölümü çözmek için filtreleyebiliyorsun.

Bir font dosyasını sürükleyince içindeki her şeyi döküyor: karakter kümesi, OpenType özellikleri, değişken eksenler ve bunları açan hazır CSS. Font önizleyicilerinden farkı çıktının doğrudan kullanılabilir CSS olması.

Ön plan ve arka plan rengini girince kontrast oranını ve normal metin, büyük metin ve arayüz bileşenleri için WCAG AA/AAA geçip geçmediğini gösteriyor. Palet üreticilerinden farkı renk önermemesi; seçtiğin bir çiftin okunabilirlik eşiğini tutup tutmadığını söylemesi.