Berk Babadoğan Materyal Tasarım 2

Transkript

1 Berk Babadoğan

2 Berk Babadoğan Materyal Tasarım 2

3 Materyal Tasarım Nedir? Google tarafından geliştirilen bir tasarım dilidir. Tasarım dili, kağıt ve mürekkep birlikteliğinden esinlenmiştir. Materyal tasarım, tablo tabanlı düzenlerin, duyarlı animasyon ve geçişlerin, dolguların, aydınlatma ve gölgelendirme gibi derinlik efektlerinin daha serbestçe kullanımını sağlar. Berk Babadoğan Materyal Tasarım 3

4 Materyal Tasarım Nedir? Gerçek kağıdın aksine, dijital materyal akıllıca genişleyebilir ve yenilenebilir. Materyal, fiziksel yüzeylere ve köşelere sahiptir. Dikişler ve gölgeler neye dokunabileceğiniz hakkında fikir sahibi olmanızı sağlar. Materyal Tasarım, uygulamalar ve işletim sistemi bileşenleri arasında tutarlı bir grafik tasarımı ve renk şemaları kullanmayı şart koşar. 3. parti uygulamalar için renk şeması oluşturma kılavuzunu içermektedir. Yazı tipleri ve farklı parlaklık oranlarındaki metin kontrastı standartlaştırılmıştır. Berk Babadoğan Materyal Tasarım 4

5 Materyal Tasarım Neyi Amaçlar? Materyal Tasarım basit anlamda, geliştirilen bütün ürünlerde, tek bir dil kullanılarak, bir web sitesinin hangi cihazdan ziyaret edilirse edilsin, bir mobil uygulamanın hangi ekran türünde kullanılırsa kullanılsın, uygulama ve sitenin kullanılması sırasında, bir sonraki adımda ne olacağını kullanıcının yeniden keşfetmesine gerek kalmadan, cihazlar ve platformlar arasında tutarlı bir kullanıcı deneyimi oluşturmayı amaçlamaktadır. Berk Babadoğan Materyal Tasarım 5

6 Materyal Tasarım Neyi Hedefler? İyi bir tasarımın klasik tasarım prensiplerini inovasyon, teknoloji ve bilimin olanaklarıyla sentezleyen bir görsel dil yaratmak. Platformlar ve cihaz boyutları karşısında tek bir deneyim sağlayamaya izin veren bir sistem geliştirmek. Mobil deneyim temelli, fakat dokunma, ses tanıma, fare ve klavye gibi birinci sınıf giriş metotlarına destek veren bir deneyim oluşturmak. Berk Babadoğan Materyal Tasarım 6

7 Akıllı Kağıt Materyal Tasarımda, kağıdın fiziksel özellikleri ekrana yansıtılır. Bir uygulamanın arka planı, bir sayfa kağıdın düz ve opak dokusunu andırır. Bir uygulamanın davranış mimiklerini bu sayfa oluşturur ve bu sayfa, yeniden boyutlandırılabilir, karıştırılabilir ve birden fazla sayfa ile bağlantı kurabilir. Uygulamanın dışında varlığını sürdüren sistem ve durum çubukları gibi elementler bu sayfadan bağımsızdır ve sayfanın özelliğini taşımazlar. Onların dışındaki tüm elementler bu sayfada, yani akıllı kağıtta bulunur. Berk Babadoğan Materyal Tasarım 7

8 Berk Babadoğan Materyal Tasarım 8

9 Yüzer Eylem Düğmesi Yüzen bir eylem düğmesi, araç çubuğundan ayrı bir dairesel tabakadır. Desteklenen tek eylemi temsil eder. Eğer adımı yaratan içeriğe bağımlıysa, adımı ikiye ayırabilir. Eğer sayfaların tümünün içeriği ile alakalıysa, dikişi ikiye ayırabilir. Berk Babadoğan Materyal Tasarım 9

10 Materyal Tasarım ve içeriğin bir araya gelmesiyle birlikte kullanıcıya dijital bir dünya içerisinde anlamlı bir sonuç sunmaktadır. Tasarımda kullanılan bir kart, bizlere anlamlı bir içerik sunmaktadır. Aynı zamanda bu kullanım Materyal Tasarım içerisinde genel bir kullanım olarak değerlendirilebilir. Bir kart kendi içerisinde doğrudan bağlam sahibi olmasının yanında diğer kartlar ile de ilişki içerisindedir. Berk Babadoğan Materyal Tasarım 10

11 Hareket Uygulama akışı boyunca kullanıcıya bir içerik üretmektedir Mesela, Lokasyonlarım olarak isimlendirilebilecek bir yapı olabilir. Siz bu kartlardan herhangi birisinde tıkladığınız durumda, Materyal kart sadece tek bir kart olarak devamında yer oluşan içeriği kullanıcıya sunmak yerine tam ekran olarak sunmaktadır. Bu durumun kullanıcıya sunduğu en önemli durum ise, kullanıcı davranışına karşı verilen yanıtın tutarlı olmasıdır. Berk Babadoğan Materyal Tasarım 11

