Konzept und Design von Webseiten, Web-Apps und Mobilen Apps
Mein Angebotsspektrum
Inhaltsverzeichnis
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
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
Aus Ihren Informationen, den Interviews, Marktbeobachtungen etc. konsolidiere ich für Sie die folgenden Arbeitsgrundlagen für das weitere Vorgehen:
- Benutzergruppenprofile – Zusammenstellung der Merkmale Ihrer Nutzer
- Aufgabenmodelle – Liste der Funktionalitäten die Ihr digitales Projekt umfassen soll
- Ist-Szenarien – Beschreibung der aktuellen Situation Ihrer Nutzer
- Personas – fiktive, aber realistische Nutzer Ihres Angebotes
- User-Journey-Maps – Tabellarische Beschreibung der Touchpoints ihrer Nutzer mit bisherigen Lösungen
Auswertung und Ableitung der nötigen Handlungen
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:
- Die Erfordernisse, die das Produkt erfüllen muss
- Die Nutzungsanforderungen werden aus den Erfordernissen abgeleitet: was muss vorhanden sein, damit der Nutzer erkennt wie er bzw. sie eine erforderliche Handlung erkennen und ausführen kann?
- Das Soll-Szenario, das entstehen soll wenn das Produkt genutzt wird. Speziell im Abgleich mit dem Ist-Szenario wird der Mehrwert, der für den Nutzer erreicht werden kann, erkennbar.
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
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:
- Moodboard – eine Collage von Farben, Formen, Schriften, die die Grundlage für die späteren Gestaltungselemente bilden können.
- Style-Tile – eine von Samantha Warren entwickelte Designvorlage, die Gestaltungselemente konkreter als ein Moodboard darstellt.
- Mock-ups – erste Screens, die konkrete Gestaltungselemente wie auf der Webseite darstellen, jedoch noch nicht die Funktionalitäten enthalten
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:
- kleine Smartphones (320 Pixel Breite)
- große Smartphones (ca. 375 bis 420 Pixel Breite)
- Smartphone-Screens im Querformat (zwischen 480 und 640 Pixel Breite) – zumindest die Module die hierfür optimiert werden sollten.
- Tablet-Screens im Hochformat (768 Pixel ist hierfür ein klassisches Format)
- Tablet-Screens im Querformat (1024 Pixel) – für Touch-Screens optimiert
- Kleine Laptop-Monitore (1024 Pixel) – für die Bedienung mit der Maus und Tastatur optimiert (mehr dazu später im Beitrag über Barrierefreiheit).
- Mittelgroße Bildschirme (ca. 1280 Pixel)
- Große Bildschirme (ca. 1920 Pixel) – wenn speziell angefordert
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
Ein wichtiger Schritt im menschzentrierten Gestaltungsprozess ist der (immerwährende) Abgleich des bisher gestalteten Produktes mit den zuvor spezifizierten Anforderungen.
Styleguide und Umsetzungs-Anweisungen
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
Wenn alles abgestimmt und spezifiziert ist übernehmen die Entwickler, die sich in der Regeln auf eine der vielen Umsetzungstechniken spezialisiert haben – zum Beispiel:
- HTML, CSS, JavaScript, PHP bzw. spezielle Frameworks und Content-Management-Systeme – für Webseiten und Web-Apps
- Swift, C++ – für native iOS-Apps
- Kotlin, Java – für native Android-Apps
- Flutter, PhoneGap und Co. – für Cross-Plattform-Entwicklung
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:
- SEO – Suchmaschinen-Optimierung – das Ranking einer Webseite kann immer verbessert.
- Social Media-Kanäle sind mit Grafiken und Texten zu bestücken. Hier gilt es, Formate, einen Stil für Bildmaterial und Texte festzulegen. Gerne erstelle ich hier Vorlagen für Ihr Team.
- Optimierungen – je nach Projekt und zeitlichem Vorlauf zum Launch können bestimmte Aspekte nach hinten gestellt werden, die es jetzt nachzurüsten gilt.