Google Developer ekibi yakın zaman önce Material Design Lite, ya da kısaca MDL, adı verilen Materyal Tasarım sitillerinde bir bileşenler kütüphanesi yayınladı. Bu kütüphane butonlar, formlar ve gerçekten isteyebileceğiniz diğer her şey gibi çeşitli web tasarım bileşenleriyle dolu bir kütüphanedir. Kullanılmasını son derece esnek hale getirmek için bu kütüphanenin framework-agnostik olmasını düşünülmüş. İlave olarak, önemli faydalarından biri “standartlara uygun CSS, HTML ve JS” ile geliştirilmiş olmasıdır. Şu ana kadar gayet iyi.
Material Design Lite web sitelerinize Materyal Tasarım görünümü ve hissi eklemenize izin verir. Herhangi bir JavaScript frameworke dayanmaz ve birden fazla aygıtta kullanım için optimizasyonu, eski tarayıcılarda yumuşak indirgemeyi hedefler ve hemen erişilebilir bir deneyim sunar.
Material Design Lite kütüphanesini kendi web sitelerinden indirebilirsiniz. Ayrıca kendi Github depolarını da inceleyebilirsiniz.
Bu kütüphanenin anahtar bir bileşeni kurulumunun kolay olmasıdır. Bu zekice bir adımdır çünkü kullanıma hazırlanması zor olsaydı harika bir ücretsiz kaynak olmazdı. Ayrıca, tüm kütüphane tek bir basit işaretleme kullanıyor bu nedenle sistemi standartlara uygun olarak tanımlıyorlar. Kütüphanenin basit yapısı onu birçok tarayıcıyla uyumlu yapmaktadır – diğer bir artı. Chrome, Firefox ve hatta Microsoft Edge gibi modern tarayıcıları desteklemektedir. Kütüphane IE9 gibi daha zorlu tarayıcılar için yumuşak indirgeme vadediyor.
| IE9 | IE10 | IE11 | Chrome | Opera | Firefox | Safari | Chrome (Android) | Mobil Safari |
|---|---|---|---|---|---|---|---|---|
| B | A | A | A | A | A | A | A | A |
Bu kütüphanenin ortaya çıkarılmasındaki büyük ilke esnekliği yanında farklı aygıtlar ve tarayıcılardan erişilebilirliğiydi; bunu elde etmiş olmaları etkileyicidir. Esnekliğin önemli olduğunu hepimiz biliriz ama tasarımlarımıza onu sağlamak için gerekli zamanı harcamayı her zaman göze alamayız; yine bu özellik de kütüphane için kocaman bir artıdır.
Yuvarlak parlak butonlar için olan kod parçasına göz atalım. Kütüphanede kullanılan işaretleme de syntax bakımından takip edilmesi kolay yapıdadır.
<!– Colored FAB button –>
<button class=”mdl-button mdl-js-button mdl-button–fab mdl-button–colored”>
<i class=”material-icons”>ekle</i>
</button>
<!– Colored FAB button with ripple –>
<button class=”mdl-button mdl-js-button mdl-button–fab mdl-js-ripple-effect mdl-button–colored”>
<i class=”material-icons”>ekle</i>
</button>
Kütüphanenin kod yönünü oluşturmak amacıyla çeşitli kağıt bileşenleri için Polymer ve hizmet olarak SaaS için BEM gibi harika API’ler kullanılmaktadır. Bunlar sizin için yeterli değilse CSS, CDN’lerine referans vererek kullanılabilir veya npm vasıtasıyla içe aktarılabilir. Bilirsiniz kimi durumlarda farklı seçenekler istersiniz.
Bu tür bir kütüphaneyi dünyayla paylaşmanın ilginç bir fikir olduğunu düşünüyoruz. Daha önce yayınlanan Materyal Tasarım dokümantasyonu genel kullanıcı deneyimi felsefelerini ve bunun kullanıcı ara yüzlerine olan ilişkisini açıklamaya yönelikti. Google’ın kendi uygulamalarını ortaya çıkarırken nasıl hareket ettiğine dayan bir belgeydi. Her zaman çalışmalarımızı birbirimizle paylaşırız, çalışmalarımızda kullandığımız çok sayıda kullanıcı ara yüzü kitimiz ve kod parçalarımız vardır. MDL’nin yaklaşımı tasarımını paylaşmak ve herkesin onu denemesine izin vermektir; konuyu ilginç hale getiren Google’ın kendine has bir estetik anlayışına sahip büyük bir şirket olduğu olgusudur.
Apple gibi yine estetik anlayışı ile bilinen bir şirketin stilini herkese açtığını düşünmekte zorlanıyorum. Google’ın stilini fiili olarak ücretsiz kullanıma açmasının cesur bir hamle olduğunu düşünmemin nedeni budur ve işlerin zaman içinde nasıl gelişme göstereceğini merakla bekliyoruz.
Genel olarak bakıldığında, kurulum adımları takip edilmesi kolay şekilde düzenlenmiştir. Kütüphanenin kendisi de gerçekte kendi web sitesinde gayet iyi şekilde gösterilmektedir çünkü kütüphaneyi indirmeden bile yapabileceğiniz çok şey vardır. Sitede tüm farklı elemanları inceleyebilmeniz ve onlarla kendi başınıza etkileşimde bulunabilmeniz için ayrılmış özel bir bölüm vardır. Hatta elemanları CodePen’de açabilir, hızla düzenleyebilir ve denemeler yapabilirsiniz.
Google bu kütüphane üzerine epey düşünmüş; bu açık. Tamamen renk özelleştirmesine ayrılmış bir bölüm var. Böylece renklerinin birbiriyle nasıl uyum sağladığını görebilirsiniz.
Görsel stillerinin altında yatan tasarım ilkelerini anlamanıza yardımcı olmak için Materyal Tasarım dokümantasyonlarına bağlantılı Materyal Tasarım sitiline ayrılmış bir bölüm de bulunmaktadır. Bu bölümde tipografi ve ikonografi gibi temel tasarım elemanlarının ayrıntıları üzerinde duruluyor. Sıkıştırılmış dosyalardaki kaynakları da indirebilirsiniz. Daha önce de belirttiğim gibi Google Development ekibi epey mesai harcamış ve bu durum kendini gösteriyor.
Material Design Lite’ın potansiyelini görmemize yardımcı olmak için yaratıcılığımızı harekete geçirmeye yönelik bir şablon bölümü var. Ücretsiz olarak kullanılabilen bu şablonlar özelleştirilebiliyor da. Portföy web sitelerinden müstakil makalelere kadar farklı çeşitler var. Bunların sayısı fazla değil ama zaten sonsuz bir listeyi kim ister? Şablon sayfasının insanlara Material Design Lite’ın yeteneklerini somut olarak görmede yardımcı olan mükemmel bir fikir olduğunu düşünüyorum.
Kütüphane hakkında yaptığımız tüm övgülere rağmen bazı endişelerimiz de var. Web tasarım ajansı olarak web sitemizin bir Google uygulaması gibi görünmesini istemememiz. Bu bizim için bir endişe kaynağı. Bu kütüphaneyi herkese açmaları ve ücretsiz olarak sunmaları gerçekten müthiş ama ihtiyaç duyacağımız son şey benzer gözüken diğer bir web siteleri setidir. Bu özgün olmaz. Web tasarım bakımından iyi değildir.
Web tasarım ajansı olarak kendimizi yaratıcı kapsamında değerlendiririz. Şimdi, sol taraftaki logolar ve üst taraftaki navigasyon gibi bazı web tasarım elemanları her zaman tekrar tekrar kullanılacaktır. Web tasarım çalışmalarının neden bu şekilde yapılmış olduğunu ilişkin açıklamalar sunduğundan ötürü Materyal Tasarım dokümantasyonundan çok daha fazla etkilenmiştik. Ardında yatan felsefeye daha yakından bakarak ondan bir şeyler öğrenebilmek bizim için sadece daha faydalı değil ayrıca daha güçlendiriciydi de. Açıkçası, tam olarak Google gibi görünmesi nedeniyle bu kütüphane için iyi bir kullanım bulmakta zorlanıyoruz; kütüphane çok fazla yaratıcı özgürlük sunmuyor.
Google Development ekibi, görünüşe göre, sonsuz tasarım elemanları ile dolu inanılmaz bir kütüphane geliştirmiş. Kütüphane iyi düşünülmüş olup son derece kapsamlıdır. Ayrıca basit “standartlara uygun” işaretleme göz önünde tutularak geliştirilmiş ve bu durum onu tarayıcılar için çok esnek bir framework haline getirmektedir. Maalesef, web tasarımcılar için en iyi kaynak olup olmadığından emin değiliz.