Ein Design System ist eine Art Baukasten für Designer. Man kann es sich wie ein Set von Legobausteinen vorstellen. Jeder Baustein von Lego hat seine festen Vorgaben. Die Farben, Formen und Größe wurden vorher von jemanden definiert. Damit wird sichergestellt, das jeder Legostein exakt das gleiche Rot und Steine mit 4 Punkten immer gleich groß sind.
So ähnlich kann man sich ein Designsystem vorstellen. Es gibt klare Richtlinien für wiederverwenbare Komponenten - etwa Formulare, Buttons, Bildformate - die zusammen zu einem stimmigen Produkt werden.
Aber: So ein System ist sehr viel Arbeit. Deshalb habe ich angefangen mein eigenes Designsystem zu entwerfen, um Designern und UXlern
einfach schnellere Arbeitsprozesse zu ermöglichen.
Design Lead
läuft noch
Figma, Adobe Color
Atomic Design beschreibt eine Methode, jedes Designelement in winzig kleine Elemente zu zerlegen.
Atome bilden die Basis. Es sind sozusagen die einzelnen Elemente eines Baukastens. Zum Beispiel, Inputfelder, Buttons, Labels.
Jedes Atom für sich, hat seine eigenen einzigartigen Eigenschaften.
In der Chemie sind Moleküle Gruppen von Atomen, die miteinander verbunden sind und unterschiedliche neue Eigenschaften annehmen.
So werden aus Molekülen Elemente gebildet die eine Einheit darstellen z.B. ein Suchfeld (Button + ein Inputfeld)
Organismen sind reletiv komplexe UI Komponenten bestehend aus Molekülen und/oder Atomen z.B. ein Header.
Hier werden verschiedene Elemente zusammengeführt und bilden so einen Organismus.
Alle Farben wurden als Variablen angelegt und können mit nur wenigen Klicken einfach durch die eigenen Corporate Design Farben ersetzt werden. Alle von mir verwendeten Farben sind auf Kontrast und Barrierefreiheit geprüft.
Perfekt für jeden Bildschirm abgestimmt, egal ob Desktop, Tablet oder mobile.
Genau wie eine vordefinierte Farbwelt, hilft Spacing dabei schneller zu arbeiten und mehr Konsistens im Design zu waren.
Durch ein Spacing System auf der Basis von 4px, wird es einfacher ein harmonisches Layout zu erstellen. Es hilft dabei die Konsistenz von allen Elementen zu wahren.
Durch das 4-Pixel-System ist es für Designer und Entwickler einfacher Entwürfe umzusetzen. Beispiel siehe oben.
More Coming soon
kreativ@angelikabrand.de
Copyright © © 2022 Angelika Brand
