Figma Tasarım Dokümantasyonu#

Bu bölümde projenin mobil uygulama tasarımlarını bulabilirsiniz.

Güncelleme Tarihi#

Son güncelleme: 10 Ekim 2025

Tasarım Kategorileri#

1. Yeni Ekranlar (New)#

En son eklenen ve tasarlanan ekranlar:

  • Öğrenci Profil Ekranları
  • Sınav Detay Ekranları
  • Sınıftan Çıkarma İşlemleri

Yeni Ekranları Görüntüle

2. Düzeltilen Ekranlar (Fix)#

Güncellenen ve iyileştirilen ekranlar:

  • Dashboard - 4: Ana dashboard ekranı güncellendi
  • Class Detail - 5.4: Sınıf detay ekranı düzenlendi
  • Class Detail - Exams Popup - 6.2: Sınıf detay sınav popup ekranı düzenlendi

Düzeltilen Ekranları Görüntüle

3. Tamamlanan Ekranlar (End)#

Final tasarımları ve tamamlanmış ekranlar:

Auth Ekranları#

  • Login - 1: Giriş ekranı
  • Sign Up - 2: Kayıt ekranı
  • Loading Page - 3: Yükleme ekranı

Dashboard#

  • Dashboard - 4: Ana kontrol paneli

Sınıf Yönetimi#

  • Class - 5: Sınıf listesi
  • Class - Create Class - 5.1: Sınıf oluşturma (1. adım)
  • Class - Create Class - 5.2: Sınıf oluşturma (2. adım)

Sınıf Detayları#

  • Class Detail - Classmates - 5.3.1: Sınıf arkadaşları
  • Class Detail - Exams - 5.3.2: Sınav listesi
  • Class Detail - Performance - 5.3.3: Performans analizi
  • Class Detail - Class Detail - 5.4: Sınıf bilgileri
  • Class Detail - Class Detail - Edit Class - 5.4.1: Sınıf düzenleme
  • Class Detail - Class Detail - 5.4.4: Detaylı sınıf görünümü

Sınav Yönetimi#

  • Exams - 6: Sınav listesi
  • Exams - Filter Popup - 6.1: Filtreleme popup
  • Exams - Create Exam - 6.1.1: Sınav oluşturma (1. adım)
  • Exams - Create Exam - 6.1.2: Sınav oluşturma (2. adım)
  • Exams - Create Exam - 6.1.3: Sınav oluşturma (3. adım)
  • Exams - Detail - 6.3: Sınav detayı
  • Exams - Detail - Info Button - Summary - 6.3.1: Bilgi özeti
  • Exams - Detail - Quick Action - 6.3.2: Hızlı işlemler
  • Exams - Detail - Publish All Button - 6.3.3: Toplu yayınlama

OCR ve Değerlendirme#

  • Exams - Read OCR - 8: OCR okuma ekranı

Profil#

  • Profile - 7: Kullanıcı profili

Tamamlanan Ekranları Görüntüle

Tasarım Özellikleri#

UI/UX Prensipleri#

  • Material Design 3 standartlarına uygun
  • Koyu/Açık Tema desteği
  • Responsive tasarım (farklı ekran boyutları)
  • Erişilebilirlik standartlarına uygun

Renk Paleti#

  • Primary: Mavi tonları
  • Secondary: Turuncu/Sarı tonları
  • Success: Yeşil
  • Warning: Sarı
  • Error: Kırmızı

Tipografi#

  • Başlıklar: Inter Bold
  • Gövde Metni: Inter Regular
  • Küçük Metin: Inter Light

Ekran Listesi ve Kategoriler#

Authentication (Kimlik Doğrulama)#

  1. Login - 1
  2. Sign Up - 2
  3. Loading Page - 3

Ana Sayfa#

  1. Dashboard - 4

Sınıf Yönetimi#

  1. Class - 5
  2. Class - Create Class - 5.1
  3. Class - Create Class - 5.2
  4. Class Detail - Classmates - 5.3.1
  5. Class Detail - Classmates - 5.3.1.1 (NEW)
  6. Class Detail - Classmates - 5.3.1.2 (NEW)
  7. Class Detail - Classmates - 5.3.1.2.1 (NEW)
  8. Class Detail - Classmates - 5.3.1.3 (NEW)
  9. Class Detail - Exams - 5.3.2
  10. Class Detail - Performance - 5.3.3
  11. Class Detail - Class Detail - 5.4
  12. Class Detail - Class Detail - Edit Class - 5.4.1
  13. Class Detail - Class Detail - 5.4.4

Sınav Yönetimi#

  1. Exams - 6
  2. Exams - Filter Popup - 6.1
  3. Exams - Create Exam - 6.1.1
  4. Exams - Create Exam - 6.1.2
  5. Exams - Create Exam - 6.1.3
  6. Exams - Detail - 6.3
  7. Exams - Detail - Info Button - Summary - 6.3.1
  8. Exams - Detail - Quick Action - 6.3.2
  9. Exams - Detail - Publish All Button - 6.3.3
  10. Exams - Detail - 6.3.4 (NEW)
  11. Exams - Detail - 6.3.4.1 (NEW)
  12. Exams - Detail - 6.3.4.2 (NEW)
  13. Exams - Detail - 6.3.4.3 (NEW)
  14. Exams - Detail - 6.3.4.4 (NEW)

Profil#

  1. Profile - 7

OCR#

  1. Exams - Read OCR - 8

Değişiklik Geçmişi#

10 Ekim 2025#

  • Dashboard ekranı güncellendi
  • Sınıf detay ekranı düzenlendi
  • Sınav popup ekranı iyileştirildi
  • 5 yeni öğrenci profil ekranı eklendi
  • 5 yeni sınav detay ekranı eklendi

Tasarım Dosyalarına Erişim#

Tasarım görselleri /static/images/teacher_mobile_figma_design/ dizininde bulunmaktadır:

  • new/: Yeni eklenen ekranlar
  • fix/: Düzeltilen ekranlar
  • end/: Tamamlanan ekranlar

Notlar#

  • Tüm ekranlar 1080x2400 çözünürlükte tasarlanmıştır
  • Tasarımlar Flutter ile implementasyon için optimize edilmiştir
  • Material Design 3 component’leri kullanılmıştır
  • Tasarımlar multi-tenant okul yönetimi sistemini desteklemektedir

İletişim#

Tasarım ile ilgili sorularınız için:

  • Tasarımcı: Mehmet Ali GÜMÜŞLER
  • Proje: Okula Bukula - AI Exam Evaluation System
Backward RBAC Güvenlik