Der Webdesign Workflow – die 6 Schritte zu einer modernen Website

Letztes Artikel-Update: 24. Juni 2022

Der Workflow der Webseitenerstellung hat sich in den letzten Jahren dank des responsiven Webdesigns entscheidend geändert. Dieser Artikel zeigt den neuen responsiven Workflow auf und erklärt Strategien.
4.8
(138)

Responsive Webdesign ist zum Standard geworden. Keine neue Website, kein Relaunch, der nicht responsiv umgesetzt wird. Aber der Weg dahin, der Workflow, ist unterschiedlich. Teils noch geprägt durch „alte Strukturen“, teils weil es einfach so viele Möglichkeiten gibt, eine moderne Website zu erstellen.

Dieser Artikel will nicht DEN Weg zeigen, eine responsive Website zu erstellen, sondern einen effektiven Weg. Einen Workflow, der sich bewährt hat und den immer mehr Agenturen und Webdesigner umsetzen.

Zuerst möchte ich aufzeigen, wie früher Websites erstellt wurden und dann wie sich der Ablauf bei modernen Websites geändert hat:

Der alte Webdesign-Workflow

Der klassische Workflow stammt aus der Zeit vor dem responsive Webdesign, als für bestimmte Viewports und feste Raster gestaltet wurde. Der Ablauf sah im Einzelnen meistens folgendermaßen aus:

1. Planung / Konzeption

Die Website wird geplant. Ziele, Zielgruppen usw. werden definiert und die Inhalte zusammengetragen.

2. Scribbles / Wireframes

Anhand der Ideen und Inhalte werden dann erste Skizzen und Entwürfe erstellt.
Mal per Hand, mal als digitale Wireframes.

Erfahre hier mehr zur Erstellung von Wireframes.

3. Design

Anhand der Scribbles, der Wireframes wird dann das Layout der Website in einem Grafikprogramm (wie Sketch, Adobe XD oder Photoshop) gestaltet.

Auf jeden Fall wird das Design pixelgenau gestaltet. Der Kunde erhält die einzelnen gestalteten Seiten als Bildgrafik zur Abnahme.

4. Technische Umsetzung / Programmierung

Nach der Freigabe der einzelnen Layouts durch den Kunden werden die Designs in HTML, CSS & Co. umgesetzt. Hierbei wurde vor allem darauf geachtet, dass das Design 1:1 umgesetzt wird, auch möglichst pixelgenau und in allen Browsern gleich aussehend. Nicht selten, dass Kunden genau auf diese „Gleichheit“ besonders geachtet haben.

5. Abnahme und Launch

Nach eventuellen Korrekturen wird die fertige Website abgenommen und online gestellt. Fertig.

Der klassische Webdesign-Workflow
Der „alte“ Workflow: Die einzelnen Disziplinen werden nacheinander abgearbeitet.

Eine Tätigkeit folgt auf die andere, Berührungspunkte zwischen den Disziplinen gab es lediglich bei der Übergabe oder an der Kaffeemaschine.

Der Ablauf ist linear. Erst müssen die Planung und die Inhalte fertig sein, dann geht es an das Design. Erst muss das Design fertig ausgestaltet sein, bevor es „programmiert“ wird. Es erfolgt ein Schritt nach dem anderen, klar voneinander getrennt.

Vorteile des klassischen Workflows

Dieser lineare Workflow hat deshalb funktioniert, weil die surfende Zielgruppe recht klare Voraussetzungen hatte. Es gab sicherlich immer schon unterschiedliche Monitore, aber eine minimale Bildschirmgröße gab den Rahmen vor, den die meisten erfüllen konnten, dazu saßen sie am Schreibtisch vor dem Desktop-PC.

Dazu kam, dass der Designentwurf und die fertige Website statisch waren. Und so war der alte Workflow auch deshalb „beliebt“, weil für den Webdesigner/-programmierer und den Kunden alle Schritte gut nachzuvollziehen waren. Die einzelnen Disziplinen (Konzeption, Design und Technik) konnten gut getrennt voneinander arbeiten, einer nach dem anderen kam zum Zuge, die Arbeitsschritte waren klar getrennt.

Und der Kunde konnte zuerst eben ein eindeutiges Design sehen und wusste genau, wie seine fertige Website aussehen wird.

Der alte Workflow – im mobilen Web unbrauchbar

Die Einführung des iPhones im Jahr 2007 wird gerne als Beginn des mobilen Internets bezeichnet. Über die Jahre haben die mobilen Endgeräte sich so verbreitet, dass die oben beschriebene Kernzielgruppe so nicht mehr existiert. Besucher betrachten mit unzähligen unterschiedlichen Geräten und damit auch unterschiedlichen Viewports die Website.

Eine statische Website sieht dann bei sehr großen Monitoren verloren aus. Auf eher kleineren Monitoren wird die Website verkleinert dargestellt und man muss zoomen, um die Inhalte lesen zu können. Teilweise erscheint ein horizontaler Scrollbalken oder die Inhalte sind horizontal verdeckt.

Ungünstiges Zoomen
Ungünstig: Die Website wird zu klein dargestellt und die Inhalte sind kaum erkennbar. Nach dem Heranzoomen muss man die Inhalte dann horizontal scrollen.

Egal, welcher dieser Fälle auftritt, ein statisches Layout, das für eine feste Breite gestaltet und umgesetzt wurde, ist hier natürlich denkbar ungeeignet.

