Material Design Nedir?

Material Design nedir, ne işe yarar, işimizi nasıl kolaylaştıracak?

Şekil 1 - Material Design UI Örneği

Material Design, Google tarafından geliştirilen bir tasarım dilidir. 2014’te I/O konferansında Android 5.0 Lollipop ile beraber duyurulmuştur.

Temel olarak, kullanıcılara daha kararlı bir arayüz sağlayabilmeyi amaçlıyor. Yeni gelen bu tasarım standartları ile Android uygulamalarındaki uyuşmazlık, tutarsızlık, dokümantasyon eksikliği gibi konulara bir çözüm getirilmiş oldu. Böylece kullanıcılar, daha tahmin edilebilir bir ortamda oldukları için uygulamalar arası geçişlerde zorlanmayacak,  bir uygulamanın nasıl çalıştığını daha çabuk kavrayabilecek ve daha kolay alışabilecekler.

Özellikle farklı ekran boyutlarında uygulama geliştirenlerin yaşadıkları problemleri ortadan kaldıracak ve farklı ekran boyutlarını uyumlu hale getiren akıllı arayüz geliştiricilerinin işini bir hayli kolaylaştıracak.

Şekil 2 - Işık ve Gölgelendirme Çalışmaları

Material Design Prensipleri 

Material design üç prensibe dayanıyor;

Material Metaforu

Material derken aslında ne demek istiyoruz? Özellikleri neler? Nasıl davranır?

                                                                                                                   

Rasyonel düzlem ile hareket sistemini bileştiren bir teoridir aslında material metaforu. Google’ın tanımına göre metarial, dokunulabilir gerçeklik üzerine kurulu, kâğıt ve mürekkepten ilham alınmış buna rağmen teknolojik açıdan gelişebilir ve yaratıcı düşünceye açık bir malzemedir. Işığın, yüzeyin ve hareketin temel prensipleri bize objelerin nasıl hareket ettiği, nasıl etkileşime geçtiği ve uzayda ki varlığı ile ilgili bilgi verir.

Yani özetle, fizik kurallarını aşmadığımız ve inandırıcılığımızı kaybetmediğimiz sürece hayal edebileceğimiz her şeyi yapabiliriz.

Material Design Özellikleri

  I.   Ortam

Material design ile tasarım yaparken kullandığımız ortam 3D ortamdır. Yani x, y ve z düzlemlerini kullanıyoruz. Z ekseni ekrana dik bir şekilde konumlandırılmış. Böylece pozitif z - ekseninde yapılan artışlar kullanıcıya doğru yapılmış oluyor. Ve kullanıcı gerçeklik hissine kapılıyor.

Işık ve gölgelendirmeler,  z - ekseninde ki yükseltme işlemini yapmamıza yarıyor. Bu sayede elementler arasında ki yükseklik farkını gösterebiliyoruz. Anahtar ışığı açılı gölgeler oluştururken, ortam ışığı daha yumuşak ve her yönden gölge oluşturur.

Şekil 3 – Z – eksenindeki Yükseltme(Elevation) İşlemi

II.   Fiziksel Yapısı

Material x ve y eksenlerinde farklı ölçülere sahip olabilirler. Ama z ekseninde sabit ve 1 dp kalınlığında olmalıdır. Uygulamalarımız da ki elementlerin kâğıtlardan oluştuğunu düşünüyoruz. İçeriklerin herhangi bir kalınlığı yoktur.

Nesnelerin gölgeleri yüksekliklerine bağımlı bir şekilde doğal olarak değişmeli. Renklendirme ile gölgelendirmeyi arttırmaktan kaçının. Cismin yüksekliğine bağlı olarak değişen gölgelendirme sistemini kullanın böylece istikrarlı bir yapıdan vazgeçmemiş oluyoruz

Doğru : Nesneler birbirinden yükseklikleri ile ayrılır

Yanlış : Nesneleri renklendirerek gölgelendirme

Material katı bir cisimdir. Dolayısıyla inputlar sadece ön plandaki nesneyi etkileyebilir.

Birden fazla material aynı noktada bulunamaz. Eğer bulunacaksa bile aynı köşelere sahip olmaları gerekir ki buna da seam(dikiş) demişler.

Birbirlerinin içinden geçemezler

Material şekil değiştirebilir, kendi ekseninde büyüyüp küçülebilir. Floating Action Button, nam-ı değer FAB material’in bu özelliğinin en güzel örneği bence.  FAB ile yeni bir pencere açabilir ya da pop-up dialoglar yaratabilirsiniz

Kendi ekseninde büyür, küçülür.

Şekil değiştirebilir

Material katlanamaz ya da kıvrılamaz. Online Ikea kataloglarında ki o kıvırma olayını rafa kaldırıyoruz. Ayrıca Smart Paper’dan da biraz bahsetmek istiyorum. Akıllı kâğıt dedikleri şey ayrılabilir, parçalanabilir ve ayrıldıktan sonrada tekrar iyileşebilir yani mükemmel bir şekilde tekrar bir araya gelebilir bir kâğıt yapısıdır

Yanlış : Katlanamaz Kıvrılamaz

Doğru : Smart Paper Liste Örneği

Doğru : Smart Paper

Yükseklik (Elevation)

