TemplateMonster Deutscher Blog

35+ Ressourcen mit kostenlosen Material Design-Elementen

In diesem Beitrag stellen wir eine Übersicht mit kostenlosen Elementen für Material Design vor.

Material Design gilt als einer der wichtigsten Trends der letzten Jahre. Die Designsprache wurde 2014 von Google als Gestaltungsrichtlinien angekündigt und sollte Google-Dienste vereinheitlichen. Seitdem erfuhr Material Design eine weite Verbreitung. Viele professionelle Designer übernehmen diese Grundsätze bei der Entwicklung von Google-Apps und Websites. 

Die minimalistische Designsprache basiert auf Flat Design, das sich auf notwendige Elemente fokussiert. In Kombination mit  materialartigen Flächen und Animationen bietet Material Design eine optimale User Experience. In der offiziellen Zusammenfassung des Erfinders werden das Konzept und Prinzipien von Material Design detailliert veranschaulicht.

Möchtet Ihr Websites oder Apps im Stil des Material Designs gestalten? Dann sollte unsere Auflistung Euch dabei unterstützen. Es sei erwähnt, dass der Einsatz fertiger Elemente eine Strategie ist, die im Design seit Jahren verlässlich funktioniert. Wozu das Rad neu erfinden? Stöbert einfach durch diese kostenlosen Ressourcen. Mit über 35 Sets bekommt Ihr eine Möglichkeit, sich an das Projekt jeder Größe zu machen. Unsere Übersicht umfasst 4 Design-Elemente, die für diesen Stil von Bedeutung sind: Hintergründe, UI-Kits, Icons und Frameworks.

Hintergründe

40+ Material Design Backgrounds

Im Set findet Ihr 40 gratis Hintergründen in hoher Auflösung. Alle Bilder sind als Raster- (JPG) und Vektorgrafiken (.AI) verfügbar, sodass Ihr sie nach Bedarf verändern oder bearbeiten könnt. Die Hintergründe sind in verschiedenen Formen und Farben erhältlich.

Free Vector Finder

Mit dieser kostenlosen Suchmaschine für Vektoren könnt Ihr beliebige Grafiken für Material Design oder anderen Stil finden. Um auf diese umfangreiche Datenbank einen Zugriff zu bekommen, braucht Ihr nur einen notwendigen Begriff in die Suchzeile einzugeben.

10 Material Design Backgrounds

Dieses Paket enthält 2 Hintergründe in 5 Farbkombinationen. Sie haben eine große Bildgröße (5000 * 3000 Pixel) und hohe Auflösung (300 dpi). Bilder sind sowohl für den privaten als auch für kommerziellen Gebrauch frei zugänglich.

Material Design Backgrounds

Dieses Set bietet 5 Hintergründe in leuchtenden Farben -  Blau, Pink, Grün, Orange und Gelb. Bilder sind im JPG-Format gespeichert.

30 Material Backgrounds

In dieser Sammlung sind 30 Hintergründe vorhanden. Sorgfältig ausgewählte Farben, stilvolle Geräuschstrukturen und eine große Auswahl an Formen. Die Bilddaten liegen im PNG- und Al-Format vor.

 Material Design Promotional Backgrounds

Diese Hintergründe mit diamantförmigen Bereichen eignen sich gut, um Beitragsbilder für Eure Blogartikel zu erstellen.

Material Design Backgrounds

Das kreative Mini-Pack enthält  5 Desktop-Tapeten in satten Farben.

Colored Modern Material Design Vector Background

Dieser Hintergrund  im EPS- Format wurde unter der Lizenz Creative Commons Attribution 3.0 veröffentlicht. Da es um vektororisierte Objekte geht, könnt Ihr sie nach Belieben Größe, Farbe und Form anpassen.

5 Free Material Design Backgrounds

Ein kleines kostenloses Set mit bunten Hintergründen, das 5 hochauflösende JPG-Dateien enthält. Bei der Premium Version handelt es sich um 40 Hintergründe, die für 5 $ erhältlich sind.

