# Tasarım Brief'i — `egitim.3egrp.com` (ürün tanıtım + yardım sitesi)

*Sürüm 1.0 — 08.08.2026. Muhatap: 3E Akademi platformunun UI/UX tasarımcısı (aynı kişi). Proje sahibi: Sets.*

---

## 1. Bu nedir, neden var?

3E Akademi'nin eğitim otomasyonunun **müşteri paneline** bakan tanıtım ve yardım sitesi. Panelin kendisi ayrı bir üründür ve tasarımı zaten sende (`design/*.dc.html`, `11–16 Musteri *`). Burada istediğimiz şey **panelin dışındaki tek sayfa grubu**: müşteri firma panele girmeden önce ve panelde takıldığında buraya bakacak.

**Bu bir satış sayfası değildir.** Ürünü kimseye satmıyoruz; müşteri firmalar zaten bizim eğitim müşterimiz ve panele **davetle** alınıyorlar. Sitenin işi ikna etmek değil, **tanıtmak ve yardım etmek**.

İki farklı ziyaretçi anı var ve site ikisini birden karşılamalı:

| Ne zaman gelir | Ne arar | Sitenin cevabı |
|---|---|---|
| Davet e-postasını aldı, panele ilk kez girecek | "Bu panel nedir, benden ne isteniyor, ne yapabiliyorum?" | Tanıtım: bölüm bölüm ne işe yaradığı, ekran görüntüleri |
| Panelde bir işi yapamıyor | "Personeli nasıl eklerim, teklifi nasıl onaylarım?" | Yardım: adım adım kullanım dokümanları, SSS |

## 2. Kesin sınırlar

Bunlar tercih değil kural; tasarımda karşılığı olmayan bir şey istememek için baştan yazılıyor.

- ⛔ **Kayıt formu YOK.** Hiçbir yerde "kayıt ol", "ücretsiz dene", "hesap oluştur" bulunmaz. Panele giriş davetle olur; siteden yapılabilecek tek şey **giriş** ve **iletişime geçmek**.
- ⛔ **Şimdilik iletişim formu da yok.** İletişim = bir kurumsal e-posta adresi ve telefon. (Form ileride eklenirse KVKK aydınlatma metni + açık rıza kutusu gerekir; şimdilik tasarlanmasın.)
- ⛔ **Yalnız müşteri paneli anlatılır.** 3E'nin kendi iç ekranları (ofis, backoffice) bu siteye girmez — ne görsel ne metin olarak.
- ⛔ **Fiyat yok.** Fiyatlandırma tekliften yürüyor; sitede fiyat, paket, plan tablosu bulunmaz.
- ⛔ **Ekran görüntüleri gerçek müşteri verisi taşımaz.** Tasarımda kullanılacak isimler, firma adları, kimlik numaraları **uydurma** olacak. Bu bir hassasiyet değil, ihlal konusu: gerçek bir katılımcı adı bu sayfada internete açılmış olur.
- Site **statiktir**; uygulamanın veritabanına bağlanmaz, canlı veri göstermez (doluluk, takvim, eğitim listesi çekilmez).

## 3. Görsel dil — mevcut sistemin devamı

> ⛔ **Üç yüzeyin farklı görünmesi bilinçlidir, hata değildir** *(Sets, 08.08.2026)*. `3egrp.com` çatı şirketin kurumsal sayfası, `akademi.3egrp.com` bir grup şirketinin firma sayfası, `egitim.3egrp.com` ve paneller ise **ürün**. Üç ayrı muhatap, üç ayrı iş. Bu brief yalnız ürün tarafını bağlar; diğer iki siteyi ona benzetmek için bir çalışma **istenmiyor**. Aralarındaki bağ marka işaretleriyle kurulur: ortak logo ailesi, footer'daki çapraz bağlantılar, ton.

**Yeni bir stil yönü aranmıyor.** Onaylı yön `3a "Kırma + Mürekkep"` ve token seti `00 Tokenlar.dc.html` **aynen geçerli**: renk, tipografi skalası, spacing, radius, gölge, breakpoint. Token dışı değer kullanılmaz. Dark mode yok.

