Der Webdesign-Workflow | Teil 2 der Blogserie

Nach einer Reise zurück in die Vergangenheit im ersten Teil der Webdesign-Blogserie und einigen begrifflichen Klärungen, steigen wir in Teil 2 in die Besonderheiten des Webdesigns ein, betrachten das Thema Responsive Webdesign und landen schließlich bei Werkzeugen und Software, die in unserer Digitalagentur für den Webdesign-Workflow zum Einsatz kommen.

Webdesign vs. Printdesign

Der erste große Unterschied im Design von digitalen Angeboten gegenüber gedruckten Medien ist das vorgegebene Format im Print. Ein Plakat, ein Flyer, ein Katalog, eine Printanzeige etc. wird stets in einer festen metrischen Größe angelegt und exportiert. Deutlich komplexer ist die Darstellung auf unterschiedlichen Monitoren mit unterschiedlich vielen Bildpunkten. So werden Webinhalte seit einigen Jahren adaptiv bzw. responsiv gestaltet. Hierbei passen sich die Inhalte dem jeweiligen Endgerät dynamisch an. Das resultiert darin, dass Textgrößen für unterschiedliche Geräte anders dargestellt, Bilder in unterschiedlichen Formaten geladen, und Inhaltselemente anders angeordnet werden (mehr siehe Abschnitt: Responsives Webdesign).

Ein weiterer großer Unterschied ist die Lebendigkeit des Webdesigns. So können GIFs (animierte Bilder), Videos, Ton und grafische Animationen und Effekte maßgeblich das Design einer einzelnen Webseite prägen. Diese Möglichkeiten bietet Print nicht.

Als besondere Anforderung gilt im Webdesign wiederum die Auflösung eines Monitors mit seinen Bildpunkten. So können Schriftarten, die im Print gut aussehen, unter Umständen an einem Monitor unleserlich und verpixelt erscheinen. Ebenso muss berücksichtigt werden, dass Farben geräteabhängig teilweise sehr unterschiedlich dargestellt werden. Bei einem Druckmedium kann vorab durch einen eindeutigen Farbproof die Darstellung getestet werden.

Die Nutzer-Interaktion mit digitalen Medien unterscheidet sich in der Regel deutlich zu der mit Printmedien, da hier oftmals mit Ausnahme des Umblätterns einer Seite nicht wesentlich interagiert wird. Vor allem die Schnelllebigkeit im Konsum digitaler Angebote unterscheidet beide Formate. Natürlich gibt es Szenarien, in denen sich ein Nutzer bewusst ein Online-Magazin auf sein Tablet lädt und dies in Ruhe durchstöbert. Häufig steht jedoch die digital erfasste Information in unmittelbarer Konkurrenz zu einem vergleichbaren Angebot, das nur einen Klick entfernt liegt.

In vielen Fällen dient der Browser in erster Linie als Werkzeug, um ein konkretes Bedürfnis zu befriedigen („Ich suche einen Ort…“, „Ich möchte etwas kaufen…“, „Wie funktioniert das…“). Somit müssen digitale Angebote besonders schnell einen Ãœberblick geben, klar machen, dass genau sie die relevanten Informationen und Mehrwerte liefern.

Living Styleguides vs. klassische Styleguides

Basis für beide Designwelten sind Leitfäden, die den Designern Orientierung und klar abgesteckte Gestaltungsrichtlinien bzw. -freiräume aufzeigen. Ziel sind eine unverwechselbare Markensprache und Konsistenz. Dies führt ebenso beim Nutzer zu einer besseren Orientierung und Wiedererkennbarkeit. Der klassische Styleguide für den Printbereich legt fest, welche Typografie verwendet wird, welche Farben eingesetzt werden, wie das Logo zu verwenden ist und wie die Bildsprache sein sollte. Darüber hinaus wird teilweise noch etwas detaillierter beschrieben, wie z.B. Anzeigen oder Verpackungen aufgebaut sein sollten.

