# Tasarım & UX, forgehouse

> Ziyaretçiyi müşteriye çeviren ve erişilebilirlik standartlarını geçen arayüzler. Tasarım sistemleri, özenli bileşenler, erişilebilirlik denetimi ve insanların ekranı gerçekte nasıl okuduğuna dayanan sayfa düzeni.

Bunları birleştiren şey, tasarımı yalnızca zevke bırakmamak. Yönü sektör verisi belirler, erişilebilirlik bir his değil kontrol edilebilir bir sayı olur, üç turlu gözden geçirme de "iyi görünüyor" yerine doğrulanmış kontrast ve düzen koyar.

## Kim için
- Arayüz çıkaran ama her renk ve boşluk kararında tereddüt eden geliştirici
- Jenerik ve yapay zeka işi görünen tasarımlardan bıkmış kurucu
- His değil, erişilebilirlik kanıtı isteyen ajans tasarımcısı

## Nereden başla
Design Intelligence Kit ile başlayın; tasarıma oturmadan önce sektörünüzde neyin çalıştığını görün, sonra sonucu Accessibility Compliance ile kontrol edin.

## Beceriler (26)
- [Accessibility Compliance](https://forgehouse.ai/tr/skiller/accessibility-compliance/), Ekran okuyucu desteği, klavye navigasyonu ve mobil erişilebilirlik içeren WCAG 2.2 AA uyumlu arayüzler oluşturmak için bir uygulama araç seti.
- [Animated Site Prompts](https://forgehouse.ai/tr/skiller/animated-site-prompts/), Animasyonlu web sitesi varlıkları üretmek için 25 hazır prompt şablonundan oluşan yeniden kullanılabilir bir katalog: hero görselleri, döngülü arka plan videoları, reveal-mask geçişleri ve sinematik VFX, önde gelen yapay zekâ görsel ve video modelleri için.
- [Brand Guidelines](https://forgehouse.ai/tr/skiller/brand-guidelines/), Ürettiğiniz her görsele: sunumlar, posterler, sosyal medya, arayüz taslakları ve belgeler, tutarlı, resmi bir marka kimliği uygulayın.
- [Claude Design Integration](https://forgehouse.ai/tr/skiller/claude-design-integration/), Düzenleri doğal dilde ürettiğiniz web aracı (Claude Design) ile bunları gerçek kod tabanınızda uygulayan terminali (Claude Code) birbirine bağlayan bir devir iş akışıdır.
- [Design Craft](https://forgehouse.ai/tr/skiller/design-craft/), Amatör veya ucuz görünen herhangi bir web tasarımını yükseltmek için nörobilim temelli, karar odaklı bir çalışma yöntemidir.
- [Design Intelligence](https://forgehouse.ai/tr/skiller/design-intelligence/), Her tasarım kararını içgüdü yerine veriye dayandıran sektörel bir tasarım veritabanıdır.
- [Design System Patterns](https://forgehouse.ai/tr/skiller/design-system-patterns/), Doğru tasarım token'ları, tema altyapısı ve bileşen mimarisiyle ölçeklenebilir tasarım sistemleri kurmak için bir plandır.
- [Design Token Parser Specify](https://forgehouse.ai/tr/skiller/design-token-parser-specify/), Figma'yı kod tabanınıza bağlar; böylece bir tasarımcının renk, font, boşluk veya gölge değişikliği tek bir doğruluk kaynağından geçerek otomatik olarak Tailwind yapılandırmasına, CSS değişkenlerine, Swift ve Kotlin'e akar.
- [Interaction Design](https://forgehouse.ai/tr/skiller/interaction-design/), Süslemek yerine iletişim kuran mikro etkileşimler, hareket, geçişler ve kullanıcı geri bildirimi tasarlamak için pratik bir araç seti.
- [Mobile Android Design](https://forgehouse.ai/tr/skiller/mobile-android-design/), Modern, uyarlanabilir Android uygulamaları inşa etmek için Material Design 3 ve Jetpack Compose üzerine bir ustalık dersi.
- [Mobile iOS Design](https://forgehouse.ai/tr/skiller/mobile-ios-design/), Cilalı, yerel iOS uygulamaları inşa etmek için Apple'ın İnsan Arayüz Yönergeleri ve SwiftUI üzerine bir ustalık dersi.
- [Nano Banana Mastery](https://forgehouse.ai/tr/skiller/nano-banana-mastery/), Gemini 3 Pro Image (Nano Banana) için üretim kalitesinde komut mühendisliği, sosyal medya görselleriniz plastik ve yapay görünmek yerine keskin ve markaya uygun çıksın.
- [React Native Design](https://forgehouse.ai/tr/skiller/react-native-design/), Bir React Native uygulamasını taşınmış değil, yerel hissettiren stillendirme, navigasyon ve animasyon katmanını sağlar.
- [Refero Design](https://forgehouse.ai/tr/skiller/refero-design/), Her arayüz kararını tahmin yerine gerçek ürün ekranlarına dayandıran, araştırma öncelikli bir tasarım metodolojisi.
- [Responsive Design](https://forgehouse.ai/tr/skiller/responsive-design/), 2026 tarayıcılarının gerçekten çalıştığı şekliyle uygulanan modern duyarlı tasarım: konteyner sorguları, clamp() ile akışkan tipografi, içsel CSS Grid ve gerçek bir mobil öncelikli kırılım stratejisi.
- [Screen Reader Testing](https://forgehouse.ai/tr/skiller/screen-reader-testing/), Web uygulamanızı VoiceOver, NVDA ve JAWS dahil gerçek ekran okuyucularla test etmek için komut düzeyinde pratik bir kılavuzdur, böylece erişilebilirliği engelli kullanıcıların gerçekte deneyimlediği şekilde doğrularsınız.
- [Shadcn UI](https://forgehouse.ai/tr/skiller/shadcn-ui/), shadcn/ui ile erişilebilir ve markaya uygun arayüz inşa edin: Radix primitive'leri, Tailwind CSS ve class-variance-authority, component'lerin node_modules'a değil doğrudan reponuza kopyalandığı copy-paste mimarisiyle bir araya gelir.
- [Tailwind Design System](https://forgehouse.ai/tr/skiller/tailwind-design-system/), Tailwind CSS, tasarım token'ları ve tipli bir bileşen kütüphanesiyle üretime hazır bir tasarım sistemi kurun.
- [Taste Skill Anti Cookie Cutter](https://forgehouse.ai/tr/skiller/taste-skill-anti-cookie-cutter/), Bir tasarımdaki 'AI ucuzluğu' kokusunu yakalayın: jenerik kahraman gradyan lekeleri, üç kolonlu özellik ızgaraları, stok fotoğraflı ekipler, 'İşinizi güçlendirin' gibi lorem-ipsum fiilleri: ve onu zanaat odaklı, referans temelli işle değiştirin.
- [Theme Factory](https://forgehouse.ai/tr/skiller/theme-factory/), Herhangi bir içeriğe saniyeler içinde tutarlı, profesyonel bir görsel kimlik kazandıran bir tema araç seti.
- [UI](https://forgehouse.ai/tr/skiller/ui/), React ve Next.js için üretim seviyesinde bir frontend kalıp kütüphanesi: bileşen sınıflandırması (Server mı Client mı), durum mimarisi, zorunlu veri-gösterimi ve form kalıpları, Tailwind stil disiplini.
- [UX Audit Toolkit Nielsen](https://forgehouse.ai/tr/skiller/ux-audit-toolkit-nielsen/), Nielsen'in 10 sezgisel kuralını, Krug'un 3-tık ilkesini, Fitts Yasası'nı ve Hick Yasası'nı tek bir 0-100 puanlama rubriğinde birleştiren kanıt temelli bir UX denetim el kitabı.
- [Visual Design Foundations](https://forgehouse.ai/tr/skiller/visual-design-foundations/), Tipografi, renk, boşluk ve ikonografi temel ilkelerinden tutarlı, erişilebilir görsel sistemler kurmak için bir temel.
- [WCAG Audit Patterns](https://forgehouse.ai/tr/skiller/wcag-audit-patterns/), Her kontrolü POUR ilkeleri (Algılanabilir, Çalıştırılabilir, Anlaşılabilir, Sağlam) altında düzenleyen ve otomatik taramayı disiplinli manuel doğrulamayla birleştiren tam bir WCAG 2.2 erişilebilirlik denetim çerçevesi.
- [Web Component Design](https://forgehouse.ai/tr/skiller/web-component-design/), React, Vue ve Svelte genelinde, prop patlaması yerine temiz birleştirme desenleriyle yeniden kullanılabilir ve bakımı kolay UI bileşenleri kurmanın ustalık dersi.
- [Web Design Guidelines](https://forgehouse.ai/tr/skiller/web-design-guidelines/), Erişilebilirlik, duyarlı davranış, etkileşim desenleri ve görsel kaliteyi canlı, topluluk güdümlü bir web arayüz standardına göre denetleyen sistematik bir UI kod inceleme motoru.

## Ajanlar (2)
- [Creative Director](https://forgehouse.ai/tr/ajanlar/creative-director/), Sosyal görseller ve marka kimliği için bir yaratıcı yönetmen.
- [UX Visionary](https://forgehouse.ai/tr/ajanlar/ux-visionary/), Landing page'leri optimize eden, formları sadeleştiren, A/B test tasarlayan ve WCAG 2.2 erişilebilirliğini uygulayan dönüşüm-öncelikli bir UX tasarımcısı.

## Sık sorulanlar

### Tasarım skill’leri gerçek kod mu üretiyor, mockup mı?
Üretim kodu. Component skill’leri erişilebilir, WCAG’den geçmiş arayüz işi çıkarır. Accessibility Compliance ise eldekini denetler. Ajans mockup’la fatura kesmez; çalışan component’le keser.

### “Nörobilim temelli kompozisyon” pratikte ne demek?
Her elemanın bir görevi var: başlık dikkati sabitler, CTA gözün indiği yerde durur, vurgu süs için değil Von Restorff’a göre dağılır. Skill’ler bu sistemi kodlar, sayfa derlenmez, kompoze edilir.

### Claude mevcut sitemin erişilebilirliğini denetleyebilir mi?
Evet. Accessibility Compliance WCAG 2.2 AA turunu koşar: gerçek zeminde gerçek kontrast hesabı, klavye yolları, odak durumları ve dokunma hedefleri; puan değil düzeltme listesi döner.

## İlgili konular
- [Büyüme & Dönüşüm](https://forgehouse.ai/tr/katalog/buyume-cro/), 22 parça
- [İçerik & Video](https://forgehouse.ai/tr/katalog/icerik-video/), 24 parça
- [Geliştirme](https://forgehouse.ai/tr/katalog/gelistirme/), 58 parça

https://forgehouse.ai/tr/katalog/tasarim-ux/