Sebebi işlevsel: ziyaretçi bu sayfadan panele geçiyor. İki yer birbirine benzemezse "yanlış yere geldim" hissi doğuyor ve giriş ekranındaki güven kayboluyor.

Ama landing bir **uygulama ekranı değil**, ve panelin yoğunluğuyla tasarlanırsa okunmaz olur. Farklılaşma şurada olacak, hepsi token'ların içinde kalarak:

- Daha geniş nefes: bölüm arası boşluk panel ekranlarından belirgin biçimde büyük
- Daha büyük tipografi: en az bir "display" boyutu eklenmeli (token skalasına yeni basamak olarak, serbest değer olarak değil)
- Tek kolonluk okuma genişliği (metin bloklarında ~70 karakter), panelin tam genişlik tablolarının aksine
- Sıcaklık: panel işini yapar, burası karşılar. İllüstrasyon/ikon kullanımı panelden daha serbest — ama **stok fotoğraf yok**, aynı çizgi ikon seti ve mevcut boş-durum illüstrasyon dili sürer.

Marka: bu site 3E Akademi'nin ürünüdür; `akademi.3egrp.com` ile aynı marka ailesinde durmalı, ondan kopuk bir kimlik kurmamalı.

## 4. Sayfa envanteri

Her sayfa: desktop + 375px. Breakpoint seti panelle aynı — 375 / 768 / 1024 / 1440.

### 4.1 Ana sayfa

Bölümler, sırası da bir karardır:

1. **Hero** — tek cümlelik ne olduğu ("Firmanızın zorunlu eğitim yükümlülüklerini tek yerden takip edin" gibi; metin bizden), iki aksiyon: **birincil "Panele giriş"**, ikincil "Nasıl çalışır?" (sayfa içi). Hero'da form yok, video yok.
2. **Panel ne işe yarar** — 5–6 yetenek kartı. Gerçek işler bunlar:
   - Personel uyum takibi (kimin eğitimi geçerli, kimin süresi doluyor)
   - Eğitim talebi ve teklif alma
   - Teklifi çevrimiçi onaylama
   - Eğitim ve katılım takibi
   - Sertifikalara erişim
   - Fatura ve satın alınan eğitim içeriklerine erişim
3. **Nasıl çalışır** — 3–4 adımlık akış anlatımı (davet → personelinizi tanımlayın → eğitim talebi/teklif onayı → sertifikalar). Numaralı, görselli, kısa.
4. **Ekran görüntüleri** — 3–4 ekran, çerçeve deseni içinde (bkz. §5). Yan yana değil, açıklamasıyla birlikte.
5. **Sık sorulanlardan seçilmiş 4–5 soru** + "Tümü" bağlantısı.
6. **Kapanış şeridi** — "Panelinize erişiminiz yok mu? Bizimle iletişime geçin" + adres.
7. **Footer** — 3E Group ve Akademi sitelerine bağlantı, yasal metinler, iletişim.

### 4.2 Yardım merkezi

Sitenin uzun ömürlü kısmı burası; tanıtım bir kez okunur, yardım her hafta okunur.

- **Yardım ana sayfası:** kategori kartları (Başlarken · Personel yönetimi · Teklifler · Eğitimler · Sertifikalar · Fatura ve içerik) + arama alanı + "en çok okunanlar" listesi.
- **Kategori sayfası:** o kategorideki yazıların listesi (başlık + tek satır özet).
- ⭐ **Doküman sayfası şablonu — en önemli teslimat.** İçermesi gerekenler: başlık + son güncelleme tarihi; sağda (mobilde üstte açılır) **sayfa içi içindekiler**; numaralı adım deseni (adım metni + ekran görüntüsü); **ipucu kutusu** ve **dikkat kutusu** (panelin callout diliyle uyumlu); "ilgili yazılar" bloğu; sonda "Bu yazı yardımcı oldu mu?" — **oy toplamayacağız, form yok**; bunun yerine iletişim adresine yönlendiren sade bir satır.
- **Arama sonuçları** sayfası + **sonuç yok** durumu.

### 4.3 Sık sorulan sorular

