Sobald wir ein solides Verständnis davon haben wie der Benutzerfluss funktioniert, ist es an der Zeit darüber nachzudenken, wie das Produkt aussehen und sich anfühlen soll. Eine gute Möglichkeit damit zu beginnen, ist die Erstellung von Mood Boards (einer vielfältigen Zusammenstellung von Design-Inspirationen) die uns dabei helfen, unsere Optionen vor Augen zu führen. Auf der Grundlage dieser Optionen entwickeln wir ein Design, das mit der Marke übereinstimmt, praktisch und ansprechend ist.

Mockups sind eine visuelle Darstellung wie die Benutzeroberfläche aussehen wird. Sie können low- oder high-fidelity, statisch oder interaktiv, ein- oder mehrseitig sein. Wir kreieren unseren visuellen Stil auf der Grundlage von Branding-Richtlinien, die von den Beteiligten zur Verfügung gestellt werden oder wir entwickeln einen eigenen Stil.

Das Tolle an Mockups ist, dass sie es uns ermöglichen mit Farbschemata, Typografie und Stilen zu experimentieren, um zu sehen was am besten aussieht. Außerdem ermöglichen sie uns Änderungen am Design schnell und effizient vorzunehmen.

Wir liefern auch kurze Animationen als Teil unseres UX-Designs, um die Gesamtpräsentation und Interaktivität eines Produkts zu verbessern. UI-Animationen zeigen die wichtigsten Interaktionen, Übergänge und Abläufe innerhalb des Systems.

Wenn sie im richtigen Kontext eingesetzt werden, heben UI-Animationen das Design hervor und lenken die Nutzer auf ihr Ziel zu. Darüber hinaus tragen solche Elemente wie Animationen und Illustrationen dazu bei, die Nutzer zu begeistern, was die Verweildauer und die allgemeine Freude am Produkt erhöht.

Ein UI-Design System ist eine Sammlung von iterativen Komponenten und Richtlinien die erklären, wie diese Komponenten funktionieren. Oder einfacher ausgedrückt, es ist eine Reihe von Standards für Design und Code, die die Designkonsistenz stärken.

Ein Design System umfasst die folgenden Komponenten:

• Stil- und Designrichtlinien. Symbole, Typografie, Farben, Abstände und Illustrationen
• UI-Bibliotheken. Formular-Design-Elemente, Bilder, Navigation und Overlays
• Content Style Guide. Stimme, Ton, Sprache, Grundsätze und Ziele

Ein Design System ist ein leistungsfähiges Toolkit für die internen Designteams unserer Kunden. Es ermöglicht ihnen bei der Erstellung neuer Seiten und dem Hinzufügen neuer Funktionen, Konsistenz und Skalierbarkeit zu wahren.

Eine Methode zur Entwicklung von Design Systemen ist das Atomic Design System. Diese Methode besteht aus fünf Stufen die zusammenarbeiten, um Schnittstellen Design Systeme in einer hierarchischeren Weise zu erstellen. Die fünf Stufen des atomaren Designs sind:

1. Atome. Grundelemente wie Formularbeschriftungen, Eingabe- und Schaltflächen
2. Moleküle. Einfache Gruppen von Atomen die zusammen als Einheit funktionieren
3. Organismen. Relativ komplexe Komponenten die verschiedene Abschnitte einer Schnittstelle bilden
4. Vorlagen (Templates). Gruppen von Organismen die zusammen funktionieren und die zugrundeliegende Inhaltsstruktur der Seite darstellen
5. Seitentypen (Doctypes). Die höchste Stufe der Wiedergabetreue die zeigt, wie die Schnittstelle mit echten repräsentativen Inhalten aussehen wird

Einer der größten Vorteile des atomaren Designs ist, dass es eine kritischere Herangehensweise an den UX-Designprozess ermöglicht und uns erlaubt, jede Komponente für sich und als Teil eines größeren Ganzen zu betrachten. Dies wiederum fördert ein konsistentes und skalierbares Design.

Um unseren Stakeholdern eine noch realistischere Visualisierung des entstehenden Produkts zu geben, erstellen wir im Rahmen des Wireframing- und Designprozesses interaktive Prototypen. Dabei setzen wir verschiedene Tools ein, je nachdem ob wir einfachere oder komplexere Funktionalitäten testen wollen.

Ein interaktiver Prototyp ist für den gesamten Designprozess in vielerlei Hinsicht von Vorteil:

• Erweckt das Design zum Leben
• Generiert Feedback aus dem richtigen Kontext
• Verkürzt die gesamte Entwicklungszeit
• Dient als Referenzwerkzeug für Entwickler
• Bestätigt die gemeinsame Vision von Benutzern und Interessengruppen
• Validiert Annahmen und testet Hypothesen