Nesnenin z - eksenindeki pozisyonuna göre yapılan gölgelendirmedir. Resimde card, app bar ve FAB yapılarını görüyoruz. Bu nesnelerin her birinin kendine özel bir yüksekliği vardır

Tasarımcılar uygun olan yükseklikler ile ilgili standartlar koymuşlar. Mesela, cardlar normalde 2 dp yükseklikte durmalı, basıldığında ise 8 dp yüksekliğe çıkmalıdır. Bu standartları detaylı olarak

Google’ın design sayfasında bulabilirsiniz:

https://www.google.com/design/spec/what-is-material/elevation-shadows.html#

Basıldığında yüksekliğin artması kullanıcıya mıknatıs hissi vermek için yapılmış. IOS’ tada basıldığında koyulaşan butonlar kullanıcının etkileşime geçtiğini anlaması için önemli.

Şekil 1: FAB(Floating Action Button)

Şekil2 : Raised Button

Nesnelerin diğer nesneler ile ilişkisi, ağaç yapılarına benziyor. Aynı şekilde XML dosyalarında ki parent - child ilişkisine bağlı. Her objenin bir ebeveyni vardır ve her obje istediği kadar çocuk edinebilir. Çocuk ebeveyninden dönüşüm özelliklerini alabilir. Pozisyonu, rotasyonu, ölçüsü (scale), yüksekliği (elevation) gibi.

Şekil 1’ deki card yapıları scroll edilirken FAB sabit kalıyor. Çünkü FAB, card koleksiyonunun çocuğu değil. Şekil 2’deki raised button yapısı ise card yapısının çocuğu olduğu için (kalıtım sebebiyle) scroll hareketini yapıyor.

Cesur, Grafik, Amaca Yönelik

Grafik tabanlı bir tasarım için tipografi, gridler, layoutlar ve renk gibi konularda dikkat edilmesi gerekilen noktalar nelerdir?

Genel olarak arayüz elementlerinin göze güzel gelmekten çok daha fazlasını yaptığını anlatıyor. Aslında arayüz kullanıcıya uygulamayı nasıl kullanması gerektiğini göstermelidir. Kullanıcı aktivitelerinin vurgulanması, ana fonksiyonları görünür kılar ve kullanıcıya bir yol haritası sunar. Bu yüzden material design ile düşünülerek seçilmiş renkler, köşeden köşeye resimler, büyük ölçekli yazılar kullanarak cesur ve grafik bir arayüz yaratmaya çalışıyoruz.

Özetle amaca yönelik olmalı, grafik olmalı ve sizi yansıtmalı böylece kullanıcı ile aramızda evrensel bir dil kullanmış oluruz.

Renk Paletleri

Google'ın Material Design sitesinde ki renk paletleri

Google renk paletleriyle Material design için geniş bir renk yelpazesi vermiş. Burada bilmemiz gereken en önemli şeylerden birisi bu renkleri nerelerde ve nasıl kullanmamız gerektiği. PrimaryColor ve AccentColor neyi ifade eder?

PrimaryColor, uygulamamızın app barında kullandığımız ve genel olarak markamızı ya da uygulamamızı tanıttığımız temel rengimizdir.

AccentColor ise, vurgulamak istediğimiz ya da ana metinden ayırmak isteğimiz noktalarda kullandığımız rengimizdir.

AccentColor yanlış tercih edilirse aşağıda örnekte ki gibi amacımıza ulaşamayız o yüzden renklere de dikkat etmeliyiz.

İkonlar 

Uygulama ikonu kullanıcı dostu, basit ve güçlü olmalı. Markanın görsel temsilcisi olduğu için ürüne özel olmalı ve markayı yansıtmalı.

Kendilerinin tasarladıkları sistem ikonları olduğu gibi istersek biz de ikon tasarlayabiliyoruz. Burada dikkat edilmesi gereken noktalardan biri sistem ikonlarının hepsinin 24x24 px boyutunda olması gerektiği. Daha sonraki boyut ayarlamalarını dp (density-independent pixels) üzerinden yapıyoruz.

Tipografi

Roboto ve Noto adında iki yazı tipi geldi. Roboto sadece Latin ve Latin benzeri dilleri karşılayabiliyor. Güney, Güneydoğu Asya ve Orta Doğu dillerini (Korece, Japonca, Çince, Farsça, Arapça, Hintçe vb.) ise Noto karşılıyor

Faydalı Linkler : 

Renk ve Tema: 

http://www.materialpalette.com/

http://www.materialup.com/

Roboto ve Noto:

https://www.google.com/design/spec/resources/roboto-noto-fonts.html

Yazım ile ilgili: 

https://www.google.com/design/spec/style/writing.html#writing-global-writing

Layout ve Rehber Gridlerin Standartları:

https://www.google.com/design/spec/resources/layout-templates.html#

Component:

https://www.google.com/design/spec/components/bottom-sheets.html#

Patterns:

https://www.google.com/design/spec/patterns/app-structure.html#app-structure-start-screen

Devices:

https://www.google.com/design/spec/resources/devices.html

What is New:

https://www.google.com/design/spec/whats-new/whats-new.html

Referans:

https://www.google.com/design/spec/material-design/introduction.html

Yağmur GÜLDALI