UI Komponentlerinin Adını Bilmiyor musun? NameThatUI Tam Sana Göre

Web sitelerinde gezerken beğendiğin bir komponenti görüyorsun, ama adını bilmiyorsun. Birisi senden bir şey istiyor, sen de adını bilmiyorsun. İkiniz de anlaşamıyorsunuz. Bu senaryo, özellikle AI ile geliştirme sürecine yeni giren "vibe coder"lar için çok tanıdık.

Sorunun Adı: UI Terminoloji Eksikliği

Deneyimli bir frontend geliştiricisi, karşısındaki kişinin anlattığı şeyi hemen çözebilir: "Sen aslında bir carousel istiyorsun" veya "Bu bir loading skeleton." Geçmiş deneyimleri sayesinde bileşenlerin isimlerini, kaç elementten oluştuklarını ve nasıl çalıştıklarını biliyorlar.

Ancak doğrudan AI ile geliştirme sürecine giren biri için durum farklı. "Alttan bir şey çıksın", "kullanıcıların resimleri birbirinin üstüne binsin" gibi tariflerle hem AI'a hem de ekip arkadaşlarına iş anlatmaya çalışıyorsunuz. Sonuç genellikle uzun geri bildirim döngüleri ve yanlış anlamalar oluyor.

NameThatUI Nedir?

namethatui.com, UI komponentlerinin isimlerini öğrenmeni sağlayan ücretsiz bir web sitesi. Oyun gibi tasarlanmış arayüzüyle komponentleri görüp isimlerini öğrenebiliyorsun.

Öğrenince Ne Değişiyor? Somut Örnekler

Avatar Grubu

Bir kullanıcı sana şunu anlatmaya çalışıyor: "Kullanıcıların avatarları olsun, hepsi birbirinin arkasına gizlensin, sekiz kişi varsa artı dörde basınca hepsi açılsın." Aslında istenen şey bir avatar group (avatar yığını). Bu bileşenin içinde şu elementler var:

Avatar stack / overlap: Avatarların arka arkaya binmesi
Separation ring: Avatarları birbirinden ayıran yuvarlak halka
Fallback: Resim yoksa gösterilen baş harf veya ikon
Overflow avatar: "+4" gibi fazla avatarları gösteren ve tıklandığında gerisini açan element

Bunu bilince AI'a tek cümlede anlatabiliyorsun.

Modal, Drawer ve Sheet Farkı

Genellikle hepsi için "bir pencere açılsın" diyoruz. Ama doğru terimler şunlar:

Modal / Dialog: Ekranın ortasında açılan, tek bir soru soran ve dışına tıklayınca kapanan pencere
Drawer: Sağdan (veya soldan) süzülen menü yapısı
Sheet: Alttan yükselen panel

AI'a "drawer" dediğinde sağdan çıkan bir menü getirir. "Alttan bir şey çıksın" dediğinde ise tahmin yürütmek zorunda kalır.

Bento Grid

O modüler, farklı boyutlarda kartlardan oluşan grid yapısını anlatmak mı istiyorsun? Adı bento grid. AI'a "bento grid layout istiyorum" dediğinde istediğin yapıyı tek seferde oluşturur.

Bonus: UI Stil İsimleri

Sitede bir de stil katalogu var. Web siteni belirli bir tema üzerine kurmak istiyorsan önce o temanın adını öğrenmek işini çok kolaylaştırıyor:

Neo-brutalism: Kalın kenarlıklar, yüksek kontrast, ham görünüm
Minimalism: Notion tarzı, sade, içerik odaklı
Glassmorphism: Buzlu cam efekti, mobil ve tracker uygulamalarında yaygın

Bir terimi kopyalayıp Google Görseller'e yapıştırırsan o stilin nasıl göründüğünü anında görebilirsin.

Sonuç

UI terminolojisini bilmek sadece geliştirici olmak için gerekli değil. Bir ürün geliştiriciye iş anlatan biri, bir tasarımcıyla iletişim kuran biri veya AI ile prompt yazan biri için de bu isimler kritik. Doğru terimi kullanmak, seni tek seferde doğru sonuca götürür.

Senin de kullandığın ve faydalı bulduğun benzer siteler varsa yorumlarda paylaş; herkes faydalansın.