Style-Guide
Für das Kernprodukt der Searchmetrics GmbH, der SEO-Software Suite 7.0, wurde eine Komponentenbibliothek entwickelt. Zweck dieser war, die Konsistenz aller Design-Elemente zu gewährleisten und die Zusammenarbeit mit den Frontend-Entwicklern zu vereinfachen.
Meine Aufgabe als Designer
Gestaltung eines einheitlichen und erweiterbaren Konzepts aller Elemente des User-Interfaces und die Entwicklung eines kollaborativen Workflows mit dem Frontend. Technisch basierte das UI-Kit zunächst auf React-Bootstrap, später wurde Material UI verwendet. Herausgestellt werden auf dieser Seite die wichtigsten Bausteine der Komponentenbibliothek.
Die Schaltflächen: Wie bereits auf der Seite „SEO-Suite” erwähnt, wurde den wesentlichen Bereichen der Suite eine Kennfarbe zugewiesen. Entsprechend mussten diese Farben für die CTAs definiert werden, dazu gab es noch eine Reihe von Sekundär-Schaltflächen, Toggles und Links welche farblich neutral blieben.
Die Textfelder: Es folgt eine Übersicht über die verschiedenen Formulare, Dropdown-Menus und Eingabefelder, dargestellt in allen Zuständen; geschlossen, offen, in Aktion und falls nötig, mit Fehlermeldung.
Die Farben: Das obige Bild zeigt eine Auswahl der benutzten Farben. Erwähnenswert ist die Auswahl der Farben für die Charts (rechts oben). Bei der Zusammenstellung der Farben war die Herausforderung, dass sie sich nicht zu sehr ähneln dürfen, weil in einigen Teilen der Suite die Farben übergangslos eingesetzt werden – wie z. B. in einem Stacked Bar Chart oder Sunburst Chart. Da man zu abweichende Farbtöne als Hervorhebung missverstehen könnte, durften auch nicht zu auffällige Farben eingesetzt werden. So wurde für die Charts eine Reihe von 50 eher gedeckten Tönen definiert. Der Einfachheit halber werden oben nur die ersten 21 gezeigt.