Will man also den alten Workflow für die neuen Rahmenbedingungen anpassen, hieße das nicht mehr nur einen Entwurf für eine fixe Breite zu gestalten, sondern mehrere unterschiedliche Breiten zu definieren und für diese unterschiedliche Entwürfe zu gestalte, z.B. kleine und große Desktop-Ansichten und jeweils eine Tablet- und eine Smartphone-Version in Portrait- und Landscape-Modus):

Unterschiedliche Viewports

Diese für einzelne Viewports optimierten Designs müssten dann einzeln abgenommen und umgesetzt werden. Als Ergebnis hätte man dann nicht eine statische Seite, sondern mehrere, die eben für unterschiedliche Viewports erstellt wurden.

Ein kleines Rechenbeispiel:
2 Designentwürfe
5 Seitentypen
3 Break-Points
= 30 PSD-Dateien
Das ist noch ein eher bescheidenes Beispiel. Man kann sich leicht ausrechnen, was bei deutlich komplexeren Websites mit mehr Seitentypen und mehr Breakpoints für ein Aufwand entstehen würde.

Bei Änderungswünschen müsste dann nicht eine Ansicht, sondern immer mehrere angepasst werden, was schnell in einem enormen zeitlichen Mehraufwand und Mehrkosten enden würde.

Und wird statt für eine feste Breite für mehrere optimiert, bleiben doch weiterhin unzählige Breiten unbeachtet.

Dazu macht sich spätestens hier der große Nachteil von statischen Design-Entwürfen negativ bemerkbar: Sie sind eben statisch und nicht dynamisch. Und solche Aspekte wie Animationen, Interaktionen lassen sich damit nicht wirklich gut simulieren.

Kurz zusammengefasst:
Der lineare Workflow ist für das mobile Web und responsive Websites ineffizient!

Neue Anforderungen und eine andere Vorgehensweise

Aus diesem Grund hat sich nun das responsive Webdesign (abgekürzt RWD) durchgesetzt. Also ein flexibles Design, das verschiedene (alle) Viewports berücksichtigt. Doch mit einem Grafikprogramm lässt sich dieser Flexibilität nicht vernünftig beikommen. Fixe, pixelgenaue Designs sind nicht mehr praktikabel und nicht mehr wünschenswert.

Diese Veränderung betrifft aber nicht nur die pixelschubsenden Designer. Ein responsiver Workflow betrifft alle am Projekt beteiligten. Denn es geht nicht nur darum, Designs jetzt nicht mehr pixelgenau umzusetzen und flexibel darzustellen, es geht viel mehr um das große Ganze.

Responsive design is not about mobile. It’s not about tablets. It’s not about desktops. It’s about The Web.
Jeremy Keith

Responsive Webdesign

Ein responsiver Workflow beginnt schon mit der Konzeption und bezieht regelmäßig alle am Projekt beteiligten ein. Im Idealfall arbeiten Entwickler, Designer und Konzepter von Anfang an zusammen. Eventuell vereinen sich die drei Tätigkeits­bereiche in einer Person.

Und dann ist da noch der Kunde. Er wartet (ja, manchmal auch heute noch) auf bunte Photoshop-­Designs im JPG- oder PDF-­Format.

Hier helfen Erklärung und Aufklärung! Die Bedeutung responsiver Webseiten und veränderter Arbeitsabläufe müssen erklärt werden. Sicherlich nicht in allen Einzelheiten. Den Kunden interessieren (meistens) keine Breakpoints und er muss sie auch nicht kennen. Er muss die Bedeutung für seinen Nutzer kennen. Dieser soll die Seite hinterher nutzen (können), egal, wo und wie und mit welchem Gerät. Responsive Webdesign ist dafür gemacht, dem Endanwender die Nutzung der Webseite in jeder Situation zu ermöglichen und zu erleichtern.

Content first

Zur Aufklärung gehört, dem Kunden klarzumachen, dass die Inhalte das Wichtigste sind, dass diese am besten vor dem De­sign und der Umsetzung feststehen (nicht unbedingt alle Texte bis ins Letzte ausformuliert, aber zumindest deren Art, Bedeutung, Umfang und benötigter Platz).

Der Kunde muss und soll dann nicht mehr auf Bilddateien warten, sondern kann recht früh im Browser die Entstehung der Website mitverfolgen. Dies legt den Schwerpunkt weg vom rein ästhetischen Empfinden einer Bilddatei hin zu der Interaktion mit der Website und den Inhalten.

Durch den veränderten Ablauf wird häufig der Kundenkontakt intensiver. Regelmäßigere Abstimmungen und weniger „böse“ Überraschungen bei den „großen“ Abnahmen sind das Ergebnis, wenn der Kunde bei vielen Entscheidungen früher dabei ist und die Zwischenergebnisse verfolgen und Einfluss nehmen kann.

Aus der Praxis
Regelmäßig habe ich die »Dis­kussion« über den Projektablauf:
Erst das Design, dann die Umsetzung oder das Design bei der Umsetzung. Und es hat sich gezeigt, wenn zuerst das Design gestaltet wird (manchmal – ganz selten – tatsächlich noch ausführlich im Grafikprogramm, weil Kunde und Agentur es so möchten), wird viel Zeit und Arbeit in »Pixel«­-Details gesteckt. Bei der techni­schen Umsetzung und der Betrachtung im Browser sind dann aber meistens all diese Details unwichtig. Der Kunde kann kli­cken und achtet auf andere Sa­chen, aber kaum noch auf die ihm vorher ach so wichtigen Design-­Aspekte.

Der neue Webdesign Workflow

