Eğitimin Amacı ve Kapsamı
Farklı ürün ekiplerinin aynı butonu, formu ve modal'ı tekrar tekrar tasarlayıp kodlaması; hem geliştirme hızını düşürür hem de kullanıcıya parçalı bir marka deneyimi yaşatır. Bu eğitim, tasarım ve yazılım ekiplerini ortak bir dilde buluşturan yaşayan bir Design System kurmayı ve yönetmeyi öğretir.
Görsel envanter çıkarma, çok katmanlı design token mimarisi (primitive, semantic, component), erişilebilir bileşen API tasarımı, Figma kütüphaneleri ile Storybook/kod deposu eşitlemesi, kullanım kılavuzu yazımı, SemVer sürümleme ve katkı/yönetişim modeli uygulamalı işlenir. Katılımcılar kurumları için bir token şeması, örnek bileşen spesifikasyonu ve yönetişim kontrol listesi oluşturur.
Kimler Katılmalı?
- Tasarım sistemi kuran veya yöneten UI/UX ve Design System tasarımcıları
- Ortak UI bileşen kütüphanesi geliştiren frontend ve mobil mühendisler
- Çok ürünlü yapılarda tasarım-yazılım hızını artırmak isteyen ürün ve mühendislik liderleri
- Ön koşul: Figma veya modern frontend bileşen (React/Vue/Angular/Mobile) deneyimi
Kazanımlar
- Mevcut arayüzlerin görsel denetimini (UI inventory) yaparak standartlaştırılacak bileşenleri belirler
- Çoklu marka ve temayı destekleyen üç katmanlı design token isimlendirme ve dönüşüm yapısını kurar
- Figma bileşen özellikleri (props) ile frontend bileşen API'sini birebir uyumlu tasarlar
- Bileşen kullanım kurallarını, erişilebilirlik (klavye/ARIA) gereksinimlerini ve Storybook dokümanlarını yazar
- Katkı süreci, breaking change yönetimi ve benimsenme (adoption) metrikleriyle sistemi yaşatır
Konular
Design System Temelleri, UI Denetimi ve Mimari
- Style guide, bileşen kütüphanesi ve tam kapsamlı Design System farkı
- UI inventory çıkarma, Atomic Design ve temel/bileşik bileşen sınıflandırması
Design Tokens: İsimlendirme, Katmanlar ve Çoklu Tema
- Global/Primitive, Alias/Semantic ve Component-specific token katmanları
- Renk, tipografi, boşluk, gölge ve kırılım token'ları; Style Dictionary ve W3C formatı
Bileşen Mimarisi, API Uyumu ve Erişilebilirlik
- Durumlar (hover, focus, disabled, error), slot/composition desenleri ve prop eşlemesi
- Klavye navigasyonu, odak halkası, renk kontrastı ve ARIA nitelikleri
Figma – Kod Senkronizasyonu ve Dokümantasyon
- Storybook, Figma Code Connect ve token'ların CI/CD ile koda aktarımı
- Ne zaman kullanılır / kullanılmaz rehberleri ve canlı kod örnekleri
Yönetişim, Sürümleme ve Kurumsal Benimsenme
- Merkezi, federe ve hibrit ekip modelleri; yeni bileşen talep ve katkı akışı
- SemVer sürümleme, deprecation (kullanımdan kaldırma) ve adoption metrikleri
Bu Kategorideki Diğer Eğitimler
-
Dijital ürün doğrulama için etkileşimli prototipleme: kağıt ve lo-fi akışlardan hi-fi prototiplere, Smart Animate ve mikro-etkileşimler, değişken ve koşullu mantıkla gerçekçi formlar/sepetler ve kullanılabilirlik testi hazırlığı.
- Canlı Kurs
- 5 modül
-
Ürün ve tasarım kararları için uygulamalı User Research: araştırma planı ve hipotez kurma, derinlemesine kullanıcı görüşmeleri, moderasyonlu/moderasyonsuz kullanılabilirlik testi, card sorting, sentez ve içgörü raporu.
- Canlı Kurs
- 5 modül
-
Tasarımcılar için iki yönlü AI yetkinliği: kullanıcı araştırması sentezi, wireframe/UI üretimi (Figma AI, v0, Relume) ve mikro-metin yazımında AI kullanımı; ayrıca copilot, agent ve üretken AI ürünleri için UX desenleri.
- Canlı Kurs
- 5 modül
-
Uçtan uca dijital pazarlama stratejisi ve kanal yönetimi: müşteri yolculuğu ve huni (funnel) kurgusu, SEO ve içerik, Google Ads ve ücretli sosyal medya, e-posta/CRM otomasyonu, dönüşüm optimizasyonu (CRO) ve ROAS/CAC ölçümü.
- Canlı Kurs
- 5 modül
-
B2B ve B2C markalar için stratejik içerik pazarlaması: alıcı yolculuğu ve arama niyeti haritalama, topic cluster ve pillar içerik mimarisi, hikaye anlatımı, çok kanallı dağıtım/yeniden kullanım (repurposing) ve içerik ROI ölçümü.
- Canlı Kurs
- 5 modül
-
B2B ve yüksek değerli satışlar için Lead Generation: ICP ve alıcı sinyalleri, talep yaratma (demand gen) ve lead yakalama, yüksek dönüşümlü açılış sayfaları, LinkedIn/Google ve outbound/ABM kurguları, lead scoring ve CRM/satış devri.
- Canlı Kurs
- 5 modül
Bizimle iletişime geçin
