Material Design: temel kavramlar, Material You ve Material 3

Material Design Nedir?

Material Design (kod adı Project Quantum), Google'ın tasarım sistemidir, ilk olarak Google I/O 2014'te duyurulmuş ve ilk olarak Android 5.0 Lollipop'ta uygulanmıştır. Material Design'ın amacı, kağıt ve mürekkebin fiziksel özelliklerine dayanan — “malzeme” (material) — tüm Google ürünleri ve Android uygulamaları için birleşik bir görsel dil oluşturmaktır. Düz Tasarımın aksine, Material Design fiziksel derinlik, gölgeler, katmanlar ve gerçekçi animasyon ekler.

2014'ten bu yana, Material Design üç ana sürümden geçti: Material 1 (2014) — kartlar ve Floating Action Button ile orijinal yönergeler; Material 2 (2018) — basitleştirilmiş görsel dil, artırılmış boşluk, tipografiye vurgu; Material 3 / Material You (2021) — cihaz duvar kağıdından oluşturulan dinamik renk şeması, kişiselleştirme. Google Play Console'a (2024) göre, ilk 1000 Google Play uygulamasının %78'i Android için Material Components kullanıyor.

Material Design yalnızca bir UI kiti değil, eksiksiz bir tasarım sistemidir: erişilebilirlik (a11y), animasyon (Motion), uyarlanabilir düzenler, bileşenler (TopAppBar, BottomNavigation, Navigation Drawer), tipografi (Material Type Scale) ve ikonografi (Material Symbols) için yönergeler. IT Sectr'de, 2014'ten beri Android projeleri için temel tasarım sistemi olarak Material Design'ı kullanıyor ve Material Theme Builder aracılığıyla her müşterinin markasına uygun hale getiriyoruz.

Material Design'ın Temel İlkeleri: Materyallik, Derinlik, Hareket

Materyallik (Malzeme Olarak Metafor) — Material Design'ın ana ilkesi, kağıdın fiziksel özelliklerini ödünç alır: malzemenin bir yüzeyi, kalınlığı (1dp) vardır, gölge (Elevation) oluşturur ve alan (Bounds) kaplar. Arayüz öğeleri — kartlar, düğmeler, paneller — fiziksel nesneler gibi davranır: basıldığında yükselir (dalga efekti), birbirlerini örter (Z ekseni) ve göründüklerinde animasyon yapar (motion).

Derinlik (Depth), Elevation aracılığıyla oluşturulur — malzemenin Z eksenindeki konumunu belirleyen bir özelliktir. Elevation (8dp, 16dp) ne kadar yüksekse, öğenin oluşturduğu gölge o kadar büyük olur. Bir kartın Elevation'ı 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp'dir. Derinlik, hiyerarşiyi iletmek için kullanılır: modal pencereler ve diyaloglar her zaman içeriğin üstündedir, Navigation Drawer Action Bar'ın üstündedir. Derinlik, 3D perspektifi düz bir Z katmanıyla değiştirerek işleme performansını korur.

Hareket (Motion) — Material Design'da animasyon dekoratif değil işlevseldir. Animasyon şunları yapmalıdır: 1) kullanıcının dikkatini yönlendirmek (ayrıntılarla genişleyen kart), 2) uzamsal ilişkileri açıklamak (kaydırma sırasında AppBar'ın TopAppBar'a dönüşmesi), 3) yumuşak geçişler sağlamak (ekranlar arasında paylaşılan öğe geçişi). Google Material Guidelines'a (2024) göre, animasyon mikro etkileşimler için 300ms'yi ve ekran geçişleri için 500ms'yi geçmemelidir — daha uzun animasyonlar gecikme olarak algılanır.

Material You (Material Design 3): Dinamik Renkler ve Kişiselleştirme

Material You (Material Design 3), 2021'de Android 12 ile birlikte tanıtılan tasarım sisteminin en büyük güncellemesidir. Ana yenilik — dinamik renkler (Monet): sistem, cihaz duvar kağıdından otomatik olarak 5 ana renk çıkarır ve hesaplanmış WCAG AA kontrast oranlarıyla 15 tonluk (primary, secondary, tertiary, error ve light/dark varyantları) tam bir renk paleti oluşturur.

