Geliştiriciler için 15 Ücretsiz Materyal Tasarım Çerçevesi 2021

Google'ın Materyal Tasarımı, birçok tasarımcının ilk başta tahmin ettiğinin çok ötesine ulaştı ve artık mobil web siteleri, Android uygulamaları ve ayrıca masaüstü yazılımları geliştirmek için yaygın olarak kullanılan bir tasarım standardı. Google, yerel malzeme tasarım uygulamasını kendi web sitesi oluşturucusuna uygulamaya kadar ileri gitti; Son zamanlarda oldukça çirkin ve halsiz görünen, ancak şimdi inanılmaz derecede güzel web siteleri üretebilen biri.

Birileri bunun doğru olduğunu söylediği için yönergeleri körü körüne takip etmemelisiniz. Bir tasarımcı olarak kendi kararınız, öne çıkan gerçek ve benzersiz projeler yapmak için en iyi varlığınızdır. Materyal tasarımından ideolojilerinize iltifat edeceğini düşündüğünüzü alın, ardından oradan bir birikim yaratın. Tasarım deneyimini daha da mükemmelleştirmek için kendi kişisel tercihlerinizi kullanabilirsiniz. Google, birinci sınıf Kullanıcı Deneyimi ve Kullanıcı Arayüzü öğelerini tartışmak ve araştırmak konusunda kesinlikle bir ustalığa sahiptir, ancak bunu düşündüğünüzde - projeniz benzersizdir, kitle demografiniz ve türleriniz benzersizdir ve bazen bu adımları izlemeniz gerekir. İşinizin veya inşa ettiğiniz projenizin en iyi değerlerini ortaya çıkaran bir tasarım yaratın.

Hakkında daha fazla bilgi edinmek üzere olduğunuz çerçeveler, Materyal Tasarımını denemek için mükemmel çözümlerdir. Belki de bunu yapmanın en iyi yolu, sizi ana iş akışınızdan rahatsız etmeyecek şekilde hafta sonları hackleyebileceğiniz bir yan proje oluşturmak ve sonra orada bir bağlantı olduğunu düşünüyorsanız, bunun nasıl yapılacağına dair yol haritaları oluşturmaya başlamak olacaktır. gelecekte uygulamalarınıza/web sitelerinize malzeme tasarımı uygulayabilirsiniz. Bu özet için herhangi bir önemli/faydalı çerçeveyi kaçırırsak, yorumlarda bize bir söz verin, biz hallederiz.

somutlaştırmak

Materialize, malzeme tasarımı spesifikasyonuna dayanan tam teşekküllü bir ön uç web geliştirme çerçevesidir, modern web sitelerini hızla prototiplemek için hızlı, ortalanmış ve gezinmesi kolay bir çekirdek sağladığı için önde gelen malzeme tasarım çerçevelerinden biridir. Çerçeve, malzeme tasarımının sunduğu her şeyi alır ve tüm öğeleri hızlı ve sorunsuz bir şekilde erişilebilir kılan tek bir çerçeve içinde düzgün bir şekilde bir araya getirir. Kullanıcılar, bireysel tasarım öğelerinin anlamını daha iyi anlayabildiğinden, geri bildirime dayalı bileşenler, kullanıcı deneyiminizi büyük ölçüde geliştirecektir.

Ve bu bir çerçeve olduğundan, dahil edilmiş ızgaralar gibi bazı CSS işlevlerini görmeyi bekleyeceksiniz ve bu durumda bu doğru, Materialize size renkler, ızgaralar, yardımcılar, medya yönetimi, sass dosyaları, tablo yönetimi, tipografi optimizasyonu sağlar. ve öğe gölge optimizasyonları, böylece oluşturmak istediğiniz şeyin bir iskeletini hızla oluşturabilirsiniz ve ardından tasarımınızı hayata geçirmek için optimize edilmiş MD bileşenlerini kullanabilirsiniz.

Malzeme Hızlı

Aktif bir Swift geliştiricisi misiniz, ancak materyal tasarımını Swift uygulamalarınıza nasıl uygulayabileceğinizden emin değil misiniz? CosmicMind'den gelen materyaller, tüm bunlarla zahmetsizce ilgilenir. Bu Swift Material çerçevesi/kütüphanesi ile MD bileşenlerini kullanabilir ve bunlara tam konfigürasyon erişimine sahip olabilirsiniz, tipik olarak karmaşık mobil uygulama arayüzleri için gerekli olacak ızgara düzenleri sağlanır, benzersiz UI oluşturmak için kullanılabilecek standart katmanlar ve görünümler elde edersiniz bileşenler. Diğer özellikler, gezinmeleri, malzeme tasarım simgelerini, düğmeleri, kartları, anahtarları ve animasyonlu gezinme menüleri oluşturmak için bir menü sistemini kontrol etme yeteneğini içerir. Swift Material aslında geleneksel bir mobil uygulama çerçevesi olmanın dışında kendisini bir animasyon çerçevesi olarak adlandırıyor ve geliştiricilerin kullanıcı deneyimini zenginleştirmek için pürüzsüz animasyonlara dayanan düzenler oluşturmasına izin vermekte harika bir iş çıkarıyor.