12 Geliştiriciler İçin Ne Anlama Gelmektedir? Temel olarak, Materyal Tasarım anlayışı çerçevesinde sunulan durumların hiçbirisi anlaması veya uyarlaması zor durumlar değildir. Ancak Materyal Tasarım anlayışının, etkileşimli bir tasarım anlayışına ciddi mana da önem verdiğini de görmek gerekmektedir. İlk olarak bir düşünülmesi gereken noktalar, kullanıcı ara yüzü geliştirirken kullanılan elemanların gerçek fiziksel dünyada nasıl davrandığı, ekran geçişlerinin nasıl daha fazla etkileşimli olacağı, bir ara yüzün kullanıcının bilinçaltı ile nasıl iletişime geçmesi gerektiği şeklinde özetlenebilir. Berk Babadoğan Materyal Tasarım 12

13

14 Renk Materyal Tasarımdaki renkler, parlak vurgulardan, derin gölgelerden ve sessiz ortamlarda yan yana yer alan cesur tonlardan esinlenmiştir. Materyal; çağdaş mimariden, yol işaretlerinden, kaldırım işaretleme bantlarından ve atletizm pistlerinden ipuçları alır. Renkler beklenmedik ve canlı olmalıdır. Renk seçimleri ana paletten 3 ve ikinci paletten bir vurgu rengi olacak şekilde sınırlanmalıdır. Koyu arka planda açık renk yazı, açık arka planda koyu renk yazı tonu kullanılmalıdır. Berk Babadoğan Materyal Tasarım 14

15 Vurgu Rengi Vurgu rengi, ana işlem butonu ve anahtar ya da sürgü gibi bileşenler için kullanılmalı. Uygulamaya çubukları veya geniş renk alanlar için vurgu rengi kullanmayın. Yüzen eylem düğmesi ve arka plan için aynı rengi kullanmaktan kaçının. Berk Babadoğan Materyal Tasarım 15

16 Araç & Durum Çubukları Burada, araç çubuğu Çivit renginin 500 versiyonunu kullanırken, durum çubuğu 700 versiyonunu kullanıyor. Bir adı düzenlerken, tüm başlık ve açıklama alanı arka plan rengi olarak Çivit rengini kullanıyor. Berk Babadoğan Materyal Tasarım 16

17 Ürün İkonları Ürün simgesi tasarımı, materyalin dokunsal ve fiziki kalitesinden esinlenmiştir. Her ikon kağıt gibi kesilmiş, katlanmış ve aydınlatılmış olabilir fakat basit grafik elementleri tarafından temsil edilmektedir. Materyalin kalitesi temiz kıvrımları ve net kenarlarıyla beraber sağlamdır. Mat yüzey ışıkla ince vurgular ve tutarlı gölgeler aracılığıyla etkileşime girer. Berk Babadoğan Materyal Tasarım 17

18 Ürün İkonları Anatomisi Ürün simgesi anatomisi, ürün simgesini oluşturan grafik öğeleri açıklar. Bu öğeler arasındaki aşinalık, her logonun özelliklerini ve aralarındaki ince farkları anlamayı kolaylaştırır. Bu öğeler genelden özele doğru: 1. Cila katmanı. 2. Materyal arka plan. 3. Materyal ön planı. 4. Renk 5. Gölge Yukardan bakıldığı zaman, her bileşen bir öncekinin üzerine konumlandırılmıştır. Dağıtılmış bir perspektif örneği, logo yapısının her bir bileşeninin içeriğini gösteriyor. Berk Babadoğan Materyal Tasarım 18

19 Berk Babadoğan Materyal Tasarım 19

20 İmgeler Kullanıcı deneyimini geliştirmek için illüstrasyon ve fotoğraf kullanırken, resimler haz, kişisel alaka ve bilgi ifade edecek şekilde seçilmeli. Kişisel alaka: Görüntü, kullanıcının yaşadığı bağlamı ve dünyayı gösterebilir. Bilgi: Görüntüler, anlamayı kolaylaştıran özel bilgileri iletebilir. Haz: Bağlamı esnetik güzellik ile tasvir etmek, ürününüzü benzersiz yapabilir ve kullanıcı bundan zevk alır. Berk Babadoğan Materyal Tasarım 20

21 Berk Babadoğan Materyal Tasarım 21

22 Tipografi Materyal Tasarımın ana yazı tipi Roboto dur. Ayrıca, Android 4.0 sürümünden beri Android in standart yazı tipidir. Roboto, desteklenen geniş platform kümesi boyunca çalışması için yoğun şekilde işlenmiştir. Yazı tipi ağırlıkları: İnce Hafif Normal Orta Kalın Koyu Berk Babadoğan Materyal Tasarım 22

23 Tipografi Materyal Tasarımın ikincil yazı tipi Noto dur. Chrome OS un varsayılan yazı tipidir Noto nun dikey ölçümleri Roboto ile uyumludur. Yazı tipi ağırlıkları: İnce Hafif Orta Hafif Normal Orta Kalın Koyu Berk Babadoğan Materyal Tasarım 23

