So erstellen Sie ein effektives Design-Framework (enthält ein kostenloses Sketch-UI-Framework)

Wenn Sie schon eine Weile in der Designwelt tätig sind, haben Sie wahrscheinlich diese Begriffe gehört: Design-Framework, UI-Framework, UI-Kit oder Musterbibliothek. Sie beziehen sich alle auf dasselbe – ein System von Designstandards, Vorlagen, UI-Mustern und Komponenten, die in einem Produkt verwendet werden und seiner Designsprache dienen.

Wenn Sie noch nie ein Design-Framework erstellt haben, kann es sich überwältigend und zeitaufwändig anfühlen, eines zu starten, aber es wird Ihre Designarbeit beschleunigen und insgesamt effizienter machen.

Lassen Sie uns die Hauptprobleme skizzieren, die ein Design-Framework löst, warum Sie eines benötigen und welche Komponenten Sie erstellen müssen, wenn Sie eines erstellen. Später in diesem Artikel finden Sie ein kostenlos herunterladbares Sketch-UI-Framework, mit dem Sie Ihr eigenes Design-Framework erstellen können.

Was ist ein Design-Framework?

Jedes Design einer Benutzeroberfläche beginnt mit einer leeren Zeichenfläche, und jeder Designer hat einen Prozess, mit dem er diese leere Leinwand in ein voll funktionsfähiges Produkt verwandelt. Dieser Prozess umfasst alle kleinen Designkomponenten, die erstellt werden, und die Schritte, die der Designer durchläuft, um ein zusammenhängendes Ganzes zu erstellen, von Farben bis zu Schaltflächen und allem dazwischen.

Diese Arbeit ist häufig repetitiv und kann konsolidiert und effizienter gestaltet werden, indem ein System miteinander verbundener Muster und Komponenten erstellt wird. Mit anderen Worten, ein Design-Framework .

Design-Frameworks lösen mehrere Probleme, darunter:

• Beseitigung von Inkonsistenzen im Produktdesign.
• Verbesserung der Zusammenarbeit, Effizienz und Kommunikation zwischen Design- und Produktteams.
• Designaktualisierungen später im Designprozess werden weniger frustrierend.

Das erste Problem: Inkonsistenz im Produkt

Konsistenz verwandelt ein gutes Design in ein großartiges Design. Konsistenz verbessert die UX, die allgemeine Benutzerfreundlichkeit und die Effizienz, mit der Benutzer digitale Produkte verwenden können. Ob es sich um eine kleine Website, eine App oder ein großes SaaS-Produkt handelt, Inkonsistenzen im Design beeinträchtigen das Erscheinungsbild, die Haptik, die Glaubwürdigkeit und die Benutzererfahrung des Produkts.

Inkonsistenzen treten häufig auf, wenn ein Team oder ein Designer Dinge zu schnell erledigt oder spontan Änderungen vornimmt. Manchmal antwortet ein Designer auf die Frage eines Kunden oder Stakeholders, indem er ihm schnell zeigt, wie diese Änderungen aussehen würden. Plötzlich findet sich das Designteam mit vier verschiedenen Grüntönen wieder und niemand ist sich sicher, welche die primäre Knopffarbe ist.

Design-Frameworks lösen dieses Problem, indem sie konsistente Standards etablieren.

Das zweite Problem: Kooperations- und Kommunikationslücken

Während des Entwicklungsprozesses, an dem mehrere Teammitglieder beteiligt sind, von denen viele zu unterschiedlichen Zeitpunkten am Design arbeiten, kann es oft verwirrend werden, wenn es keine Reihe von Standards gibt, die das Team leiten.

Ein Design-Framework steigert die Zusammenarbeit und Effizienz, indem es den Kommunikationsprozess rationalisiert und klare Standards und Richtungen bereitstellt. Sie verlieren keine Zeit mehr damit, hin und her zu rennen, um herauszufinden, welche Farbe oder Schriftart die richtige ist.

Das dritte Problem: Designänderungen im Spätstadium

Wie oft müssen Designer eine einzige Farbänderung in der Designdatei mit 120 bereits entwickelten Zeichenflächen vornehmen? Wie oft muss ein Symbol geändert werden, das Teil von 200 Komponenten ist?

Änderungen sind während des gesamten Designprozesses unvermeidlich, sie verbessern das Produkt, aber sie passieren oft später, als es den Designern lieb ist. Ein Design-Framework macht diese späten Änderungen viel weniger schmerzhaft, da es auf einem System objektorientierter Komponenten aufbaut. Ändern Sie es einmal und es zieht sich durch das gesamte Design.

