Wie Sie in 6 Schritten zu einer gut funktionierenden Website kommen, erfahren Sie in diesem Video und begleitenden Blogpost. Ich nehme Sie mit auf eine Reise durch den Webdesign-Prozess. Denn mit Füllen und Fertig ist es auch beim Arbeiten mit Website-Vorlagen und Webbaukästen längst nicht getan. Egal ob Sie mit einem Webbaukasten oder WordPress oder einem anderen CMS arbeiten, dieser Überblick bietet Ihnen wertvolle Einsichten und praktische Tipps zur Umsetzung, egal ob Sie in Alleinregie Ihre Website erstellen wollen oder in Zusammenarbeit mit einer Agentur oder einem Webdesigner.
Themen
Webdesign-Prozess im Überblick
Abbildung: Webdesign-Prozess in 6 Schritten
Schritt 1: Strategie
Die Webdesign-Strategie ist der erste und vielleicht wichtigste Schritt im gesamten Prozess und leider auch der am häufigsten vernachlässigte. Hier legen Sie das Fundament Ihrer Website. Zunächst müssen Sie auf Entdeckungsreise (Research und Discovery) gehen, dann Ihre Erkenntnisse konsolidieren und zu guter Letzt noch passende Erfolgsmesszahlen festlegen.
Es geht dabei im Wesentlichen um folgende Aspekte:
Abbildung: Webdesign-Strategie - Betrachtungsfelder
Research und Discovery
Ziele definieren: Zunächst sollten Sie klare Ziele für Ihre Website festlegen. Fragen Sie sich, was Sie mit der Website erreichen möchten. Ihre Ziele bestimmen die Marschrichtung des Webprojektes. Ziele bestimmen die Richtung und den Umfang des Projektes.Zielgruppenanalyse / Personas: Eine genaue Zielgruppenanalyse ist unerlässlich. Wer sind Ihre potenziellen Besucher? Welche Bedürfnisse und Erwartungen haben sie? Erstellen Sie detaillierte Persona-Profile, um besser zu verstehen, für wen Sie die Website gestalten.
Wettbewerbsanalyse: Analysieren Sie die Websites Ihrer Wettbewerber. Was machen sie gut? Wo gibt es Verbesserungsmöglichkeiten? Diese Analyse hilft Ihnen, Ihre eigene Positionierung zu schärfen und einzigartige Merkmale herauszuarbeiten.
Marktumfeld: Berücksichtigen Sie auch das Marktumfeld. Welche gesetzlichen und regulatorischen Anforderungen müssen Sie einhalten? Gibt es branchenspezifische Standards, die Sie beachten sollten? Ein tiefes Verständnis des Markenumfelds hilft Ihnen, potenzielle Herausforderungen frühzeitig zu erkennen und zu meistern.
Look-and-Feel: Look and Feel umfasst das visuelle und emotionale Erscheinungsbild der Website. Wie soll sich Ihre Website anfühlen? Seriös, lässig, unkonventionell. Überlegen Sie, was zu Ihnen passt und seien Sie konsequent in allen Medien und auch im täglichen Doing.
Ergebnisse konsolidieren
Wenn Sie die o.g. Punkte näher analysiert haben, haben Sie eine ganze Reihe von Dingen herausgefunden. Jetzt geht es darum, diese Ergebnisse zu konsolidieren und im Schritt 2 einen Content-Plan daraus abzuleiten und Anforderungen und Funktionen festzulegen.Definition von Erfolgsmetriken (KPIs)
Zu Ihren Zielen brauchen Sie idealerweise auch passende Erfolgsmetriken, die SMART definiert werden müssen.
Zum Beispiel:
- Steigerung des Website-Traffics um XX Prozent binnen eines Zeitraumes von XX Monaten
- Senkung der Absprungrate um XX Prozent binnen eines Zeitraumes von XX Monaten
- Senkung unnnötiger Anrufe um XX Prozent binnen eines Zeitraumes von XX Monaten
Schritt 2: Website-Planung
Nach der Strategiefindung geht es an die detaillierte Planung Ihrer Website. Dies umfasst die Content-Planung, die Erstellung eines Site-Plans und die Entwicklung von Wireframes. Content planen: Bestimmen Sie zunächst die Arten von Inhalten, die Sie benötigen, wie z.B. Ihre Services, Ihr Portfolio, Fallstudien, Blogposts und Videos. Planen Sie auch, wie oft Sie neuen Content veröffentlichen und wer für die Erstellung verantwortlich ist.Content-Struktur (Site-Plan) erstellen: Erstellen Sie dann eine hierarchische Liste aller Seiten mit ihren Unterabschnitten. Hier ist ein einfaches Beispiel mit 4 Seiten und ihren Unterabschnitten. Bei den Unterabschnitten können Sie natürlich auch gerne Notizen dazu machen und diese ausführlicher beschreiben.
Abbildung: Website-Planung - hier Content-Struktur (Site-Plan)
Abbildung: Webdesign-Planung - Inhaltsstruktur
Abbildung: Webdesign-Planung - Inhaltsstruktur / Wireframe / Fertige Seite
Schritt 3: Inhaltsentwicklung
Wenn die Website-Struktur festgelegt ist, folgt der nächste Schritt: die Inhaltsentwicklung. Diese Phase umfasst die Erstellung hochwertiger Inhalte, die mit dem Site-Plan und den Wireframes korrespondieren.Inhaltserstellung
Die Inhaltserstellung umfasst das Schreiben von Texten, das Sourcing von Bildern und die Erstellung von Videos oder anderen Multimedia-Elementen. Wichtige Überlegungen sind:- Konsistenz: Sicherstellen, dass der Inhalt konsistent mit der Markenstimme und dem -stil ist.
- Engagement: Erstellen von ansprechenden Inhalten, die Besucher anziehen und konvertieren.
- SEO: Einbeziehen von Best Practices für die OnPage-Suchmaschinenoptimierung (SEO), um die Sichtbarkeit der Website in Suchmaschinen zu verbessern.
Abbildung: Inhalte einer Website (Auswahl)
Inhaltsprüfung und -freigabe
Sofern die Webagentur oder ein Texter für die Texterstellung verantwortlich sein sollte, müssen sie vom Kunden überprüft und genehmigt werden. Dies gilt auch für mögliche andere Inhalte, wie Bilder, Videos etc. Die Inhaltsprüfung und -freigabe stellt sicher, dass sie den Erwartungen des Auftraggebers entsprechen und mit dessen Geschäftszielen übereinstimmen. Ist der Kunde für die Inhaltserstellung verantwortlich, muss er die Inhalte in geeigneter und vereinbarter Form der Webagentur oder der Webdesigner zur Verfügung stellen.Schritt 4: Webdesign
Abbildung: Webdesign - Live-Prototyp versus Mockup
Alternative a) Live-Prototyp
Ein Live-Prototyp ist eine echte Website, die zunächst nur die grundsätzliche Struktur und Bauteile der zu erstellenden Website aufweist. Die Basis hierzu liefert das im Vorfeld erstellte Wireframe sowie die Marken-Richtlinien (Style Guides). Dieser Live-Prototyp wird dann in einem iterativen Prozess sukzessive weiter verfeinert und voll funktionsfähig gemacht wird. Mit Live-Prototypen zu arbeiten, hat den Vorteil, dass der Aufwand für die Design-Phase deutlich geschrumpft wird. Bei einer 6-seitigen Website wären das unter Berücksichtigung der Desktop-, Tablet- und Smartphone-Versionen 18 Mockups (6 x 3 = 18). Sofern man lediglich 250 EUR für ein Mockup rechnen würde, käme man schon auf 9.000 EUR alleine für die Mock-Up-Erstellung.Einsatzgebiete
Live-Prototypen kommen heute insbesondere bei der Entwicklung von WordPress-Websites oder bei zeitkritischen Projekten zum Einsatz.Alternative b) Mock-Ups
Mock-Ups sind mehr oder weniger stark detaillierte grafische Darstellungen der Website. Basierend auf den Wireframes wird das Layout um die grafischen Elemente wie Farben, Schriftarten, Bildern und Branding-Elementen ergänzt bzw. verfeinert.
Design-Tools
Designer verwenden typischerweise Tools wie Adobe XD, Sketch oder Figma, um Mock-Ups zu erstellen. Diese Tools ermöglichen hochauflösende Designs, die der finalen Website nahekommen.
Einsatzgebiete
Einsatzgebiete für Mock-Ups sind im Regelfall komplexere und größere Websites, die mit CMS wie Typo3 oder Drupal etc. erstellt werden.
Iterativer Prozess
Unabhängig ob in der Design-Phase Prototypen oder Mock-ups zum Einsatz kommen, ist die Design-Phase ein iterativer Prozess, der Feedback und Überarbeitungen umfasst und entsprechend viel Kundenmitarbeit erfordert. Ohne sie geht es nicht.
Designer präsentieren dabei Prototypen oder Mock-Ups dem Auftraggeber, sammeln Feedback und nehmen notwendige Anpassungen vor. Dies stellt sicher, dass das Design den Erwartungen des Auftraggebers entspricht und mit der Markenidentität übereinstimmt.
Was ist mit Webbaukästen?
Webbaukästen wie WIX, Squarespace und Showit kommen mit vorgefertigten Templates daher (ähnlich wie bei WordPress). Mockups kommen aufgrund des dahinterstehenden Aufwandes im Regelfall nicht zum Einsatz. Das Webdesign erfolgt gewissermaßen auch live, denn Sie arbeiten bis vor der Veröffentlichung in einem Vorschaumodus.
Schritt 5: Website-Bau
Mit genehmigten Mock-Ups bzw. Live-Prototypen geht es in die Website-Bau-Phase. Diese ist stark abhängig von der gewählten Plattform. Neben dem Set up und der Konfiguration (sofern erforderlich) geht es in dieser Phase um:
Einbau von Funktionalitäten und Elementen (sofern noch nicht in Phase 4 erfolgt)
Integration von Inhalten: In dieser Phase werden auch die zuvor erstellten Inhalte in die entsprechenden Seiten eingefügt. Achten Sie darauf, dass alle Texte, Bilder und interaktiven Elemente korrekt integriert und formatiert sind.
OnPage-SEO: Nutzung von Meta-Tags (Seitentitel, Seitenbeschreibungen, Meta Robots Tags, Erstellung etc.), Optimierung Verlinkung.
Iterativer Prozess
Wie in der Design-Phase ist auch der Website-Bau-Erstellung ein iterativer Prozess, der Überarbeitungs- und Verbesserungsrunden erfordert.
Abbildung: Website-Bau-Phase - VergleichWordPress, Squarespace, Drupal
Schritt 6: Tests und Launch
Um sicherzustellen, dass die Website auf verschiedenen Geräten und Browsern korrekt funktioniert, ist gründliches Testen unerlässlich. Wichtige Testaktivitäten umfassen:
- Funktionalitäts-Testing: Überprüfung, dass alle Funktionen und Features wie beabsichtigt funktionieren.
- Responsive-Testing: Sicherstellen, dass die Website vollständig responsive ist und auf verschiedenen Bildschirmgrößen gut funktioniert.
- Inhalts-Tests: Überprüfung, dass alle Inhalte wie gewünscht untergebracht sind.
- Weitere Tests: Abhängig von Art der Website
Pre-Launch-Checkliste
Vor dem Start stellt eine Pre-Launch-Checkliste sicher, dass neben den vorab erwähnten Testfeldern folgende Punkte in Ordnung sind. Diese umfasst:
- Überprüfung, dass alle Inhalte korrekt und aktuell sind
- Sicherstellen, dass alle Links funktionieren
- Prüfung auf letzte Designanpassungen
- Bestätigung, dass die SEO-Einstellungen korrekt konfiguriert sind
Sobald die Website gründlich getestet und vom Kunden genehmigt wurde, ist sie bereit für die Veröffentlichung.
Launch (Veröffentlichung)
Bei Websites wie WordPress, Drupal etc. wird die Website von der Entwicklungsumgebung auf den Live-Server migriert. Dies umfasst:
- Migration der Website in die Live-Hosting-Umgebung
- Nach der Veröffentlichung: Durchführung von kleinen Anpassungen, wie Hinterlegung der E-Mail-Adressen bei Kontaktformularen, die nur in der Live-Umgebung erfolgen kann
- Nach der Veröffentlichung: Finale Testrunde, um sicherzustellen, dass alles korrekt funktioniert
Fazit
Das Design und die Entwicklung einer WordPress-Website ist ein umfassender Prozess, der sorgfältige Planung, Ausführung und kontinuierliche Verbesserung erfordert. Durch die Befolgung dieser sechs Schritte – Analyse, Website-Planung, Inhaltsentwicklung, Website-Design, Website-Bau und Launch – können Websites erstellt werden, die nicht nur optisch ansprechend, sondern auch funktional, benutzerfreundlich und auf die Ziele des Auftraggebers abgestimmt sind. Selbst kleinere Websites profitieren von einem klaren Prozess – auch wenn der Umfang der Maßnahmen entsprechend der Komplexität und Umfanges mehr oder weniger abgespeckter erfolgen wird.
Egal wie Sie vorgehen: Eine gute Strategie und Planung brauchen Sie immer, auch wenn Sie versucht sind, diese beiden Teile „einzusparen“. Andernfalls könnte es Ihnen passieren, dass Ihnen die ein oder andere wichtige Funktion oder bestimmte Inhalte fehlen oder Sie hinsichtlich der Template- oder Baukasten-Auswahl auf das falsche Pferd setzen.
Das könnte Sie auch interessieren ...