Malzeme Çerçevesi

Malzeme Çerçevesi, malzeme tasarımını mevcut tasarımınıza eklemeyi çok kolaylaştırır. Saf CSS'ye dayalı tamamen duyarlı bir çerçevedir. Gerçekten yapmanız gereken tek şey, CSS stil sayfası dosyalarını ana web sitesi stil klasörünüze eklemek ve artık hazırsınız. Bu çerçeve, belirli CSS sınıfı aracılığıyla uygulayabileceğiniz veya kullanmak istediğiniz temayı ayarlamak için JavaScript kullanabileceğiniz bir koyu ve açık renk şeması seçeneği sunar.

Daha anlamlı bir kullanıcı deneyimi oluşturmak için mevcut formlarınıza bir dalgalanma eklemek gibi farklı animasyon efektleri kullanılabilir. Tipografik düzenler kendi beğeninize göre özelleştirilebilir ve içeriğin görünümünü diğer tasarım öğelerinize en uygun olacak şekilde ayarlayabilirsiniz. Düğmeler, girişler, araç çubukları, simgeler, listeler, menüler, kart tasarımları ve geçişler gibi şeyler için tasarım özelliklerini kullanmak üzere mevcut stillerinizi değiştirebilirsiniz. Çalıştırmak zor değil ve kullanıcılarınızın malzeme tasarımından memnun olup olmayacağını test etmeniz için potansiyel olarak iyi bir yol olabilir.

Öz

Essence iki şeyi birleştirir: Materyal Tasarımı ve React.js — optimal tasarım spesifikasyonu ile hızlı bir web performansı arıyorsanız, Essence'in tüm geliştiriciler için sunduklarını eşleştirmek zor olacaktır. Essence'ı tercih etmeye karar verirseniz, malzeme tasarımının sunduğu tüm UI bileşenleri React.js aracılığıyla yeniden oluşturulur! Nihai sonuç, benzersiz bir kullanıcı deneyimi yaratacak çarpıcı bir kullanıcı arabirimi öğesi seçimidir. Essence, NPM'de kolayca bulunur, böylece basit bir kurulum komutu ile kurulum yapabilir ve çalışmaya başlayabilirsiniz. Bileşenlerin ayrı ayrı kurulması ve kullanılması gerekir, ancak her şey ne olursa olsun aynı klasöre girer.

Onsen kullanıcı arayüzü

Onsen UI, HTML5 kullanarak mobil uygulamalar oluşturmak için en iyi hibrit çerçevelerden biri olma ününe sahiptir. Bu açık kaynaklı platform tamamen ücretsizdir ve her zaman olmuştur, iyi tasarımın modern anlayışı, Onsen UI geliştiricilerinin benzersiz kullanıcı deneyimleri oluşturmayla sonuçlanan kullanıcı arabirimi öğeleri oluşturmasına yardımcı olmuştur. Agnostik bir çerçeve olarak, Onsen'i kelimenin tam anlamıyla diğer herhangi bir çerçeveyle kullanabilir ve herhangi bir kod çarpışması veya sorunu hakkında endişelenmeden kullanabilirsiniz. Yeni Onsen UI V2'de de olan budur — deneyimi daha da zenginleştirmek için Materyal Tasarımı, Angular 2 ve React bileşenleri entegre edilmiştir. Şu anda hala bir sürüm adayı, ancak şimdiden binlerce kişi tarafından kullanılıyor. Bir mobil ürünü piyasaya sürmeyi veya mobil yazılım geliştirmeye başlamayı düşünüyorsanız, Onsen UI'yi nasıl kullanacağınızı öğrenmek özgeçmişinize biraz daha fazla kaldıraç sağlayabilir.

Malzeme CSS'si

