Erfahren Sie mehr über Bootstrap und Material Design
Bootstrap
Im Jahr 2011 beschloss eine Gruppe von Twitter-Ingenieuren, Bootstrap als interne Lösung für ihre Programmierprobleme zu erstellen. Technisch gesehen war ihr Plan, ein Tool ohne bestimmte Codestruktur zu erstellen.
Jeder Programmierer kann seine eigene Art haben, seine Kunstwerke zu erstellen. Dies führt normalerweise zu einigen Unsicherheiten, wenn ein anderer Programmierer, sagen wir ein Anfänger, versucht, den Code durchzulesen. Aus diesem Grund haben Mark Otto und Jacob Thorton von Twitter Bootstrap entwickelt – eine Möglichkeit, Programmierer davon zu überzeugen, ihre Muster beim Schreiben des Codes zu vereinheitlichen und Unterschiede im Prozess zu vermeiden. Die Vorteile, die Bootstrap für ihre tägliche Arbeit brachte, waren einfach von unschätzbarem Wert.
Als die Jungs von Twitter ihr wahres Potenzial erkannten, beschlossen sie, es als Open-Source-Projekt zu veröffentlichen. Mit Hilfe von Github und Tausenden anderer Programmierer dauerte es nur wenige Monate, um Bootstrap als das beliebteste Front-End-Entwicklungstool für die Erstellung von responsiven, mobilen Webprojekten zu brandmarken.
Was genau ist Bootstrap?
Stellen Sie sich eine Toolbox vor, die eine Reihe nützlicher Funktionen und Elemente enthält, die bei der Erstellung Ihrer Website hilfreich sein können.
Sie können wählen, welches Werkzeug Sie möchten, und Sie können sicher sein, dass keines dieser Elemente miteinander kollidiert. Es ist, als würden Puzzleteile zusammengefügt, aber in diesem Fall passt jedes Puzzle zum anderen.
Die Werkzeuge, die Sie sich in unserer Bootstrap-Toolbox vorgestellt haben, sind HTML, CSS und JS kombiniert. Material Design für Bootstrap ist das beste Beispiel dafür, wie Bootstrap ständig weiterentwickelt wird und wie viel Sie mit Hilfe von Design- und Funktionsmustern von Google Material Design hinzufügen können.
Material Design
Material Design ist eine von Google stammende Designsprache, die intensiv in Schnittstellenprojekten für das Android-System eingesetzt wird. Sie können fragen, warum es verwendet wird. Die Antwort ist einfach – es ist bereits ein ausgereiftes und organisiertes Tool, das der Benutzerfreundlichkeit und Lesbarkeit entspricht. Darüber hinaus entwickelt und verändert es sich dynamisch. Das Ergebnis ist ein Tool, das perfekt zu Bildschirmen passt und der Ausgangspunkt für unerfahrene Benutzer im UI / UX-Design ist.
Die Basis von MD ist von Website- und UI / UX-Designern, die lange daran gearbeitet haben, bereits gut etabliert. Was es von anderen Tools unterscheidet, ist die Tatsache, dass Sie es in jeder Art von Projekt verwenden können, an dem Sie gerade arbeiten, da es einfach ist, empfohlene Vorgehensweisen in jedem Projektsatz zu finden. Die Konventionen legen den Schwerpunkt auf:
Materialien als Metapher – in diesem Zusammenhang ist es eine Metapher des Raumes für Blatt und Tinte. Die realen Dinge, die in diesem Tool verwendet werden, sind Licht und Raum, unterstützt durch eindeutige Raumattribute, die im Feld digitale Formulare unterschieden werden. Die Eigenschaften von MD sind die Schatten, die weit verbreitet sind. Es spiegelt das Verhalten realer Dinge wider, die in der Realität existieren
Bedeutung – ein Anreiz von MD ist der Designdruck, der in einem sehr gut gestalteten Raster die Bedeutung von Typografie und Farben widerspiegelt.
Bewegung & Animation — MD unterstützt nicht nur eine statische Form des Druckdesigns, sondern schließt auch die digitalen Medien ein, die auf den Gesetzen der Physik basieren. Es gibt uns die Möglichkeit, Nutzen mit Ästhetik in Einklang zu bringen, was heutzutage sehr wichtig ist.
Eine der wichtigsten Metaphern in MD ist ein Material, das seine Position im Raum auf der Z-Achse hat, so dass wir erkennen können, ob es näher oder weiter von einem Benutzer entfernt ist. Die Metapher bezieht sich auf den sogenannten Höhenwert. Interessant ist die Tatsache, dass dieser Wert durch entsprechend ausgewählte Schattierung höhere und niedrigere Positionen im Raum simuliert.
Was ist sonst noch wichtig in Material Design Attributen?
– Unverwechselbare und ausgewählte Farben
– Einfache und benutzerfreundliche Symbole
– Grafiken und Bilder, die einen zusätzlichen Maßstab für den Inhalt darstellen
– Einfache, aber gleichzeitig elegante Typografie basierend auf der Roboto-Schriftart