Die 5 Phasen des Webdesigns

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.