Die „Lösung“, um den Workflow für responsive Websites anzupassen, besteht darin, den Ablauf aufzubrechen und schon möglichst früh mit der technischen Umsetzung zu beginnen. Es ist ein agiler Ablauf, der auch iterativ genannt wird.

Das bedeutet, dass der Workflow in kleinen Schritten gegangen wird. Zwischendurch werden die einzelnen Schritte immer wieder besprochen und getestet und so lange wiederholt, bis das Ergebnis zufriedenstellend ist und zum nächsten Schritt gegangen werden kann.

Im Einzelnen kann ein klassischer responsiver Workflow folgendermaßen aussehen:

1. Projektrahmenbedingungen

Zuerst sollten die Rahmenbedingungen des Projektes festgelegt werden. Dazu gehört unter Umständen auch, dem Kunden den folgenden Ablauf zu erklären und ihm zu verdeutlichen, wie sich Design und die technische Umsetzung sprichwörtlich gemeinsam entwickeln.

Die Entscheider auf Kundenseite werden festgelegt, damit klar ist, wer später einzelne Schritte abnimmt. Man einigt sich zudem auf die wichtigsten Geräte und Browser, die später vollumfänglich getestet werden und auf die benötigten Breakpoints (also die Stellen, an denen das Design/die Inhalte ihr Aussehen bedeutend ändern können).

Design-Aspekte werden besprochen, also ob es optische Vorgaben gibt, ob ein Moodboard vorhanden ist oder erst entwickelt werden muss.

Da es keine, oder zumindest nicht mehr so viele eindeutige klare Zwischenergebnisse gibt, kann es sein, dass der Vertrag auch eher „agil“ sein muss. Also unter Umständen auch flexibel, was den Zeitrahmen und den Aufwand betrifft.

Mitarbeit des Kunden
Nicht selten, dass Kunden den Aufwand der Erstellung einer Website unterschätzen. Und zwar nicht nur den Aufwand beim Auftragnehmer, sondern auch ihren eigenen.

Ja, der Kunde sollte, besser muss, mitarbeiten. Er sollte nicht nur den Projektstartschuss geben und ab und zu ein paar Designs absegnen. Beim responsiven Workflow muss er regelmäßig aktiv mitarbeiten. Klar, das sollte eigentlich auch unabhängig von der Art des Workflows sein, damit man sich kontinuierlich austauschen und die Richtung abgleichen kann. Beim responsiven Workflow ist dies aber eben besonders notwendig.

Dies sollte man dem Auftraggeber zu Beginn des Projektes, am besten schon vor Auftragserteilung, klarmachen. Nicht wenige Projekte, die sich verzögern und (fast) alle aus einem Grund: Der Kunde muss noch liefern (Inhalte, Feedback).

2. Konzeption / Content Strategie

Nach dem Motto „Content first“ werden zuerst die Inhalte (sofern vorhanden) gesammelt, bewertet und gegliedert. Es wird eine Art Inhalts-Inventur durchgeführt. Dabei wird deutlich, wo noch Inhalte erstellt werden müssen. Hier müssen die Ziele der Website, die Unternehmensziele und die Erwartungen und Bedürfnisse der Zielgruppe sowie deren Nutzungsverhalten berücksichtigt werden.

Aufgrund der Inventur ergeben sich dann Seiten-Strukturen, so dass die Navigationen festgelegt werden können.

Nicht selten wird dabei der Inhalt für den kleinstmöglichen Viewport erstellt/optimiert („Mobile First“) und dann bei Bedarf für größere Geräte mit Inhalten und Funktionalitäten erweitert.

3. Wireframes – Die Content Choreographie

Aufgrund der Inhaltsanalyse können Wireframes erstellt werden, um so die Inhaltsstruktur der einzelnen Seiten herauszuarbeiten und die Grundlage für die Umsetzung zu haben. Bei Wireframes geht es nicht um gestalterische Aspekte wie Farben oder Typografie, sondern alleine darum, welche Position die Inhalte auf der Seite einnehmen sollen.

Dabei wird für jeden wichtigen Breakpoint ein Wireframe erstellt, um die wichtigen Änderungen der Inhaltsdarstellung zu visualisieren.

Content Choreographie
Die Content Choreographie zeigt an, wie sich die Inhalte über einzelne Breakpoints verändern.

4. Prototyp – die technische Umsetzung

Aufgrund des Wireframes kann der erste interaktive Klickdummy mit HTML und CSS erstellt werden. Der Prototyp verdeutlicht die Struktur, die Flexibilität und die gesamte Funktionalität der Website. Der erste Prototyp ist noch nicht fein ausgearbeitet. Hier geht es erstmal darum, die Semantik, die Struktur und die Funktionalitäten der Website testen zu können, was ein großer Vorteil gegenüber einem statischen Entwurf in einem Grafikprogramm ist.

Da hier noch keine Gestaltung vorhanden ist, können eventuelle Korrekturen schnell vorgenommen werden und haben noch keine Auswirkungen auf das Design, was doppelte Korrekturen vermeidet.

Wenn der Prototyp in allen Testszenarien zufriedenstellend läuft, kann das Design entwickelt werden.

