Flat Design mı yoksa Material Design mı?

Kronolojik olarak tasarım süreçlerini ele alacak olursak, Skeuomorphism, Flat Design ve sonrasında da Material Design karşımıza çıkıyor. Aslında bu sıralamayı, her biri diğerinden bir şeyler alarak ya da eksilterek ilerleyen bir evrim gibi düşünebiliriz. Başlıkta Flat Design ve Material Design yazıyor olsa da, iki tasarım stiliyle ilgili konuşurken, Skeuomorphism’e dokunmamak eksik bir anlatıma sebep olacaktır. Bu yüzden:

Önce Skeuomorphism vardı!

Skeuomorphism’de, buton ve form alanları gibi arayüz elementleri tasarlanırken, gerçek dünyadaki görsellik birebir olarak dijital ortama aktarılıyordu. Di’li geçmiş zaman kullanıyorum çünkü; neredeyse tüm tasarımcılar, Skeuomorphism’den koşarak uzaklaşmış durumda. Tasarımcılar açısından bakacak olursak, örneğin aşağıdaki gibi bir buton tasarımına saatler harcanabilir.

Peki sonuç?

Sonuç; işlevselliği düşük bir kullanıcı deneyimi.

Neden?

Çünkü, her sayfada buna benzer onlarca arayüz elementi olduğunu düşünürsek, kullanıcıların odağı dağılacak ve içerikten uzaklaşmış olacaklar. Ayrıca saatler geçirerek hazırladığınız arayüzün, diğer çözünürlüklerde nasıl görüneceği de (daha doğrusu görünmeyeceği) ciddi bir problem oluşturacak. İşte tam da bu anda imdadımıza evrimin başlamasını sağlayan yeni bir tasarım stili yetişiyor:

Flat Design

Eğer var olan bir şeyi düzeltmek istiyorsanız, önce fazlılıkları ya da yanlış olduğunu düşündüğünüz şeyleri çıkararak başlamanız doğru yolda olduğunuz anlamına gelir. Aslında Flat Design’da da gerçekleşen şey tam olarak buydu. Bu aşamayı da yine bir benzetmeyle anlatacak olursam; kullanılabilirliği atmosfere, Skeuomorphism’i ise atmosfere yaklaştıkça modüllerini bırakan bir rokete benzetebiliriz. Skeuomorphism, kullanılabilirliğe yaklaştıkça realistik görselliğe olanak sağlayan gölge, gradient ve doku gibi stilleri geride bırakmak zorunda kaldı ve elimizde sadece renkler ve içerik kaldı.

Fazlalıkları çıkardıktan sonra, sıra eksikleri tamamlamaya geldi. Bunu da, içeriklerin daha güçlü olarak ifade edilebilmesi için, tipografi ve onu destekleyen ikonları kullanarak mümkün kıldı.

Bu basitlik, tasarımcıların gerçekçi görünümü göz ardı etmesini ve kullanıcılar için de daha kolay bir deneyimi ve daha hızlı erişilebilen siteleri beraberinde getirdi.

Digital Telepathy’nin UX/UI Designer’ı MK Cook, Flat Design’ı şöyle tanımlıyor:

Flat Design, arabirimin kullanıcının aksiyonlarına vereceği yanıtı fiziksel olarak görselleştirmeyi prensip edinen skeuomorphism yaklaşımına bir tepki olarak ortaya çıkmıştır. Skeuomorphism’de niyet gayet geçerli olsa da, ortaya çıkan arabirim estetik olarak biçimsiz ve eski algılanıyordu. Flat Design, kullanıcılar dijital paternleri ve etkileşimleri tanımaya başladıkça skeuomorphism’in yerini aldı. Bence Flat Design, aşırı gerçekçi arabirim tasarımına gösterilen aşırı yüksek bir tepkiydi. Flat Design minimal, yalın ve temiz tasarımdır. Fakat çoğu kişinin Flat Design’ın, tasarımın en yalın hali olduğunu sorgulayacağına inanıyorum.

Artıları:

• Yalın ve minimaldir.
• Daha az kaynak kullanır, böylece daha kısa yükleme sürelerine ve daha az bant genişliği harcamasına gereksinim duyar. Çoğunlukla bütün cihazlarda aynı şekilde görünür ve mobil cihazları destekler.
• İşlevsiz bütün görsel elemanlardan kurtulmayı beraberinde getirir, böylece ekranda kalan bütün elementler bir işlevi yerine getirir.
• Pozitiftir. Bu fikrin kendisinin bir sonucudur. Yani, Flat Design her şeyden önce renkler ve tipografiden ibarettir, dolayısıyla tasarımcı, görsel elementlerin ayrışabilmesi için canlı renkler kullanarak ziyaretçinin ilgisini çekebilmeyi hedeflemek durumundadır. Sadece gri tonlarından oluşan bir flat arabirim tasarımı sık görülmez.

Eksileri:

• Zamandan zamana aşırı yalın ve minimal arabirimler doğurabilir.
• Kısıtlayıcıdır. Görsel karmaşıklık ve markanın görsel kimliğine uygunluk açısından yapabileceğiniz çok fazla şey yoktur.
• Sezgisel değildir. Flat arabirimlerle çok tanışık olmayan kullanıcılar, arabirimle etkileşime geçmekte zorlanabilir. Daha deneyimli kullanıcılar için de çok açık ve anlaşılabilir olduğunu söylemek zordur.
• Tekil ve ayrışan bir markalama ya da görsel konsept oluşturmak zordur. Bir açıdan, flat arabirimlere sahip bütün siteler birbirine benzer.

Son aşama: Material Design

Flat Design’ın, spontan bir şekilde ortaya çıkan ve basitliğin ön planda olduğu bir tasarım stili olduğunu söyleyebiliriz. Material Design’da ise bu süreç, tamamen planlamış bir şekilde ve önceden belirlenen kurallara bağlı olarak hazırlandı.

İlk bakıştı, Flat Design ve Material Design arasındaki farkı söylemek biraz güç olsa da, en temel farklılık, Google’ın kendi ifadesiyle: “Material is the metaphor.” Yani, Flat Design’ın aksine, fiziksel dünyayla bir bağlantı söz konusu. Arayüzdeki elementleri, kullanıcının tepkisine göre hareket edebilen, her birinin yüksekliği olan ve üst üste konmuş kağıtlar gibi düşünebiliriz.

Material Design’la ilgili diğer yazıma şuradan ulaşabilirsiniz.

Digital Telepathy’nin Sr. UX/UI Designer’ı Brad Soroka, Material Desing’ı şöyle tanımlıyor:

Basitçe ifade etmek gerekirse, artık çoğu insan, kullanıcı arayüzünün ne iş yaradığını anlamak için gerçek dünya referanslarına gerek duymuyor. Butonlar, artık parlak görünmek zorunda değil. Metinlerin yerleşeceği form alanlarının içine gölge vermeye gerek yok. Flat Design ile Material Design arasındaki fark gerçek bir evrimdir. Material Design, Flat Design üzerine inşa edilmiştir ama ondan çok daha fazla etkileşim içerir. Renk kullanımı, yerleşim tasarımı ve işlevleri, kullanıcıların bir çok ürün ve cihazın karşısında öğrendiği bir tasarım ekosistemi yaratmıştır.

Artıları:

• Z-eksenini kullanarak herşeyi daha gerçekçi yapar.
• Sürekli olarak güncellenen çok net bir tasarım klavuzu vardır. Yeni bir proje üzerinde çalışırken aklınıza takılan her türlü sorunun cevabını bu kılavuzda bulabilirsiniz.
• Daha sezgiseldir. Hem tecrübeli hem de tecrübesiz herkes için kullanımı daha kolaydır.
• Web tasarımında hareketi destekler. Tasarımda kullanılan hareket, kullanıcıların, o anda ekranda olup biteni kolay anlamasını, önemli olan elementi fark etmesini ve ona dikkatini vermesini kolaylaştırır.

Eksileri:

• Tek bir firma (Google) tarafından sadece bir dereceye kadar inşa edilmiş ve denetlenmiştir. (Gün geçtikçe bu durum bir problem olmaktan çıkmaktadır)
• Z-ekseninin varlığından dolayı uygulaması Flat Design’dan daha uzun zaman alır.
• Tasarımda hareketi destekler… Bunun anlamı: Material Design’ın doğru kullanımı, hareketin kullanılmasını gerektirir.