Material Banner

Diese 5 Banner haben eine Größe von 1140 x 600 Pixel. Ihr könnt sie für Beitragsbilder, Header oder Hintergründe verwenden.

Material Design Patterns 

Material Design Patterns verfügt über 8 Musterhintergründe. Im Gegensatz zu anderen Hintergründen aus dieser Liste sind sie nahtlos. Das heißt, dass ein Bild ohne Qualitätsverlust auf jede Größe skaliert werden kann.

Material UI Kits

Android Material Design UI Kit Sketch Resource

Google ist ein wichtiger Trendsetter in der Design-Welt. Es ist deshalb kein Wunder, dass Material Design-Freebies für Sketch verfügbar sind. Dieses kostenlose UI-Kit bietet eine Vielzahl von Benutzeroberflächenelementen: Menüs, Schaltflächen, Sprechblasen und anderes mehr.

Material UI Kit

Dieses  UI-Kit kann sowohl für Photoshop- als auch für Sketch eingesetzt werden. Es wirkt energisch, deshalb würde es ausgezeichnet für die Gestaltung einer Musik-App oder einer Mobilversion für eine Website gut passen.

Cisco Material App UI

Cisco ist ein Premium UI-Kit im PSD-Format mit über 30 Android-Bildschirmen. Die Demoversion enthält 10 Bildschirme, die zum kostenlosen Herunterladen verfügbar sind.  

Do App UI Kit

Leute, die hinter InvisionApp stehen,  wissen genau, wie sie ihr Produkt mit Freebies bewerben können. Das kostenlose UI-Kit namens Do ist einfach immens. Es hat 130 Bildschirme, 10 fertige Themes und über 250 Design-Komponenten. Und all das kostet Euch nichts!

150 Icons + 24 Design Templates

Die Icons und Vorlagen aus diesem Set sind nicht nur schön gestaltet, sondern sind sie auch thematisch ausgerichtet. Somit wäre es einfacher, etwas Passendes für Euer Projekt auszuwählen. Außerdem sind die Vektor-Dateien  voll editierbar.

"BankTag" - Free Material UI Kit

BankTag ist ein sauberes Sketch-UI-Kit für mobile Finanzanwendungen. Es enthält 13 schön gestaltete Bildschirme mit einer Menge von Elementen.

DiscoMusica - Free Web UI Kit

DiscoMusica ist ein farbenfrohes UI-Kit für Web- und App-Designs. Aufgrund seiner Struktur kann es zur Erstellung einer Bildungs-Website mit Online-Kursen verwendet werden.

Component Based Material Design UI Kit

Dieses kostenlose UI-Kit für Photoshop ist ein weiterer Weg, um eine mobile App problemlos zu gestalten.

Crystallize Free Material Ui Kit

Crystallize ist ein helles UI-Kit, das am besten für Musik- und Beauty-Websites geeignet ist. Es ist im PSD-Format verfügbar.

Free Material Design UI Kit

Aptly ist eine Sammlung von App-Bildschirmen, das zum guten Start für Euer nächste mobile Design-Projekt werden kann. 

Material Design Icons

Google Material Icons

Icons aus diesem Set stammen von Google. Die Sammlung aus Hunderten von Symbolen wird ständig mit neuen Piktogrammen erweitert.

Material Web Icons

Dieses Set enthält 6 Icons, die  als PSD-Datei mit mehreren Ebenen verfügbar sind.

1000 Material Design Icons 

Das beeindruckende Icon-Set mit über 1000 verschiedenen Icons in 9 Kategorien unterteilt. Jedes Symbol kommt in 7 Größen.

Material Design Icons

Diese Website gewährt Euch freien Zugang zu mehr als 1000 Icons. Es gibt hier  sowohl den Standardsatz von Google als auch von Benutzern erstellte Piktogramme. Alle Symbole stehen in verschiedenen Formaten einschließlich PNG und SVG zum Download bereit.

