material tasarım

Yapan kişinin (zall olsa gerek) bir durup "ben ne yapıyorum" demesi gereken tasarımdır.

Ulan var ya altıma sıçacağım ama gülmekten mi sinirden mi emin değilim.

Şşş zall, gel bakayım buraya, bir şey konuşacağız. Türkiye'nin en çok ziyaret edilen sitelerinden biri bu, değil mi? Gel şimdi:

1) Onun adı Material Tasarım değil. O dediğiniz şey ya "material design"dır ya "materyal tasarımı"dır. bakınız "Em pi üç".

2) Material Design dediğimiz şey "gölgeli mölgeli beyaz kısımlar olması, üç tane çizgili hamburger menü olması" değildir. Peki nedir materyal tasarımı? Hep birlikte bakalım, ne yapılmalı, ne yapılmamalı:

a)MD(material design diye uzun uzun yazmamak için MD diyeceğim) bir "şekil", bir "UI kit" değildir, bir tasarım prensipleri bütünüdür. Temel prensip de şudur:

"Ekrandaki her şeyin gerçek hayattan, 3d dünyamıza ait materyaller gibi görünmesi". Yani yukarıda da dediğim gibi "gölgeli mölgeli beyaz şeyler" değil o.

b)MD'de kağıt(paper) elementi vardır. içerikler çoğu koşulda bu kağıt elementlerine yerleştirilir ve bu kağıt elementinin gölgelendirilmesi ona kağıt görünümü vermekle kalmaz. Gölge kağıt elementinin zeminden ne kadar yukarıda görüneceğini belirler. Bu yükseklikler google dökümanında 5 aşamaya ayrılmıştır. Nerede senin gölgeler beyim?

c)MD'de kağıt elementlerinin köşesi sivri olmaz. En azından 3 piksellik bir yuvarlatma yapmanız gerekir zira gerçek hayatta da kulandığımız neredeyse hiçbir objenin köşeleri sivri değildir. Tam şu anda "olur mu öyle şey" diyorsanız bir etrafınıza bakıp buraya geri dönün.

d) en önemli hatanız: MD'de ekrandaki elementler birden bire oluşmaz, birden bire konumlanmaz, birden bire kapanmaz. Gerçek dünyadaki hissi verebilmesi için MD'de ışınlanma yoktur. Şimdi ben sağ üstteki hamburger menüye tıkladığımda oraya neden bir menü ışınlanıyor? nereden geldi bu menü elemanı?

Materyal tasarımında olması gereken davranış:
https://goo.gl/vxEpKo

e) kenarlıkların kullanımında zilyon yanlış var, hiç başlamayacağım.

d) materyal tasarımında bir şey bir anda başka bir şeye dönüşmez. css3 transitions var duymuşsundur belki?

e) materyal tasarımında anlamlı dolgular ve aralar vardır. Bunlar özellikle üzerinde kafa yorulup belirlenmiştir, 16px olması gereken bir padding değerini 2 piksel yaparsan ya materyal hissi vermez ya da farklı cihazlarda sikimsonik görünür.

f) MD'de kullanışlılık çoğu şeyden önemlidir. Bakalım bazı şeyler olmadan senin "material tasarımı"n nasıl görünüyor:

Ses olmadan: zaten yok, değişim olmuyor. E iyi.
Renk olmadan: bok gibi...
Yüksek kontrast olduğunda: bok gibi...
Renk körleri için: bok gibi...
Ekrana zoom yapıldıysa: bok gibi...
Ekran okuyucusuyla: bahsetmeye bile gerek yok.
Dar ekranda: bok gibi...
Çok geniş ekranda: bok gibi...

Dur bitmedi.

g) dokunulacak veya tıklanacak tüm kontroller en az 48x48 piksel boyutlarında olmalı. Hani? Hele ki başlıklardaki resimlerin yanlarındaki artı işareti... sahi kaç piksel o 12x12 mi?

h)interaktif kontroller açık ve keşfedilebilir mi? pek sayılmaz.

i..
j..
yazı tipidir falandır hiç uzatmayacağım, alfabe yetmeyecek çünkü. Yapamıyorsan söyle bir yapan çıkar elbet. Söyle ben yapayım, hatta 2000 dolar olan fiyatımdan sana özel 2001 dolar indirim yapacağım, 1 dolar da üstüne vereceğim yeter ki şu tasarıma material design demeyelim. Veya "material tasarım". Her ne boksa.