İçeriğe geç

Arayüz tasarımı

EBA

MEB'in talebiyle EBA ana sayfasındaki seviye seçimi, rol kartları ve mobil uygulama bölümlerini tasarlayıp geliştirdik. Sitenin geri kalanı MEB'in kendi ekibinin işi.

Müşteri
Milli Eğitim Bakanlığı
Yapım
Sektör
Eğitim, Kamu
Teknoloji
MEB'in mevcut altyapısına uyumlu arayüz bileşenleri

Neler yaptık

EBA ana sayfasında seviye seçimi: Okul Öncesi, İlkokul, Ortaokul ve Lise sekmeleri, Lise seçili, masaüstü görünüm
EBA seviye seçimi: Lise sekmesi seçili, karakter illüstrasyonları ve Keşfet bağlantısı, mobil görünüm

Dört eğitim seviyesini tek bir çizgide buluşturmak

EBA, okul öncesinden liseye kadar farklı yaşlardaki öğrencilerin, öğretmenlerin ve velilerin ortak kapısı. Sitenin genel yapısını ve altyapısını Milli Eğitim Bakanlığı’nın kendi ekibi kurdu. MEB, ana sayfadaki bazı bölümler için bizden destek istedi. Bu metinde anlattığımız ve yandaki görsellerde gördüğünüz bölümler, bizim tasarlayıp geliştirdiğimiz kısımlar; gerisi MEB ekibinin emeği.

İlki seviye seçimi. Okul Öncesi, İlkokul, Ortaokul ve Lise, renkli noktalarla birbirine bağlanan bir çizgi üzerinde sekmeler olarak duruyor. Ziyaretçi kendi seviyesini seçtiğinde o seviyeye özel bir başlık, kısa bir açıklama, karakter illüstrasyonları ve “Keşfet” bağlantısı açılıyor. Böylece her yaş grubu, ana sayfada kendine seslenen bir giriş buluyor.

EBA ana sayfasında Her Rol için Tasarım bölümü: öğrenci, öğretmen ve veli kartları, masaüstü görünüm
EBA Her Rol için Tasarım bölümü: öğrenci kartı, mobil görünüm

Öğrenciye, öğretmene ve veliye ayrı ayrı seslenmek

İkinci bölüm “Her Rol için Tasarım!” başlıklı rol kartları. Öğrenci, öğretmen ve veli için üç ayrı kart tasarladık. Her kartın kendi rengi, kendi karakteri ve o role yazılmış kısa bir metni var: mavi öğrenciye, mor öğretmene, turuncu veliye ayrıldı. Aynı renk mantığını seviye sekmelerinde de kurduk. Her seviyenin noktası ve vurgu rengi farklı, seçili sekme belirgin bir çerçeveyle ayrışıyor.

Başlıklarda EBA’nın kırmızısını koruduk, metinlerde sade ve okunaklı bir yazı karakteri ile geniş satır aralığı kullandık. Mobilde kartlar alt alta diziliyor, seviye sekmeleri ekran genişliğine sığacak biçimde yan yana kalıyor ve illüstrasyonlar metnin üstüne geçiyor. Küçük ekranda da her seçim tek dokunuşla yapılabiliyor.

EBA mobil uygulama tanıtım bölümü: uygulama ekranları ve App Store, Google Play bağlantıları, masaüstü görünüm
EBA mobil uygulama tanıtım bölümü: telefon ekranları ve mağaza bağlantıları, mobil görünüm

MEB’in altyapısına uyumlu bileşenler

Üçüncü bölüm EBA’nın mobil uygulamasını tanıtan alan. Uygulama ekranlarını gösteren telefon görselleri, “EBA Her Yerde Seninle!” başlığı, kısa bir tanıtım metni ve App Store ile Google Play bağlantıları burada bir arada duruyor.

Teknik tarafta işimiz, MEB’in mevcut altyapısına uyumlu bileşenler üretmekti. EBA’nın kendi teknoloji yapısını değiştirmedik; tasarladığımız bölümleri MEB ekibinin kullandığı yapıya yerleşebilecek biçimde geliştirdik ve masaüstü ile mobilde aynı içerikle, ekran genişliğine göre yeniden dizilerek çalışacak şekilde kurguladık. Sitenin yönetimi, içerik süreçleri ve geri kalan sayfaları MEB’in kendi ekibinin sorumluluğunda. Kurumların mevcut sistemine eklenecek arayüz parçaları için de çalışıyoruz, ayrıntılar hizmetlerimiz sayfasında.

  • EBA ana sayfasında seviye seçimi: Okul Öncesi, İlkokul, Ortaokul ve Lise sekmeleri, Lise seçili, masaüstü görünüm
  • EBA ana sayfasında Her Rol için Tasarım bölümü: öğrenci, öğretmen ve veli kartları, masaüstü görünüm
  • EBA mobil uygulama tanıtım bölümü: uygulama ekranları ve App Store, Google Play bağlantıları, masaüstü görünüm
  • EBA mobil uygulama tanıtım bölümü: telefon ekranları ve mağaza bağlantıları, mobil görünüm
  • EBA Her Rol için Tasarım bölümü: öğrenci kartı, mobil görünüm
  • EBA seviye seçimi: Lise sekmesi seçili, karakter illüstrasyonları ve Keşfet bağlantısı, mobil görünüm