Für die dynamische digitale Welt gibt es verschiedene Begriffe für einen solchen digitalen Styleguide. So ist u.a. die Rede von Living Styleguide, Design Systeme, Design Patterns, Pattern Library oder Frontend Styleguide. Während der konventionelle Styleguide für Druckerzeugnisse also auch konventionell gedruckt wird oder in einer PDF-Datei auch im Netz zu finden ist, sind Living Styleguides auf Basis von Code in lebendiger Form als Webseiten dokumentiert. Zahlreiche Beispiele dafür finden sich u.a. auf styleguides.io. So bietet der Open-Source Style Guide von IBM alleine über 200 Unterseiten auf www.carbondesignsystem.com, die bis in das kleinste Design-Detail definieren, wie sich z.B. die Checkboxen in einer gefilterten Tabelle verhalten sollen, wenn mehrere Filter ausgewählt wurden.

Auch wir arbeiten mit Web-Styleguides als Basis für das Site-Building. Im Rahmen der Umsetzung für das Projekt Mobau Wirtz Claasen haben wir dies dokumentiert und hier als Pattern Library bezeichnet.

Atomic Design – Die Chemie des Webdesigns

Kern – im wortwörtlichen Sinne – des Design-Systems ist das Atomic Design. Dessen Prinzip ist die Aufspaltung vollständiger Webseiten auf ihre kleinsten Design-Bausteine; die Atome. Dies sind z.B. einfache Texte neben Formularfeldern, Buttons, oder auch Schriftarten. Die Atomic Design Methode geht auf Brad Frost zurück. Er unterteilt in fünf Design-Ebenen und bietet so die Möglichkeit eines hierarchisch strukturierten Aufbaus von Design-Systemen, mit denen Designer orts- und zeitunabhängig so an Projekten arbeiten können, dass langfristig Designstandards eingehalten werden und gleichzeitig der dahinter liegende Code für eine einheitliche Programmierung des Quellcodes sorgt.

Wie das dann konkret aussieht? Fließtext, Ãœberschriftenstil, Bildformat, oder ein Link – all diese kleinsten Elemente stellen Atome im Webdesign dar. Kombiniert man nun Atome, entsteht ein Molekül, z.B. in Form eines Teaser-Elements. Werden nun mehrere Teaser kombiniert zusammen mit Ãœberschrift und Button, so wird hieraus ein Organismus. Werden mehrere Organismen zusammengeführt, entsteht ein fertiges Template. Echte Inhalte im Produktivsystem machen schließlich aus einem Template eine echte Seite.

Was ist Responsives Webdesign?

Atomic Design und darauf aufbauende Design Systeme ermöglichen die Qualitätssicherung für das heutige responsive Webdesign. Der Begriff “Responsive Web Design“ kam erstmals 2010 auf, drei Jahre nach Markteintritt des ersten iPhones. Ethan Marcotte (laut seiner Website: „Der Kerl, der das ganze Responsives-Design-Ding gestartet hat“) beschrieb in einem Artikel auf A List Apart, das Webdesign im Unterschied zu architektonischem Design oder auch Printdesign nicht von starren Rahmen wie Grundmauern oder Seitenbögen begrenzt ist. Zugleich ist Webdesign wesentlich schnelllebiger als Architektur, die Jahrzehnte oder Jahrhunderte überdauert.

Die Notwendigkeit eines flexiblen, adaptiven Designs ergibt sich daraus, dass Webdesign Hard- und Software-unabhängig funktionieren muss: also egal ob der Nutzer via Maus, Tastatur, Gamepad oder Touch-Eingabe interagiert, egal ob er die Website über Desktop-PC, Laptop, Tablet, Smartphone oder Spielekonsole abruft, und egal ob er dabei über den Internet Explorer, Safari, Firefox oder Chrome surft.

Die Realisierung von responsivem Design ist ein Zusammenspiel von drei wesentlichen Elementen:

Media Queries
Die Website erstellt eine Abfrage, in welchen Dimensionen sie gerendert wird. Dabei werden Breakpoints (Umbruchmarken) definiert, bei denen sich das Layout umstellt, also von einer breiteren in eine schmalere Version wechselt und umgekehrt. So kann sichergestellt werden, dass die Inhalte einer Website auf einem 4‘‘ Smartphone ebenso bedienbar und lesbar sind, wie auf der 50-fachen Screen-Fläche eines 27‘‘ Monitors.

Fluide Grids (Layout-Raster)
Wie sich Wasser seinen Weg durch enge und breite Stellen bahnt, so passen sich Inhaltselemente flexibel an Bildschirmgrößen und -auflösungen an. Dies trägt nicht nur der reduzierten Bühne auf einem kleinen Smartphone-Screen Rechnung, sondern kann im Gegenzug genauso auf eine vollflächige Darstellung auf einem riesigen 4k Display einzahlen.

