Webdesign
mit Research und klickbarem Live-Prototyp — nicht im Theme-Editor.

Webdesign ist die Arbeit an Research, Informationsarchitektur und dem klickbaren Live-Prototyp im Browser — also die Gestaltung und Planung einer Website, inklusive erster Code-Basis. Webentwicklung ist die Überführung dieses Prototyps in den Production-Build: CMS- oder Shop-Integration, Datenbanken, APIs, Performance-Trim, Betrieb.

Bei clickpuls sind beide Disziplinen eng verzahnt, weil dasselbe Team beide Phasen verantwortet — und weil der Live-Prototyp bereits Code ist. Konkret heißt das: Unsere Designer wissen, was in WordPress, Shopify oder Next.js performant umsetzbar ist — und unsere Entwicklung baut auf dem Prototyp-Code auf, statt ihn zu neu zu interpretieren. Dadurch vermeiden wir das klassische Problem zwischen Agenturen, wo Design und Entwicklung aneinander vorbeilaufen.

Nein — und wir sagen das auch aktiv. Wenn Sie eine schlanke Landingpage für eine einmalige Kampagne brauchen, ist ein reduzierter Prozess sinnvoller als ein voller Research-Lauf. Wenn Sie eine bestehende Website haben, die nur neue Farben und ein paar neue Templates braucht, reicht oft ein Design-System-Update.

Ein voller Prozess lohnt sich in folgenden Fällen:

• Kompletter Relaunch einer bestehenden Website oder eines Shops
• Neuer Online-Shop oder neues Produkt mit eigener Markenentwicklung
• Skalierung mit vielen neuen Seiten, Kampagnen oder Länder-Expansion
• Messbare Conversion-Probleme, bei denen Hypothesen und Research helfen

In allen anderen Fällen bauen wir einen verkürzten Prozess mit Ihnen — transparent im Umfang und im Preis. Bei Discovery-Gesprächen ist eine der ersten Fragen, ob überhaupt ein voller Prozess nötig ist oder ob ein schlankerer Ansatz mehr Sinn ergibt.

Wir veröffentlichen keine Festpreis-Bandbreiten für Webdesign-Projekte — ohne konkrete Template-Anzahl, Research-Tiefe und Design-System-Umfang wären sie Pseudo-Transparenz. Ein Landingpage-Design kostet einen Bruchteil eines Shop-Redesigns mit 15 Templates, Research-Runde und vollem Design-System.

Nach einer Discovery-Phase liefern wir ein Festpreis-Angebot mit klar getrennten Phasen:

• Research & Audit
• Konzept & Informationsarchitektur
• Live-Prototyp im Browser
• Prototyp-Iterationen & Design-System
• Production-Build & Launch

Zwischen jeder Phase gibt es ein vereinbartes Ausstiegs-Gate — Sie entscheiden nach jeder Phase, ob Sie weitergehen oder den Scope schneiden. Laufende CRO-Iterationen und neue Landingpages nach Go-Live laufen optional im monatlichen Retainer.

Ja — jeder Shopify-Shop und jedes WordPress-Projekt bei clickpuls läuft durch denselben Webdesign-Prozess. Der Unterschied zu anderen Agenturen: Wir designen nicht direkt im Theme-Editor von Shopify oder im Block-Editor von WordPress.

Stattdessen entsteht zuerst ein Research-Report und dann ein klickbarer Live-Prototyp im Browser — und erst danach überführt das Entwicklungs-Team den Prototyp in Shopify-Liquid, ein eigenes WordPress-Theme oder in Custom-Code. Das hat zwei Vorteile:

• Design-Qualität ist nicht an Theme-Limits gebunden — wir sind nicht eingeschränkt auf das, was ein Theme mitbringt
• Skalierung ist konsistent — neue Kampagnen-Seiten oder Landingpages greifen auf das gleiche Design-System zurück, unabhängig vom CMS

Das macht unsere Shopify- und WordPress-Projekte visuell und strukturell klar erkennbar gegenüber 08/15-Theme-Setups — und sie bleiben nach Go-Live wartbar.

Konkret übergeben wir:

• Research-Report mit Zielgruppen-Erkenntnissen, Wettbewerbs-Analyse, Analytics-Insights und Handlungsempfehlungen
• Sitemap und Nutzerflüsse als PDF und als strukturiertes Dokument
• Klickbarer Live-Prototyp im Browser unter passwortgeschützter Staging-URL — alle Key-Templates, mobile und desktop, mit allen Zuständen (Default, Hover, Focus, Error, Empty, Loading)
• Prototyp-Code-Base als Repository (Git) — Grundlage für den Production-Build oder für eigene Weiterarbeit
• Design-System-Dokumentation mit Typo-, Farb-, Spacing-Tokens und Komponenten-Bibliothek
• Übergabe-Dokument mit Verhalten, Responsive-Regeln, Accessibility-Anforderungen und Edge-Cases

Alle Design-Dateien, der Prototyp-Code und das Design-System gehören nach Bezahlung vollständig Ihnen — Sie behalten das volle Nutzungs- und Weiterverwendungsrecht. Theoretisch könnten Sie nach Abschluss der Design-Phase einen anderen Dienstleister für den Production-Build beauftragen. Wir sehen das als Qualitätsversprechen, nicht als Risiko — in der Praxis bleiben die meisten Kunden für die Umsetzung bei uns, weil der Übergang ohne Reibungsverlust wertvoll ist.

Faustregel nach Projekttyp:

• Schlanke Corporate-Websites (4–6 Templates): 4–6 Wochen
• Mittelgroße Shops oder Websites (8–12 Templates): 6–9 Wochen
• Komplexe Plattformen mit Design-System (15+ Templates): 10–16 Wochen

