Tasarım & UX Skill
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.
₺369
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.
Hazır React ve CSS desenlerini zamanlama ölçekleri, easing eğrileri ve erişilebilirlik kurallarıyla birleştirir; böylece her animasyonun bir amacı olur ve 60fps'de kalır.
₺369 tek seferlik
Bir kit içine ekle → Fiyatlara KDV (%20) dahildir. · Gerçek ajans işinden çıkarıldı · tek seferlik, kilit yok
- Tür Skill
- Kategori Tasarım & UX
- Teslimat E-posta · anında
- Lisans Tek seferlik
Çalışmanın içinden · kara kutu yok
Satın almadan önce işin kendisini gör.
Skill bir arayüze hareket ve geri bildirim eklerken fiilen şu döngüyü çalıştırır. Her animasyon yerini hak etmek zorunda, yaptığı iş bu:
- Her animasyona yazılmadan önce bir görev atar: geri bildirim (aksiyonun gerçekleştiğini onaylama), yönlendirme (öğeler nereden gelip nereye gidiyor), odak (dikkati çekme) veya süreklilik. Görevi olmayan dekoratif hareket kesilir.
- Süreleri sabit bir zamanlama ölçeğinden seçer: hover ve tıklama gibi mikro geri bildirim 100-150ms, toggle ve dropdown 200-300ms, modal ve sayfa geçişi 300-500ms; girişte ease-out, çıkışta ease-in.
- Çekirdek etkileşim kalıplarını uygular: yüklenirken layout'u koruyan skeleton ekranlar, yay fiziğiyle çalışan toggle ve butonlar, AnimatePresence sayfa geçişleri, tıklamada ripple geri bildirimi, 100px eşikli kaydırarak kapatma jestleri.
- 60fps performans bütçesini zorlar: sadece GPU hızlandırmalı transform ve opacity anime edilir; width, height, top ve left yasaktır çünkü layout yeniden hesaplaması ve gözle görülür takılma tetikler.
- prefers-reduced-motion desteğini hem CSS hem JS katmanında bağlar; hareketi kapatan kullanıcıda her animasyon anlık durum değişimine iner, aynı bilgiyi renk veya ikon değişimi taşır.
- Sonucu tarayıcının Performance panelinde profiller: 16ms üzerindeki her kare takılma sayılır ve etkileşim yayınlanmadan kök nedeni düzeltilir.
Tek güç kaynağı. 6 hat dışarı.
interaction-design · çekirdek
çekirdek aktif · 6 hat
- ✓ anında geri bildirim için
Anında geri bildirim için buton dokunuşu ve dalga efekti gibi mikro etkileşimler eklemek
- ✓ yükleme durumları için i…
Yükleme durumları için iskelet ekranlar ve ilerleme göstergeleri kurmak
- ✓ akıcı sayfa ve bileşen g…
Akıcı sayfa ve bileşen geçişleri tasarlamak
- ✓ kaydırarak kapatma kartl…
Kaydırarak kapatma kartları gibi jest etkileşimleri oluşturmak
- ✓ erişilebilir toggle, açı…
Erişilebilir toggle, açılır menü ve bildirim animasyonları uygulamak
- ✓ tüm uygulamada azaltılmış
Tüm uygulamada azaltılmış hareket tercihine saygı göstermek
Aldıkların sende kalır.
Zamanı ileri sar. Ne kaldığını izle.
Sonsuza dek
Sahip olmak tam olarak bu.
Kiralık yığın
yapay zekâ yazım aracı: abonelik
süresi doldu · erişim gittianaliz paketi: abonelik
süresi doldu · erişim gittitasarım platformu: abonelik
süresi doldu · erişim gitti(geriye bir şey kalmadı)
Senin ocağın
-
Amaçlı hareketle arayüzleri cilalı ve güven verici hissettirin
lisans: kalıcı -
GPU dostu transform ve opacity'ye bağlı kalarak takılan animasyondan kaçının
lisans: kalıcı -
Kaygı değil ilerleme ileten yükleme durumlarıyla terk oranını düşürün
lisans: kalıcı -
Yerleşik azaltılmış hareket desteğiyle varsayılan olarak erişilebilir kalın
lisans: kalıcı
abonelikler biter · tapular bitmez
Kutudaki her şey.
Bir parçayı eline al. Çalışırken izle.
Tutarlı hareket için zamanlama ölçeği ve easing fonksiyonu referansı
6 parça · tek çalışan sistem · e-postayla anında teslim
Bu herkes için dövülmedi.
- Araç kiralamayı sahip olmaya tercih ediyorsan, sana göre değil.
- Yığınını senin yerine başkası yönetsin istiyorsan, sana göre değil.
- Tahmin etmekten memnunsan, sana göre değil.
Performans ya da erişilebilirlikten ödün vermeden web arayüzlerine hareket ve geri bildirim inceliği ekleyen ön uç geliştiricileri ve UI tasarımcıları.
o zaman bu senin için dövüldü.Hangi AI ile çalışır
Tasarımı gereği evrensel: her yapay zekada çalışır. Açık Agent Skills + MCP biçiminde gelir (Claude’da yerleşik); ChatGPT, Gemini, Cursor ve Copilot aynı dosyaları kendine uyarlar.
- Claude Yerleşik biçim
- ChatGPT Açık standartla uyarlanır
- Gemini Açık standartla uyarlanır
- Cursor Açık standartla uyarlanır
- Copilot Açık standartla uyarlanır
Aklındakini yakala.
hava temizlendi. seninle ocak arasında hiçbir şey kalmadı.
bir kıvılcım yakala: ocak cevaplar
-
Framer Motion kullanmıyoruz, sadece düz CSS yazıyoruz. İşe yarar mı?
Yarar. Desenlerin çoğu hem React Framer Motion hem CSS karşılığıyla verilir; zamanlama ölçeği ve easing eğrisi referansları ise kütüphaneden tamamen bağımsızdır. Skeleton ekran, progress göstergesi ve reduced motion desteği düz CSS ile de uygulanır.
-
Animasyonları 60fps'te nasıl tutuyor?
Kural basit ama disiplinli: animasyon yalnızca GPU dostu transform ve opacity üzerinde döner. Layout tetikleyen özellikler anti-pattern listesinde tek tek işaretlenmiştir; reduced motion tercihi de hem CSS hem JavaScript tarafında varsayılan olarak ele alınır.
-
Markama özel bir motion dili de tasarlar mı?
Hayır. Bu paket mikro etkileşim, geçiş ve geri bildirim desenleri sunar; amaç süsleme değil iletişimdir. Markaya özgü hareket kimliği ve sanat yönetimi ayrı bir tasarım işidir.
-
Nasıl teslim edilir?
Satın alımdan hemen sonra e-posta ile iletilir, kuruluma hazır, anında indirilir; bekleme yok.
-
Tek seferlik mi, abonelik mi?
Tek seferlik alımdır; abonelik veya gizli ücret yoktur. Fiyata KDV (%20) dahildir.
-
İade alabilir miyim?
Dijital ürün olduğu için indirildikten sonra iade yapılmaz. Bu yüzden ne içerdiğini ve kime uygun olduğunu burada açıkça paylaşıyoruz.