Material Design’a Giriş
Selamlar 😁
Bu yazımda sizlere Material Design’ın ne olduğundan, prensiplerinden, bileşenlerinden ve faydalarından bahsedeceğim.
Material Design Nedir?
Materyal, geliştiricilerin Android, iOS, Flutter ve Web platformlarında yüksek kaliteli dijital deneyimler oluşturmalarına yardımcı olmak için Google tarafından oluşturulan bir tasarım sistemidir. Bu sistem 2014 yılında Google I/O konferansında, Quantum Paper kod adıyla duyurulmuştur. Origamiden ilham alan bu sistem, günümüzde temel tasarım ilkelerine dayanarak geliştiricilerin uygulama geliştirme sürecinde bir çok kolaylık sağlamaktadır.
Material Design başlıca 3 başlıkta incelenir.
- Prensipler (Principles)
- Bileşenler (Components)
- Tema (Theming)
Prensipler (Principles)
Material Design, aslında bir metafordur çünkü fiziksel dünyadan ve dokularından esinlenilen bu sistem, ışığı ve gölgeleri nasıl yansıttıkları da dahil olmak üzere Material yüzeylerinin, fiziksel dünyadaki kağıt ve mürekkep ile ilişkisini yeniden hayal etmemizi sağlar.
Materyal Design, izleyicilerin bu teknolojiyi deneyimlemesine teşvik etmek için hiyerarşi, anlam ve odak oluşturarak baskı tasarımı yöntemleriyle yönlendirilir. Bu baskı yöntemlerinin en iyi örnekleri: tipografi(typography), ızgaralar(grids), boşluk(space), ölçek(scale), renk(color) ve görüntü(imagery).
Hareket, dikkati odaklar ve geri bildirimler yaratıp, tutarlı geçişler oluşturarak sürekliliği sağlar. Öğeler ekranda göründükçe, yeni dönüşümler üreten etkileşimlerle üretim tasarımsal çevreyi dönüştürür ve yeniden düzenlerler.
Bileşenler (Components)
Material Bileşenleri, bir kullanıcı ara yüzü oluşturmak için etkileşimli yapı taşlarıdır ve odak, seçim, etkinleştirme, hata, üzerine gelme, basma, sürükleme ve devre dışı bırakılmış durumları iletmek için yerleşik bir durum sistemi içerir. *Bileşen kitaplıkları Android, iOS, Flutter ve Web için kullanılabilir.
Bileşenler, aşağıdakiler dahil bir dizi arayüz ihtiyacını karşılar:
- Görüntüleme(Display): Kartlar, listeler ve sayfalar gibi bileşenleri kullanarak içeriği yerleştirme ve düzenlemeye yarar.
- Gezinme(Navigation): Kullanıcıların gezinme çekmeceleri ve sekmeler gibi bileşenleri kullanarak üründe gezinmesine olanak tanır.
- Eylemler(Actions): Kullanıcıların, kayan eylem düğmesi gibi bileşenleri kullanarak görevleri gerçekleştirmesine izin vermeye olanak tanır.
- Girdi(Input): Kullanıcıların metin alanları, çipler ve seçim kontrolleri gibi bileşenleri kullanarak bilgi girmesine veya seçim yapmasına izin verir.
- İletişim(Communication): Snackbarlar, afişler ve diyaloglar gibi bileşenleri kullanarak kullanıcıları önemli bilgiler ve mesajlar konusunda uyarır.
Tema (Theming)
Material Theming, renkleri, tipografi stillerini ve köşe şekillerini özelleştirmek için yerleşik destek(built-in support) ve rehberlikle Material Design’ı markanızın görünümüne ve verdiği hisse uyacak şekilde özelleştirmeyi kolaylaştırır.
Renk (Color)
Malzemenin renk sistemi, bir kullanıcı ara yüzüne renk uygulamak için organize bir yaklaşımdır. Global renk stillerinin semantik adları ve bileşenlerde tanımlanmış kullanımları vardır. Temalar sayesinde, rengin nerede kullanıldığını anlayabilmesi ve buna göre gölgeler/tonlar üretebilmesi geliştiricilere büyük kolaylıklar sağlamaktadır.
Her rengin, tutarlılığı ve erişilebilir kontrastı desteklemek için “üzerine” yerleştirilen öğeler için kullanılan tamamlayıcı bir rengi vardır. Renklerin birbiriyle uyumlarını ve psikolojik etkisini ve anlamlarını yorumlayan bir teori olan Renk Teorisi’ni okumanızı şiddetle tavsiye ederim.
Tipografi (Typography)
Materyal Tasarımı matbaa ölçeği, başlıklardan gövde metnine ve başlıklara kadar her şey için 13 tipografi stili sağlar. Her stilin bir ara yüz içinde açık bir anlamı ve amaçlanan uygulaması vardır.
Yazı tipi, yazı tipi ağırlığı ve harf büyüklüğü gibi önemli özellikler markanıza ve tasarımınıza uyacak şekilde değiştirilebilir. Bununla birlikte kullandığınız font markanızı temsil eden bir yapıda olması doğru izlenim yaratacaktır. Tipografinin önemi hakkındaki aşağıdaki yazıyı okumanızı öneririm.
Biçim (Shape)
Biçim stilleri uygulamak, dikkati yönlendirmeye veya kullanıcıların odağını manipüle etmeye yarar ve aynı zamanda markanızı ifade etmeye yardımcı da olabilir.
Tüm Materyal Bileşenler, boyutlarına göre (küçük, orta, büyük) biçim kategorilerinde gruplandırılmıştır. Bu global stiller, benzer boyuttaki bileşenlerin şeklini hızla değiştirmenin bir yolunu sağlar ve ayrıca biçim özelleştirme aracını kullanarak kendi biçim stillerinizi de oluşturabilirsiniz.
Google’ın verdiği, Material Design hakkında Android (Java ve Kotlin), iOS (Swift ve Objective-C), Web ve Flutter hakkındaki mini eğitimlere göz atmanızı öneririm.
Material Design sürekli güncellenen ve kendini geliştiren bir sistem. Yeni gelen özelliklerden, sonraki yazılarımda kesinlikle bahsedeceğim.
Görüşmek üzere!