Die Aufteilung innerhalb des Prozesses:

• Research & Audit: 1–2 Wochen
• Konzept & IA: 1 Woche
• Live-Prototyp im Browser: 1–2 Wochen
• Prototyp-Iterationen & Design-System: 2–4 Wochen (Hauptblock)
• Production-Build & Launch: laufend bis Go-Live

Beschleunigung ist möglich, wenn Research-Daten bereits vorliegen oder wenn sich das Design-System stark an bestehender Marke orientiert. Wir kommunizieren realistische Timings in der Discovery-Phase — nicht Wunschdenken, sondern belastbare Aufwandsschätzung.

Ja — sehr gerne. In vielen Projekten übernehmen wir ein bestehendes Brand-System (Logo, Primärfarben, Typo-Familie, Tonalität) und bauen daraus das Webdesign-System. Das passiert besonders häufig bei Kunden, die eine etablierte Marke haben, aber ihre digitale Umsetzung modernisieren wollen.

Was wir in dem Fall tun:

• Brand-Audit — prüfen, ob das bestehende System webfähig ist (Kontraste, Skalierbarkeit, Dark-Mode-Tauglichkeit, Barrierefreiheit)
• Ergänzung fehlender Bausteine — oft fehlen Web-spezifische Elemente wie Form-Styles, Hover-Zustände, Responsive-Typo-Skala oder Accessibility-Farben
• Integration ins Design-System — wir übernehmen Tokens konsistent, statt sie parallel neu zu erfinden

Wenn das bestehende Corporate Design nicht webfähig ist (zu geringer Kontrast, nicht-responsive Schriften, fehlende Zustände), benennen wir das klar und schlagen ein erweitertes Brand-Update vor. Ein kompletter Brand-Relaunch ist allerdings nicht Teil dieses Service — dafür arbeiten wir mit unseren Service Markenkonzepte oder mit Brand-Partnern zusammen.

Sie haben eine zentrale Ansprechperson — in der Regel den Design-Lead oder unsere Projektmanagerin — für strategische und operative Themen.

Tools in der Zusammenarbeit:

• Jira oder Linear für Tickets und Fortschritt
• Slack oder MS Teams für tägliche Kommunikation
• Loom für asynchrone Walkthroughs durch den Live-Prototyp
• Prototyp-Kommentare direkt im Browser — Sie markieren Stellen am laufenden Interface, wir sehen sofort den Kontext

Wir arbeiten in Wochen-Rhythmen mit Review-Terminen am Prototyp: Jede Woche gibt es einen festen 45-Minuten-Termin, bei dem wir den Stand im Browser zeigen, offene Fragen klären und die nächsten Schritte festlegen. Werktags antworten wir auf Slack- oder Email-Anfragen standardmäßig innerhalb von 24 Stunden. Schnellere SLAs sind als vertragliches Add-on möglich, aber kein automatischer Default — wir kommunizieren realistisch, statt ein 1-Stunden-Versprechen zu geben, das im Alltag bricht.

Ja — WCAG 2.2 AA ist Grundlage, nicht Add-on. Das heißt konkret:

• Farbkontraste werden pro Token geprüft — Text auf Hintergrund ≥ 4.5:1, große Texte und UI-Elemente ≥ 3:1
• Fokus-Zustände sind ab dem ersten Prototyp mitgeplant, nicht nachträglich ergänzt
• Schriftgrößen starten bei mindestens 16px im Body-Text, keine ornamentalen Mini-Schriften
• Navigation ist tastaturbedienbar — Tab-Reihenfolge, Skip-Links, sichtbare Fokus-Ringe
• Formulare haben klare Labels, Fehler-Nachrichten und ausreichend große Klick-Ziele (mindestens 44×44px auf Mobile)
• Screen-Reader-Kompatibilität wird in der Entwicklung mit semantischem HTML und ARIA-Attributen umgesetzt

Für Kunden im öffentlichen Sektor oder mit expliziten Accessibility-Anforderungen (z. B. BFSG in Deutschland ab 2025 oder WZG in Österreich) machen wir zusätzlich einen vollen Accessibility-Audit vor Go-Live. Abgrenzung: Wir sind keine zertifizierten Accessibility-Prüfstellen. Wenn Sie eine formale Zertifizierung brauchen, arbeiten wir mit Partnern zusammen, die diese Zertifizierung ausstellen.

Nach Go-Live geht die Design-Arbeit nicht zu Ende — sie verändert sich. Statt Projekt-Modus wechseln Sie in einen laufenden CRO- und Iterations-Modus, typischerweise im monatlichen Retainer.

Was in dieser Phase passiert:

• Real-User-Monitoring — wir beobachten, wie echte Nutzer mit der Website interagieren (Hotjar, GA4, Analytics-Events)
• Hypothesen-basierte Iterationen — jede Design-Änderung ist mit einer messbaren Hypothese verknüpft, nicht mit Bauchgefühl
• A/B-Tests für Conversion-kritische Bereiche (Checkout, Produktseiten, Formulare, Hero-Bereich)
• Neue Landingpages für Kampagnen, Produkt-Launches oder SEO-Strategien — auf Basis des bestehenden Design-Systems
• Erweiterung des Design-Systems, wenn neue Komponenten wiederholt gebraucht werden

Der Vorteil des bestehenden Design-Systems: Neue Seiten entstehen in Tagen statt Wochen, weil Komponenten, Tokens und Verhaltens-Regeln bereits existieren. Iterationen werden billiger und schneller, je länger Sie mit dem System arbeiten. Werktags reagieren wir auf Design-Anfragen standardmäßig innerhalb 24 Stunden.