Am lebenden Objekt
… nenne ich das gerne. Im Gegensatz zu statischen Entwürfen läuft der Prototyp im Browser und passt sich bereits an verschiedene Displaygrößen an.
So kann er in unterschiedlichen Situationen mit unterschiedlichen Eingabe-/Bedienungsgeräten und auf unterschiedlichen Displays und mit verschiedenen Ausrichtungen eines Geräts (z. B. Hoch- oder Querformat) in verschiedenen Browsern getestet werden.
Aus statischer Theorie wird lebendige Praxis…
Mit ersten Website-Prototypen kann man Funktionen und Bedienbarkeit auf unterschiedlichen Geräten schon frühzeitig testen.
Mit ersten Website-Prototypen kann man Funktionen und Bedienbarkeit auf unterschiedlichen Geräten schon frühzeitig testen.

Eine Devise des responsiven Workflows ist es, so früh wie möglich im Browser anzufangen. Es muss nicht mehr zwingend ein (pixelgenaues) Design abgewartet werden, wenn die (grobe) Inhaltsstruktur und gewünschten Funktionen feststehen.

Je früher mit der technischen Umsetzung begonnen wird, umso eher wird Korrekturbedarf erkannt und umso eher kann man die Website auf verschiedenen Systemen testen und optimieren.

5. Design – Look & Feel erarbeiten

Anders als beim alten Workflow wird nicht gleich ein vollständiges, fein ausgearbeitetes Design entworfen, sondern es werden nach und nach einzelne Elemente ausgewählt und gestaltet.

Damit der Designer nicht völlig im „luftleeren“ Raum gestalten muss, kann er Hilfsmittel wie Moodboards oder Stylescapes einsetzen. Beide dienen dazu, die optische Richtung und die gewünschte Wirkung der Website zu visualisieren, nicht aber das fertige Design.

Die Stilrichtung kann auch schon iterativ mit dem Kunden parallel besprochen und entwickelt werden. Und wenn man sich zusammen für einen Stil entschieden hat, kann dieser nach und nach auf den voll funktionsfähigen Prototypen übertragen werden.

Stylescapes:
Style Tiles sind im Grunde eine Art wesentlich konkreteres Moodboard. Hier werden alle relevanten grafischen Elemente der Website zusammengefasst. Dazu können Typo, Bilder, Icons, Farben, Buttons usw. gehören.

Hiermit lassen sich recht schnell verschiedene Stilrichtungen entwerfen, die sich gut vergleichen lassen. Entscheidend ist, dass es eben nur eine Designrichtung ist und kein fertiges Layout.

Erfahre hier mehr zu den Stylescapes

Der Webdesign Workflow – die 6 Schritte zu einer modernen Website 1
Ein Stylescape gibt die visuelle Richtung ziemlich konkret vor.

6. Testen und Besprechen

Der Prototyp wird nun von den Entwicklern und Designern (manchmal ist auch beides in einer Person vereint) ausgearbeitet. Es wird in verschiedenen (vorher festgelegten) Browsern und Geräten ausführlich getestet und optimiert.

Inhalte (Menge, Verhältnis, Umbruch, Hierarchie), Design, technische Funktionalität und das Verhalten der interaktiven Elemente sind die „Prüfungskriterien“.

Die Kommunikation im responsiven Webdesign Workflow.

Design und Code werden parallel entwickelt und der Prototyp durchläuft nun normalerweise diverse Korrekturschleifen. Dieser Prozess wiederholt sich so lange, bis die Website fertig ist.

Mit dem Auftraggeber werden in einzelnen Zwischenschritten nach und nach alle Komponenten erarbeitet und besprochen. Es findet also eine Art regelmäßiges „Dreiergespräch“ statt. Die Kommunikation wird hier zu einem ganz entscheidenden Erfolgsfaktor.

Durch die schon geleistete Vorarbeit ist der Aufwand für das Testing nun deutlich kleiner und es müssen weniger „große“ Zwischenergebnisse freigegeben werden, die lange besprochen werden müssen, sondern eher viele kleinere Schritte.

Hier ist aber eben eine gewisse Flexibilität möglichst bei allen Projektbeteiligten notwendig, damit spontane Änderungen und Erkenntnisse einfließen und umgesetzt werden können.

Keine Seiten designen, sondern Komponenten
Es geht darum, keine vollständigen Seiten mehr zu gestalten, sondern einzelne Module. Eine moderne Website besteht aus vielen verschiedenen Komponenten, die zusammen das Design bilden: Navigationen, Inhaltsfelder, Slider, Buttons, Formulare usw.
All diese Komponenten werden gestaltet und in unterschiedlichen Zusammenstellungen auf den einzelnen Seiten eingesetzt.
Dieses Vorgehen nennt sich Atomic Design, da die einzelnen Inhaltselemente aus einzelnen „Atomen“ zusammengesetzt sind.
Die Elemente des Atomic Designs
Die Elemente des Atomic Designs am Beispiel der Instagram-App.
Atomic Design Methodology

Der Prototyp wird nach und nach ausgearbeitet und zu einer vollständigen Website. Technik, Inhalte und Design können also quasi „am lebenden Objekt“ ergänzt, getestet und optimiert werden.

Für den Kunden liegt darin ein großer Vorteil:
Er muss nicht mehr am Ende „eine große Seite“ abnehmen, sondern kann immer wieder Zwischenstände ansehen, testen und bewerten. Dieser sog. iterative Prozess verhindert, dass (zu) lange in eine falsche Richtung entwickelt wird. Er ist damit effizienter, die Abstimmung und Kommunikation untereinander wird damit aber noch mehr zu einem entscheidenden Erfolgsfaktor des Projektes.

4. Abnahme und Launch
Nach der endgültigen Abnahme durch den Auftraggeber erfolgt eine eventuelle Einpflegung des Frontend-Gerüstes in ein Content Management System und die Onlinestellung.

