# Tasarım Brief'i — 3E Eğitim Platformu

*Sürüm 1.0 — 24.07.2026. Muhatap: UI/UX tasarımcısı. Bu doküman kendi başına yeterli olacak şekilde yazıldı; soru çıkarsa proje sahibi: Sets.*

---

## 1. Ürün nedir?

3E Group için geliştirilen bir **eğitim firması otomasyonu**: denizcilik/lojistik sektörüne mevzuata tabi zorunlu eğitimler (IMDG Kod, tehlikeli yük, deniz gözetim) veren bir firmanın tüm operasyonu bu platformda dönecek — eğitim planlama, satış/teklif, bakanlık bildirimi, yoklama, sertifika, eğitmen masraf/cari takibi, müşteri ve katılımcı yönetimi.

Bu **kurumsal, veri-yoğun, profesyonel** bir üründür. Kullanıcıların önemli kısmı bunu her gün saatlerce kullanacak (planlamacı, satışçı); bir kısmı ayda birkaç kez girecek (müşteri yetkilisi); bir kısmı hayatında bir-iki kez görecek (katılımcı, telefonundan). Tasarım her üç kullanım temposuna da saygı duymalı: yoğun kullanıcıya hız ve yoğunluk, seyrek kullanıcıya kendini anlatan ekranlar.

**Ürünün duygusu:** güven veren, sakin, düzenli, "burası ciddi bir kurum" hissi. Oyuncu değil, soğuk da değil.

## 2. Kapsam — hangi paneller?

Beş panel bu tasarımdan beslenecek (ana yönetim paneli ayrıca Filament ile yapılıyor, senin kapsamında değil):

| Panel | Kullanıcı | Tempo | Cihaz ağırlığı |
|---|---|---|---|
| Planlamacı | 3E operasyon ekibi | Her gün, yoğun | Desktop ağırlıklı |
| Satışçı | 3E satış ekibi | Her gün, yoğun | Desktop + mobil |
| Müşteri | Firma yetkilileri, departman/grup yöneticileri | Haftalık/aylık | Desktop + mobil |
| Eğitmen | 3E eğitmenleri (sürekli/sözleşmeli/proje bazlı) | Haftalık | **Mobil ağırlıklı** (sahada) |
| Katılımcı | Eğitim alan personel | Seyrek, tek seferlik | **Neredeyse tamamen mobil** |

Beş panel **tek bir tasarım sisteminden** üretilecek — ortak bileşen kataloğu, ortak token'lar, panel başına yalnız navigasyon/kompozisyon farkı. Beş ayrı tasarım istemiyoruz; bir sistem ve onun beş uygulaması istiyoruz.

## 3. Teknik çerçeve (tasarımı bağlayan kısıtlar)

- Frontend: **Vue 3 + Inertia, Tailwind CSS**. Tüm tasarım kararları Tailwind design token'larına çevrilebilir olmalı (renk/spacing/radius/shadow skalaları serbest değerler değil, skala olarak tanımlanmalı).
- **Responsive + mobile-ready zorunlu.** Mobil ayrı ürün değil; her akış 375px genişlikte eksiksiz tamamlanabilmeli. Breakpoint seti: 375 / 768 / 1024 / 1440.
- **Tek mode.** Dark/light yok. Tam beyaz zemin istemiyoruz; göz yormayan, hafif soğuk-nötr bir zemin üzerinde çalışılacak (bkz. renk yönü).
- Dil: **Türkçe.** Uzun Türkçe kelimeler ve resmi terimler ("Tehlikeli Madde Güvenlik Danışmanlığı...") tablo başlıklarına, butonlara, rozetlere sığmalı — kısaltma/tooltip stratejisi tasarımda düşünülmeli.
- Erişilebilirlik: **WCAG AA kontrast**, min. 44px dokunma hedefi, focus state'ler görünür.
- İkon: tek set, çizgi stili tutarlı (Lucide/Heroicons sınıfı). Karışık set yok.

## 4. Görsel dil ve renk yönü

