Aurora-Design-Fall

Dec 07 2022

Wie Sie wissen, können mehrere Designer zu unterschiedlichen Zeiten an der Erstellung sich entwickelnder und komplexer Projekte beteiligt sein. Es ist sehr praktisch, ein organisiertes System von Elementen und Regeln für deren Verwendung zu verwenden, während man weiterhin an jemandes Projekt arbeitet.

Dies ist genau die Methode, die für eines unserer Projekte, Aurora, benötigt wurde. Unsere Aufgabe war es, ein Konzept aus Grundelementen zu erstellen, um daraus eine vollwertige Oberfläche für eine Plattform im Bereich E-Commerce-Management weiter aufzubauen.

Der Kunde stellte als Beispiel das Carbon-System zur Verfügung, das das Design-Kit, Farben, Schriftarten, Anwendungsfälle und mehr umfasst. Sowie ein Analogon ihres Produkts. Darüber hinaus habe ich mich auf Materialdesign-Beispiele konzentriert, da ihre Website Komponentenoptionen enthält, die bei der Entwicklung nützlich sein können.
Im Laufe der Arbeit wurden zunächst Schriftarten, Symbole und Hauptfarben des Projekts vorgeschlagen. Gleichzeitig habe ich Beispielschaltflächen und Eingaben erstellt, um zu zeigen, wie die ausgewählten Schriftarten und Symbole miteinander interagieren. Auf dieser Grundlage wählte der Kunde die Schriftarten, Farben und das Erscheinungsbild der Symbole aus. So wird eine der Farben des Logos, Rosa, als Primärfarbe und die zweite, Grau, als Sekundärfarbe verwendet.

Alle verwendeten Schriftstile mit markierten Rollen werden in den Stilen des Figma-Projekts gespeichert und können aus der Liste ausgewählt werden.

Die Farben bleiben auf ähnliche Weise erhalten. Sie sind jedoch im Abschnitt Farbstile in Ordner unterteilt: Primär und Zusätzlich. Um die Farbpalette zu erweitern, habe ich die Methode verwendet, der ausgewählten Farbe nacheinander Schwarz und Weiß in unterschiedlichen Anteilen hinzuzufügen (20 %, 40 %, 60 % usw.). Der Rahmen mit dem Farblayout zeigt auch die beabsichtigten Farbrollen an.

Darüber hinaus wurden mehrere Schattenoptionen hinzugefügt, die aus einem vom Kunden angebotenen vorgefertigten Set ausgewählt werden können.

Als nächstes wurde das Aussehen der Schaltflächen, Eingaben, Dropdown und der Schaltfläche zur Sprachauswahl ausgewählt. Alle Schaltflächen sind Komponenten, deren Aussehen je nach Verwendungszweck direkt im Projekt verändert werden kann. Das Symbol in der Schaltfläche kann auch im Auto-Layout-Menü geändert werden.

Das Aussehen der Dropdown-Schaltfläche zur Auswahl der Sprache wurde leicht geändert (sie wurde kompakter), nachdem ich die Beispiel-Login-Seite erstellt hatte.

Die Eingabe hat 9 Optionen und kann mit oder ohne Symbol verwendet werden. Das Passwort-Eingabefeld hat mehr Optionen, da es in verschiedenen Situationen verwendet werden kann und seine eigenen spezifischen Eigenschaften hat. Zum Beispiel eine Skala, die die Stärke des Passworts anzeigt, und grün hervorgehobene Elemente, wenn der Benutzer die erforderliche Anzahl von Zeichen eingegeben hat. Ich habe auch eine separate Komponente für das Eingabefeld für den Bestätigungscode erstellt.

Als nächstes wurden Komponenten für das Kontrollkästchen und den Schalter erstellt, sowie Komponenten für die gleichen Elemente mit Text. Außerdem habe ich Avatare unterschiedlicher Größe, Komponenten mit Gruppen, Tooltips und Anwendungsbeispiele sowie eine Dropdown-Liste hinzugefügt.

Um zu zeigen, wie Elemente und Texte im wirklichen Leben funktionieren, habe ich Anmeldebildschirme erstellt, die die Wünsche des Kunden berücksichtigen. Später wurde ein dunkles Thema hinzugefügt, für das ich separate Komponenten erstellt habe.

Und um Komponenten für das dunkle Thema einzurichten, habe ich ein vorgefertigtes Login-Layout verwendet und geeignete Kombinationen aus Farben und Transparenz ausgewählt. Bei einigen Elementen musste nichts geändert werden. Zum Beispiel für die Primärtaste.

So erhält der Kunde in relativ kurzer Zeit ein einfaches UI-Kit mit der Möglichkeit, Elemente in Figma zu bearbeiten. Dies ist eine großartige Möglichkeit, den stilistischen Schwerpunkt eines Projekts zu präsentieren, ohne viel Geld auszugeben.