google-material-design-large

Google’ın Yoğurt Yeme Şekli : “Material Design”

google-ioGoogle, geçtiğimiz dönemde IO kapsamında Android için arayüz tasarımını açıkladı. Aslında buradaki Android filtresi sıradan bir maske. “Material Design” şeklinde isimlendirilen bu yeni trend sadece Android arayüzlerini değil, Chrome OS ve Google’ın tüm web servislerinde yer bulacak. Bu da teknolojiyle en ufak alakası olan herkesin Material Design’ı kullanacağı anlamına geliyor.

İlk bakışta Flat Design‘ın renklerini anımsatsa da herşey artık daha canlı. Tüm renkler açılmış. Beraberinde minimalist yapı korunmuş. Ayrıca bol bol kullanılan animasyon ve geçişler sayesinde bir ekranın gösterebileceğinden fazla içerik iç içe eklenmiş. Bu da kullanım kolaylığı konusunda dikkat çeken yeniliklerden birisi.

Sağlanan kullanıcı deneyimi de UX Awards tarafından gold price ile ödüllendirildi. Açıklama ise şu sözlerle başlıyor : “Çoklu ürün ~ platform için gerçekçi hisse sahip yüzeyler, kalınlaşmış grafik design ve işlevsel hareketlilik ile tasarıma yeni bakış açısı.

Peki ya Google ne diyor?

“Focus on the user and all else will follow.”

Google Material Design

Birçok tasarımcıya göre Google’ın kullanıcı deneyimi tarafında yaptığı bu büyük yenilik beraberinde bir devrimi de getirecek.

Google’ın açıklamalarıyla devam edelim.

Tasarım, düşünerek yaratma sanatıdır. Bilimin ve teknolojinin imkanları dahilinde yenilikçi bir görsel dil oluşturmak için kendimizle yarışır olduk. Tabii bunu yaparken de tasarımın temel prensip ve ilkelerinden uzaklaşmadık. Biz özetle bu yapıya Material Design (Materyal Tasarımı) diyoruz.

1-material-metaphor

1.Materyal metafor.

Materyal metafor, rasyonal uzayın ve hareket sisteminin birleştiği noktadır. Bizim materyalimiz kağıt ve mürekkep ile çalışmayı ilham alarak dokunsal gerçekliğe bağlı kalmakta.

2-tangible-surfaces

2.Yüzeyler artık daha sezgisel ve doğal.

Yüzeyler ve kenarlar gerçeklik deneyimimiz ile görsel ipuçları sağlamakta. Tanıdık dokunsal tasarımların kullanılmaya devam edilmesi hızlı ve eforsuz öğrenimi sağlıyor.

3-dimensional-affordances

3.Boyutluluk etkileşimi sağlıyor.

Işık, yüzey ve hareketlilik kuramları nesnelerin etkilişimi konusunda kilit önem taşıyor. Gerçekçi aydınlatma hareketli parçaları ve dikişleri gösterir, alanları böler.

4-one-design

4.Tek adaptif tasarım

Basitlikle beslenmiş tasarım sistemi uzay ve yüzey ile etkileşim kurar. Böylece her cihaz aynı yapıyı farklı şekilde gösterir. Her ekran bu etkileşim sayesinde ölçütlendirmeleri tekrardan işler. Renkler, ikonlar, hiyerarşi ve mekansal ilişkiler sabit kalır.

5-bold-and-intentional

5.İçerik kalın, grafiksel ve maksatlı

Kalın tasarım hiyerarşiyi, ifadeyi ve odaklanmayı yaratır. Maksatlı renk seçenekleri, edge-to-edge görüntü, büyük ölçekli tipografi ve beyaz boş alanlar netliği ve odağı korur.

6-emphasize-actions

6.Renk, yüzey ve ikonografi eylemleri vurgular

Kullanıcıların yaptığı işlemler kullanıcı deneyiminin özüdür. Birincil eylemler tüm tasarımın dönüm noktalarıdır. Onları daha belirgin hale getirmek kullanıcının algısına da yön vererek kullanım kolaylığı oluşturur.

7-users-initate-change

7.Değişimi kullanıcı tetikler.

Arayüzdeki değişikliklerin hepsine kullanıcı etkileşimleri enerji vermekte. Dokunma ile başlayan hareket ise kullanıcıyı birincil eylemlere doğru iter.

8-animation-choreograghy

8.Animasyon ortaklaşa kullanılan sahnedeki koreografidir.

Tüm eylem tek bir ortamda gerçekleşir. Nesneler dönüşüm ve düzeltmelere rağmen sürekliliğini koruyarak kullanıcıya sunulur.

9-meaningful-motion

9.Hareket ifadeyi destekler.

Anlamlı ve uygun hareket tutarlı geçişler ile birlikte dikkatin korunumunu sağlar.

Neler değişiyor?

En büyük devrim kullanıcı deneyimi tarafında olmakta. Ülkemizde UX hak ettiği önemi hala görememiş olsa da dünya devleri bu konuda geniş araştırmalar yapmakla yükümlü ekipler kurmaya devam ediyor.

Google’ın bu bakış açısı bizlere tek sayfalık web sitelerini hatırlatmakta. Baktığınız çok basit ve az öğeden oluşan bir tasarım, ancak altında koca bir içerik havuzu mevcut. Sadece talep edilen perdenin önünde, gerisi ise perde arkasında sırasını bekliyor.

Tasarımın yeni yüzüne şimdi ‘Merhaba’ deyin ve Google’ın bu yeni trendini yakından izleyin. Adobewordpress olarak bu makaleyi, öncesinde ve sonrasında yayınlayacağımız tasarım örnekleriyle besliyor olacağız.

İyi tasarımlar!



  • Kurtulus Özberk

    Ben yapsaydım bu renklerde bir tasarım herkes yerden yere vururdu.

  • Hangovernor

    Basitleştirecez diye tasarım yapmayacaklar artık. O hale geldik.

  • booozy

    Fareyle tıklayınca yuvarlaklar hoverlara gölgeler falan hemen etkilerini yansıtmışsınız sitenize de 😀