Responsiver Webdesign Workflow
Konzeption, Design und Technik arbeiten „Hand in Hand“ und entwickeln Prototypen, die regelmäßig getestet werden. Wie bei einer Waschmaschine werden die einzelnen Abläufe „durchgeschleudert“ bis sie fertig sind.

Der große Unterschied ist, dass bei diesem responsiven Ablauf die technische Umsetzung wesentlich früher erfolgt. Die konkrete Anwendung, die Interaktion des Anwenders, kann so viel früher überprüft und angepasst werden.

Responsive Strategien – Vorgehen bei der Umsetzung eines responsiven Webdesigns

Das Vorgehen, um eine responsive Website zu erstellen, ist mit dem oben aufgezeigtem Workflow nicht zwangsläufig einheitlich. Es gibt sehr unterschiedliche Vorgehensweisen und sehr unterschiedliche Vorstellungen, was denn responsiv überhaupt genau ist. Nicht jeder meint immer das Gleiche damit. Und vor allem das Ziel, eine responsive Webseite umzusetzen, kann sehr unterschied­liche Ergebnisse hervorbringen.

Bei der Erstellung einer responsiven Website gibt es im Grunde zwei Wege:
von groß nach klein oder umgekehrt.

Graceful Degradation – Desktop first

Von einem großen Bildschirm ausgehend wird die Website mit vollem Funktionsumfang erstellt. Nach und nach wird sie dann für kleinere Auflösungen optimiert und bei Bedarf inhaltlich und funktionstechnisch „abgespeckt“.

Dieses Vorgehen entspricht dem altbekannten Vorgehen und ist leichter nachzuvollziehen.

Graceful Degradation
Eine schematische Darstellung von Graceful Degradation.
Zuerst wird für große Bildschirme und moderne Browser entwickelt.

Progressive Enhancement – Mobile first

Den umgekehrten Weg beschreitet die progressive Verbesserung (englisch Progressive Enhancement). Hier wird mit einer möglichst kleinen Auflösung und einem „schwachen“ System angefangen (wenig Bildschirmfläche, langsamere Datenübertragung und potenziell stärker abgelenkte Nutzer im Vordergrund).

Schrittweise wird die Website dann für größere Auflösungen und „stärkere“ Systeme erweitert. Hier können dann komplexere Technologien und Layouteigenschaften zum Einsatz kommen.

Dieses Vorgehen ist herausfordernder, aber eigentlich zeitgemäßer, denn hier stehen von Anfang an die Inhalte im Vordergrund (Content first).

Progressive Enhancement
Eine schematische Darstellung von Progressive Enhancement.
Von Mobile first wird die Seite nach und nach für größere und modernere Geräte erweitert.

Erkenntnisse des Workflows und der Strategie im Responsive Webdesign

Anforderungen an den Workflow im responsiven Webdeisgn

Der Wandel des Webs bringt einen Wandel des Prozesses mit sich. Die Herausforderungen, die der Wechsel zu einem responsiven Workflow mit sich bringt, sind dabei nicht zu unterschätzen:

  • Die Anforderungen an die Projektbeteiligten steigen. Projektmanager, Konzepter, Designer und Entwickler müssen Hand in Hand arbeiten, sich einbringen und ergänzen. Websiteerstellung wird immer mehr zur Teamarbeit (was es eigentlich schon immer war).
  • Sind all die Tätigkeiten in einer Person vereint, dann besteht sicherlich kein Abstim­mungsbedarf (außer nach wie vor mit dem Kunden), aber die Anforderungen sind für einen Einzelnen sicherlich größer.
  • Auch der Kunde muss flexibler werden, mehr mitarbeiten, sich über Inhalte (und damit über die Ziele, Zielgruppen, Inhalte seiner Webseite) frühzeitig Gedanken machen, was ja grundsätzlich nicht verkehrt ist.
  • Design und Code sollten parallel bearbeitet und entwickelt werden. Das Ergebnis ist eine größere Einheit.
    Und die alte Designformel „form follows function“ findet nun Anwendung, da Design, Funktionen und die Struktur den Anforderungen des Inhalts folgen.

Diese Veränderungen sind vermutlich auch ein Grund dafür, warum sich dieser neue Workflow nach Jahren immer noch nicht flächendeckend durchgesetzt hat (wenn er es denn über­haupt jemals tun wird).

Nicht nur die Website, auch der Workflow, Arbeitnehmer und Auftraggeber müssen flexibler werden.

Die Ergebnisse eines responsiven Workflows sprechen im Idealfall aber für sich – in Form einer Website, die ihre Anwen­der glücklicher macht, weil sie in allen erdenklichen Situationen zugänglich und gut bedienbar ist.

Es gibt eigentlich keine sinnvolle Alternative zu dem responsiven Workflow. Designer, Entwickler, Agenturen und Kunden mussten und müssen dabei immer wieder umdenken. Die Anforderungen und Arbeitsabläufe haben sich verändert. Nicht nur an die Auftragnehmer, auch an die Auftraggeber.

Kunden sind jetzt eher Partner, mit denen man konstruktiv und regelmäßig zusammenarbeiten muss und darf.

Bewertungsergebnis: 4.8 / 5. | Anzahl der Bewertungen: 138

Kommentare zum Artikel

