Die 5 Phasen des Webdesigns

Die 5 Phasen des Webdesigns

David-round

Von David Grotkasten | 21. Januar 2020

Jede Webseite ist ein Unikat. Ausgelegt auf die Bedürfnisse und Ziele des Besuchers, also des End-User, strahlt die Webseite gleichzeitig auch Geschmack, Charakter und Eigenheit ihres Schöpfers aus. Doch wer ist in diesem Fall überhaupt als Schöpfer zu bezeichnen? Ist es der Auftraggeber und Initiator des Webprojektes oder ist es der ausführende Designer und Umsetzer? Nun ja, im Idealfall ist es die fruchtbare Synthese der beiden Parteien. Die Webseite ist daher als Ergebnis einer geglückten Zusammenarbeit zu verstehen, einer Zusammenarbeit basierend auf effektiver Kommunikation, gegenseitiger Inspiration und – nicht zuletzt – basierend auf einem klaren Handlungsfaden. Wie kann aber ein solcher Handlungsfaden aussehen und wie kann er Kunde und Designer dabei behilflich sein, nicht die Orientierung in einem Webseiten-Projekt zu verlieren?

Um eine solche Orientierung zu gewährleisten, ist der Prozess des Webdesigns in 5 Phasen zu unterteilen. Vorab ist festzuhalten, dass es sich dabei lediglich um den Prozess der eigentlichen Entstehung der Webseite handelt. Diesem Prozess vorangegangen sind bereits verschiedene Überlegungen und Gespräche zum eigentlichen Sinn und Zweck der Webseite, zur aktuellen Situation und Unternehmensphilosophie des Kunden, sowie zur sinnvollen Eingliederung der entstehenden Webseite in ein abgestimmtes Marketingkonzept. Wenn nicht bereits geschehen, kann auch eine Analyse der zu erreichenden Zielgruppe sinnvoll sein. Erst wenn während diesen Erstgesprächen die nötigen Grundbausteine gelegt worden sind, lässt sich die Webseite auf einem soliden Fundament errichten. 

Konzeption/Content-Strategy

Layout und Gestaltung

Umsetzung

Testing und Korrekturen

Launch

1.) Konzeption mit besonderem Augenmerk auf „Content Strategy“: 

Unter Webdesigner gilt heutzutage das Mantra „Content is King“. Dieser kleine Satz sollte nicht unterschätzt werden, denn er bringt zum Ausdruck, dass auch die stilvollste gestaltete Webseite im Internet nutzlos ist, solange sie Ihren Besuchern (oder „Benutzern“) keine wertbringenden Inhalte zu liefern vermag. „Content is King“ ist auch als Kampfansage gegen die Oberflächlichkeit der Onlinewelt zu verstehen und setzt im Webdesign-Prozess von Anfang an ganz klare Prioritäten: Inhalt, Inhalt, Inhalt. 

In der Konzeptionsphase des Webdesign-Prozesses geht es daher überhaupt nicht um das Design. Es geht vielmehr darum, zuerst eine Bestandsaufnahme aller Inhalte (Text, Bilder, Videos etc.) vorzunehmen und gegebenenfalls die Erstellung neuer Inhalte in die Wege zu leiten. Im nächsten Schritt werden die Inhalte priorisiert, kategorisiert und angeordnet. So entsteht eine sogenannte „Content-Strategy“ und der Webseite wird dabei ganz von selbst eine erste Struktur gegeben, welche sich immer vom Inhalt ableitet. Die „Strategie“ entsteht dabei durch eine Besinnung auf die Ansprüche des Website Benutzers und auf die Art und Weise, mit welcher dieser durch die präsentierten Inhalte navigiert werden soll (das Fachwort lautet hier „Usability“). 

Die Konzeptionsphase geht dann fließend in die nächste Phase über.

2.) Layout und Gestaltung 