Variable Inhaltselemente
Alle Devices basieren auf einem Grundraster, das passgenau befüllt werden kann. So rutschen Elemente bei schmalerem Raster untereinander, die vorher nebeneinander dargestellt wurden. Damit die Layout-Raster auch passgenau befüllt werden können, muss der Content – also Menüinhalte, Überschriften, Absatztexte, Grafiken, Tabellen usw. so gestaltet sein, dass er sich dem Layout anpassen kann. Das bedeutet, dass sich insbesondere Bilder in ihrem Format und in ihrer Größe anpassen können müssen.

Wie ist der Webdesign-Workflow?

Natürlich arbeitet nicht jeder Designer oder jede Agentur immer nach der gleichen Methodik. Auch die Größe des Digitalprojekts bestimmt wesentlich über die Komplexität des Workflows. Bei PPW werden digitale Projekte in der Zusammenarbeit von Konzeptern, Frontend-Designern und Grafikern kreiert. Dabei greifen sie auf verschiedene Methoden und Werkzeuge zurück, die letztlich alle einem zentralen Zweck dienen. Sie sollen die Anforderungen der Marke bzw. des Auftraggebers mit den Wünschen des Nutzers in einem durchdachten und konsequenten Design übereinbringen.

Mit welchen Tools und Methoden arbeitet ein Webdesigner?

Um einen Überblick über die zahlreichen Methoden und Werkzeuge der Webdesigner zu erhalten, hangeln wir uns chronologisch an der Entstehung eines Webprojekts entlang.

1) Beratungsphase (Wettbewerbsanalyse, Recherche, Strategie)

In der ersten Projektphase werden im engen Austausch zwischen Agentur und Kunde je nach Komplexität mit einem oder mehreren Workshops zunächst die Anforderungen erhoben. Wer sind die zentralen Wettbewerber? Wie will sich die Marke positionieren? Welche digitale Strategie will man verfolgen? Eine mögliche Methode ist hierbei das Design Thinking, bei dem sich Menschen unterschiedlicher Disziplinen in einem iterativen Prozess einem konkreten Problem widmen. Dabei gilt es zunächst zu beobachten und zu verstehen, dann in kurzer Zeit Lösungen hierzu zu entwickeln, ggf. schnell zu verwerfen, zu optimieren und auf der Basis von Feedback-Regeln so häufig zu kreativeren Ideen zu kommen, als ohne diesen intensiven und strukturierten Austausch.

Aus Design-Sicht wird in dieser Phase über Designwünsche, Farbvorstellungen und vor allem über die Zielgruppe gesprochen. Sie zu verstehen ist für funktionierendes Design unabdingbar.

Eingesetzte Methoden in der Beratungsphase: Workshops, Brainstorming, Card Sorting, Persona-Methode, Customer Journey Mapping, User Research, Design Thinking

2) Konzeptionsphase

Nach gemeinsamer „Kompass-Justierung“ erfolgt zunächst die Grobkonzeption, die in einer Präsentation resultiert. Hier wird z.B. die Informationsarchitektur erarbeitet und über Moodboards erfolgt eine Annäherung an Farbwelt, Bildsprache und Emotion/Tonalität. Websites sind keine Einbahnstraßen: Über User Flow Visualisierungen wird veranschaulicht, welche Wege Nutzer auf der Website nehmen und an welchen Stellen sie deshalb Orientierungshilfen benötigen.

Nach der ersten Feedbackrunde erfolgt die Feinkonzeption samt einer Umsetzung eines Prototyps. Die Feinkonzeption mündet erneut in einen Präsentationstermin zur Freigabe. Da es sich um einen iterativen Prozess handelt, endet jedoch die Konzeption hier nicht, sondern begleitet das Projekt weiterhin. Sie führt weiterhin Anpassungen durch und findet gemeinsam mit den Entwicklern in der Realisierungsphase Lösungen für die technische Umsetzung.

Eingesetzte Methoden in der Konzeptionsphase: Scribbles, Wireframes, Click-Dummies, User Flow, Moodboards, Prototyping

3) Realisierung