So erstellen Sie ein Design-Framework

Nachdem wir nun wissen, was ein Design-Framework ist und welche Probleme es löst, sprechen wir über das Erstellen eines Frameworks (und über den Inhalt des Sketch-UI-Kit-Downloads, der später in diesem Artikel bereitgestellt wird).

Das für diesen Artikel verwendete Design-Framework ist eine einzelne Sketch-Datei, die mit einer bestimmten Hierarchie von Komponenten angelegt ist, die in Sketch als „Symbole“ bezeichnet werden. Diese Symbole machen es einfach, dateiweite Änderungen mit einem einzigen Klick zu implementieren. Eine Änderung in der „Master“-Komponente – dem „Symbol“ – wird sofort in allen anderen Instanzen widergespiegelt.

Design-Framework-Hierarchie

Um ein gut funktionierendes Design-Framework zu erstellen, beginnen Sie mit der Einrichtung einer soliden visuellen Hierarchie. Entwerfen Sie zuerst die allgegenwärtigsten Komponenten wie Farbe und Typografie. Arbeiten Sie sich dann auf kleinere Elemente wie Schaltflächen und Eingabekomponenten vor. Stellen Sie es sich wie den Bau eines Hauses vor – bauen Sie zuerst das Fundament und fügen Sie dann die anderen Teile hinzu, wenn das Projekt voranschreitet.

Farbe

Farbe ist das wichtigste Element in einer UI-Design-Framework-Hierarchie – jede einzelne Komponente in einem Design verwendet Farbe. Farbe löst bei Menschen starke Reaktionen und Emotionen aus und bestimmt das Gesamtbild, die Haptik und den Ton eines Produkts.

Eine gute Praxis ist es, Farben in Gruppen zu unterteilen:

1. Primärfarben sind die wichtigsten Markenfarben, die normalerweise verwendet werden, um das allgemeine Farbschema eines Projekts und für wichtige Komponenten wie Schaltflächen zu erstellen.
2. Sekundärfarben ergänzen die Primärpalette – oft handelt es sich um unterschiedliche Schattierungen, Sättigungen oder Tönungen der Primärfarben. Graustufen werden häufig für Typografie oder Hintergründe verwendet. Irgendwo zwischen fünf und acht Graustufen sollten ausreichen.
3. System-Feedback-Farben sind eine wichtige Gruppe, die Designer oft vergessen. Diese Farben zeigen Systemmeldungen an, einschließlich Warnungen, Warnungen und Benachrichtigungen.

Grid: Der Designraum

Sobald die Farben ausgewählt sind, besteht der nächste Schritt darin, ein Raster einzurichten. Ein Raster hält alle anderen Komponenten auf der Seite an der richtigen Stelle und in der richtigen Reihenfolge. Dies ist der gesamte Gestaltungsraum.

Es gibt zwei Arten von Rastern: vertikal und horizontal .

Das vertikale Raster ist das am häufigsten verwendete und hält alles horizontal ausgerichtet. Es gibt viele beliebte Grid-Systeme wie Bootstrap oder das ältere 960px-Grid.

Ein horizontales Raster ist nicht so üblich. Für die Typografie wird ein horizontales Raster verwendet. Es erzeugt einen vertikalen Rhythmus für Absätze und wird häufig in Zeitungen verwendet.

Modifikatoren: Stilregeln

Zusätzlich zu Farbe und Raster gibt es eine weitere Komponente, die in der Hierarchie des Design-Frameworks ganz oben steht: Modifikatoren. Sie können nicht als autonome Komponenten verwendet werden – sie werden verwendet, um andere zu modifizieren oder zu stylen.

Diese Gruppe bringt Stil in ein Projekt und umfasst Komponenten, die für die Ästhetik verantwortlich sind, wie Formen oder Schatten ; sie in späteren Phasen des Projekts einzeln zu ändern, kann umständlich sein.

Behandeln Sie Modifikatoren als Parameter für alle nachfolgenden Bausteine. Erstellen Sie Skizzensymbole aus drei verschiedenen Formen: Rechteck, abgerundetes Rechteck und Kreis. Verwenden Sie diese Formen, um jede einzelne Komponente einer Benutzeroberfläche zu erstellen, einschließlich Schaltflächen, Eingabekomponenten, Formularfelder usw. und Hintergrundelemente.

Diese Technik ermöglicht es Designern, sich mehr auf die UX als auf das Erscheinungsbild von UI-Komponenten zu konzentrieren. Es macht es auch einfach, zur Grundform zurückzukehren, ihren Stil zu ändern (z. B. Eckenradius) und alles, was verbunden ist, wird automatisch aktualisiert.

