Der Designprozess Teil 2: Vom Konzept zu dem finalen Produkt

Wir wissen, wie der Designprozess initiiert wird, wie wir Ideen ausarbeiten, mittels User Research Nutzer früh einbeziehen und wie wir ein Konzept entwickeln. Aber wie füllen wir dieses Konzept mit Leben? Wie setzen wir Prototypen um? Und was folgt auf die Fertigstellung unserer Anwendung? Mit der Antwort auf die erste Frage betreten wir das UI-Design.

Dieser Artikel behandelt die zweite Hälfte des Designprozesses. Für Leser, die den ersten Teil noch nicht gelesen haben, empfehle ich hier zu beginnen.

Visualisierung

Inspiration Boards: Wie entscheiden wir, wie wir unsere Wireframes visuell gestalten? Ein guter erster Schritt für die visuelle Gestaltung sind Inspiration Boards. Diese sind eine Collage von App-Bildschirmen und Website-Aufnahmen, die zur visuellen Inspiration dienen. Hier sammeln wir Ideen, die wir für die Auswahl unserer Farben, Texturen, Fotos und Illustrationen heranziehen können.

Die Grundlage für die Erstellung eines Inspiration Boards ist der Austausch mit dem Kunden. Es ist entscheidend zu verstehen, welche Visionen der Kunde für das fertige Produkt hat und welche Emotionen die Marke auslösen sollte. Genauso wichtig ist es zu wissen, was der Kunde nicht mag.

Sollte der Kunde bereits einen ausgearbeiteten Style Guide haben, entfällt das Inspiration Board, und wir arbeiten mit der bestehenden Designsprache. Wenn wir ein ansprechendes Inspiration Board zusammengestellt haben, können wir es nach visuell ähnlichen Designs gruppieren und das Ergebnis mit dem Kunden besprechen.

Moodboards: Was in Form des Inspiration Boards nur eine grobe Ansammlung von Ideen war, wird im Moodboard konkret ausgearbeitet. Moodboards geben einen Eindruck vom finalen Look & Feel unseres Projekts. Ein Moodboard sollte die Stimmung wiedergeben, die das fertige Produkt ausstrahlen wird. Um einen guten Eindruck vom späteren Produkt zu erhalten, erstellen wir für unsere gesammelten Inspirationen eine passende Vorlage, richten sie ansprechend aus und versehen sie mit einem Begleittext, der unsere Farbauswahl und allgemeine visuelle Richtung erklärt.

Um unsere Gedanken zum finalen Design zu verdeutlichen, können wir auf Farben, Bilder, Worte und Texturen zurückgreifen, die unseren angedachten Stil oder unser Thema illustrieren. Zentral sind dabei unsere vorherige User Research und der Austausch mit dem Kunden, um die Gewohnheiten und Erwartungen der Nutzer zu treffen.

In der Regel sollten drei Ansätze für Moodboards ausreichen, um eine geeignete Designsprache mit dem Kunden abzustimmen.

Style Guide

Der Style Guide fasst alle verwendeten Designelemente zusammen. Ein Style Guide sollte detailliert genug sein, damit auch ein Dritter ohne vorherige Einweisung anhand des Dokuments in der Lage ist, Elemente in der gleichen Designsprache anzufertigen. Der Style Guide umfasst folgende Elemente:

Farbpalette: Sie stellt die im Projekt verwendeten Farben dar, erläutert deren Verwendung und veranschaulicht durch Illustrationen die korrekte Kombination und Anwendung der Farben. Eine sinnvolle Farbpalette besteht in der Regel aus sechs bis acht Farben, die sich aus Primär-, Sekundär- und Tertiärfarben sowie ihren Tönen und Schattierungen zusammensetzen.

Markenzeichen: Diese umfassen alle Symbole, Elemente und Bilder, die zur Wiedererkennung einer Marke dienen. Besonders wichtig ist das Logo, dessen korrekte und einheitliche Verwendung im Style Guide detailliert beschrieben sein sollte.

Typografie: Der Style Guide sollte alle Formen der verwendeten Typografie darstellen und ihre korrekte Verwendung erklären. Dazu gehören gewählte Schriftarten, Schriftstärken, Abstände und Schriftgrößen. Für jeden Verwendungszweck und jede Eventualität sollte eine passende Lösung aufgeführt sein. Mehr zur korrekten Nutzung von Typografie erfährst du in meinem Artikel Typografie: Ein häufiger unterschätzter Faktor im digitalen Design.

Raster: Der Style Guide sollte das zu verwendende Raster enthalten, inklusive Abstände, Ränder und Bruchpunkte für responsives Design. Auch ein alternatives Raster für mobiles Design sollte bereitgestellt werden. Der Artikel Rastersysteme: Der Grundstein für ansprechendes und strukturiertes Design beschäftigt sich näher mit der korrekten Verwendung des Rasters.

Component Library: Diese beinhaltet die verwendeten Illustrationen, Icons, Buttons und sonstige grafische Elemente, um eine einheitliche Darstellung und korrekte Nutzung sicherzustellen.

Design System: Für besonders komplexe Projekte oder große Kunden kann ein regulärer Style Guide nicht ausreichen. Hier kommt das Design System ins Spiel. Es handelt sich um ein umfangreiches Dokument, das alle Komponenten in allen Zuständen im Detail definiert. Da Design Systeme sehr komplex sein können, werde ich diesem Thema einen eigenen Artikel widmen.

Mockup

