Konzept und Design von Webseiten, Web-Apps und Mobilen Apps

Mein Angebotsspektrum

Als Designerin mit langjähriger Erfahrung in kleinen und großen Projekten habe ich ein umfangreiches Spektrum an Methoden und Tools, mit denen ich das beste Ergebnis für Ihr digitales Projekt erziele. Der hier beschriebene Workflow umfasst das gesamte Spektrum meines Angebotes. In einzelnen Projekten können weniger Arbeitsschritte nötig sein, abhängig davon, was bereits an Vorarbeit vorhanden ist, oder wie ehrgeizig Ihr Ziel ist.

Kontaktieren Sie mich bitte wegen eines individuellen Angebotes, das auf Ihr Vorhaben passt!

Hinweis: die hier beschriebenen Arbeitsschritte können alle in Projekten zum Einsatz kommen, die nach dem Wasserfall-Modell geplant und umgesetzt werden. Sie können jedoch auch in iterativen Sprints in agilen Scrum-Projekten eingesetzt werden.

Evaluation Ihres Bedarfs

Darstellung einer Dialogsituation

Gemeinsam besprechen wir in einem Workshop, was Ihre Ziele sind. Welcher Branche Sie angehören, welche Branche Sie ansprechen möchten, wer Ihre Zielkunden (B2B oder B2C) sind.

Im Idealfall befragen wir Ihre potentiellen Nutzer, um sie nach den Methoden des menschzentrierten Gestaltungsprozesses von Anfang an einzubeziehen. Zu diesem Zweck führen wir z.B. teilstrukturierte Interviews mit Vertretern Ihrer Nutzer durch um mehr über ihre Bedürfnisse und Erwartungen, aber auch über aktuelle Frustthemen zu erfahren. Dadurch erhalten wir wertvolle Informationen und realistische Einblicke.

Nicht nur Ihre primären Nutzer, auch Ihre sekundären Nutzer, die Ihr System pflegen und betreuen, sollten in diesem Prozess zu Wort kommen.

Mit Ihren Entwicklern spreche ich die technischen Möglichkeiten im Projekt ab. Ich hole Informationen über Frameworks ein, die bei der Umsetzung zum Einsatz kommen sollen. Diese wirken sich zum Teil auf die Wartbarkeit, Contentpflege, SEO-Optimierungen, häufig vor allem auch auf die Barrierefreiheit aus.

Dokumentation der Erkenntnisse

Schematische Darstellung einer Persona: Portraitbild und Beschreibung

Aus Ihren Informationen, den Interviews, Marktbeobachtungen etc. konsolidiere ich für Sie die folgenden Arbeitsgrundlagen für das weitere Vorgehen:

Auswertung und Ableitung der nötigen Handlungen

Eine Sprechblase mit einem Fragezeichen und drei kleine mit jeweils einem Ausrufezeichen

Aus den Erkenntnissen der Evaluation und der Aufbereitung der Daten leite ich die Handlungsanweisungen für die Design-Phase ab. Dabei entstehen unter anderem Dokumente mit dem folgenden Inhalt:

Konzeptphase

In der Konzeptionsphase wird zunächst festgelegt, wie die User Journey Map der bisherigen Lösung in Zukunft aussehen soll. Wo soll sich was verändern? Wie und an welcher Stelle kann die Interaktion der Nutzer mit dem System oder – sofern im Projekt enthalten – auch mit zusätzlichen Geräten – optimiert werden?

Für die Informationsstruktur kann die Card-Sorting-Methode helfen, um festzulegen, welche Inhalte in welcher Kategorie zusammengefasst werden. Dafür werden (digital oder analog) Karten mit Überbegriffen zu den geplanten Inhalten erstellt und idealerweise von potentiellen Nutzern so sortiert, dass sich eine logische Sortierung nach ihren mentalen Modellen ergibt.

Die letzte Phase der Konzeption – aber auch die längste – ist die Erstellung eines Prototypen. In seiner minimalsten Form kann ein Low-Fidelity-Prototyp bereits eine lose Blattsammlung mit Skizzen des digitalen Produktes sein. Im Gegensatz zu Wireframes sollte ein Prototyp bereits interaktiv sein. Je nach Budget und eingesetztem Tool kann es sich dabei um einfache Verlinkungen, oder bereits fertig simulierte Funktionalität handeln.

Von einem High-Fidelity Prototypen wird gesprochen, wenn dieser bereits gestaltet wurde, auch wenn das Design an dieser Stelle noch nicht final ist.

Designphase

Blatt Papier und Pinsel

