Der Webdesign-Workflow | Teil 2 der Blogserie

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).

Webdesign versus Printdesign

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.

Atomic Design als Methode im Webdesign-Workflow
Atomic Design – nach Brad Frost: https://bradfrost.com/blog/post/atomic-web-design/

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.

Responsive Webdesign
Responsives Webdesign am Beispiel von ppw.de

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

Infografik Webdesign Konzeption bis Livegang - Methoden und Techniken

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.