Sobald ein geteiltes Verständnis über Inhalt und Struktur der Webseite besteht, kann man gemeinsam eine Konkretisierungsebene voranschreiten und das Layout der Webseite festlegen. Manchmal hilft es dabei, erst einmal eine sogenannte Site-Map zu erstellen, welche eine Übersicht gibt über alle Haupt- und Unterseiten der Webseite. Abgeleitet wird davon auch die Navigationsstruktur der Webseite, immer mit besonderem Augenmerk auf Usability. 

Das eigentliche Layout der Webseite legt fest, wie die Inhalte untereinander aufgeteilt und präsentiert werden. Auch in dieser Phase wird eng mit dem Kunden zusammengearbeitet. Bereits in diesem Schritt muss beachtet werden, dass eigentlich 2 Versionen der Webseite entstehen sollen: Nämlich einmal die Desktopversion und zum Anderen die optimierte Version für mobile Endgeräte. Natürlich sollen die Inhalte gleich sein, das Layout muss aber dennoch dynamisch und anpassbar sein (mobile responsiveness). Eine für mobile Endgeräte ausgelegte Webseite ist heutzutage nicht mehr nur ein freundlicher „Add-On“, sondern bereits eine Selbstverständlichkeit. Sie müssen davon ausgehen, dass über die Hälfte ihrer Besucher, die Webseite über ein Handy abrufen werden. 

Die nun folgende Gestaltungsphase der Webseite findet – wie auch alle Schritte davor – in einer engen Zusammenarbeit mit dem Kunden statt. Gerade während des Designprozesses bin ich ein Freund der agilen und iterativen Vorgehensweise („Siehe Blogartikel dazu hier“). Es geht darum, Ideen schnell umzusetzen, bzw. grafisch zu veranschaulichen und auch wieder schnell zu verwerfen, wenn ungeeignet. Nach und nach, kann so ein Stil und eine Ästhetik für die Webseite entstehen. Dabei gibt es eine Vielzahl von Formelementen, deren sich bedient werden kann, wie z.B. Schriftarten, Farben, Icon‘s um nur einige zu nennen. 

3.) Umsetzung

Stehen das Layout und das Design der Webseite fest und wurde dieses vom Kunden abgesegnet, so geht es an die technische Umsetzung der Webseite. Hier stehen vor allen Dingen technische und administrative Ansprüche des Kunden im Vordergrund. Möchte der Kunde die Webseitenpflege selbst übernehmen? Wie häufig sollen neue Inhalte publiziert werden? Welchen Webhostinganbieter möchte der Kunde nutzen?

Ich setze meine Webprojekte gerne auf Basis des Content-Management-Systems WordPress um, da es eine Vielzahl von Vorteilen bietet, deren Aufzählung diesen Blogeintrag sprengen würde. Es sei an dieser Stelle nur soviel gesagt: WordPress bietet dem Anwender ein benutzerfreundliches Backend, in welchem sich die Webseite ohne große Vorkenntnisse und Codewissen verwalten und anpassen lässt. Durch den modularen Aufbau der Plattform sind die Kosten der Entwicklung einer WordPress-Seite im Vergleich zu traditionellen Webseiten um Einiges geringer. Auch die Wartung und Pflege der Webseite kann mithilfe von Plug-Ins kostengünstig und zeiteffizient vorgenommen werden. Außerdem trägt die riesige Community hinter WordPress stets zur Sicherheit und Stabilität der Webseiten bei, indem regelmäßige Updates angeboten werden.

4.) Testen der Webseite

Die Webseite besteht nun bereits als ein multimediales Produkt und kann daher auf Herz und Nieren geprüft werden. Die Prüfung erstreckt sich dabei über eine Vielzahl von Endgeräten, Bildschirmgrößen und Browser-Typen. Das Ziel lautet dabei, die Anzeigequalität der Webseite unabhängig von dem genutzten Endgerät zu machen. Auch etwaige Änderungswünsche des Kunden können in dieser Phase besprochen und umgesetzt werden.

Ein besonderes Augenmerk, sollte zudem auf die Ladezeit der Webseite gelegt werden. Die Aufmerksamkeitsspanne eines durchschnittlichen Internetnutzers ist bekannterweise sehr gering. Bereits kurze Ladezeiten können negativ auffallen, wenn Sie das Bewusstsein des Besuchers auf sich ziehen. Es gilt daher vor allen Dingen multimediale Elemente, wie bspw. Bilder zu komprimieren bevor sie in die Webseite eingefügt werden. Die Ladezeit beeinflusst zudem unter anderem das Ranking der Webseite bei Suchmaschinen (-> SEO).

5.) Übergabe an den Kunden und Launch 

Schließlich wird die fertige Webseite im letzten Schritt an den Kunden übergeben und das Live-Schalten der Webseite kann gefeiert werden. Das Projekt ist damit abgeschlossen, oftmals bedeutet das aber nicht bereits das Ende der Zusammenarbeit. Während den ersten Wochen der Live-Schaltung ist eine Analyse des Besucherverhaltens auf der Webseite mithilfe von Analyse-Tools wie Google Analytics sinnvoll. Des Weiteren bespreche ich mit meinen Kunden zur Abrundung des Projektes, wie mit der regelmäßigen Webseitenpflege umgegangen werden soll. Wenn sich der Kunde entscheidet die Pflege der Webseite selbst in die Hand zu nehmen, so biete ich einen Einführungskurs in die Webseitenpflege mit WordPress an. Soll die Webseitenpflege abgegeben werden, kann ein Wartungsvertrag abgeschlossen werden.

Wie eingangs erwähnt, ist jede Webseite ein Unikat und ein Ausdruck von Individualität und Kreativität bei gleichzeitiger Erfüllung von funktionalen und pragmatischen Voraussetzungen. Dieser delikate Brückenschlag zwischen Funktionalität und Ästhetik macht für mich den unermüdlichen, kreativen Reiz des Webdesign aus. Kein Kunde, kein Projekt ist gleich. Immer und immer wieder gilt es, sich auf neue Gegebenheiten und Umgebungen einzustellen. Um dabei nicht die Übersicht zu verlieren, hat sich der oben skizzierte Prozess vielmals bewährt.

Spread the word

WEITERE BLOGBEITRÄGE

  • Die 5 Phasen des Webdesigns
    Wie lässt sich der komplexe Prozess des Webdesign sinnvoll unterteilen, sodass eine reibungslose Kommunikation und Zusammenarbeit zwischen Kunde und Designer möglich ist? […]
  • Der Einsatz digitaler Touchpoints in der Customer Journey
    Im Angesicht der enormen Ansprüche an das moderne Webdesign ist es umso wichtiger, den Entstehungsprozess der Webseite aktiv und bewusst zu managen. […]
  • Agile Web project ManagementAgiles Management von Webprojekten
    Im Angesicht der enormen Ansprüche an das moderne Webdesign ist es umso wichtiger, den Entstehungsprozess der Webseite aktiv und bewusst zu managen. […]

Agiles Management von Webprojekten

Agile Web project Management

Agiles Management von Webprojekten

David-round

Von David Grotkasten | 6. Januar 2020

Modernes Webdesign ist kompliziert. Es gibt unglaublich viel zu beachten. Die Webseite sollte nicht zu viel Text haben aber doch genügend, um die Inhalte in vernünftiger Tiefe vermitteln zu können, sie sollte kreativ gestaltet sein aber dennoch nicht verspielt, sondern den Besucher klar und unmissverständlich auf der „Storyline“ entlang navigieren. Die Inhalte und das Design der Webseite sollte sich dynamisch an unzählige Bildschirmgrößen anpassen können, alles muss gut aussehen ob es nun auf dem neusten IPhone oder auf einem Windows 98 Reliktgerät angeschaut wird. Obendrein muss die Webseite direkt beim ersten Blick überzeugen, die Aufmerksamskeitsspanne  eines durchschnittlichen Besuchers beträgt ohnehin nicht viel mehr als 8 Sekunden. Da sollte die Webseite lieber schnell laden…