24 Yazım Açık, kesin ve kısa bir metin, ara yüzleri daha kullanışlı ve güvenilir yapar. Bunun için bazı yazım kuralları vardır: Kullanıcıyla siz gibi konuşun. Biz kelimesine başvurmayın. Kısa ve öz olun. Basit kelime formları kullanın. Şimdiki zamanda yazmaya çalışın. Basit ve doğrudan yazın. Herkesin bildiği basit kelimeleri kullanın. Gereksiz ifadeler atlayın. Sadece gereken detayı verin. Cümle tarzı baş harfleri kullanın. Asla asla demeyin. Berk Babadoğan Materyal Tasarım 24

25

26 Materyal Bir Metafordur Materyal metaforu, hareket sistemi ile rasyonel uzayı birleştirme teorisidir. Materyal; kağıt ve mürekkep birlikteliğinden esinlenerek dokunsal gerçekliği temel almaktadır. Materyalin yüzeyleri ve kenarları, gerçekliğe dayanan görsel ipuçları sağlar. Tanıdık dokunsal nitelikler kullanımı kullanıcıların hızlı kazanımları anlamasına yardımcı olur. Berk Babadoğan Materyal Tasarım 26

27 Kalın, Grafik, Kasıtlı Baskı tabanlı tasarım temel unsurları şunlardır: Tipografi Izgaralar Uzay Ölçek Renk Kasıtlı renk seçenekleri, kenardan kenara görüntüler, büyük ölçekli tipografi ve kasıtlı beyaz boşluk, kullanıcıyı deneyimin içine alan bir grafik ara yüzü yaratır. Berk Babadoğan Materyal Tasarım 27

28 Hareket Anlam Sağlar Hareket, kullanıcıyı ana işletici olarak güçlendirir. Ana kullanıcı eylemleri, tüm tasarımı dönüştüren önerge dönüm noktalarıdır. Tüm eylemler tek bir ortamda gerçekleşir. Nesneler; dönüştürülüp yeniden organize edilse bile tecrübe sürekliliğini bozmadan kullanıcıya sunulmaktadır. Hareket anlamlı ve uygundur, odaklanmayı ve devamlılığı sağlar. Berk Babadoğan Materyal Tasarım 28

29

30 3 Boyut Dünyası Materyal ortamı 3 boyutlu bir uzaydır, yani tüm nesneler X, Y ve Z boyutlarına sahiptir. Materyal tasarımında, Z ekseni ekran düzlemine dikey olarak hizalanmıştır. Malzemenin her tabakası Z ekseni boyunca tek bir konuma ve standart bir 1dp kalınlığa sahiptir. Web üzerinde, Z ekseni katmanlaşma için kullanılır, bakış açısı için değil. 3D Dünya Y ekseni manipüle ederek taklit edilir. Berk Babadoğan Materyal Tasarım 30

31 Işık ve Gölge Materyal uzayında, sanal ışıklar sahneyi aydınlatır. Anahtar ışıklar yönlü gölgeler yaratırken, ortam ışığı tüm açılardan yumuşak gölgeler yaratır. Materyal uzayda gölgeler iki farklı ışık kaynağı ile yaratılır. Gölgeler; Android tarafında, ışık kaynakları materyal tabakaları tarafından Z ekseni boyunca çeşitli konumlarda engellenerek, Web tarafında, sadece Y eksenini manipüle ederek oluşturulur. Yandaki resimde, 6dp yüksekliğe sahip kartın gölge varyasyonları tasvir edilmektedir. Berk Babadoğan Materyal Tasarım 31

32

33 Yoğunluk Bağımsız Piksel (DP) Farklı yoğunluklara sahip ekranlarda ara yüz elementlerinin tek tip olarak ekrana gelmesidir. Her hangi bir ekranın ölçeğine kendini uyarlayabilen esnek bir birimdir. Bir DP, ekrandaki 160 yoğunluğuna sahip bir piksele eşittir. DP hesaplamak için: DP = (piksel genişliği * 160) / ekran yoğunluğu Berk Babadoğan Materyal Tasarım 33

34 Ölçeklenebilir piksel (SP) SP ile DP arasındaki en büyük fark, SP nin kullanıcı font ayarlarını saklamasıdır. Erişilebilirlik için büyük metin ayarlarına sahip kullanıcılar, yazı tipi boyutunun metin boyutu ayarlarıyla eşleştiğini görebilirler. Berk Babadoğan Materyal Tasarım 34

35 Berk Babadoğan Materyal Tasarım 35

36 Daha Fazla Bilgi İçin Berk Babadoğan Materyal Tasarım 36

37 Referanslar Material Design Making Material Design Google Design Material Design- Introduction Material Design Material Design Genel Bir Bakış What You Can Learn From Google s Material Design Material Design ne demek? Berk Babadoğan Materyal Tasarım 37