Je nachdem, ob Sie schon ein Logo und ein weiter ausgearbeitetes Corporate Design haben oder nicht beginnt die Designphase entweder mit der Entwicklung des Corporate Designs, oder mit der Adaption Ihres Brand-Styleguides für das neue Produkt.

Dabei können unterschiedliche Zwischenschritte zum Einsatz kommen:

Das Ziel ist das High-Fidelity Screen-Design – das finale Design mit den geplanten Funktionalitäten, die zuvor in den Wireframes geplant und positioniert worden sind. Für responsive Webseiten enthält dieses in der Regel mehrere Darstellungen der Keyscreens (wichtige Seiten-Templates) in mehreren Screenbreiten, z.B. für:

Wichtig ist, dass alle benötigten Module enthalten sind. Außerdem sollte sich an den Screens das Verhalten der Seite beim Verändern der Bildschirmbreite ablesen lassen. Weitere Ausführungen dazu können jedoch noch im Styleguide festgehalten werden.

Zu den Feinarbeiten im Design gehört auch die Gestaltung von Icons. Diese beginnt in der Regel mit dem Finden der richtigen Icon-Metapher: Was soll das Icon darstellen? Welche Form ist gut in verschiedenen, auch sehr kleinen Größen zu erkennen? In welchem Stil sollen die Icons final dargestellt werden? Für diese Frage muss auch die Umsetzungstechnik geklärt werden: Icons, die als SVG (Scalable Vector Graphic) oder per CSS (Cascading Style Sheets) animiert werden sollen können nur bedingt optische Effekte enthalten.

Ein wichtiger Aspekt ist bei Apps die Gestaltung des App-Icons, das im App-Store neben den gezeigten Screens den ersten Eindruck beim Nutzer prägt. Über dieses Icon im Menü öffnet der User die App später und hilft ihm auch, die App im Task-Switcher zwischen verschiedenen geöffneten Apps schneller wieder zu finden.

Bei Webseiten und Web-Apps übernimmt das Favicon diese Aufgabe: Es wird je nach Browser im Reiter oben angezeigt, als Lesezeichen-Icon im Browser, oder auch auf den Home-Bildschirmen von mobilen Geräten angezeigt.

Abgleich des Designs mit den Anforderungen

Liste von Checkboxen, von denen eine abgehakt wurde

Ein wichtiger Schritt im menschzentrierten Gestaltungsprozess ist der (immerwährende) Abgleich des bisher gestalteten Produktes mit den zuvor spezifizierten Anforderungen.

Styleguide und Umsetzungs-Anweisungen

Smartphone mit Zahlen von denen Zeigestöcke auf bestimmte Stellen hinweisen

In der einfachsten Form wird ein Styleguide für die Entwickler aus dem Design-Programm heraus erstellt. 
Tools wie Zeplin geben hierfür die Farben, Schriftstile und Elementbeschreibungen für die jeweilige Umsetzungstechnik aus. 

Was diese Tools jedoch noch nicht können: spezielle Codebausteine mit anführen, die z.B. dafür sorgen dass die gezeigte Darstellung nur für ein bestimmtes Media Query gelten soll. An dieser Stelle ergänze ich den nötigen Info-Text und gerne auch den Link auf die dahinter liegende oder einzusetzende Umsetzungstechnik.

Ich verstehe mich als Mittlerin zwischen der graphischen und der Technischen Welt. Mein Leitsatz: Die Umsetzungstechnik mit ihren Finessen zu kennen ist eine notwendige Voraussetzung für gutes Design und optimal umgesetzte Usability.

Annika Brinkmann, Oktober 2019

Speziell ausgezeichnet werden müssen außerdem Anweisungen für die Optimierung der Barrierefreiheit.

Begleitung der Entwicklungsphase

Stricknadeln und Maschen: Alles wird zusammengefügt

Wenn alles abgestimmt und spezifiziert ist übernehmen die Entwickler, die sich in der Regeln auf eine der vielen Umsetzungstechniken spezialisiert haben – zum Beispiel: 

Ich begleite diesen Prozess auf Wunsch durch Reviews des Entwicklungsstandes und Tests, ob das Design korrekt umgesetzt wurde.

Live-Gang Ihres Projektes

Mit dem Live-Gang Ihres Projektes habe ich in der Regel nicht mehr direkt was zu tun. Abgesehen davon natürlich, dass ich diese frohe Tatsache verkünden und Ihr Projekt auf meiner Webseite dokumentieren mag!

Aufhören muss unsere Zusammenarbeit an diesem Punkt jedoch noch nicht, denn es gibt noch viel zu tun: