Arayüz Tasarımı, Renk & Yazı Tipi — Kullanışlı Siteler

WebAIM Contrast Checker

2026-10-18T00:00:00Z

Ö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.

https://webaim.org/resources/contrastchecker/

One Page Love

2026-10-09T09:00:00Z

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.

https://onepagelove.com/

Atmos

2026-09-18T00:00:00Z

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.

https://atmos.style/

Awesome Design Principles

2026-09-18T00:00:00Z

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ı.

https://github.com/robinstickel/awesome-design-principles

Awesome Design Systems

2026-09-18T00:00:00Z

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ı.

https://github.com/klaufel/awesome-design-systems

Awesome Product Design

2026-09-18T00:00:00Z

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.

https://github.com/ttt30ga/awesome-product-design

Awesome Web Design

2026-09-18T00:00:00Z

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ı.

https://github.com/nicolesaidy/awesome-web-design

Awwwards

2026-09-18T00:00:00Z

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

https://www.awwwards.com/

Behance

2026-09-18T00:00:00Z

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

https://www.behance.net

Checklist Design

2026-09-18T00:00:00Z

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.

https://www.checklist.design

Color Hunt

2026-09-18T00:00:00Z

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.

https://colorhunt.co

Colorful

2026-09-18T00:00:00Z

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ı.

https://github.com/Siddharth11/Colorful

Colormind

2026-09-18T00:00:00Z

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

https://colormind.io

Colors and Fonts

2026-09-18T00:00:00Z

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.

https://www.colorsandfonts.com/

Colors.lol

2026-09-18T00:00:00Z

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ı.

https://colors.lol

Dribbble

2026-09-18T00:00:00Z

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ı.

https://dribbble.com

Flat UI Color Picker

2026-09-18T00:00:00Z

Ö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ı.

https://www.flatuicolorpicker.com/

Font Flipper

2026-09-18T00:00:00Z

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.

https://fontflipper.com/

FontPair

2026-09-18T00:00:00Z

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

https://www.fontpair.co/

Fontsource

2026-09-18T00:00:00Z

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.

https://fontsource.org

Framer

2026-09-18T00:00:00Z

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ı.

https://www.framer.com/

Image Color Picker

2026-09-18T00:00:00Z

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ı.

https://imagecolorpicker.com

Interfaces.pro

2026-09-18T00:00:00Z

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.

https://interfaces.pro/

Mobbin

2026-09-18T00:00:00Z

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.

https://mobbin.com

Realtime Colors

2026-09-18T00:00:00Z

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.

https://www.realtimecolors.com

The Component Gallery

2026-09-18T00:00:00Z

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

https://component.gallery

Type Scale

2026-09-18T00:00:00Z

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.

https://typescale.com

Land-book

2026-08-21T20:53:20Z

İ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ı.

https://land-book.com/

Wakamai Fondue

2026-08-21T20:53:20Z

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ı.

https://wakamaifondue.com/

Figma

2026-08-19T16:15:54Z

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.

https://www.figma.com/

Coolors

2026-08-17T20:53:20Z

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.

https://coolors.co/

SaaS Design

2026-08-17T20:53:20Z

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

https://www.saasdesign.io/free-figma-templates

UI Design Daily

2026-08-17T20:53:20Z

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.

https://www.uidesigndaily.com/

before.click

2026-07-13T06:36:26Z

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.

https://before.click/

Site of Sites

2026-07-08T08:29:01Z

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.

https://www.siteofsites.co/

Unsection

2026-07-08T08:24:21Z

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.

https://www.unsection.com/

Game UI Database

2026-04-20T11:54:09Z

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.

https://www.gameuidatabase.com/

Google Fonts

2026-04-19T15:48:55Z

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.

https://fonts.google.com/?preview.script=Latn

Moqups

2025-09-04T10:25:27Z

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.

https://moqups.com/