Wo scheitern DIY Personen/Unternehmen fast immer?
1, 2, 3 und 6.
Was wird DIY Leuten mit Wix/Jimdo/Webflow etc verkauft?
Teile von 3, 4, 5 und 7.
Was zählt wirklich?
1, 2, 3 und 6
Was ist mit Abstrichen nicht so relevant?
4 und 5
Die Grundschritte
- Zweck & Zielgruppe klären
- Inhalt definieren und erstellen (was wird kommuniziert)
- Funktion festlegen (was muss die Site können)
- Design entwickeln (wie sieht es aus, wie fühlt es sich an)
- Tech Stack wählen (womit wird gebaut)
- Umsetzung
- Launch & Wartung
1. Zweck & Zielgruppe
- Kernfrage beantworten: Warum braucht es diese Website? (Sichtbarkeit, Leads, Information, Pflicht)
- Zielgruppe(n) definieren: Wer kommt auf die Site? Was brauchen diese Leute?
- Ziele messbar machen: Kontaktanfragen, Downloads, Anmeldungen, Verweildauer
- Stakeholder identifizieren: Wer entscheidet, wer liefert, wer pflegt?
- Bestehendes analysieren: Gibt es eine alte Site? Was funktioniert, was nicht?
Best Practice: Alles in einem Kickoff-Dokument festhalten. Maximal 1 Seite. Wenn der Zweck nicht in 2 Sätzen erklärbar ist, ist er nicht klar genug.
2. Inhalt
- Content Audit: Was existiert bereits? Was kann übernommen, was muss neu?
- Seitenstruktur / Sitemap: Welche Seiten braucht es? Hierarchie festlegen
- Inhaltsverantwortung klären: Wer schreibt, wer liefert Bilder, wer gibt frei?
- Textkonzept: Tonalität, Ansprache (du/Sie), Sprache(n)
- SEO-Grundlagen: Keyword-Recherche für zentrale Seiten
- Medien planen: Fotos, Videos, Dokumente – was muss produziert werden?
Best Practice: Inhalt VOR Design. Kein Lorem Ipsum. Realer Content bestimmt das Layout, nicht umgekehrt. Sitemap und Rohtext vor dem ersten Designentwurf.
3. Funktion
- Funktionale Anforderungen auflisten: Kontaktformular, Suche, Buchungssystem, Login, Mehrsprachigkeit, Filter, etc.
- Priorisieren: Must-have vs. Nice-to-have (MoSCoW oder einfach Prio 1/2/3)
- Integrationen klären: Newsletter-Tool, CRM, Buchungssystem, Zahlungsanbieter, APIs
- Barrierefreiheit: WCAG-Level definieren (A, AA, AAA)
- Rechte & Rollen: Wer darf was bearbeiten? Freigabeprozesse?
- Datenschutz: Cookie-Consent, Hosting-Standort, DSGVO/DSG-Konformität
Best Practice: Jede Funktion kostet Geld und Komplexität. Immer fragen: Braucht die Zielgruppe das wirklich? Funktionen, die niemand nutzt, sind Ballast. Lieber schlank starten und iterativ erweitern.
4. Design
- Moodboard / Referenzen sammeln: Wie soll die Site wirken? Beispiele zeigen lassen
- Brand-Grundlagen klären: Logo, Farben, Schriften – existiert ein CI/CD?
- Wireframes erstellen: Seitenaufbau ohne Farben/Bilder – Struktur vor Ästhetik
- Mobile First: Vom kleinsten Screen aus denken
- UI-Design: Visuelle Ausarbeitung der Wireframes (Figma, Sketch, XD)
- Komponentenbibliothek: Wiederverwendbare Elemente definieren (Buttons, Cards, Header-Varianten)
- Barrierefreiheit im Design: Kontraste, Schriftgrössen, Fokus-States, Touch-Targets
- Feedback-Runden: Klar definieren – wer gibt wann Feedback, wie viele Runden?
Best Practice: Design ist nicht Dekoration, sondern Kommunikation. Wireframes vor Pixeldesign. Maximal 2 Korrekturschleifen vertraglich festhalten. Design-Entscheide immer an Zielgruppe und Zweck rückbinden, nicht an persönlichem Geschmack.
5. Tech Stack
- CMS wählen: WordPress, TYPO3, Drupal, Headless, Baukasten – abhängig von Funktion, Budget, Pflege-Kompetenz
- Hosting bestimmen: Shared, Managed, VPS, Cloud – Standort (DSGVO/DSG), Performance, Support
- Frontend-Technologie: Block Theme, Classic Theme, Pagebuilder, oder JS-Framework (React, Vue, Astro)
- Entwicklungsumgebung: Lokal (LocalWP, DDEV), Staging, Produktion – klare Trennung
- Versionierung: Git – auch bei kleineren Projekten
- Abhängigkeiten minimieren: Jedes Plugin/Tool ist ein Risiko. Weniger = stabiler
- Deployment-Prozess: Manuell, Git-basiert, CI/CD – wie kommt Code auf den Server?
- Lizenzen klären: Premium-Plugins, Schriften, Stockbilder – Kosten und Rechte
Best Practice: Tech Stack folgt den Anforderungen, nicht umgekehrt. Nie eine Technologie wählen, weil man sie kennt, wenn sie nicht passt. Immer fragen: Kann der Kunde das nach Übergabe selbst pflegen? Overengineering ist genauso teuer wie Underengineering.
6. Umsetzung
- Setup: Entwicklungsumgebung, Repository, Grundinstallation, Starter Theme/Boilerplate
- Struktur bauen: Seitentypen, Templates, Navigation, Menüs
- Komponenten entwickeln: Block für Block / Abschnitt für Abschnitt – gemäss Komponentenbibliothek
- Inhalt einpflegen: Reale Texte und Medien, nicht Platzhalter
- Funktionen implementieren: Formulare, Integrationen, dynamische Elemente
- Responsive testen: Laufend, nicht erst am Schluss
- Barrierefreiheit laufend prüfen: Nicht als letzten Schritt, sondern während der Entwicklung
- Code Review / Qualitätssicherung: Validierung, Performance, Sicherheit
- Staging-Abnahme: Kunde prüft auf Staging, nicht auf Produktion
- Feedback einarbeiten: Klare Runden, dokumentiert, priorisiert
Best Practice: Iterativ arbeiten, früh zeigen. Lieber alle 2 Wochen etwas Fertiges zeigen als 3 Monate im Stillen bauen. Abnahmekriterien VOR der Umsetzung definieren. Scope Creep aktiv managen – jede neue Anforderung ist ein Change Request.
7. Launch & Wartung
Launch:
- Checkliste abarbeiten: SEO-Basics (Titles, Descriptions, Redirects), Formulare testen, 404-Seite, Favicon, Open Graph
- Performance prüfen: Ladezeiten, Bildoptimierung, Caching
- Cross-Browser/Device testen: Mindestens Chrome, Safari, Firefox + Mobile
- Barrierefreiheit testen: Screenreader, Tastaturnavigation, automatisierte Tests (axe, WAVE)
- Analytics & Consent einrichten: Tracking erst nach Cookie-Consent
- Backup & Rollback-Plan: Falls etwas schiefgeht
- DNS / Go-Live koordinieren: Zeitpunkt abstimmen, SSL prüfen
Wartung:
- Updates: CMS, Plugins, Theme – regelmässig, nicht ignorieren
- Backups: Automatisiert, extern gespeichert, Restore testen
- Monitoring: Uptime, Sicherheit, Performance
- Content-Pflege: Wer aktualisiert? Redaktionsplan oder Ad-hoc?
- Support-Modell klären: Stundenbasiert, Retainer, SLA?
- Iterative Verbesserung: Analytics auswerten, Inhalte optimieren, Funktionen nachrüsten
Best Practice: Launch ist nicht das Ende, sondern der Anfang. Wartungsvertrag VOR Launch besprechen, nicht danach. Kein Launch ohne Backup-Strategie. Erste 2 Wochen nach Launch eng begleiten.