Material 3 ve Jetpack Compose 1
Selamlar, bugün size Google tarafından oluşturulmuş tasarım standardı olan Material 3'ten (Renkler ve Typography) bahsedeceğim. Bu yazıda Material ve Material 3'ten bahsettikten sonra Jetpack Compose ile proje geliştirirken nasıl Material 3'ü kullanacağınızdan bahsedeceğim.
Amacımızdan bahsettiğimize göre Material Design nedir sorusu ile yazımıza başlayalım.
Material Design Nedir?
Material Design, Google tarafından oluşturulmış tasarım standartıdır. Örneğin bir proje geliştiriyorsunuz, bu proje mobil veya web olabilir ve size tasarım geliyor. Gelen tasarımda bir standart olmayabiliyor. Örneğin bir yerdeki kırmızı tonu başka bir yerde kullanılan kırmızı tonu ile aynı değil veya aynı amaca hizmet eden butonlar farklı renklerde olabiliyor. Ya da aynı amaca hizmet eden textler farklı boyuttalar. Bunlar bir standartının oluşmasını engellediği gibi implementasyonu da zorlaştıran konular. Böyle bir durumda Material Design, standartları ile yardımınıza yetişiyor.
Peki Material 3 Nedir?
2021 yılının Ekim ayında Google tarafından bize sunulan bir tasarım standartıdır. Aslında Material 2 ile eksik olan birçok şey Material 3 ile tamamlanmış durumda. Net olmak gerekirse tasarımcılar için Material 3 iyi birşey ama developerlar için değil :) (Benim şahsi görüşümdür)
Çünkü Material 2'de neyi nerede yapacağın kesin olarak belirlenmiştir ama Material 3'te tasarımcılar ortaya daha farklı tasarımlar çıkarabilsin diye çok fazla opsiyon sunuluyor. Bu da biraz developerın işini zorlaştırıyor.
Şimdi biraz Material 2'de bulunan renkler ve typography konusunu Material 3'te bulunan renkler ve typography konusu ile karşılaştıralım.
Material 2'de renkler nasıldı?
Aşağıda Material 2'nin renklerini paylaşıp teker teker nerede kullanıldığından bahsedeceğim.
Primary ve Secondary Colors
Bu renklerin amacı markanızı temsil etmektir.
Yukarıdaki görselde gördüğünüz gibi bir kullanıcı uygulamaya girdiği zaman gözüne çarpan yerlerde markamızı temsil eden Primary ve Secondary renklerini görmektesiniz.
Surface, Background ve Error Colors
Teker teker renklerden bahsedelim;
Background color: Scroll edilebilen alanlar için kullanılan renktir.
Surface color: Kartlar, Bottom Sheets ve menüler için kullanılan renktir.
Error color: Hataları göstermek için kullanılan renktir.
Yukarıdaki örnekte hangi rengin nerede kullanıldığını görüyorsunuz.
On Colors
On colors yukarıda bahsettiğim renklerin üstünde kullanılan componentlerde(icon, textview vb.) kullanılan renklerdir.
Örneğin background colorın kullanıldığı bir componentin üstündeki componentin rengi onBackground olmak zorundadır veya surface color’ ın üstündeki component’ in rengi onSurface olmak zorundadır.
Material 3'te Renkler Nasıl?
Buradaki renkler Material 2'de bahsettiğimiz gibi net değil biraz daha karışık gelebilir en azından bana öyle geldi.
Key colors
Accent colors
Burada Primary Variant Color yok onun yerine Tertiary Key Color bulunmakta. Tertiary color markamızın renklerini destekleyen renk olmalıdır. Gelin hesap makinesinden örnek verelim;
- “=” iconunun bulunduğu butonun rengi primary color
- Sayıların bulunduğun butonun rengi secondary color
- “ac” iconunun bulunduğu butonun rengi tertiary color
accents colorlar bu şekilde.
Neutral colors
Yukarıda bahsettiğimiz background ve surface renkleri ile aynı renkler. Ekstradan variant colorlar var. Onlarda surface renklerini desteklemek için kullanılabilecek renkler.
Additional colors
Yukarıda bahsettiğimiz error color ile aynı renkler.
Inverse Colors
Material 3'te yukarıda bahsettiğimiz renkler dışında inverse renklerimizde mevcut. Bu renkler biraz daha anlık bilgilendirmelerde kullanıcıların dikkatini kullanmak için kullanılan renklerdir.
Aşağıdaki gibi bir SnackBar düşünelim. Kullanıcı uygulamayı Light temada kullanıyorken siz SnackBarınızda Dark tema kullanabilirsiniz. Bu kullanıcının dikkatini çekecektir.
Renkler bu şekilde biraz Material 2 ve Material 3 arasındaki typography farklarına bakalım.
Material 2'de typography nasıldı?
Material Design typograpghy konusunda da bir standart getirmiş durumda. Mesela H1 kategorisinde bir typography kullanacaksanız, kullandığınız fontun Light’ını ve büyüklüğünü 96 punto olarak kullanmalısınız.
Typography için 13 farklı kategori bulunmakta. Bunlar aşağıdaki gibidir;
Aşağıda bir kart componentinde bulunan textleri teker teker kategorize edelim.
Headline
Başlıklar için kullanılan kategoridir
Yukarıdaki örnekte H5 kategorisi kullanılmış ve H5 kategorisine sahip olan bir text Regular ve 24 punto olmak zorunda.
Subtitles
Orta vurgulu alanlar için kullanılır
Body
Uzun alanlar için kullanılır
Overline
Küçük köşede ve üstte bulunan textler için kullanılır. Örn gönderide sağ üstte bulunan tarih gibi
Button
Buton yazıları için kullanılır
Material 2'de typographyden bahsettik şimdi sıra Material 3'te ki typographyde
Material 3'te Typography Nasıl?
İsimlendirmelerde farklılıklar mevcut ama genel olarak Material 2 gibi. Ben kategorileri aşağıya yazıyorum neden birbirine benzer olduğunu daha iyi anlayacaksınız;
- Display large
- Display medium
- Display small
- Headline large
- Headline medium
- Headline small
- Title large
- Title medium
- Title small
- Label large
- Label medium
- Label small
- Body large
- Body medium
- Body small
Material 2'de Headline kategorisi 1 den 6 ya kadarken Material 3'te ilk 3 kategori Display diye isimlendirme almış durumda. Subtitle yerine Title kategorisi var. Buton yerine Label var.
Genel olarak Material 3'te typography bu şekilde diyebiliriz. Bu yazımızda Material 2 ve Material 3'ten bahsettik. Bir sonraki yazımızda Material 3'ün Jetpack Compose kullanılarak geliştirilen bir projede kullanımından bahsedeceğim.