Im Mockup fügen wir alle bisherigen Überlegungen zusammen. Ein Mockup ist ein detaillierter Prototyp, der das finale Aussehen unserer Produkte identisch wiedergibt. Inhalte sind detailliert ausgearbeitet und befinden sich am vorgesehenen Platz, das ausgearbeitete Raster wird exakt eingehalten, und alle Designelemente werden entsprechend des Style Guides eingesetzt.

Mittels eines Prototyping Tools können wir unser Mockup mit interaktiven Funktionen ausstatten. Dieser bedienbare Prototyp eignet sich ideal, um ein Gefühl für die Usability unseres zukünftigen Produkts zu erhalten. In einem gut strukturierten Designprojekt sollte bei jedem wichtigen Meilenstein getestet werden, um Verbesserungen schnell und unkompliziert einarbeiten zu können.

Der Mockup-Prozess bietet die Möglichkeit, Design und Interaktion in Funktion zu erleben. Bevor wir in die technische Umsetzung gehen, können wir durch Tests prüfen, ob Nutzer ein gutes Verständnis für die Bedienung entwickeln und ob die visuelle Gestaltung tatsächlich die geplante Wirkung erzielt.

Da wir uns hier noch in der virtuellen Umgebung des Prototyping Tools bewegen, können Verbesserungen schnell umgesetzt werden. Sobald wir das Coding beginnen, sind Änderungen nur noch sehr viel aufwändig möglich.

Testing

Testing stellt einen wichtigen Bestandteil des Designprozesses dar. Alle Erfahrung kann nur einen Annäherungswert an die wahren Bedürfnisse der Nutzer liefern. Um zu verstehen, was funktioniert, müssen wir Nutzer mit dem Produkt interagieren lassen und beobachten, welchen Hindernissen sie begegnen. Während Debatten darüber, was die Leute mögen, Zeit verschwenden und die Energie des Teams aufzehren, entschärfen Usability-Tests die meisten Argumente, indem sie die Diskussion hin zu der Frage lenken, was funktioniert und was nicht.

Coding

Im finalen Schritt kann der Prototyp in funktionsfähigen Code übertragen werden. Da wir den Nutzer zu diesem Zeitpunkt bereits genau kennen und die Bedienung sowie die visuelle Gestaltung an seine Bedürfnisse angepasst haben, können wir unsere Erkenntnisse in ein finales Produkt überführen.

Die Umsetzung kann entweder direkt in der entsprechenden Programmiersprache erfolgen oder, insbesondere im Webbereich, mit Hilfe einer Vielzahl zur Verfügung stehender Webdesign-Tools.

Direkte Code-Implementierung: Persönlich würde ich immer dazu raten, auf unnötige Umwege zu verzichten und das Projekt in möglichst schlankem Code umzusetzen. Auch wenn einige Tools ein sehr hohes Niveau erreicht haben, ist ihre Verwendung doch immer mit Kompromissen verbunden. Da wir bei Tools letztendlich immer innerhalb eines vorgegebenen Baukastens agieren, sind unsere Individualisierungsmöglichkeiten beschränkt. Möchten wir von den angebotenen Vorlagen abweichen, ist das teils nur mit erheblichem Aufwand möglich.

Flexibilität und Performance: Gerade größere Erweiterungen sind in den Tools häufig nur mit größtem Aufwand möglich, während wir individuellen Code flexibel ergänzen können. Auch bezüglich Ladezeiten und Ressourceneffizienz ist ein sauberer, individueller Code im Vergleich zu den aufgeblasenen Dateien, die die Tools erzeugen, immer im Vorteil.

Betreuung

Am Ende des Coding-Prozesses und des zugehörigen Testings können wir unserem Kunden das finale Produkt übergeben. Damit endet der klassische Designprozess, unser Projekt muss aber noch nicht abgeschlossen sein.

Langfristige Betreuung: Eine langfristige Betreuung kann häufig ähnlich wertvoll sein wie die ursprüngliche Erstellung der Anwendung. Durch langfristige Analyse der Nutzung unseres Produkts und durch Beobachtung des Marktes können wir Trends erkennen und gegebenenfalls Verbesserungen anbieten.

Kontinuierliche Anpassung: Schließlich gibt es in der digitalen Welt nie so etwas wie die finale Version: Ansprüche unserer Nutzer ändern sich und Mitbewerber bringen neue Produkte auf den Markt. Da ein Produkt nur erfolgreich sein kann, wenn es auch gefunden wird, ist es wichtig, die SEO auf dem neuesten Stand zu halten. Durch die Aktualisierung von Inhalten und technische Anpassungen können wir sicherstellen, dass unser Produkt auch langfristig relevant bleibt. Dieser Artikel setzt sich detaillierter mit SEO auseinander SEO: Der Schlüssel zu mehr Sichtbarkeit und Erfolg im Web

Abschließende Gedanken

Das digitale Design folgt einem dynamischen und kreativen Prozess, der uns von der anfänglichen Idee bis zum finalen Produkt führt. Dieser Prozess ermöglicht uns ein tiefes Verständnis der Nutzer und des Marktes, um Produkte zu schaffen, die nicht nur funktional, sondern auch emotional ansprechend sind.

Ein erfolgreiches Produkt ist nicht nur ansprechend gestaltet, sondern orientiert sich an den wahren Bedürfnissen unserer User. Durch eine enge Zusammenarbeit mit unseren Kunden stellen wir sicher, dass wir Anwendungen erhalten, die sowohl heute als auch in Zukunft erfolgreich sind.