Android Lollipop Icons

Ein weiterer Satz aus bunten Icons für  Android. Euch stehen 12 Miniaturen zur Verfügung.

Google Material Design – Free Icon Set

Dieses Icon-Set enthält 40 wetterbezogene Symbole für mobile Anwendungen. Sie kommen in 3 Größen: 64x64, 128x128 und 256x256 und sind im PNG-Format verfügbar.

Nova Icons

Hier ist eine kostenlose Version von Nova Icon Packs. 350 Symbole sind in verschiedenen Dateiformaten verfügbar, und zwar in Sketch, AI, SVG, PDF, EPS und Iconjar.

Server/Hosting Material Design Icons

Dieses Paket mit farbigen Icons  wurde für Hosting-Anbieter entwickelt. Es enthält 12 Icons in PSD- und PNG-Formaten.

Free Master Set of Material Design Icons

Das Set umfasst verschiedene app- und dateibezogene runde Icons wie Steam, Adobe Illustrator, Adobe Photoshop, Google Chrome usw. und eignet sich daher für die App-Entwicklung. Im Archiv findet Ihr 35 Icons in den Formaten PNG, ICO und ICNS.

Material Design Icon Templates

Dieses Bild  ist kein übliches Icon, sondern eine Vektorvorlage im Adobe Illustrator-Format. Ihr könnt damit eigene Icons entwerfen.

Material Frameworks

Materialize

Materialise ist ein sehr populäres CSS-Framework für diejenigen, die Material Design gern haben. Es wird mit umfangreicher Dokumentation geliefert und ist sehr benutzerfreundlich. Deshalb ist es viele Webentwickler zu einem bevorzugten Frontend-Framework geworden.

Material UI

Material UI  gehört neben Materialise zu den am häufigsten genutzten Frameworks. Es basiert auf React - einer JS-Bibliothek zum Erstellen von Benutzeroberflächen und wurde optimiert, um das Erstellen von Websites im Material Design-Stil zu vereinfachen.

Material Design Lite

Wie es der Name bereits erahnen lässt,  ist Material Design Lite leicht und einfach zu bedienen. Trotzdem wird seine Funktionalität dadurch nicht eingeschränkt. Diese Komponenten-Bibliothek hilft Euch dabei, moderne Designelemente wie Karten, Slider, Umschalter und anderes mehr zu erstellen.

MUI

MUI ist ein leichtgewichtiges CSS-Framework, das den Richtlinien von Google folgt. Genauso wie Material UI funktioniert es auch in der React JS-Bibliothek. Wenn Ihr mit diesem Tool vertraut seid, dann ist es für Euch kein Problem, MUI zu beherrschen.

Angular Material

Angular Material ist ein UI-Framework für Benutzer von AngularJS. Damit bekommt Ihr eine massive Sammlung von Benutzeroberflächenkomponenten, die nach Googles Richtlinien für Material Design entwickelt wurden.

Polymer

Polymer ist ein Google-Projekt. Im  Tab "Paper" (markiert Md) sind Inhalte vollständig auf Materialdesign ausgerichtet.

Material Design for Bootstrap

Diese Elementesammlung in Material Design ist für Bootstrap gedacht.

LumX

LumX ist ein Frontend-Framework, das auf Google Material Design basiert.

Ionic Material

Ionic Material stellt die Extension-Bibliothek für Ionic - das Framework zur Erstellung von mobilen Apps dar.

Das wäre alles. Zuletzt lässt sich sagen, dass es nicht einfach ist, gratis (und sogar kostenpflichtige) Sammlungen für Material Design zu finden, die Googles Richtlinien entsprechen. Seid Euch wohl andere kostenlose Sammlungen für Material Design über den Weg gelaufen? Wir sind gespannt auf Eure Empfehlungen.

Wir wünschen Euch viel Inspiration und produktive Arbeit!