Typografie: Der Inhalt

Typografie ist die letzte wichtige Komponente des Design-Frameworks. Es kann in zwei Gruppen unterteilt werden: statische Seitenkopie, wie Kopfzeilen und Absätze; und interaktive Komponenten kopieren, wie Schaltflächen, Navigation oder Eingabefelder.

Gestalten Sie den Stil und die Größe aller Überschriften (H1, H2, H3 usw.) und Absätze. Statische Seitenkopien weisen normalerweise nicht viele stilistische Variationen (Farbe oder Gewicht) auf. Die einzige Variation – in Bezug auf den statischen Seitenkopierstil – besteht darin, ob es sich um einen hellen oder dunklen Hintergrund handelt. Daher ist es am besten, zwei Farbsätze zu erstellen, um sicherzustellen, dass die statische Seitenkopie auf beiden funktioniert.

Text, der auf interaktiven Komponenten wie Schaltflächen oder System-Feedback-Meldungen erscheint, kann mehrere Variationen aufweisen. Beispielsweise könnten System-Feedback-Meldungen je nach Meldungstyp (Warnung, Fehler, Erfolg usw.) mit vier verschiedenen Hintergrundfarben angezeigt werden – Schaltflächenbeschriftungen können auch unterschiedliche Hintergründe haben.

Die Einbeziehung dieser Gruppe in das Design-Framework ist hilfreich, wenn man global über Typografie nachdenkt. Erstellen Sie zuerst den regulären Schaltflächenbeschriftungstext und zweitens seine Variationen; Dies hilft zu vermeiden, dass Sie zu viele Schriftgrößen erhalten. Überprüfen Sie beim Erstellen neuer UI-Komponenten im Framework immer, ob es einen passenden Typografiestil gibt.

Symbole

Es gibt zwei Gruppen von Symbolen in einem Designsystem: Informationssymbole und Benutzerschnittstellensymbole. Die erste Gruppe ist typischerweise Teil eines Illustrationssystems und wird nicht für UI-Interaktionskomponenten (wie Schaltflächen) verwendet. Die zweite Gruppe – UI-Symbole – fügt komplexeren Komponenten Bedeutung hinzu: Schaltflächen, Beschriftungen oder Tabellen, nimmt dabei aber nur sehr wenig Platz ein. Symbole in der Benutzeroberfläche können auch als Funktionsauslöser wie „Bearbeiten“, „Kopieren“, „Herunterladen“ und „Entfernen“ verwendet werden.

Beginnen Sie mit einfachen Symbolen, die für UI-Interaktionen verwendet werden, wie Pfeile, „Hinzufügen“ (+) oder „Schließen“ (x). Eine gute Praxis ist es, sie in verschiedenen Größen zu entwerfen (12px, 16px, 24px, 32px).

Komponenten

Tasten

Schaltflächen sind zweifellos eine der wichtigsten Komponenten im UI-Design, und im Laufe der Jahre haben sie viele Veränderungen durchgemacht, da Designtrends kamen und gingen.

Achten Sie beim Entwerfen von Schaltflächen darauf, ihre individuellen „Zustände“ zu entwerfen. In der Regel hat eine Schaltfläche mehrere Zustände und gibt Benutzern ein visuelles Feedback, um den aktuellen Zustand anzuzeigen (inaktiv, schwebend, gedrückt, deaktiviert, aktiv usw.).

Dazu gibt es zwei Möglichkeiten: Die erste besteht darin, das Erscheinungsbild der Schaltflächen für jeden Zustand (normal, aktiv, Hover und gedrückt) separat zu gestalten. Diese Lösung kann zeitaufwändig sein, bietet aber anschließend viel Flexibilität. (Diese Methode wurde im unten enthaltenen kostenlosen Sketch-UI-Framework verwendet.)

Die zweite Möglichkeit besteht darin, alle Zustände basierend auf dem ursprünglichen zu entwerfen. Erstellen Sie beispielsweise ein Skizzensymbol, das die Farbe, Sättigung oder Helligkeit jedes Zustands ändert.

Platzieren Sie dazu das Symbol als Überlagerung der Schaltfläche mit einem der Skizzen-Mischmodi: Farbton, Sättigung oder Überlagerung. Verwenden Sie ein schwarzes Rechteck mit Farbton-Mischmodus über der normalen Schaltfläche, um die Sättigung zu ändern. Eine spätere Änderung der Overlay-Opazität macht es zu einer mehr oder weniger gesättigten Schaltfläche.

Eingabekomponenten

