Skeuomorphism Vs. Flat Design derken şimdi birden Material Design inceler olduk. Google’ın son açıkladığı bu yeni tasarım trendi -ki trend demek ne kadar mantıklı bilmiyorum- bütün UX ya da UI tasarımcıları uygulamaya koymaya başladı bile. Google öncelikle Android platformunda kendi uygulamalara yayınladığı güncellemelerle bu arayüzü kullanıma sokmuş görünüyor. Bu akımı Google’ın kendi sitesinden inceleyebilirsiniz.
Öncelikle bu aşamaya nasıl geldiğimize kısaca bir göz atmakta yarar var. Skeumorphism akımında 3 boyuta daha yakın, derinlemesine çalışmalar çıkarmaya çalışılırdı. Yani nasıl görüyorsak reelde, sanalda da öyle görmemiz üzerine çalışmalar yapılırdı.
Bu tabii Apple firmasının ilk grafik destekli arayüz çalışmalarıyla başlayan bir süreçti. Yaklaşık olarak 5 yıl önce belki de tarihinde ilk defa Microsoft bir tasarım trendine öncülük etti. Metro UI tasarım adını verdiği arayüz ile özellikle dokunmatik cihazlarda kullanıcı deneyimini maksimize eden tasarımıyla Flat tasarım trendini öne çıkardı.
Hemen hemen aynı zamanlarda IOS 7 güncellemesiyle iPhone kullanıcıları da flat tasarıma geçmiş ve websiteler dahil bütün arayüzlerde bu trendi takip eder olmuştuk. Ta ki Google’ın flat tasarımdaki eksiklikleri giderecek yeni tasarım açıklamasıyla karşılaşana dek.
Teknoloji devinin Material Design adını verdiği bu tasarım modeli önümüzdeki süreçte bir çok platformda karşımıza çıkacağa benziyor. Material Tasarım ilkelerinden kısaca bahsedecek olursak, büyük ekranlarda karşılaşılan zorluklara çare olmaya çalıştığını ilk sırada söyleyebiliriz. Apple’ın da -her ne kadar iPhone 5 reklamlarında büyük ekrana gerek yok her şeyi buna sığdırırız dese de- büyük ekran akımına kapıldığını düşünürsek bu yeniliğe ne kadar ihtiyacımız olduğunu da anlamış oluruz.
Kullanıcıların %45’inden fazlası mobil cihazlarını tek elde kullandığını biliyoruz. Bu kullanıcı verisi elimizdeyken yani sadece başparmak ile bütün işlemleri yapmak varken neden biz hala menüleri sol üstte kullanmaya devam edelim. Google da tam bu noktadan yaklaştı soruna ve Gmail Mobil tasarımında örneğini gördüğümüz gibi sol alta yerleştirdi yeni mail butonunu. Yanı kısaca anlıyoruz ki en sık yaptığımız işlem en yakınımızda olmalı. Eğer bir bankacılık uygulamasına giriyorsanız hesap hareketleri seçeneği ya da havale işlemi butonu sol altta olmalı. Alışveriş uygulamasındaysanız satın al butonu da sepete git butonu da en yakında konumlanmalı. Ya rehberinize giriyorsanız tuş çevirme butonu size en yakında bulunmalı. Bu konuda tahminim öyle ki mobil için hazırladığımız sitelerde de bu aksiyonu kullanmaya başlayacağız.
Bir diğer yenilik ise nesneleri birbirinden sade bir gölge ile ayırması diyebiliriz. Seçili olan nesne diğer nesnelerden bir gölge ya da animasyon kullanımı ile ayrılıyor. Ancak bu ayrımda sağ altta bulunan butonumuz sabit kalıyor ki bu bizim ana yönlendirmemiz oluyor.
Bir diğer özelliği olan animasyon seçeneği seçimlerimizde bize yardımcı oluyor, yönlendirmeler sağlıyor. Bu özellik ise bizlere dokunmatik geri bildirimleri özelleştirme şansı sunuyor. Bu animasyonlar da radyal, yüzey ve malzeme tepki olarak adlandırılıyor.
Bir diğer animasyonumuz ise geçişlerle alakalı. Google bu animasyona da anlamlı geçişler adını veriyor. Yani dilimize kabaca bu şekilde çevrilebiliyor. Burada ise amaç kullanıcının ilk ikonla temas ettiği andan itibaren uygulama içi deneyimine bir bütünsellik katma isteğinden kaynaklanıyor. Bu bütünsellik bizi uygulamayla daha iç içe bir hale büründürüyor. Geçişlerdeki süreler bile önceden hesap edilerek yapılıyor. Yani yavaş ya da hızlı değil Google’a göre kullanıcı için en iyi olan yapılmalı.
Yine aynı şekilde animasyon uygulanırken bir hiyerarşi var ise tasarım bu hiyerarşiye göre yapılmalı. Menü açılacaksa açıldığı yerden itibaren sırasıyla açılmalı ki kullanıcıya en önemliden diğerlerine bir geçiş hakkı tanınsın. Daha önce uygulama içi en önemli fonksiyonun bize en yakın yerde konumlanması gerektiğini söylemiştik. Bu bakış açısıyla eğer bankacılık uygulaması ya da arayüzü tasarlıyorsanız hiyarşik sıra kabaca havale yap, hesap özetini incele, … olacaktır. En sonda ise telefon bankacılığı yönlendirmesi olabilir. Mobil bankacılık deneyiminde telefon bankacılığının son çare olacağını hesap etmeliyiz.
Stil için aşağıdaki örnek bize bir yol gösterici olabilir.
Renk paleti ve renk uygulamalarını http://www.google.com/design/spec/style/color.html adresinden indirebilirsiniz.
Materyal Tasarımda Google iconlar için de bir tutarlılık olması gerektiğini açıklıyor. Örneklerini http://www.google.com/design/spec/style/icons.html adresinden inceleyebilirsiniz.
Font konusuna baktığımızda Google’ın halen daha Roboto’dan vazgeçmediğini görüyoruz. Materyal Tasarım için açıklanan fontlarımız Roboto ve Noto. Her ikisi de ücretsiz olarak Google Font’dan indirilebiliyor.
Materyal Tasarım hakkında google.com/design adresinden ingilizce olarak daha detaylı inceleme yapabilirsiniz.
Keyifli tasarımlar dilerim.