Akordeon liste, kategori başlıklarıyla. Açık/kapalı durumlar, klavye erişimi.

### 4.4 İletişim

Form değil: kurumsal e-posta adresi (kopyalanabilir), telefon, adres, çalışma saatleri. "Panele erişemiyorum" ve "Yeni firma olarak sizinle çalışmak istiyorum" ayrımı görünür olsun — ikisi farklı ekibe gidiyor.

### 4.5 Yasal ve sistem sayfaları

- Hukuki metin şablonu (uzun metin okuma düzeni, başlık hiyerarşisi, içindekiler): KVKK aydınlatma metni, gizlilik, çerez politikası
- Çerez bildirimi şeridi (analitik kullanılırsa gerekiyor)
- 404

## 5. Yeni bileşenler

Panelin kataloğunda karşılığı olmayan, bu site için gereken parçalar:

- **Marketing hero** (başlık + alt metin + ikili aksiyon)
- **Yetenek kartı** (ikon + başlık + 1–2 cümle)
- **Adım/akış anlatımı** (numaralı, yatay desktop / dikey mobil)
- ⭐ **Ekran görüntüsü çerçevesi** — panel görüntüsünü içine alan sade çerçeve; altında açıklama. **Uydurma veri** ile doldurulmuş örnek şart. Görüntünün eskiyeceğini biliyoruz; çerçeve, görüntüyü değiştirmeyi kolay kılacak sabit oranda olmalı.
- **Akordeon** (SSS)
- **Sayfa içi içindekiler / anchor navigasyon** (sticky, aktif bölüm göstergeli)
- **İpucu / dikkat kutusu** (doküman içi — panelin callout'undan türetilebilir)
- **CTA şeridi** (bölüm arası tam genişlik)
- **Landing footer** (panelin footer'ı yok; bu yeni)
- **Landing üst menü** — panelin sidebar'ı burada yok; sade bir topbar + mobil menü. İçinde daima görünür bir **"Panele giriş"** butonu.

## 6. Kalite kriterleri (kabul)

- WCAG AA kontrast; görünür focus; min. 44px dokunma hedefi
- 375px'te her sayfa eksiksiz okunur; yatay kaydırma yok
- Uzun Türkçe başlıklarla test edilmiş ("Tehlikeli Madde Güvenlik Danışmanlığı Yenileme Eğitimi" başlığı hiçbir kartı kırmamalı)
- Token dışı renk/spacing yok; yeni eklenen tipografi basamağı token olarak tanımlanmış
- Stok fotoğraf yok; ekran görüntülerinde gerçek veri yok
- Sayfa ağırlığı gözetilmiş: dev hero görselleri, otomatik oynayan video yok
- Her sayfa için OG/paylaşım görseli şablonu (tek şablon yeterli)

## 7. Teslimat

Format panelle aynı: tarayıcıda doğrudan açılabilen `.dc.html` dosyaları, mevcut `support.js` + `assets/` düzeniyle. Dosya adlandırma mevcut numaralandırmayla çakışmasın; `L01 Landing …` gibi ayrı bir önek uygundur.

Sıra: **ana sayfa → doküman sayfası şablonu → yardım ana/kategori → SSS → iletişim → yasal/404.** Doküman şablonu ana sayfadan hemen sonra geliyor, çünkü içeriği biz yazacağız ve şablon gelmeden yazamayız.

---

## 8. Cevaplanacaklar (Sets)

1. Sitede hangi panel ekranlarının görüntüsü kullanılacak? (Öneri: uyum durumu dashboard'u, personel listesi, teklif onay ekranı, sertifikalar.)
2. İletişim adresi ve telefonu nedir? İki farklı muhatap (erişim sorunu / yeni müşteri) ayrı adres mi?
3. `3egrp.com` ve `akademi.3egrp.com` aynı tasarımcıya, bu brief'le birlikte mi ısmarlanacak — yoksa ayrı bir turda mı?
4. Analitik kullanılacak mı? (Kullanılacaksa çerez bildirimi şeridi tasarıma girer.)
5. Yardım merkezinde arama olacak mı? (Statik sitede yapılabilir ama tasarımı ve içerik indeksini gerektirir.)