Die 5 Phasen des Webdesigns
21. Januar 2020 | Lesezeit: 5 Minuten
Verfasst von @David Grotkasten
Unsere Autoren freuen Sich über Diskussionen und Anregungen zum Thema. Kontaktieren Sie den Autor oder kommentieren Sie den Beitrag.
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.
Über den Autor:
David Grotkasten
David beschäftigt sich mit dem Thema Web- und Grafikdesign. Seine fachliche umfasst CMS-Projekte mit WordPress bis hin zur Umsetzung von E-Commerce-Shops. Mehr erfahren
Bei Fragen zur Umsetzung eines Webdesign-Projektes helfen wir Ihnen gerne weiter! Vereinbaren Sie einfach ein kostenloses Beratungsgespräch.
WEITERE BLOGBEITRÄGE
- MEHR SALES MIT DER WARENKORBANALYSEVon Matthias Borch12. Juli 2021Die Warenkorbanalyse bietet ein geeignetes Tool, um das Online Kaufverhalten von Konsumenten zu verstehen. So können Online Händler die Produkte erfolgreich vermarkten und Sales steigern. […]
- WAS IST EIN SALES FUNNEL (VERKAUFSTRICHTER)Von Matthias Borch5. Juli 2021Der Sales Funnel ist eine gute Methode, um das Online Verhalten auszuwerten. So kann die Website dem Kundenverhalten einfach angepasst werden. […]
- B2B Marketing Trends 2020 – HUMAN EXPERIENCEVon David Grotkasten24. Oktober 2020Enorme Veränderungen in der Marketingwelt stehen an! Unser zweiter Blog-Artikel "Human Experience" stellt den – nach unserer Meinung zentralen – Marketing-Trend für das Jahr 2020 vor und gibt Ratschläge, wie Sie Ihre Kundenkommunikation "Future-ready" auslegen. […]