Material CSS, sınıfları kullanmak yerine stilleri tanımlamak için öznitelikleri kullanan hafif bir alternatiftir. Bu, daha kolay bir geliştirme iş akışı sağlar ve kesinlikle onu çok daha basit hale getirir. Minimal doğası nedeniyle, kelimenin tam anlamıyla, çoğunlukla, renkler, tipografi, gölgeler, dalgalanmalar, simgeler, girişler, formlar, düğmeler, medya, kartlar, paneller, araç çubukları, listeler, sayfalar gibi bileşenlerin kendileriyle oynayacaksınız. ve yardımcılar. Malzeme CSS, belgelerdeki her bir bileşeni nasıl kullanabileceğinizi ayrıntılı olarak açıklar.

Materyal Tasarımı Lite

Material Design Lite, tasarımlarınızı bir malzeme spesifikasyonu ile optimize etmek için başka bir hafif çözüm. Statik içeriğe dayanan web sitelerinde kolayca çalışır, ancak dinamik sitelerde uygulanması sorun olmaz. Çalışması için herhangi bir harici kaynak gerektirmeyen bağımsız bir CSS kütüphanesidir. Dahili bir çoklu cihaz optimizasyonu ile, bir tarayıcının eski bir sürümü siteye erişmeye çalışırsa, doğal olarak eski sürüme geçecektir. Blogunuzu başlatmak için blog şablonu gibi şablonlar arasında seçim yapabilir veya Android resmi web sitesinin kullandığı temanın lite sürümünü kullanabilirsiniz, ayrıca web sitenizin arkasına uygulayabileceğiniz panolar için şablonlar, en iyi çalışmanızı gösterecek modern bir portföy, ve içerik sayfaları için optimize edilmiş metin şablonları. Bileşenler ve stiller gibi diğer tüm şeyler, malzeme tasarımı kullanan bir çerçeveden zaten beklediğiniz şeydir.

Yüzey

Görünen o ki, pek çok geliştirici bir çerçeve yapma yeteneklerini kendileri kullanıyor, Surface, küçültüldüğünde kabaca 6 kb büyüklüğünde olan bir başka hafif (bu durumda gerçekten hafif) çerçevedir. Aynı zamanda saf CSS'ye dayalıdır, bu nedenle JavaScript'i hiç bir şekilde kullanmanıza gerek kalmaz. Yüzey belgelerine giderek ve Yüzey ızgarasının nasıl çalıştığını öğrenerek başlayın, böylece tüm bileşenleri tahtaya almak daha kolay olur. Animasyonlar, uyarılar, kutucuklar, daraltılabilir öğeler, alt bilgiler, modlar, medya, yardımcı programlar ve araç ipuçları gibi bileşenler. Geliştiriciler tüm bunları düzgün bir şekilde organize ettiler ve kurulumu 100'den geriye doğru 1'e kadar saymaktan daha kolaydır.

Malzeme-UI

Material-UI, Material Design spesifikasyonundan zaten özelleştirdikleri React.js Bileşenlerinden bir seçki sunar. Material-UI ve onu kullanma fikri hakkında en önemli tek şey var. Öncelikle React.js ve genel olarak web ve mobil ile nasıl etkileşime girdiği hakkında biraz daha bilgi edinmelisiniz. Bileşenler React'e dayandığından, React'in web geliştirmede nasıl görüldüğünü ve bunun içinde ne tür bir rol oynadığını anlamak akıllıca olacaktır. Material-UI ekibi, koyu ve açık olmak üzere çeşitli şablon seçenekleri sunacak kadar nazik davrandı ve her ikisi de farklı bileşenlerin ve öğelerin ızgaraya nasıl uyduğuna dair bir örnek sunuyor.

Daha önce görülmeyen bazı bileşenler arasında uygulama çubukları, formlar için otomatik tamamlama, avatarlar, rozetler, yongalar, veri seçici, iletişim kutuları, bölücüler, menü çekmeceleri, ızgara listeleri, metin alanları, zaman seçiciler ve farklı araç çubukları türleri; ve bunlar, bu çerçevede hazır bulunan bileşenlerden sadece birkaçıdır.

MUI

MUI, tasarımlarınızı Google'ın malzeme tasarımıyla renklendiren zengin ve hafif bir CSS çerçevesidir. Kullanıcılarına farklı türde demo düzenleri sunar: blog, açılış sayfası, kaydırıcı menü ve HTML bülten abonelik kutusu. Geliştiriciler, yalnızca bu demolardan malzeme tasarımının ne kadar verimli olduğunu ve onu uygulamanın ne kadar kolay olduğunu öğrenebilirler. MUI ayrıca React.js ve Angular.js çerçeveleriyle de çalışır, böylece uygulamalarınızı herhangi bir güçlük çekmeden malzemeyle bağlayabilirsiniz. Hepsi kullanıma hazır farklı bireysel web bileşenleri de vardır.