Das alles kann einem schnell über den Kopf wachsen. Der Laie möchte am liebsten alles was das Internet betrifft abgeben und jemanden verrichten lassen, der sich damit auskennt. Es ist nun Aufgabe des Webdesigners den Kunden durch den dichten Urwald von Mobile Responsivesness, SEO-Freundlichkeit der Webseite, den Ansprüchen der neuen Datenschutzverordnung etc. zu navigieren und ihm zu helfen Prioritäten zu setzen wo sich Zielkonflikte auftun. Es ist aber auch Aufgabe des Webdesigners dem Kunden zu vermitteln, dass die Entstehung des Internetauftritts ein gemeinsamer Prozess ist, ein gemeinsamer Weg bei dem es Aufgaben auf Seiten des Designers aber auch auf Seiten des Kunden gibt.

Im Angesicht der enormen Ansprüche an das moderne Webdesign ist es umso wichtiger, den Entstehungsprozess der Webseite aktiv und bewusst zu managen. Das besondere Augenmerk liegt dabei auf der Ausgestaltung der Zusammenarbeit von Designer und Kunde.

Meiner Meinung nach ist, genauso wie in wohl jeder digitalen Produktentwicklung, auch in der Webseitenentwicklung die Art des Projektmanagement und die daraus resultierende Qualität der Kundenzusammenarbeit, auschlaggebend für den Erfolg der gesamten Webseite. Man könnte sagen, das Projektmanagement ist bereits die halbe Miete. Ist der Webdesigner bereits vor Beginn des Projekts in der Lage klar zu kommunizieren, wie im Prozess der Webseitenentstehung vorangegangen wird und auf welche Weise sichergestellt wird, dass alle Kundenanforderungen berücksichtigt werden, wirkt das unglaublich entspannend und fördernd für die Kunden-Designer Beziehung.

Aber wie sollte das Projektmanagement ausgestaltet werden? Meiner Meinung nach ist das Geheimnis eines erfolgreichen Webprojektes, die goldene Balance zu finden zwischen einem strukturierten, methodischen und übersichtlichen Projektmanagement (siehe: Die 5 Phasen des Webdesigns) und der gleichzeitigen Integration von Bestandteilen des agilen Projektmanagements.

Agilität beschreibt im Bereich der Softwareentwicklung eine flexible Vorgehensweise, welche bestimmte Prioritäten bestimmt. Im agilen Maniest wurden folgende Prioritäten festgesetzt:

„Individuen und Interaktionen mehr als Prozesse und Werkzeuge

Funktionierende Software mehr als umfassende Dokumentation

Zusammenarbeit mit dem Kunden mehr als Vertragsverhandlung

Reagieren auf Veränderung mehr als das Befolgen eines Plans“

Im Webdesign kann Agilität einfließen in Form von iterativen Design- oder Layoutzyklen, einer Priorisierung der aktuellen Meinung oder Vorstellung des Kunden gegenüber ursprünglichen Dokumentationen und einer allgemeinen Persönlichkeit und Vertrautheit in der Kunden-Designer-Beziehung.

Letztendlich ist es Aufgabe des Projektmanagers (welcher oftmals gleichzeitig Designer und Umsetzer ist) eine auf das Projekt passende Abstufung zwischen den beiden Polen Agilität und klassisches (Waterfall)Projektmanagement zu finden.

Spread the word

WEITERE BLOGBEITRÄGE

  • Die 5 Phasen des Webdesigns
    Wie lässt sich der komplexe Prozess des Webdesign sinnvoll unterteilen, sodass eine reibungslose Kommunikation und Zusammenarbeit zwischen Kunde und Designer möglich ist? […]
  • Der Einsatz digitaler Touchpoints in der Customer Journey
    Im Angesicht der enormen Ansprüche an das moderne Webdesign ist es umso wichtiger, den Entstehungsprozess der Webseite aktiv und bewusst zu managen. […]
  • Agile Web project ManagementAgiles Management von Webprojekten
    Im Angesicht der enormen Ansprüche an das moderne Webdesign ist es umso wichtiger, den Entstehungsprozess der Webseite aktiv und bewusst zu managen. […]