24 Kommentare zu „Der Webdesign Workflow – die 6 Schritte zu einer modernen Website“

  1. Hallo Martin,

    mal wieder ein großartiger Artikel, für Leihen und deren besseres Verständnis (gute Aufklärungsarbeit deinerseits!).

    Aber auch für unseres Gleichen, von denen – ich unterstelle – viele bereits responsive oder adaptable Design basierte Webprojekte nach dem „Rapid-Prototyping“ Verfahren umsetzen.

    Diese Art der Projektumsetzung spart Auftraggebern nicht nur Geld, sie bindet sie sehr früh in den Prozess „NEUE WEBSEITE MACHEN“ ein. Fördert dadurch meiner Ansicht nach auch deren Verstand und Weitblick für die Sache.

    Auf unserer Seite hingegen spart es Zeit (manchmal gewaltig), steigert im Einzelfall sogar den „Profit“ (ein wenig) und sorgt unterm Strich dafür, dass „Deadlines“ nicht nur realistisch und haltbar sind sondern am Ende dann tatsächlich auch gehalten werden.
    Ich denke, du erlebst das in deiner Agenturpraxis (hahnsinn) ähnlich.

    Ich hatte vor kurzem einen Präsentationstermin bei einem Kunden aus dem Baugewerbe. Was wie aussehen soll (Navi, Contentstruktur & Design, ausgeblendete Elemente ab einem bestimmten Breakpoint, usw.) war vorher schon besprochen.

    Der Dienst (Basis: WP- mit einem Premiumtheme) wurde zum ersten Mal einem größerem Mitarbeiter Team präsentiert. Alle waren begeistert, bis auf eine Dame – die einfach ein Problem mit einer Vertikal-Navigation hatte. Und dies mit Worten zum Ausdruck brachte … die ein wenig unfair waren. Aber egal.

    Womit niemand der Anwesenden gerecht hat, dass ich so reagiere: Ist ein Argument, sehen wir es uns doch einfach „schnell“ mit einer Horizontal-Navigation an.

    Ich habe mich eingeloggt, das Ganze über die entsprechenden Theme-Options umgestellt und gezeigt.

    Der „Chef“ brachte den Spruch … na, das ist ja was. Da hätten wir vorher 3 Wochen drauf warten müssen … etc.

    Im Endeffekt hat die Kriterien verstanden, warum wir die Vertikale gewählt haben und hat dies dann auch Kund getan – wertschätzend. Mit dem Spruch (den du Martin sicherlich schon sehr oft gehört hast) „naja, sie sind ja die Profis, ich bin nur Leihe“.

    Meine Antwort darauf war: dieser Internetdienst ist nicht für Profis gemacht, sondern für Leihen. Genau deshalb sind uns solche Feedbacks sehr wichtig.

    Soviel zum Effekt des „Rapid-Prototyping“.

    VG
    Andreas

    1. Hallo Andreas,
      freut mich, dass Dir der Artikel gefällt.
      Und danke für dein anschauliches Beispiel aus Deiner Praxis.
      Gruss
      Martin

      1. Hallo Martin,

        gerne geschehen. Ich danke dir für den großartigen Artikel.

        Vielleicht gestattest du mir hier ganz offen die Frage:
        Wie stehst du den Themen KI (im Webdesign) und „der Beruf Webdesign im Wandel“ gegenüber?

        Bei jemanden wie dir gehe ich davon aus, dass du dich mit „Websitebutler“, „thegrid“ & Co. schon beschäftigt hast, wahrscheinlich auch mit dem „Watson“ Projekt (IBM).

        Weiter vermute ich, dass du „Rukzuk“ (von Seitenbau) ebenfalls kennst. Jenes („ultimative“) design-CMS, bei dem Flyeralarm (damals) als Aktionär einstieg und ordentlich Werbung dafür machte – für eine gewisse Zeit. Jetzt wurde daraus die Sparte „FLYERALARM Creatives“ 🙂 -> die meisten davon arbeiten glaube ich eher mit WordPress und Typo3, evtl. auch mit Contao … aber nicht mit rukzuk.

        Ich meine jedenfalls: Noch müssen wir uns keine großen Sorgen machen, dass wir „ausgedient“ haben. Dass wir als Dienstleister wachsam sein müssen, ist klar.

        Vor kurzem hatte ich zu einem Freund Kontakt, der seit längerer Zeit als Informatiker / Entwickler im Valley lebt und arbeitet. Was der mir erzählt hat, hat mir schon ein wenig „Bauschmerzen“ bereitet. Die Chatbot-Technologie der nächsten Generation soll nicht nur schnell und gezielt einem User gute Antworten geben können … diese soll wohl auch die Fähigkeit besitzen, Content (Textinformationen und Bilder mit Metabeschreibungen) individuell formatiert über ein Webinterface ausgeben zu können – personalisiert, klar … und das schon bei Erstkontakt.

        Gruss
        Andreas

        1. „Noch müssen wir uns keine großen Sorgen machen, dass wir „ausgedient“ haben. Dass wir als Dienstleister wachsam sein müssen, ist klar.“
          -> Ja, das sehe ich auch so! Vor einigen Monaten hatte ich ja über den Status quo im Webdesign geschrieben.
          Aber der – meiner Menung nach – gute aktuelle Zustand des Webdesigns udn für Webdesigner wird vermutlich nicht ewig halten. Dazu muss man das Thema Digitalisierung nur ein bisschen verfolgen (ich kann u.a. die Richard David Precht Vorträge/Videos dazu sehr empfehlen).
          Momentan „verdränge“ ich die Entwicklung noch ein bisschen. Denn wenn es so kommt, wie nicht wenige Experten vorausssagen, dann stehen nicht nur Webdesigner, sondern auch noch verdammt viele andere Tätigkeiten und Branchen vor großen Umbrüchen, bzw. werden obsolet…
          Und dann? Dann wird sich die Gesellschaft eh andere Antworten übrlegen müssen (Bedingungsloses Grundeinkommen kann eines sein, wird aber nicht alle Probleme lösen können).

          Was man aktuell „dagegen“ machen kann? Keine Ahnung, ich merke aber in meiner Webdesigner-Praxis, dass es sich immer mehr wandelt vom reinen Umsetzer zum Berater. Kunden haben „größere“ Probleme, als die reine Website: Wie tritt mann online auf, welche sozialen Netzwerke braucht man, welche Inhalte werden benötigt? usw.
          Das kann evtl. ein Weg sein, um sich auch längerfristig (also auch in 10, 20 Jahren) ein Einkommen zu sichern. Weniger der reine gestalterische, technische Webdesigner, sondern mehr „Stratege“ – Vielleicht ist das dann aber auch überflüssig 😉

  2. Hi Martin,

    es ist auf jeden Fall mal ein interessanter Ansatz, den ich vielleicht beim nächsten Projekt mal austesten werde. Der alte (mein aktueller) Workflow muss auf jeden Fall früher oder später ersetzt werden.

    Das Problem ist meistens, dass viele kleine Kunden keine Wireframes lesen können, bzw. nicht die Vorstellungskraft haben, was hinterher raus kommen soll. Aber das Problem hat man wohl bei allen Varianten.

    Zum Artikel: Wieder mal Wow! Man erhält wirklich fundiertes Wissen und es ist kein Content Füller nur damit man mehrere Artikel auf dem Blog hat.

    1. Hallo Daniel,
      ja, die Vorstellungskraft bzgl. Wireframes ist bei Kunden nicht immer gegeben…
      Hier hilft nur aufklären, erklären und evtl. ein paar Beispiel zeigen…
      Alternativ ist das parallele Präsentieren von Moodboards hilfreich, damit Kunden eben auch was „visuelles“ bzgl. der Gestaltung sehen.
      Gruss
      Martin

  3. Hallo Martin,

    auch wenn ich nicht in der Branche tätig bin, interessiert mich das Thema Webdesign sehr. Dein Beitrag ist wieder mal sehr informativ und wie gewohnt verständlich aufbereitet, sodass auch ich als Laie Dir folgen kann. Danke!

    Gruß, Andreas

  4. Pingback: Lieblinks – Oktober 17 | hahnsinn – Büro für Design & Webentwicklung in Leipzig und Frankfurt a.M.

  5. Hallo Martin,

    das ist wirklich ein toller Artikel, den du da geschrieben hast.

    Die Anforderungen an Websites, an das Projektmanagement, die Entwickler und die einzelnen Prozesse haben sich schon deutlich verändert. Sicherlich ist dadurch nicht alles einfacher, aber Ich finde diese Entwicklung sehr interessant. Es belebt unsere Branche und unsere Arbeit. Man muss heute in jedem Aspekt einfach deutlich flexibler sein. Auch im Umgang mit seinen Kunden. Man ist Dienstleister, Entwickler und Berater zugleich. Wir werden immer mehr selbst „responsive“. Je nach Kunde und Projekt muss differenziert werden, welche Mittel und Werkzeuge überhaupt Sinn machen. Alles in allem ist das für mich eine sehr spannende Entwicklung.

    Kollegiale Grüße
    -Tobias-

    1. Hallo Tobias,
      danke, freut mich, dass Dir der Artikel gefällt.
      Die Ergänzung finde ich gut: Wir werden immer mehr selbst „responsive“.

      Gruss
      Martin

  6. Hallo Martin
    Eines muss ich dir lassen, dieser Artikel ist so ziemlich der ausführlichste und informativste Beitrag zum Thema Responsive Webdesign den ich gelesen habe.

    Obwohl der Artikel eher auf Großkunden abzielt, welche auch das Personal zur weiteren Wartung deren Homepage haben zeige ich selbst meinen Kunden diesen Beitrag, welche hauptsächlich Einpersonen- oder Kleinunternehmen sind, damit sich diese mal ein Bild von dem Aufwand eines Webdesigners machen können.

    Aber dank WordPress und auch PageBuilder-Plugins ala Elementor kann auch diese Kundengruppe recht ansehnliche responsive Webdesign Beiträge erstellen, sofern das Theme korrekt umgesetzt wurde.

  7. Hi!
    Erst mal danke für diesen (und die vielen anderen) interessanten Artikel. Zum Thema „Sorgen machen“ ob es in 10 Jahrennoch Webdesign gibt, möchte ich zwei Erfahrungen aus der Praxis anmerken: Eigentlich benötigt heute schon niemand einen Webdesigner. WordPress installieren, Theme hochladen fertig.

    Die Praxis zeigt aber, dass das so nicht funktioniert. Das Theme sieht nicht so aus, wie man es haben möchte, die Leute haben nicht genug Zeit, sich einzuarbeiten, statt drei Spalten will man vier, das Theme hat aber nur zwei oder drei Spalten im Angebot… Es gibt also immer was zu tun.

    Chance zwei: Was ein Algo macht, wird nie „besonders“ sein. Denn ein Algo kann per Definition nur das machen, für das er programmiert ist. Es wird niemand auf die Idee kommen etwas zu programmieren, was einzigartig ist, weil das kein Geschäftsmodell ist. Man verdient ja nur an einer Progrsammierung, wenn sie von vielen gekauft wird.

    Chance drei: Es gibt heute noch Berufe, die „eigentlich“ ausgestorben sein müssten. Gerade weil Menschen mit Mensch zu tun haben wollen.

    Chance vier: Meine Kunden sind zum größten Teil komplett überfordert im Web. Gerade WEIL es so viel Dinge gibt, die einem die Arbeit erleichtern, kennen sie sich gar nicht mehr aus.

    Und: Sorry, fotografieren kann heute jedes dreijährige Kind mit (technisch) hoher Qualität. Trotzdem gibt es Fotografen nach wie vor. (Auch wenn der Markt hart ist, das gebe ich zu.)

    Fazit: Wer als Webdesigner auf gute Kommunikation und technische Qualität setzt, sollte sich eigentlich keine Sorgen machen.

    1. Hallo Raphael,
      danke für dein ausführlichen Kommentar und deinen Praxis-Einblick!
      Kann ich im Grunde in allen so unterschreiben. Vor allem die Quintessenz „Wer als Webdesigner auf gute Kommunikation und technische Qualität setzt, sollte sich eigentlich keine Sorgen machen.“!

      Gruss
      Martin

  8. Hi Martin, danke für deinen ausführlichen Artikel! Finde toll wie praktisch du die einzelnen Schritte hin zu einer erfolgreichen Responsive Website erklärst. Gerade die Graceful Degradation hat bei mir noch mal einen Denkprozess für zukünftige Websites angestoßen!

    Ich habe selber einen Ratgeber zu Responsive Webdesign für Unternehmen geschrieben. Wenn du in Tiefe zum Warum und Technik gehst, erläutere ich etwas die Vorteile von Responsive Webdesign für Unternehmen. Es würde mich freuen wenn du Zeit finden könntest um dir den Artikel anzuschauen: https://foldfocus.com/responsive-webdesign

    Viele Grüße aus Berlin,
    Max

  9. Ein sehr toller und vorallem ausführlicher Artikel zum Responsive Webdesign. Gerade beim testen sage ich immer, dass man sich genug Zeit nehmen sollte, bevor man es dem Kunden präsentiert.

    Inzwischen gibt es unterschiedliche Endgeräte aller Auflösungen und Pixeldichte. Nicht nur Tablets und Smartphones besitzen Touch, sondern auch viele Bildschirme. Touch ist nicht gleich Hover.

    Die Stelle mit den Komponenten finde ich sehr interessant. So habe ich es bisher garnicht betrachtet, werde ich mir beim nächsten Projekt zu Herzen nehmen.

    Viele Grüße aus dem Süßen

  10. Wow. Einer der wenigen komplett ausführlichen Beiträge im Netz zu den unterschiedlichen Wegen, des Webdesing-Prozesses. Besonders gelungen fand ich die Beschreibung von Adaptive Design und auch den Mobile First Ansatz.

    Ich denke persönlich auch, dass Mobile First und Responsive der richtige Weg ist.

    Die Alternative Native Apps (für Android und iOS) sind dann oftmals zu viel Aufwand und die Nutzer sind oftmals auch nicht bereit diese Apps herunterzulagen, wenn der Nutzen nicht wirklich klar ist.

    Interessant auch, der Weg, dass man das Design nicht von Anfang an festlegt, sondern wie hier beschrieben im Waschmaschinen-Prinzip erstellt.

    Vielen Dank für den ausführlichn Artikel.

    Viele Grüsse
    Sascha Thattil

  11. Alter Schwede … das ist mir auch noch nicht passiert. Ich recherchiere heute seit einiger Zeit für einen Relaunch und lese Einiges um zu checken ob mein Wissen eine Überholung erfahren kann und will mich einfach nur pimpen. Vorhin hatte ich einen sehr guten Beitrag gelesen und bin am Ende über dein Gesicht gestolpert, Martin. Ich hab mir dann auch dein aboutyou durchgelesen und dich für knorke befunden. Jetzt – ca eine Stunde später – verschlinge ich wieder einen Beitrag und am Ende sehe ich schon wieder diesen Jason-Statham-Kopf da rechts. Deine Artikel sind sehr gut und bedanke mich sehr gern bei dir. Auch wenn der Beitrag schon älter ist. Dank Leuten wie dir wird das Web eindeutig besser.

    Dir und deiner Großfamilie ein gesundes neues Jahr!
    Danke, Jens.

    1. Hallo Jens,
      danke für deinen Kommentar, freut mich, wenn dir die Artikel gefallen und weiterhelfen.
      Ja, die Statham-Nummer, ein Webdesigner gefangen im Körper eines Hollywood-Action-Stars – oder so ähnlich… 😉

      Alles Gute
      Martin

  12. Pingback: Was ist ein responsives Layout?

  13. Sehr guter Beitrag, danke dafür! In das Thema Atomic Design wollte ich mich auch schon immer mal genauer einlesen … werde mir auf jeden Fall die verlinkten Artikel anschauen. Viele Grüße

  14. WOW! Das ist mal ein sehr toller und vor allem sehr ausführlicher Blogpost zum Thema Responsive Webdesign… Vor allem den Mobile First Ansatz finde ich sehr richtig, denn heutzutage passiert recht viel über das Handy, was man ja immer und überall dabei hat. Da ist es schon sehr wichtig, dass die Website genau so gebaut ist, dass sie auch übers Handy ohne Probleme aufrufbar ist…

    Echt vielen Dank für den hilfreichen Artikel.
    Gruß LL

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa.
Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.

Mehr über diese Website
und den Autor erfahren   →

Scroll to Top