Material Design Nedir?
Material Design, Google'ın 2014'te tanıttığı ve Material You (M3) ile güncellediği kapsamlı tasarım sistemidir. Android, web ve cross-platform uygulamalar için tasarım dili sunar. 2026 itibarıyla Material Design 3, Android 12+ cihazların büyük çoğunluğunda desteklenmektedir.
Material Design 3 (Material You)
Dynamic Color
- Kullanıcının duvar kâğıdından renk paleti oluşturma
- Android 12+ ile sistem genelinde uygulanır
- Kişiselleştirilmiş deneyim
- HCT (Hue, Chroma, Tone) renk uzayı kullanır
- Tonal palettes: Primary, Secondary, Tertiary, Neutral, Neutral Variant
Temel Kavramlar
- Surface: Yüzeyler ve elevasyonlar
- Color Scheme: Primary, secondary, tertiary, error renkleri
- Typography: Roboto fontu, type scale (display, headline, title, body, label)
- Shape: Rounded corners, bileşenlere göre boyutlandırma (none, extra-small, small, medium, large, extra-large, full)
Temel Bileşenler
Navigation
- Bottom Navigation Bar: 3-5 tab, her tab'da ikon + etiket
- Navigation Rail: Tablet/geniş ekran için, yan tarafta dikey navigasyon
- Navigation Drawer: Çok sayıda bölüm için yan menü
- Top App Bar: Başlık, aksiyonlar; center-aligned, small, medium, large varyantları
Input
- Text Fields: Outlined veya filled; supporting text, leading/trailing ikon desteği
- FAB (Floating Action Button): Birincil aksiyon; small, regular, large, extended varyantları
- Chips: Filtre, seçim, girdi, öneri türleri
- Switch, Checkbox, Radio: Toggle kontroller; M3 ile yenilenmiş tasarım
Feedback
- Snackbar: Kısa bilgi mesajı, aksiyon butonu opsiyonel
- Dialog: Onay, bilgi, karar; basic ve full-screen varyantları
- Bottom Sheet: Ek seçenekler, detay; standard ve modal türleri
Elevation ve Shadow
Material Design fiziksel karta benzer metafor kullanır:
- Elevation 0: Yüzey seviyesinde
- Elevation 1-5: Yükselen bileşenler (kart, dialog, FAB)
- M3'te shadow yerine tonal elevation tercih edilir (yüzey rengi değişir)
- Dark mode'da elevation, surface tint ile gösterilir
Renk Sistemi
Material 3 renk sistemi:
- Primary: Ana marka rengi
- Secondary: İkincil vurgu
- Tertiary: Üçüncü vurgu
- Surface: Arka plan ve yüzeyler
- Error: Hata durumları
- Her rengin on-[color], container, on-container varyantları
- Surface Variant: Alternatif yüzey rengi
- Outline: Kenarlık ve ayırıcılar
Android vs iOS Tasarım Farkları
| Özellik | Material Design | HIG |
|---|---|---|
| Navigation | Bottom bar + drawer | Tab bar + nav bar |
| FAB | Var ve yaygın | Yok (button tercih) |
| Geri | Sistem geri butonu | Sol edge swipe |
| Typography | Roboto | San Francisco |
| Shape | Rounded rect, farklı radius | Tutarlı roundedness |
| Renk | Dynamic Color (duvar kâğıdı) | Tint color (marka) |
| Elevation | Tonal elevation (M3) | Shadow + blur |
Cross-Platform Dikkat
React Native / Flutter ile cross-platform geliştirirken:
- iOS'ta HIG, Android'de Material Design kullanmak ideal
- Veya platform-agnostic tutarlı tasarım (birçok uygulama bunu tercih ediyor)
- Kullanıcılar kendi platformlarının kalıplarını bekler
- Flutter: Material 3 native destekli (useMaterial3: true)
- React Native: react-native-paper kütüphanesi M3 destekli (v5+)
Material Theme Builder
Google'ın resmi aracı ile özel tema oluşturma:
- Web üzerinden renk paleti oluştur
- Figma plugin ile tasarım dosyasına aktar
- Export: Android (Compose), Flutter, CSS, DSP formatları
- Dynamic Color preview ile test et
Material Design kullanmak Android'de native hissiyat verir. M3 ile modern ve kişiselleştirilmiş bir deneyim mümkün. 2026 itibarıyla M3, Android geliştirmenin standart tasarım dili haline gelmiştir.