Design

Initial Interview

Besprechung der erarbeiteten Ergebnisse aus dem Consulting und ihrer Bedeutung für die gestalterische Umsetzung. Falls vorher kein Consulting stattgefunden hat, muss in Erwägung gezogen werden, trotz evtl. vorhandenem Design, zumindest einen kurzen beraterisch motivierten Consulting-Call anzusetzen, der Ziele und Intention klarer macht. Folgend eine Liste, die die wichtigen Punkte für diesen Abschnitt zusammenfasst:

• Projektziele: intern definierte Ziele für das Projekt
• Nutzendenbedürfnisse: extern hergeleitete Ziele für das Projekt; evaluiert durch Nutzendenbefragung und -feedback, Zielgruppenanalyse, etc. -> ethno-, techno- und psychografische Perspektiven berücksichtigen.
• inhaltliche Anforderungen: welche Art von Information / Inhalt soll, basierend auf den Bedürfnissen der Zielgruppe, dargestellt werden und wie?
• funktionale Anforderungen: welche Features muss das Projekt haben, um die inhaltlichen Anforderungen zu erfüllen oder deren Zweck zu unterstützen?
• Umfang: was soll erstellt und umgesetzt werden?
• Launching: wann soll das Projekt fertig sein und online gehen? -> wichtige Information für Budget- und Projektplanung
• Welche gestalterischen Ideen, Skizzen oder Stimmungen haben die Auftraggebenden bereits?
• gibt es bereits Content, mit dem gestaltet werden kann?

Konzeptbrainstorming

Sehr freie Phase, in der, auf Grundlage der im Initial Interview definierten Parameter, verschiedene Konzeptideen erstellt werden. Dies sollte in schnellen Skizzen oder Stichpunkten erfolgen und einen Umfang von ca. 5 bis 6 verschiedenen Designs haben, die in kurzer Zeit erstellt werden.

Evaluation des Konzepts

Basierend auf den definierten Zielen wird der Konzeptentwurf ausgewählt, der diese Ziele am ehesten erfüllen kann. Hier können dann auch Teile anderer Konzeptideen mit eingearbeitet werden. Es ist in dieser Phase noch nicht wichtig, wie das Design genau aussieht (Farben, Schrift, etc.), sondern es geht hier um die grobe Definition des Konzeptes und etwaige Wege, wie dies visualiert werden kann. Auch Notizen zur technischen Umsetzung sind hier natürlich möglich. Wichtige Aspekte, die hierbei beachtet werden sollten sind:

• der strukturelle Flow des Projektes (User Flow): wie komme ich von Seite A nach Seite B? Ist das klar und deutlich? Ist der Flow strukurell accessible -> beeinträchtigte oder ältere Personen mitdenken!
• visuelle Sprache
• Budget

Wireframes

In diesem Schritt wird nun das generelle Konzept und der Flow des Projektes, der im vorherigen Schritt erarbeitet wurde, in mehreren Skizzen ausgearbeitet, um zu definieren, wie Nutzende mit der Seite interagieren. Diese rudimentären Skizzen nennt man Wireframes. Bewusst werden in diesen Bilder oder Videos nur als schraffierte Fläche, Text nur als Linien und andere Elemente als einfache Boxen dargestellt. Hierbei soll so klar wie möglich verdeutlicht werden, wo sich die Navigation befindet, wie ich den Inhalt ansteuere, wie ich zurück zur vorherigen Seite komme und wo sich in diesen Situationen jeweils der Inhalt befindet, etc. Ein wichtiges zu beachtendes Konzept ist hier auch das navigation design, das meistens in diesem Schritt festgelegt wird. In diesem geht es um eine möglichst intuitive Steuerung durch die Seiten und des Inhalts.

Um diesen Prozess zu unterstützen, kann man sich sogenannte User Tasks überlegen. Also Navigationsaufgaben, die relativ häufig vorkommen, bspw. Wie gelangt ein:e User:in von der Startseie zum Formular auf der Unterseite von About und wieder zurück?