- Kimlik: 3E Group'un mevcut lacivert geometrik logosu var; **bağlayıcı değil**. Bu ürüne uygun bir dil ve palet oturt; gerekiyorsa logoyu da yeniden yorumla (ayrı teslimat olarak).
- Renk yönü (bağlayıcı ilke, örnek tonlar öneri): **Flat UI ailesinin sakin tonları** — Wet Asphalt `#34495E`, Midnight Blue `#2C3E50`, Belize Hole `#2980B9`, Asbestos `#7F8C8D`, Concrete `#95A5A6`, zemin için Clouds `#ECF0F1` civarı kırık beyaz/gri-mavi.
- İlkeler:
  - **Az renk, çok anlam.** Bu kadar veri yoğun bir üründe renk dekorasyon değil bilgidir. Ana palet 2-3 nötr + 1 vurgu rengi; geri kalan her renk semantik olmalı.
  - Semantik renkler ayrıca tanımlanacak: başarı, uyarı, hata, bilgi + **statü renkleri** (aşağıda). Semantik tonlar da flat/mat ailede kalmalı — neon, gradient, glassmorphism yok.
  - Grafikler için ayrıca 6-8 renkli, renk körlüğü güvenli bir **data-viz paleti** tanımlanmalı.
- Tipografi: modern bir sans (Inter/benzeri). Sayısal veri çok — **tabular figures** destekli olmalı (tablolarda rakamlar alt alta hizalanır). Kompakt ve rahat olmak üzere iki yoğunluk düzeyi (tablolarda satır yüksekliği seçimi) düşünülmeli.

## 5. Bileşen kataloğu — EKSİKSİZ istenen envanter

Kataloğun her elemanı şu state'lerle teslim edilecek: default, hover, focus, filled, error (+hata mesajı), disabled, readonly, loading (uygunsa). Form elemanlarında label + helper text + zorunluluk işareti standardı tanımlanacak.

### 5.1 Form elemanları