Material You'nun renk modeli HCT'ye (Hue, Chroma, Tone) dayanır — Google tarafından geliştirilen, insan algısını (Hue) doygunluk (Chroma) ve parlaklık (Tone) ile birleştiren bir renk uzayıdır. HSL/HSV'nin aksine, HCT oluşturulan tüm tonların beyaz ve siyah arka planlarda gerekli kontrasta sahip olmasını garanti eder. Google Material Guidelines (2024), metin için yalnızca ana paletin ton varyantlarının, arka planlar için surface tonlarının ve vurgu yüzeyleri için primary-container kullanılmasını önerir.

Kullanıcı 4 kişiselleştirme şeması arasından seçim yapabilir: TonalSpot (duvar kağıdından ana renk), Vibrant (en doygun renk), Expressive (ek parlak renkler), Neutral (tek renkli palet). Material Theme Builder (material-foundation.github.io), Material 3 temasını XML, Compose Theme, CSS ve hatta bir Figma eklentisine dışa aktarmaya olanak tanır.

Android için Material Components: XML ve Compose ile Uygulama

Android için Material Components (MDC-Android), Material Design yönergelerini izleyen hazır View bileşenleri sağlayan Google'ın resmi kütüphanesidir. XML düzenleri için kütüphane com.google.android.material:material bağımlılığı aracılığıyla kullanılabilir, Haziran 2026 itibarıyla güncel sürüm — 1.12.0.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="2dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/outline">

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Örnek, MaterialToolbar (TopAppBar), özel dolgu ve konturlu MaterialCardView, açılır listeli TextInputLayout ve Material3 stili MaterialButton içeren bir Material ekranını gösterir. FAB, Toolbar'a sabitlenmiştir — master-detail arayüzleri için standart bir desendir.

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("Şehir") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Gönder")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

Kod, Compose'da bir Material You temasını gösterir: dynamicLightColorScheme(), cihaz duvar kağıdına dayalı olarak otomatik olarak bir renk şeması oluşturur. Scaffold, TopAppBar ve FAB ile standart bir yapı sağlar. OutlinedTextField ve Button, renklerini dinamik colorScheme'den alan Material 3 bileşenleridir. Duvar kağıdı değiştiğinde, tüm uygulama renkleri otomatik olarak güncellenir — kod değişikliği olmadan kişiselleştirme.

iOS'ta Material Design: iOS için Material Components

iOS için Material Components (MDC-iOS), iOS'ta Material Design'ı uygulayan yerel UIKit bileşenleri sağlayan bir kütüphanedir. iOS'un kendi tasarım sistemi (Human Interface Guidelines) olduğu için, iOS'ta Material bileşenleri daha az kullanılır ancak Android ve iOS arasında birleşik bir görsel stil gerektiren platformlar arası uygulamalarda talep görür.

MDC-iOS, Material Design için stilize edilmiş AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs ve TextFields içerir. Kütüphane CocoaPods (pod 'MaterialComponents') ve Swift Package Manager aracılığıyla kullanılabilir. Apple Human Interface Guidelines (2024), yerel UIKit bileşenlerinin tamamen Material eşdeğerleriyle değiştirilmesini önermez, ancak yerel navigasyonun (NavigationStack, UITabBarController) korunması koşuluyla özel arayüzler için Material bileşenlerinin kullanımına izin verir.

IT Sectr'de, iOS'ta Material Components'i yalnızca Android'den taşınan uygulamalar (Flutter veya Kotlin Multiplatform ile platformlar arası projeler) için kullanıyoruz. Yerel iOS uygulamaları için HIG'i takip ediyor ve özel markalama ile UIKit/SwiftUI kullanıyoruz. Swift Community anketine (2024) göre, iOS için Material Components, esas olarak hibrit projelerde geliştiricilerin %8'i tarafından kullanılmaktadır.

Material Design ve Diğer Tasarım Sistemleri

Material Design piyasadaki tek tasarım sistemi değildir. Başlıca rakipler: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Her sistem kendi platformu için optimize edilmiştir: Material Design Android için, HIG iOS için, Fluent Windows için. Tasarım sistemi seçimi, hedef platform ve ekosistem tarafından belirlenir.

Material Design'ın ana avantajı, açıklığı ve platformlar arası doğasıdır. Yönergeler, bileşenler ve araçlar (Material Theme Builder) ücretsiz olarak mevcuttur ve bu da sistemi startup'lar ve bağımsız geliştiriciler arasında popüler hale getirir. Apple HIG, Apple ekosistemine sıkı sıkıya bağlıdır ancak platform beklentileriyle en iyi uyumu sağlar. Platformlar arası projeler için Material Design, Flutter ve Jetpack Compose Multiplatform sayesinde en uygun seçimdir.