Informationsdesign

Dieser Schritt ist als eine Art Weiterdenknen der Wireframes zu verstehen. Hier können verschiedene Ansätze exploriert werden, ähnlich dem Brainstormen anfangs zu eigentlichen Konzept. An dieser Stelle würde man nun, besonders bei grossen Projekten, mit einem ersten User Testing beginnen. Das bedeutet konkret, dass man die Wireframes als klickbaren Dummy aufarbeitet und diesen live am Computer oder dem Handy erfahrbar machen kann. Hier gibt es spezielle Designsoftware dazu, bspw. Axure (opens new window). Wichtig wäre hier nochmal die Recherche zu freier OpenSource-Software.

Anschliessend werden Menschen die oben genannten User Tasks gestellt und diese müssen dann diese Aufgaben lösen. Je klarer die Struktur von Inhalt und Navigation, desto schneller und verständlicher erreichen die Testenden ihr Ziel. Hierbei kann man sie laut denken lassen und das aufnehmen oder im Anschluss Fragen zur Erfahrung stellen.

Am Ende dieses Schrittes sollte eine klare Strategie zum User Flow herausgearbeitet werden.

Erste Entwürfe

Hier werden nun erste Entwürfe des ausgewählten strukturellen Flows erstellt. Besonderes Hauptaugenmerk liegt hier auf dem Prinzip vom Grossen ins Detail, denn wichtig ist in desem Schritt, erst einmal die übergeordnete visuelle Sprache zu finden. Leitfragen, die zum Start helfen können, sind:

• wie sind Elemente genau angeordnet?
• welche visuelle Hierarchie unterstützt den Informationstransfer meiner Zielgruppe am ehesten?
• wie ist die generelle Grundstimmung der Seite? Wie sollen sich Nutzende beim Bedienen fühlen? Welches Gefühl unterstützt den Informationstransfer und wie kann das mittels gestalterischer Methoden erzielt werden?
• welche Farben und Schriften könnten verwendet werden (-> Nachhaltigkeitsprinzipien und Acessibility (opens new window) im Hinterkopf behalten)

Evaluation des Konzepts

Basierend auf den Designzielen des Projektes wird aus diesen Entwürfen eines ausgewählt, welches diese bestmöglich erfüllt. Wenn es nötig ist, kann dieses, wie oben bereits beschrieben, aus mehreren Teilen der anderen Entwurfsideen zusammengesetzt werden und dann nnoch einmal angepasst und verfeinert werden.

Dieser finale Grobentwurf wird dann mit den Auftraggebenden besprochen, um etwaiges Feedback im nächsten Schritt zu berücksichtigen und gleichzeitig für Klarheit und Transparenz zu sorgen.

Verfeinerung des Konzepts

In diesem Schritt wird nun ein detailliertes Design entwickelt, welches den ausgewählten Entwurf möglichst ausführlich darstellt. Hierzu zählen nicht nur Dinge wie finale Anordnung der Elemente, Schriftgrössen und Abstände über mind. mobile und desktop-Screengrössen hinweg, sondern auch ausgewählte Farben nach dem WCAG Contrast Checker (opens new window), sauber exportierte Icons, bereitgestellte Schriftdateien und Transitions + Animations. Wichtig sind hier, gerade wenn sich um edge cases handelt, mit der Prgrammierung Rücksprache zu halten, um unnötige Arbeit zu vermeiden und zusammen zu einer nachhaltigen Lösung zu kommen.

Abnahme des Designs

Besprechung des fertigen Entwurfs mit den Auftraggebenden. Wichtig ist hier, ein Tool für den Feedback Loop zu benutzen, der zugänglich für alle Beteiligten (Auftraggebende, Gestaltende, Programmierende) ist. Hierzu gibt es bspw. Adobe XD (kann auch online ohne Account betrachtet werden) oder Pastel (opens new window).