Anzeige
Anzeige
News
Artikel merken

UI-Kits, Frameworks, Tools und mehr: So legt ihr mit Googles Material Design los

Von UI-Kits über Icons bis hin zu Frameworks und Tools: Wir liefern euch alle Ressourcen, die ihr braucht, um eigene Apps in Googles neuer Designsprache Material Design zu erstellen.

2 Min. Lesezeit
Anzeige
Anzeige

Material-Design-Ressourcen. (Screenshot: UI8)

Google hatte Material Design im Rahmen der firmeneigenen I/O-Entwicklerkonferenz 2014 vorgestellt. Die Designsprache setzt vor allem auf kontrastreiche Farben, großflächige Elemente sowie auf Icons und Typografie als bestimmende Designelemente. Das Unternehmen setzt beispielsweise in der eigenen Inbox-App auf Material Design. Aber auch andere Entwickler werden dazu angehalten, Apps in diesem Look für Android oder das Web zu erstellen. Um euch den Einstieg so einfach wie möglich zu gestalten, wollen wir euch im Folgenden UI-Kits, Frameworks, Icons-Sets, Tools und weitere Ressourcen vorstellen, die euch bei der Gestaltung von Apps im Material-Design-Look helfen können.

Material Design: UI-Kits für eure nächste App

Material Design: Euch stehen verschiedene kostenlose und kostenplfichtige UI-Kits zur Verfügung. (Grafik: UI8)

Material Design: Euch stehen verschiedene kostenlose und kostenplfichtige UI-Kits zur Verfügung. (Grafik: UI8)

Anzeige
Anzeige

Glücklicherweise gibt es bereits einige hochwertige UI-Kits. Die besten haben wir euch an dieser Stelle herausgesucht.

Icons für eure App im Material-Design-Look

Material Design: Google stellt 750 Icons zur lizenzfreien Nutzung bereit. (Screenshot: Google)

Material Design: Google stellt 750 Icons zur lizenzfreien Nutzung bereit. (Screenshot: Google)

Google selbst hat 750 Icons für den Einsatz in Material-Design-Apps unter der freien Creative-Commons-Lizenz veröffentlicht. Aber auch andere Designer haben sich an der Erstellung passender Icons versucht.

Anzeige
Anzeige

Material Design: Web-Apps anhand dieser Frameworks erstellen

Material Design: Neben Bootstrap-Templates gibt es auch schon verschiedene CSS-Frameworks im Material-Design-Look. (Screenshot: Materialize)

Material Design: Neben Bootstrap-Templates gibt es auch schon verschiedene CSS-Frameworks im Material-Design-Look. (Screenshot: Materialize)

Auch kostenlose CSS-Frameworks beziehungsweise Templates für bestehende Frameworks wie Bootstrap gibt es im Material-Design-Look. Welches euch am besten zusagt, müsst ihr allerdings selbst entscheiden.

Anzeige
Anzeige

Tool: Die passende Farbpalette für eure Material-Design-App generieren

Material Design: Mit Material Palette erstellt ihr schnell passende Farbpaletten. (Screenshot: Material Palette)

Material Design: Mit Material Palette erstellt ihr schnell passende Farbpaletten. (Screenshot: Material Palette)

Mit Material Palette gibt es eine praktische Web-App, mit der ihr euch ganz einfach eine passende Farbpalette für eure App generieren lassen könnt. Ihr müsst lediglich zwei Farben auswählen und das Tool erledigt den Rest. Die Palette könnt ihr euch anschließend in den Formaten CSS, SASS, SVG, XML, oder PNG herunterladen. Das Tool stammt von Matt Aussaguel, der auf seinem Blog Material Up auch schicke Beispiele für den Einsatz der Designsprache sammelt.

Wer mit den hier aufgelisteten Ressourcen sofort loslegen möchte, der sollte vorher noch einen Blick auf unseren Artikel Leitfaden für Material Design: Google veröffentlicht Style-Guide für Android-Apps werfen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
3 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Matthias Richter

Ich hatte jetzt in dem Post Links zu Tools für die Integration von Material Design in Android Apps erwartet. Aber hier sind leider nur Hilfen für Mockups verlinkt.

Z.B. wie man die Material Toolbar (statt Actionbar) mit der Compat Library verwendet.
https://chris.banes.me/2014/10/17/appcompat-v21/

Oder ein Material Design Navigation Drawer https://github.com/neokree/MaterialNavigationDrawer

Antworten
Co

Eine farblich wesentlich angenehmere Palette bietet
http://flatuicolors.com/

Insgesamt schöne Linksammlung, danke!

Antworten
bahuma20

Noch ein ganz wichtige Link für alle die Web-Apps mit AngularJS entwickeln: https://material.angularis.org

Damit zu arbeiten ist einfach traumhaft!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige