Tasarımcılar ve Geliştiriciler İçin 34 Material Design Kaynağı

Google'ın yeni tasarım standardı olan Material Design kapsamında tasarımcıların ve geliştiricilerin işine yarayacağını düşündüğüm 35 faydalı kaynağı aşağıda bulabilirsiniz.

***

1. Polymer: Polymer'i, HTML elementlerini oluşturabilmeniz için son web teknolojilerini kullanan bir kütüphane olarak tanımlayabiliriz. Küçük bir butondan, kapsamlı bir uygulamaya kadar birçok konuda Polymer'den faydalanabilirsiniz.

2. Material UI: Google'ın Material Design'ını uygulamak için gerekli bileşenleri sağlayan ve bir CSS Framework olan bir platformdur. Daha iyi anlayabilmeniz açısından Material UI'ye React kütüphanesinden başlayabilirsiniz.

3. LumX: Google'ın yönergelerine göre yapılandırılmış olan LumX, Angular JS ve Material Design standardına dayalı responsive front-end framework'üdür.

4. Materialize: Materialize, Material Design'a dayalı modern ve responsive front-end framework'üdür. Butonlar, kartlar, ikonlar, renkler, tablolar, formlar, gölgeler ve daha birçok element ve bileşenleri bulabilirsiniz.

5. Android Music App: Material Design standardına uygun müzik uygulaması geliştirmek isteyenler için bu hazır tasarımı kullanabilirsiniz. Ana ekran, giriş ekranı, sidebar, playlist, oynatıcı, albüm görünümü, kullanıcı ekranı ve daha birçok bileşen ile müzik uygulamasının tüm gereksinimleri yer alıyor. Fiyatı: 15 dolar.

6. Material Design Hamburger: CSS ile hazırlanan Material Design Hamburger, tüm tarayıcıları destekliyor. CSS ve JS dosyalarıyla birlikte son sürümünü indirebilir ve projelerinizde kullanabilirsiniz.

7. Material UI kit: Tüm yeni Material UI kiti (HTML + CSS) bulunmaktadır.

8. Lollipop GUI -2: Gelen kutusu, bildirim, e-posta, arama ve daha birçok bileşenin yer aldığı Android Lollipop 5.0 PSD dosyalarını içermektedir.

9. Lollipop GUI Kit: Android Lollipop'un xxhdpi grafik kullanıcı arayüzü kiti bulunmaktadır.

10. Material Design for AngularJS: Tüm cihazlar için görsel ve interaktif bir tasarım standardı sunmaktadır. Tek sayfalı uygulamalar için sade ve hafif Angular JS kullanıcı arayüzü elementleri yer almaktadır.

11. Material Design for Bootstrap: Google Material Design'ı istediğiniz front-end framework'ünüzde kullanmanızı sağlayan Bootstrap 3 temasıdır. CSS'in ardından temanızı yerleştirin ve kodunuzun sonuna JavaScript'i ekleyin ( etiketinden önce).

12. Material Design Icon Expanded: SVG ve PNG formatlarında ve çeşitli boyutlarda Material Design'a göre tasarlanmış 1400 ikonun yer aldığı bir ikon seti bulunmaktadır.

13. Free Sketch, Templates and Icons: 424 adet Android Lollipop ikonu, mobil, tablet ve masaüstü şablonları ve Polymer web bileşenleri bulunmaktadır.

14. Material Design Icons: Google tarafından geliştirilen 750 adet Material Design ikonu yer almaktadır. SVG, PNG ve hi-dpi versiyonlarını ve 24 - 48 px boyutlarını içermektedir.

15. The Tiles: CSS tabanlı Material Design yerleşimleri bulunmaktadır.

16. Hover and Click Effect: Material Design standardına uygun çeşitli renklerde üzerine gelme (hover) ve tıklama (click) efektleri yer alıyor.

17. Ripple Click Effect: Bir diğer tıklama (click) efekti.

18. Material Interaction: Material Design prensiplerine uygun interaktif bir deneyim sunmaktadır.

19. Material Icons Deconstruction: Material Design'ın yumuşak ikon geçiş efektleri yer alıyor. HTML ve CSS kullanarak yapabilirsiniz.

20. Material Palette: Önizlemeler ile birlikte Material Design'a uygun renk paletleri bulunmaktadır.

21. Product Icon Anatomy: Google'ın product icon anatomy standardının efektli hali bulunmaktadır.

22. Material Design Buttons: Elementlere otomatik olarak Material Design efekti ekleyen script bulunmaktadır.

23. Animation Timing: Material Design üzerine tasarlanmış geçiş animasyonu bulunmaktadır.

24. Material Design Form: Sade ve hızlı Material Design giriş (login) formu bulunmaktadır.

25. The Morphing Icons: Material Design ile birlikte popüler hale gelen klasik ikon efekti bulunmaktadır. Glif, boyut ve rengine göre değiştirip test edebilirsiniz.

26. Radio Input: Özelleştirilmiş Radio butonları yer almaktadır (sadece CSS).

27. Menu CSS: Material Design hover (üzerine gelme) efektine sahip menü bulunmaktadır. CSS ve HTML kodunu kopyalayıp projelerinizde kullabilirsiniz.

28. Material Shadows: Web bileşenleri olmadan gerçekçi Material Design gölge efektleri verebilirsiniz.

29. PC Icons: Material Design için tasarlanan onlarca masaüstü ikonu yer almaktadır.

30. Switch Theme: Sade ve şık değiştirme (switch) teması bulunmaktadır.

31. Material Design Navigation: Oldukça sade ve hoş bir Material Design menüsü yer almaktadır.

32. Material Design Preloader: Klasik Material Design yükleme (preloader) efektinin yer aldığı eklentidir.

33. Modern Loader: Dört farklı renkte dönen klasik Material Design yükleme (loading) efekti bulunmaktadır.

34. Animated Tabs: CSS3 ve Pure Javascript ile tasarlanmış animasyonlu sekmeler yer almaktadır.

Kaynak: webmasto.com/google-material-design-icin-34-faydali-kaynak

Süper eline sağlık bunları bir çok yerde kullanabilirim. :)

Rica ederim iyi çalışmalar :)