- Text input, textarea (karakter sayacı varyantı), number input
- **Para inputu** (₺, binlik ayraç, kuruş — sağa hizalı)
- Telefon (TR maskesi), e-posta, TCKN (11 hane, maskeli gösterim varyantı)
- Şifre (göster/gizle + güç göstergesi), **OTP/passcode girişi** (6 haneli kutulu)
- **Searchable select** (tekli, async arama, "sonuç yok" durumu)
- **Multi-select** (chip'li, tümünü seç, arama)
- Cascade/bağımlı select (il → ilçe gibi)
- Date picker, **date-range picker**, time picker, datetime (TR formatı: 24.07.2026)
- Checkbox, radio, **radio card** (görsel seçim kartları — örn. eğitim türü seçimi), toggle/switch
- **Dosya yükleme:** drag-drop alanı, çoklu dosya, tip/boyut kısıtı gösterimi, yükleme progress'i, önizleme (PDF ve görsel), yüklenen evrak kartı (ad + tür + tarih + sil/indir). **Mobilde kameradan çekim** varyantı (eğitmen fiş fotoğrafı, imzalı yoklama çekimi).
- Rating (1-5, anket için), slider
- **Wizard/stepper** (çok adımlı formlar — yatay desktop, dikey mobil)
- Inline doğrulama düzeni, form bölüm başlıkları, iki kolonlu form grid'i (mobilde tek kolon)

### 5.2 Veri gösterimi

- **Tablo — bu ürünün kalbi.** Gereken yetenekler: sıralama, kolon bazlı filtre, global arama, sticky header, sayfalama (+ "toplam X kayıt"), satır aksiyonları (menü), çoklu seçim + bulk aksiyon barı, footer toplam satırı, kolon gizle/göster, yoğunluk seçimi, boş durum, loading skeleton. **Mobil dönüşüm deseni zorunlu:** tablo → kart listesi nasıl çöküyor, tasarlanacak.
- **Filtre barı:** çoklu filtre + aktif filtre chip'leri + temizle. Kayıtlı filtre (görünüm) deseni.
- **Statü rozetleri (badge):** ürünün her yerinde durum makineleri var. Tek tutarlı rozet dili tanımlanacak. Örnek statü setleri: eğitim (Taslak → Planlandı → Bakanlığa Bildirildi → Devam Ediyor → Tamamlandı / İptal), teklif (Taslak → İç Onayda → Gönderildi → Onaylandı / Reddedildi / Süresi Doldu), masraf (Bekliyor → Onaylandı / Reddedildi), sertifika (Geçerli / Süresi Yaklaşıyor / Süresi Doldu / İptal), personel uyumluluğu (Uyumlu / Eğitim Bekliyor / Süresi Geçmiş).
- **KPI/stat kartları** (büyük sayı + etiket + trend oku + mini sparkline)
- **Timeline** (süreç geçmişi / audit izi: kim, ne, ne zaman)
- **Takvim:** ay/hafta/gün görünümü (planlamacı eğitim takvimi, eğitmen atama takvimi), etkinlik yoğunluk gösterimi, mobil ajanda görünümü
- Progress bar (kontenjan doluluğu: 18/25), kapasite göstergeleri
- Description list (etiket-değer blokları — detay sayfaları bundan kurulur)
- Kart standartları: liste kartı, tıklanabilir kart, özet kart
- **Sertifika kartı:** sertifika no + QR + geçerlilik + durum (hem ekranda hem PDF çıktı şablonu olarak)
- Avatar/initials, dosya ikonu seti, boş durum illüstrasyon stili (tutarlı, sade)

### 5.3 Grafikler (rapor ekranlarının yapı taşları)

Hepsi boş/az veri/loading durumlarıyla:

- Çubuk (dikey + yatay, gruplu + yığılmış) — örn. il bazında süresi dolan personel, aylık eğitim adedi
- Çizgi/alan — trend (aylık gelir, eğitim sayısı)
- Donut — dağılım (eğitim türü, müşteri kategorisi payı)
- **Funnel** — teklif hunisi (taslak → gönderildi → onaylandı)
- Isı/yoğunluk gösterimi — il bazlı harita veya matris (bölgesel talep)
- KPI sparkline'ları
- Grafik kartı standardı: başlık + dönem seçici + export aksiyonu + legend düzeni

### 5.4 Geri bildirim ve katmanlar

- Modal (bilgi, form, **destructive onay — gerekçe alanı zorunlu varyant**: eğitim iptali gerekçeyle yapılır)
- Drawer/slide-over (detay önizleme, hızlı düzenleme)
- Toast, sayfa içi alert/banner (bilgi/uyarı/hata — örn. "Bakanlık bildirimi için son 3 gün!")
- Callout kutusu (mevzuat bilgilendirmesi, kural açıklaması)
- Popover/tooltip, onay istenen buton deseni
- Skeleton ekranlar, tam sayfa loading, inline spinner

### 5.5 Navigasyon ve çatı

- **Sidebar** (daraltılabilir, rol bazlı menü, aktif durum, alt menü) — mobilde bottom-nav veya hamburger kararı senin
- Topbar: bildirim çanı (sayaçlı), profil menüsü, arama
- Breadcrumb, tab'lar (sayfa içi bölümleme), pagination
- **Bildirim merkezi:** liste, okundu/okunmadı, kategori filtresi, boş durum
- Sayfa başlığı standardı: başlık + açıklama + birincil/ikincil aksiyon düzeni

## 6. Sayfa envanteri — panel panel, eksiksiz

Her sayfa için: desktop + mobil, boş durum + dolu durum + hata durumu. Toplam ekran sayısı yüksek — önceliklendirme §8'de.

### 6.0 Ortak / Kimlik doğrulama

1. Giriş (e-posta/telefon + şifre)
2. Passcode girişi · 3. 2FA/OTP doğrulama · 4. Magic link isteme + "linkin süresi doldu" durumu
5. Şifre sıfırlama (isteme + yeni şifre)
6. İlk giriş karşılama + **KVKK aydınlatma/açık rıza ekranı** (rıza kaydı alınıyor — hukuki metin okunur düzende)
7. Hata sayfaları: 403 / 404 / 500 / bakım / oturum süresi doldu
8. Profil: bilgilerim, güvenlik (şifre değiştir, 2FA kur, aktif oturumlar), bildirim tercihleri

### 6.1 Planlamacı paneli

1. **Dashboard:** il ve firma bazında eğitim süresi dolan/dolacak personel sayıları (harita veya matris + tablo), yaklaşan eğitimler, bakanlık bildirimi bekleyenler (son 3 gün uyarısı), doluluk düşük eğitimler
2. **Sorgulama ekranı:** filtre-ağır serbest sorgu (il, firma, eğitim türü, süre durumu…) → sonuç tablosu → eğitim planına dönüştür aksiyonu
3. **Eğitim planlama sihirbazı:** tür seçimi (kurumsal / açık / çoklu kurumsal) → eğitim + tarih + yer → eğitmen seçimi (**uygunluk/yetkinlik kontrol sonuçları burada görselleşir:** yeşil uygun, kırmızı engel + sebep — "CTU eğitmen belgesi yok" gibi) → maliyet kalemleri (eğitmen ücreti + override, otel/acente/araç teklifleri) → özet + kaydet
4. Eğitim listesi (statü filtreli) + **eğitim detayı:** statü makinesi görseli, bakanlık ID giriş alanı (girilmeden "Bildirildi" olamaz — kilit deseni), katılımcı listesi yönetimi, yoklama takibi (imzalı liste yükleme + katılımcı beyanları karşılaştırması, çelişki uyarısı), maliyet/kazanç tablosu, iptal akışı (gerekçe + kimlere bildirim gidecek özeti)
5. Takvim görünümü (eğitimler + eğitmen müsaitliği çakışma gösterimi)
6. Tedarikçi tanımları: otel/acente/araç kiralama listeleri + fiyat teklifi geçmişi (bölgesel tarihçe)
7. Onaylanan teklif → planlama kuyruğu (müşteri onayı sonrası düşenler)

### 6.2 Satışçı paneli

1. **Dashboard:** satış fırsatları (süresi dolan personeli olan firmalar, 3-ay kuralına giren yeni personeller, ilgi bekleyen açık eğitimler), teklif durumları özeti, hedef/performans kartları
2. Planlanmış eğitimler (satışa açık olanlar) listesi + detay önizleme
3. **Teklif oluşturma:** müşteri seç → fiyat tablosu otomatik gelir (genel/özel liste seçimi) → kalemler (gün bazlı / kişi başı) → indirim girişi (**limit içindeyse direkt, aşıyorsa "onaya gönder" deseni**) → önizleme → gönder
4. Teklif listesi + **teklif detayı:** statü, sürüm geçmişi, müşteri görüntüledi mi, onay/red bilgisi
5. Müşteri kartı: firma bilgileri, kategori, geçmiş eğitimler, açık teklifler, iletişim kişileri
6. Açık eğitim duyurusu: bölge + hedef firma seçimi → bilgilendirme maili önizleme → gönderim
7. Onay kuyruğum (satış yöneticisi görünümü: bekleyen teklif onayları, limit aşımı talepleri)

### 6.3 Müşteri paneli

1. **Dashboard:** personel uyum durumu özeti (uyumlu / süresi yaklaşan / geçmiş), yaklaşan eğitimlerim, bekleyen teklifler, bekleyen iç onaylar
2. **Organizasyon:** departman/grup oluşturma-düzenleme, gruba yönetici atama, **yetki ekranı** (kim neyi yapabilir — sade bir yetki matrisi; "teklif isteyebilir", "personel ekleyebilir" gibi anlaşılır ifadelerle), iç onay akışı ayarı (onay zorunlu mu değil mi)
3. Personel listesi (uyum durumu rozetli) + **personel ekleme:** kimlik/işe giriş-çıkış evrakı yükleme, ilk eğitim mi yenileme mi seçimi (yenilemeyse mevcut sertifika yükleme), **3 ay kuralı uyarısı** görünür şekilde
4. **Teklif isteği:** grup + katılımcı seçimi → eğitim ihtiyacı → gönder (iç onay açıksa önce yöneticiye düşer — kuyruk ekranı)
5. Teklifler + **teklif görüntüleme/onay:** teklif metni okunur düzende, **scroll-to-accept** benzeri okumayı garanti eden desen, onay aksiyonu ciddiyetli (bu hukuki delil üretiyor), red + gerekçe
6. Eğitimlerim: liste + detay (program, katılımcı listesi, yoklama durumu, eğitim videosu linki, iptal bilgilendirmesi)
7. Sertifikalar: personel bazlı liste, indir, QR doğrulama, süresi yaklaşanlar vurgusu
8. **İçerik paketleri:** satın alınan paketler, paket içi doküman görüntüleyici (PDF viewer düzeni), erişim süresi göstergesi
9. Faturalar: liste + detay/indirme
10. Açık eğitim duyuruları: bölgemdeki eğitimler, kontenjan/doluluk, katılım talebi

### 6.4 Eğitmen paneli (mobil öncelikli tasarlanacak)

1. **Takvim/atamalarım:** yaklaşan eğitimler, yol/konaklama bilgileri
2. **Eğitim günü ekranı:** katılımcı listesi, yoklama listesi indir (yazdırılabilir), **imzalı listeyi yükle (kamera)**, oturum bazlı devam işaretleme
3. **Masraf girişi:** tür + tutar + **fiş fotoğrafı zorunlu** + gönder; masraf listem (statü rozetli: bekliyor/onaylandı/reddedildi + red gerekçesi)
4. Cari durumum: bakiye, ödeme geçmişi (ödendi/ödenmedi)
5. Belgelerim: yetkinlik/yetki belgeleri, geçerlilik tarihleri, **süresi yaklaşan belge uyarısı**
6. Müsaitlik bildirimi (uygun olmadığım günler)

### 6.5 Katılımcı paneli (neredeyse salt mobil, magic link ile girilir)

1. **Magic link karşılama:** eğitim özeti (ne, ne zaman, nerede — harita), kimlik teyidi
2. KVKK aydınlatma + açık rıza (video kaydı dahil)
3. **Eğitim ekranı:** program, "eğitime katıldım" / "2. oturuma katıldım" beyan butonları (oturum bazlı, zaman damgalı his — basıldıktan sonra kilitli hali)
4. Eğitmen değerlendirme anketi (yıldız + kısa sorular — 2 dakikada bitmeli)
5. Sertifikalarım: görüntüle/indir, QR
6. İçerik görüntüleme (firmasının paketi varsa)

## 7. Kritik UX desenleri (tasarımda özel özen isteyen noktalar)

1. **Statü dili her yerde aynı:** aynı renk aynı anlamı taşır; rozet + timeline + filtre tutarlı.
2. **Kilit/kapı desenleri:** bakanlık ID girilmeden statü ilerlemez; imzalı yoklama yüklenmeden eğitim "tamamlandı" olamaz. Bu kilitler kullanıcıya *neden* kilitli olduğunu söyler ("Bakanlık ID'si girilmedi").
3. **Hukuki ciddiyet anları:** teklif onayı, KVKK rızası — bu ekranlar "tık geçilen" değil, bilinçli aksiyon hissi veren düzende.
4. **Limit aşımı = engelleme değil, onaya yönlendirme:** indirim limiti aşıldığında akış kırılmaz, "yöneticine onaya gönder" akışına döner.
5. **Destructive işlem + gerekçe:** iptal ve red her zaman gerekçe ister; modal deseninde standart.
6. **Tablo → mobil:** her tablo ekranının mobil karşılığı tasarlanmış olmalı; "mobilde tabloyu küçültürüz" kabul edilmez.
7. **Veri yoğunluğu:** planlamacı/satışçı ekranlarında beyaz alan israfı yok; ama sıkışıklık da yok. Kompakt-profesyonel denge.
8. **Bildirim hiyerarşisi:** mevzuat/süre uyarıları (kritik) ile bilgilendirme ayrışır; kritik uyarı görmezden gelinemez konumda.

## 8. Teslimatlar ve süreç

**Teslimatlar (Figma):**

1. **Stil yönü:** moodboard + palet + tipografi + 2 örnek ekran (1 veri-yoğun: planlamacı dashboard; 1 mobil: katılımcı eğitim ekranı) → onay kapısı
2. **Design token seti:** renk, tipografi skalası, spacing, radius, gölge, breakpoint — Tailwind'e maplenebilir tablo halinde
3. **Bileşen kataloğu:** §5'in tamamı, tüm state'lerle, Figma component + variant yapısında (auto-layout)
4. **Sayfalar:** §6 envanteri — desktop + mobil; boş/dolu/hata durumları
5. **Prototip akışları** (tıklanabilir): giriş + 2FA, müşteri teklif onayı, planlamacı eğitim oluşturma, eğitmen masraf girişi (mobil), katılımcı magic link akışı (mobil)
6. Logo yorumu (opsiyonel ayrı kalem — mevcut lacivert geometrik logo referans, bağlayıcı değil)
7. İkon seti seçimi + boş durum illüstrasyon stili örneği

**Süreç:** stil yönü onaylanmadan katalog başlamaz; katalog onaylanmadan sayfa üretimine geçilmez (aksi halde revizyon maliyeti katlanır). Sayfa üretiminde öncelik sırası: ortak/auth → müşteri → planlamacı → satışçı → eğitmen → katılımcı.

**Kalite kriterleri (kabul):** WCAG AA kontrast; 375px'te tüm akışlar tamamlanabilir; min. 44px dokunma hedefleri; uzun Türkçe etiketlerle test edilmiş bileşenler; 500+ satırlık tablo senaryosunda okunabilirlik; tüm bileşenler state'leriyle eksiksiz; token'lar dışında serbest renk/spacing kullanılmamış.

---

*Referans: mevcut 3E Group logosu (lacivert, geometrik) tasarımcıya iletilecek. Ürün domain'i hakkında ek bağlam gerekirse proje ekibinden akış diyagramları istenebilir.*