açısal malzeme

Angular Material, Angular 2 projeleri için Material UI'nin resmi sürümüdür. Kapsamlı ve özlü bir dokümantasyon sayfanız var. Materyal kullanıcı arayüzü ile aşılandığında uygulamalarınızın ne kadar güzel görünebileceğini size gösterebilir. Tüm bileşenler, derin örnekler ve ek seçeneklerle sağlanır. Bununla, bu çerçevenin sunduğu şeylerden en iyi şekilde yararlanabilirsiniz. Malzemeyi bir sonraki seviyeye taşımak isteyen deneyimli geliştiriciler için bir API dokümantasyonu sağlanmıştır.

Bootstrap için Malzeme Tasarımı

Bootstrap, şüphesiz dünyanın birçok ön uç geliştiricisinin favorisidir. Bootstrap bugün milyonlarca web sitesini güçlendiriyor ve milyonlarca web sitesi henüz gelmedi. Bootstrap için Malzeme Tasarımı, muhteşem tasarım deneyimleri oluşturmak için malzeme tasarımını kullanan verimli bir Bootstrap temasıdır. Tüm mevcut, en sevdiğiniz Bootstrap öğelerinizden seçim yapabilirsiniz. Ayrıca, malzeme tasarımının kullanıcı arayüzü ile optimize etmelerini sağlayabilirsiniz, bu ne kadar harika? NPM'yi daha önce kullanmamış olanlar için, devam etmesi için biraz kurcalama gerekebilir. Belgeler, başlatma sürecini oldukça iyi açıklıyor gibi görünüyor.

LumX

LumX, AngularJS ve Google Materyal Tasarımı özelliklerine dayanan ilk duyarlı ön uç çerçevedir. Sass ve bir grup AngularJS bileşeni ile oluşturulmuş eksiksiz bir CSS Çerçevesi sağlar. LumX'i kullanmak için, kütüphaneleri kurmak için Bower'ı nasıl kullanacağınızı bilmeniz gerekir. Bower'a aşina değilseniz, diğer alternatifiniz tüm bağımlılıkları tek tek indirmektir. Bunlar Angular, jQuery, Velocity, Moment, Bourbon ve Material Icons'u içerir. LumX, Flexbox özelliğini kullanarak standartlaştırılmış ve duyarlı ızgara sistemleri oluşturmak için Flexbox'ı da kullanır. LumX Bileşenleri, geleneksel bir web sitesi düzeni tasarımının herhangi bir alanını ve parçasını kapsar.

İyonik Malzeme

Ionic, HTML5 mobil uygulamaları oluşturmak için nihai hibrit çerçevedir. Ve şimdi tüm bu olağanüstü gücü, Materyal Tasarımı infüzyonu ile uygulamalarınıza getirmek mümkün! Ionic, uygulamanız için etkinlik akışları ve kategoriler dahil olmak üzere önceden oluşturulmuş düzenler sunar. Ayrıca özellik listeleriniz, galerileriniz, genel listeleriniz, oturum açma sayfalarınız ve profil sayfalarınız konusunda size yardımcı olabilir. Genel uygulama arayüzünüzün bir demosunu hızlı bir şekilde önyükleyebilir ve ardından yazılımınızı bunun üzerine oluşturabilirsiniz. İyonik Malzeme sorunsuz bir şekilde temaya uygundur. Ionic Material, öncelikle bir davranış kitaplığıdır ve Ionic'in renk adlandırma kurallarını ve öğe sınıflarını kullanır. Spesifikasyonların piksellerine kadar ayrıntılı olarak açıklanan Ionic Material, Google'ın hareket, mürekkep ve derinlik yönergelerini takip etmeyi amaçlar. Kitaplığa yeni bileşenler ve düzenler eklendikçe, malzeme tasarım özelliklerine kaliteli bir şekilde dikkat ettiniz.

fonon

Phonon Framework, hibrit çerçeve teknolojisini kullanarak HTML5 mobil uygulamaları oluşturmak için özlü bir çözüm sunar. Phono'nun güçlü yanı, uygulamalarınızı istediğiniz yerde hızla ölçeklendirmek için iyi bir sezgisidir. Aynı zamanda, anında arayüzler oluşturmanız için size hızlı araçlar sağlayan bir kullanıcı arayüzü kitaplığıdır. Phonon, tamamen küçültüldüğünde ve optimize edildiğinde kabaca 24 kb boyutuna ulaşır. Bu, mobil geliştiricilerin Phonon kullanmasının ana nedenlerinden biridir. Bu, Ionic veya Onsen gibi çerçevelerde göreceğinizin çok altında!