Wahrscheinlich hören Sie immer wieder den Ausdruck? Materialdesign? in Gesprächen auftauchen. Das Konzept ist ziemlich neu. Es wurde im Sommer eingeführt und verweist auf eine neue Designsprache der Google-Leute.
Materialdesign ist jedoch mehr als nur eine Idee. Es ist wahrscheinlich, dass Designer die Web- und App-Designprozesse vollständig überdenken. Websites beginnen bereits damit, Entwurfsschemata mithilfe der Materialdesign-Dokumentation von Google auszurollen. Jetzt ist es an der Zeit zu lernen, worum es geht und ob ein Materialdesign-Rahmen in Ihrer Zukunft liegt.
Was ist Materialdesign?
Material Design ist eine visuelle Sprache, die vom Designteam von Google entwickelt wurde, um Designern bei der Erstellung von Websites und Apps zu helfen, die zugänglich, praktisch und nutzbar sind. Das Konzept basiert auf einem lebendigen Dokument, das öffentlich verfügbar ist. Die Dokumentation wird ständig aktualisiert, um Änderungen in Umfang und Technologie zu berücksichtigen.
Materialdesign basiert auf einer Reihe von Zielen und Prinzipien, über die leichter nachzudenken als zu erreichen ist. (Aber das ist in Ordnung. Die Idee hier ist, mehr über das Design nachzudenken und darüber, wie man es verbessern kann.)
Materialgestaltungsziele:
- Erstellen Sie eine visuelle Sprache, die klassische Prinzipien des guten Designs mit der Innovation und Möglichkeit von Technologie und Wissenschaft verbindet.
- Entwickeln Sie ein einziges zugrunde liegendes System, das ein einheitliches Erlebnis über Plattformen und Gerätegrößen hinweg ermöglicht. Mobile Regeln sind von grundlegender Bedeutung, aber Berührung, Stimme, Maus und Tastatur sind alle Eingabemethoden der ersten Klasse.
Materialgestaltungsprinzipien:
- Material ist die Metapher: Visuelle Hinweise sollten in der Realität begründet sein
- Fett, grafisch, absichtlich: Die grundlegende Designtheorie (Verwendung von Typ, Raster, Abstand, Maßstab, Farbe und Bildern) sollte die visuelle Orientierung unterstützen
- Bewegung bietet Bedeutung: Das Verschieben von Objekten oder Aktionen sollte die Benutzererfahrung nicht stören und Kohärenz bieten
Die Leitfaktoren für die Materialgestaltung sind vielfältig. (Die Dokumentation ist ziemlich beeindruckend.) Sie gliedert sich in eine Vielzahl spezifischer Konzepte und Behandlungen. Google hat eine Reihe von Regeln aufgestellt? So erstellen Sie Animationen, Stil, Layouts, Komponenten, Muster und Benutzerfreundlichkeit.
Alle diese Richtlinien beginnen mit einem Verständnis der grundlegenden physikalischen, Transformations- und Bewegungseigenschaften des Materialdesigns. Die Leittheorie lautet, dass Material in der Realität basiert, wo sich Objekte in einem nahezu dreidimensionalen Raum befinden. Ästhetisch liegt es zwischen der Dimension von flachem Design und Skeoumorphismus.
Farbe und Typografie
Materialdesign-Farbkonzepte sind etwas vom flachen Designtrend zu tragen. Die Paletten sind fett und hell. Die Typografie folgt ebenfalls dem flachen Thema mit einfachen serifenlosen Serifen.
"Farbe wird durch mutige Farbaussagen inspiriert, die mit gedämpften Umgebungen verglichen werden, und orientiert sich an zeitgenössischer Architektur, Straßenschildern, Straßenmarkierungsband und Sportplätzen." gemäß Materialdesign-Dokumentation. Betonen Sie kräftige Schatten und Highlights. Stellen Sie unerwartete und lebendige Farben vor.?
Das Schöne an den Farbkonzepten ist die Verwendung von deutlichem Kontrast. In jedem Beispiel sehen Sie? Design School 101? Theorien in Aktion. Google bietet eine vollständige Farbpalette mit herunterladbaren Farbfeldern. Farbkonzepte sind so grundlegend, dass Sie sich fragen müssen, ob Google der Meinung ist, dass Designer die Farbtheorie vergessen haben.
Typografie-Richtlinien sind ebenso grundlegend. Eine Standardschriftart für alle Anwendungen - Roboto, die Standardeinstellung für Android-Anwendungen - enthält einen Download-Link sowie eine Kontaktleiste für die Verwendung von Schriftarten.
Layout und Design
Die grundlegende Layout- und Entwurfsstruktur von Materialprojekten basiert auf Druckdesignkonzepten. Designer werden aufgefordert, ein Grundlinienraster und eine mathematische Struktur für die Platzierung von Elementen zu erstellen und zu verwenden.
Das Layout gliedert sich weiter in Regionen, in denen vorgeschlagen wird, wie und wo Elemente für eine optimale Benutzerinteraktion platziert werden sollen. (Es gibt auch Richtlinien, wie große Elemente sein sollen.)
Und für jedes Konzept gibt es eine Vorlage zum Herunterladen für Android. Die Risiken enden mit einem Design, das zu einem Cookie-Cutter ist, oder einer App, die zu "Android" aussieht. für diejenigen, die iOS lieben.
Gemeinsame Elemente
Jedes Element im Materialdesign wird detailliert beschrieben. Von der Erstellung bis zum Auffinden auf dem Bildschirm ist es schwierig, etwas zu visualisieren, das nicht hier ist. (Die Liste enthält 19 Komponenten, um genau zu sein.)
- Untere Blätter
- Tasten
- Karten
- Chips
- Dialoge
- Teiler
- Grids
- Listen
- Steuerelemente auflisten
- Menüs
- Pflücker
- Fortschritt und Aktivität
- Schieberegler
- Snackbars und Toasts
- Subheaders
- Wechselt
- Tabs
- Textfelder
- Tooltips
Designer, die das Aussehen der vorgestellten Komponenten mögen, können sogar eine Adobe Photoshop-Datei von Illustrator herunterladen, die alle Elemente und Android-Systemsymbole enthält. Die Stickerbögen werden komplett mit Stilen geliefert und halten sich an das vorgeschlagene Raster.
Usability und Interaktion
Ein Produkt ist zugänglich, wenn alle Personen - unabhängig von ihrer Fähigkeit - navigieren, es verstehen und verwenden können, um ihre Ziele zu erreichen. Ein wirklich erfolgreiches Produkt ist für ein möglichst breites Publikum zugänglich.Die Dokumentation des Materialdesigns öffnet uns den Blick auf Muster für Interaktion, Nutzbarkeit und Zugänglichkeit auf eine Weise, die durchaus nützlich ist. Während viele der tatsächlichen ästhetischen Eigenschaften für erfahrene Designer grundlegend erscheinen mögen, sind einige der Usability- und Interaktionskonzepte zu berücksichtigen.
Der Abschnitt der Interaktionsmuster ist besonders nützlich. Es enthält eine Reihe von Ideen, um einige Elemente in allen Designs universell zu machen. (Denken Sie darüber nach, wie Sie eine Uhrzeit oder ein Datum ausschreiben oder wie die Suche funktionieren soll.) Dies sind einige der grundlegendsten Werkzeuge, die Benutzer erwarten zu arbeiten, und dass sie für alle Benutzer auf eine bestimmte Weise funktionieren, ist ein eindeutiger Vorteil.
Die Zugänglichkeit ist ein weiteres echtes Anliegen, für das Materialdesign-Dokumentation skizziert und nette Optionen zur Verfügung gestellt hat. Wenn Sie über Benutzer nachdenken, die möglicherweise mit einem Webdesign in einer Weise interagieren, die weder Ton noch Farbe enthält, mit aktiviertem hohem Kontrast, mit einem vergrößerten Bildschirm, ohne sichtbaren Bildschirm oder nur mit Sprachsteuerung oder sogar einer Kombination dieser Elemente eine signifikante Nutzerbevölkerung.
10 Materialdesign-Ressourcen
Materialdesign taucht überall auf. Es gibt viele Dinge, die Sie direkt von Google herunterladen können, andere entwickeln jedoch auch Möglichkeiten, es zu nutzen. Hier finden Sie einige Ressourcen, die Ihnen beim Erkunden von Materialdesignkonzepten helfen.
- Google-Layoutvorlagen für mobile, Tablet- und Desktop-Frameworks
- Materialdesign für Bootstrap
- Angular.js Materialprojekt
- Polymer Designer
- Materialisieren Sie das Front-End-Framework
- Materialfarbpalette
- Materielle Interaktion
- Materialdesign auf Android-Checkliste
- Materialdesign Skizzenvorlage
- Kostenloses Material-UI-Kit
Material Design Gallery
Wie bei jedem Trend und Konzept gibt es bereits zahlreiche Websites und mobile Apps, die die im Material Design beschriebenen Konzepte verwenden. Hier sind fünf Beispiele, die die Prinzipien zeigen und wie Designer mit den Konzepten arbeiten und experimentieren können.
Runtastic Laufen und Fitness
Google-Einstellungen
Böses Kaninchen
Wetter Timeline
Fazit
Das Konzept des Materialdesigns ist gut. Die Richtlinien sind sauber und frisch. Die meisten erfahrenen Designer benötigen diese Anleitung wahrscheinlich nicht. In der Dokumentation enthält fast jede Idee einen herunterladbaren Cheat. Brauchen wir wirklich so viel Hilfe?
Die Dokumentation macht Spaß zu lesen, macht Sie zum Nachdenken und ist eine Vorschau auf Dinge, die das Web bald überfluten werden. Spielen Sie mit den Konzepten, fühlen Sie sich aber nicht mit ihnen verheiratet. Design, insbesondere in Bezug auf Trends und Technologie, verändert sich so schnell, wie wir es uns vorstellen können.
Wie bei jedem anderen Designtrend, Rahmen oder Konzept müssen Sie selbst entscheiden, ob die Konzepte in Ihren Projekten verwendbar sind. Sehen Sie sich selbst mit Materialdesign? Warum oder warum nicht? Lass es uns in den Kommentaren wissen.