In der Realisierungsphase arbeiten die Frontend-Designer und -Entwickler in enger Abstimmung mit den UX-Konzeptern und UI-Designern an der technischen Realisierung des Feinkonzepts. Die Backend-Entwickler implementieren das Content-Management-System, programmieren Erweiterungen, verknüpfen etwaige Datenbanken oder stellen sonstige Schnittstellen her. In dieser Phase entsteht zudem der Living Style Guide.

4) Testphase

Sind die Frontend- und Backendarbeiten abgeschlossen, erfolgt vor Livegang immer eine Testphase. Spätestens hier ist der Zeitpunkt für User Tests. Auf Basis eines Usability Tests können Stolpersteine identifiziert und entfernt werden. Selbstverständlich sind an dieser Stelle Responsivitäts-Tests Standard in der Qualitätssicherung.

Eingesetzte Methoden in der Testphase: Usability Test, Responsivitätscheck

5) Livegang

In einem agilen Projektvorgehen ist nach dem Livegang vor dem Livegang. Auf Basis von Nutzerfeedback, Webanalyse oder von veränderten Anforderungen supporten, optimieren, erweitern und fixen Backend-Entwickler, Frontend-Designer, Content-Strategen und deren Kollegen die Projekte ihrer Kunden.

Infografik zum Webdesign-Workflow und den Webdesign Methoden

Mit welcher Software arbeitet ein Webdesigner?

Während der beschriebenen Projektphasen arbeiten Webdesigner mit einer Vielzahl an Methoden. Zugleich kommt eine breite Software-Palette ins Spiel. Hier eine Aufstellung der am häufigsten zum Einsatz kommenden Software, die das PPW Webdesigner-Team in seinem Workflow nutzt – natürlich gibt es in der Regel gute Alternativen am Markt, insofern ist diese Liste selbstverständlich nicht als Must-have für jeden Webdesigner zu verstehen:

• Sketch: Hier erfolgt ein Großteil der Konzeptions- und Kreativarbeit. Angefangen beim Kästchen bis hin zum durchgestalteten Screen. Von Wireframes (Grobkonzept, Low-Fidelity Prototype) über Feinkonzept (High-Fidelity Prototype) bis zum finalen Design, samt der Darstellung von Klickpfaden. Zudem dient der in Sketch gebaute Prototyp für z.B. User Testing und als Ãœbergabepunkt an die Entwickler.
• Abstract: Größter Vorteil: Alle Beteiligten in Konzeption und Design arbeiten zusammen an Dateien – auch wenn es nun eine Beta-Version von Sketch Teams gibt. Versionen werden erstellt, Veränderungen werden für andere sichtbar, man kann kommentieren und so Feedback abfragen oder Anforderungen direkt an Komponenten dokumentieren. Die Frontendler können hier den Inspect Mode nutzen und sich Farben, Abstände und andere Werte raussuchen. Dazu kann man gewünschte Screens in Collections zusammenstellen und sie per Screensharing dem Kunden gebündelt zeigen.
• PowerPoint: Am Microsoft Office Paket kommen auch Webdesigner nicht ganz vorbei. Für Kundenpräsentationen von Zwischenständen und Entwürfen und zur Ãœbergabe von z.B. UI Kits ist PowerPoint weiterhin ein nützliches Werkzeug.
• Miro: Hier handelt es sich um ein digitales Whiteboard, an dem virtuell Post its verschoben werden können. Ideal für ein ortsunabhängiges Brainstorming. Auch eine Videokonferenz ist möglich.
• Xmind: Für Brainstormings auf Mindmap Basis und für das Erstellen von Sitemaps ein simples aber sehr nützliches Tool.
• Confluence, Excel, OneNote: Auch an schnöden Textprogrammen kommt ein Webdesigner nicht ganz vorbei. Um eine saubere Anforderungsdokumentation zu gewährleisten, arbeiten wir in Workshops mit OneNote und sichern im Anschluss alle Inhalte via Confluence oder auch in Excel. In Excel werden zudem Redaktionspläne erstellt oder User Test Auswertungen zusammengefügt.
• Adobe Photoshop, Illustrator: Früher erfolgte teilweise mit diesen Adobe Programmen noch Konzeptionsarbeit. Heute dienen die Programme bei uns ausschließlich zur Bearbeitung und Erstellung von Grafiken, Fotos und Icons.

In Teil 3 der Serie schauen wir uns die aktuellen Webdesign-Trends an.