Eingaben ermöglichen dem Benutzer, mit der Anwendung zu kommunizieren und Daten hochzuladen. Die Verwendung von Komponenten wie Eingabefeldern zusammen mit Schaltflächen ermöglicht die Erstellung einer einfachen Webanwendung. Wie bei Schaltflächen ist es am besten, Eingabekomponenten mit unterschiedlichen Zuständen zu erstellen. Es hängt vom Design-Framework ab, aber erwägen Sie zumindest, leere, gefüllte und Fehlerzustände zu erstellen.

Komplexe Komponenten

In diesem Stadium könnte das Design-Framework als vollständig betrachtet werden, da es alles enthält, was zum Erstellen eines funktionierenden Produkts erforderlich ist. Es lohnt sich jedoch oft, etwas mehr Zeit in die Erstellung komplexerer UI-Komponenten für das UI-Framework zu investieren, wie z. B. Karten, Tabellen, Datumsauswahl, Diagramme und Formulare.

Abschnitte

In dieser Phase kann das Design-Framework weiterentwickelt werden, indem die gängigsten Bereiche von Anwendungen oder Websites erstellt werden. Durch das Entwerfen von Dingen wie Navigation, Kopfzeilen, einem Abschnitt „Über uns“ und Galerien kann ein Designer in den späteren Phasen eines Projekts Zeit sparen. Das Erstellen mehrerer Variationen verschiedener Abschnitte des Produkts erleichtert die spätere Anpassung an verschiedene Projekte.

Best Practices für das Design-Framework

Testen Sie das Design Framework ständig

Tests sollten in jedem Design- oder Entwicklungsprozess enthalten sein. Vermeiden Sie Fehler und fehlende Komponenten, indem Sie kleine Designteile erstellen und diese einem „Stresstest“ unterziehen. Prüfen Sie beispielsweise, ob das Ändern einer zu Beginn erstellten Komponente auch eine kürzlich hinzugefügte Komponente ändert.

Erstellen Sie einfache UI-Komponenten

Halten Sie die Komponenten einfach und denken Sie gleichzeitig an so viele Design-Anwendungsfälle wie möglich, damit in Zukunft jeder Stil abgedeckt werden kann. Es ist am besten, UI-Komponenten mit einfachen Formen zu erstellen und sie so flexibel zu halten, dass sie sich leicht an jedes Projekt anpassen lassen.

Konzentrieren Sie sich nicht auf einen einzigen Stil

Ein Design-Framework sollte universell sein. Konzentrieren Sie sich also nicht auf einen bestimmten Stil, sondern auf Komponenten, die zum Erstellen eines Stils verwendet werden können.

Erstellen Sie Ihr eigenes Design-Framework

Nehmen Sie sich bei Ihrem nächsten Projekt am Anfang die Zeit, um einen Designrahmen sorgfältig zu konstruieren. Sie werden feststellen, dass es den gesamten Designprozess verbessert, die Effizienz erhöht und die Designkonsistenz des Produkts verbessert, was die Benutzerfreundlichkeit verbessert. Sie sparen Zeit, kommunizieren Designideen effektiver und machen Kunden und Stakeholder glücklich, wenn diese Ideen in nur wenigen Sekunden auf einer Zeichenfläche von 120 Sketch zum Leben erweckt werden.

Sind Sie bereit, Ihr eigenes Design-Framework zu starten?

Laden Sie hier die Sketch-Datei herunter. Anweisungen zur Verwendung sind enthalten.

Inspirierende Designsysteme und UI-Frameworks

Eine der besten Möglichkeiten, mehr über Design-Frameworks zu erfahren, besteht darin, zu untersuchen, wie große, etablierte Unternehmen sie verwenden. Folgen Sie diesen Arten von Unternehmen und erfahren Sie mehr über ihre Vorgehensweise.

Googles Material Design – derzeit eines der beliebtesten Design-Frameworks der Welt. Erfahren Sie, wie Google den gesamten Designprozess schichtet und eine nützliche Hierarchie von Komponenten erstellt.

IBMs Designsprache – IBM teilt ihren gesamten Designprozess, einschließlich einer ausführlichen Erklärung jedes Details. Sie teilen auch viele Ressourcen aus ihrer Designsprache, von einfachen Symbolen bis hin zu einer UI-Animationsbibliothek.

Atlassian – eine weitere großartige Lernressource. Ihr Produkt-Styleguide ist ein großartiges Designsystem zum Studieren. Sie teilen ihr Web-GUI-Paket, eine Sketch-Datei mit unzähligen Komponenten und Konzepten.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft