Die 5 Phasen des Webdesigns

Die 5 Phasen des Webdesigns

21. Januar 2020 | Lesezeit: 5 Minuten

webexperte-david-grotkasten

Verfasst von @David Grotkasten

 

Unsere Autoren freuen Sich über Diskussionen und Anregungen zum Thema. Kontaktieren Sie den Autor oder kommentieren Sie den Beitrag.

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.

Über den Autor:
webexperte-david-grotkasten
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

  • B2B Marketing Trends 2020 – PURPOSE
    Enorme Änderungen in der Marketingwelt stehen an! Unsere neuste Blogreihe stellt die Marketing Trends 2020 vor und gibt Ratschläge wie Sie ihre Kundenkommunikation "Future-ready" auslegen. […]
  • b2b_markenB2B Marken über digitale Kanäle managen
    Viele B2B Unternehmen unterschätzen die positiven Auswirkungen des Kundenmanagement auf die Auftragslage. Über digitale Kanäle lassen sich wertvolle Beziehungen zu Ihren Kunden aufbauen und einfach managen. […]
  • conversion_rateConversion Rate mit der Klickpfadanalyse steigern
    Die Conversion Rate ist eine starke Kennzahl für die Performance Analyse ihrer Website. Davon können relevante Einblicke über das Kundenverhalten und der Website Optimierung gewonnen werden. […]
0 0 vote
Article Rating
Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments