Webdesign

Webdesign, das arbeitet. Nicht nur gefällt.

Ob ein Design gut ist, entscheidet nicht der Geschmack, sondern was Besucher danach tun. Deshalb ist unser Entwurf eine echte Webseite — und wir messen sie, bevor Sie freigeben.

Lieber anrufen? 09075 5923957 · Mo–Fr, 8–18 Uhr

Design, das wir messen — nicht nur zeigen

  • Bedienbar ohne Maus 100 % jedes Element
  • Ladezeit, mobil < 2 s Budget, schriftlich
  • Weg bis zum Formular ≤ 2 Klicks Vorgabe je Seitentyp
  • Kleinste Schrift dieser Karte 5,2 : 1 Vorgabe 4,5
Geschmacksfrage
am Ende
Was der Besucher tut
am Anfang

Das kennen wir

So sieht es aus, wenn Design als Bild entsteht.

Das Muster ist fast immer dasselbe, und es ist kein Versagen Ihres Teams. Haken Sie an, was Sie kennen.

Das Design wurde für die Präsentation gemacht, nicht für den Besucher mit einer Frage. Große Bilder, kleine Wege zum Ziel. Gefällt im Meeting, bringt keine Anfrage.

Entworfen und abgenommen am großen Bildschirm. Zwei Drittel Ihrer Besucher sehen aber die schmale Version, und die hat vor dem Livegang niemand in der Hand gehabt.

Freigegeben wurde ein Entwurf am großen Bildschirm. Gebaut hat ihn jemand anderes, so gut es ging. Jede Abweichung war eine Abstimmungsrunde, und am Ende wusste niemand mehr, welche Version die richtige ist.

Es gab drei Entwürfe, aber kein System. Ihre Redaktion baut seitdem nach Gefühl: andere Abstände, andere Buttons, eine vierte Grau-Variante. Nach einem Jahr erkennt man das Design nur noch auf der Startseite.

0 von 4

Noch nichts angehakt. Trifft nichts davon zu, ist bei Ihnen mehr in Ordnung als bei den meisten — dann sagen wir Ihnen das auch.

Ein Punkt ist meistens schnell geklärt, kein Projekt. Was davon nötig ist, klären wir im Erstgespräch.

Mehrere Punkte. Ab hier lohnt das Rechnen — und genau dafür ist das Erstgespräch da.

Alles angehakt. Das ist kein Zustand, den man aussitzt: Die Kosten laufen weiter, nur unsichtbar.

Erstgespräch vereinbaren

Was wir tun

Vier Dinge, die unser Webdesign von einem Bild unterscheiden.

Sie klicken durch, statt zu blättern

Jeder Entwurf ist eine echte Seite unter einem Link: mit Navigation, Klickwegen und Ihren Inhalten. Sie prüfen ihn dort, wo Ihre Besucher später sind, auf dem eigenen Handy. Jede Version bleibt abrufbar, Sie können vergleichen und zurück.

Erst der Weg, dann das Bild

Wir gestalten vom Ziel her: Was soll jemand auf dieser Seite tun, und was braucht er dafür? Daraus entstehen Seitentypen, nicht Einzelseiten, und eine Gestaltung, die zu Ihrer Marke passt, statt zum Trend des Jahres.

Regeln, die Ihre Redaktion einhält, ohne sie zu kennen

Farben, Schriften, Abstände, Bausteine: einmal festgelegt und in die Inhaltsbausteine eingebaut. Wer eine neue Seite zusammensteckt, bekommt automatisch das richtige Design. Und weil Entwurf und Website dieselben Werte nutzen, wird nichts nachgebaut: Der freigegebene Entwurf ist der Anfang des Codes.

Barrierefrei und schnell, gemessen am Entwurf

Weil der Entwurf eine echte Seite ist, lässt er sich prüfen wie eine: Kontraste, Bedienung ohne Maus, Ladezeit. Das passiert vor Ihrer Freigabe, nicht nach dem Livegang. Nachbessern ist teurer als richtig anfangen.

Sie müssen das hier nicht lesen — dafür haben Sie ja uns. Aber wenn Ihre Marketing- oder IT-Leitung mit am Tisch sitzt, hier die Methode:

Grundlage

  • Sitemap, Seitentypen und Inhaltsbausteine aus der Konzeption
  • bestehendes Corporate Design (Logo, Farben, Schrift) als Ausgangspunkt
  • eine Zielaktion je Seitentyp

Entwurf als HTML

  • jede Seite ist eine statische HTML-Seite, gebaut aus einer gemeinsamen Hülle: ein Kopf, eine Navigation, ein Footer
  • erreichbar unter einem eigenen Link, ohne Login, für Suchmaschinen gesperrt
  • Versionen liegen nebeneinander (v1, v2, …), nichts wird überschrieben

Design-Tokens

  • Farben, Schriftgrößen, Abstände, Radien und Schatten als benannte Werte
  • eine Quelle für Entwurf und Website (DESIGN.md, Tailwind-Konfiguration)
  • Abweichungen zwischen Entwurf und Umsetzung werden automatisch geprüft

Komponenten

  • jeder Baustein im Entwurf entspricht einem TYPO3-Inhaltsbaustein (Content Blocks), das Markup ist CMS-fähig
  • Zustände (Hover, Fokus, Fehler, leer) sind Teil des Entwurfs
  • Styleguide-Seite im System, nicht als PDF

Prüfung am Entwurf

  • Kontrast mindestens 4,5:1 (Text) und 3:1 (Bedienelemente), sichtbarer Fokus, Bedienung per Tastatur, Bewegung reduzierbar
  • automatisierte Prüfung (axe) und Lighthouse auf jeder Version, gegen BITV 2.0 / WCAG 2.2 AA
  • Performance-Budget: Web-Fonts auf zwei Schnitte, Bilder in AVIF/WebP mit Größenvorgaben je Baustein, Ladezeit-Zielwert schriftlich

HTML, Tokens, Styleguide und Bausteine liegen im Repository und gehören Ihnen — jedes andere Team kann damit weiterarbeiten.

Das Ergebnis

Was Sie am Ende in der Hand halten.

Den Entwurf als Webseite.

Alle Seitentypen unter einem Link, mit Ihren Inhalten, auf jedem Gerät. Sie entscheiden an der Sache selbst, nicht an einem Bild davon.

Das Design-System.

Farben, Schriften, Abstände, Bausteine, als lebender Styleguide in Ihrem TYPO3. Neue Seiten sehen aus wie die alten, ohne dass jemand daran denken muss.

Die Bausteine, fertig gestaltet.

Hero, Teaser, Akkordeon, Formular, Kennzahlen: jeder Baustein in jedem Zustand. Ihre Redaktion sieht vorher, womit sie arbeiten wird.

Den Prüfbericht.

Kontraste, Bedienbarkeit, Ladezeit — gemessen am Entwurf, bevor Sie freigeben. Das Dokument, das Sie vorzeigen, wenn jemand nach Barrierefreiheit fragt.

Wie es abläuft

Vom Konzept zur Website, in vier Schritten.

Am Ende steht kein Entwurf, der nachgebaut wird, sondern der Anfang Ihrer Website.

  1. 01 Halber Tag

    Grundlage

    Wir übernehmen Sitemap, Seitentypen und Ziele aus der Konzeption. Gibt es noch keine, klären wir das Nötigste in einem halben Tag mit Ihnen, bevor jemand gestaltet.

  2. 02 Zwei Richtungen

    Richtung

    Zwei Gestaltungsrichtungen als echte Seiten unter je einem Link: Startseite und ein Seitentyp, aus Ihrem Corporate Design entwickelt. Sie klicken beide auf dem Handy durch und entscheiden sich für eine.

  3. 03 Jede Version bleibt

    Seitentypen

    Wir gestalten alle Seitentypen im Browser. Sie geben Rückmeldung, wir stellen die nächste Version daneben, in Tagen, nicht Wochen. Zwei Korrekturrunden sind eingeplant, und jede Version bleibt abrufbar.

  4. 04 Gehört Ihnen

    Freigabe und Weiterbau

    Der freigegebene Entwurf wird nicht nachgebaut, er wird weitergebaut: Tokens, Bausteine und Styleguide gehen so in Ihr TYPO3. Alles davon gehört Ihnen.

Webdesign ohne Haken.

Wie wir rechnen

  • Festpreis vor Projektstart
  • 100 % Ihr Design
  • 1 Quelle für Entwurf und Website
  • < 3 h bis zur Antwort

Der Rahmen

Was ein Relaunch kostet und wie lange er dauert.

Erfahrungswerte aus 50+ Projekten. Ihre konkrete Zahl steht vor Projektstart — und sie hält.

Überschaubar

5.000 – 15.000 €

Etwa 6 – 10 Wochen

  • Bis ~40 Seiten, eine Sprache
  • Bestehendes Corporate Design
  • Standard-Inhaltsbausteine
  • Kontaktformular, Suche

Plattform

ab 35.000 €

Etwa 6 – 9 Monate

  • Mehrere Sprachen und Mandanten
  • Mehrere Schnittstellen, ERP
  • Redaktions-Workflows, Rechte
  • In Phasen umsetzbar

Vier Angaben — und Sie wissen, woran Sie sind.

Unsere Website hat wie viele Seiten? bis ~40 Seiten bis ~200 Seiten mehr als 200 Seiten oder mehrere Mandanten
Unsere Website hat wie viele Seiten?
Die Gestaltung wird wie? übernommen neu entwickelt für mehrere Marken gebaut
Die Gestaltung wird wie?
Die Inhalte werden woher? neu geschrieben aus dem alten System übernommen mehrsprachig übernommen
Die Inhalte werden woher?
Dazu kommen welche Anbindungen? keine Anbindungen eine Anbindung, z. B. Stellenportal mehrere Anbindungen, z. B. ERP
Dazu kommen welche Anbindungen?

Ihr Rahmen

Noch offen.

Füllen Sie die Sätze aus — die Spanne steht sofort hier, ohne Formular und ohne Kontaktdaten.

5.000 – 15.000 €

Etwa 6 – 10 Wochen

Bis ~40 Seiten, eine Sprache · Bestehendes Corporate Design · Standard-Inhaltsbausteine · Kontaktformular, Suche

15.000 – 35.000 €

Etwa 3 – 5 Monate

Bis ~200 Seiten, Inhalte migriert · Gestaltung neu, mit Ihnen entwickelt · Eigene Inhaltsbausteine · Eine Schnittstelle, z. B. Stellen

ab 35.000 €

Etwa 6 – 9 Monate

Mehrere Sprachen und Mandanten · Mehrere Schnittstellen, ERP · Redaktions-Workflows, Rechte · In Phasen umsetzbar

Was den Preis bewegt: Anzahl der Seiten, Zustand der alten Inhalte, Sprachen, Schnittstellen — und wie viel Ihre Redaktion selbst beisteuert. Nicht: die Zahl der Abstimmungsrunden.

ZfP Südwürttemberg · Kommunaler Klinikverbund

Ein Projekt im Detail.

Alle Case Studies

Jede Stelle steht online, ohne dass sie jemand einträgt.

TYPO3-Karriereportal für das ZfP Südwürttemberg: Stellen fließen automatisch aus dem Bewerbermanagement, die Suchmaschinen-Texte entstehen gleich mit, besetzte Stellen räumen sich selbst weg.

  • 4.000+ Mitarbeitende im Verbund
  • 0 Stellen manuell gepflegt
  • 2021 gebaut, seither betreut
Zur Case Study
Screenshot ZfP Südwürttemberg
Screenshot ZfP Südwürttemberg, Ansicht auf dem Handy

Das sagen nicht wir. Das sagt eine Kundin.

5,0 aus 7 Google-Rezensionen

Weinzentrale Eberle
Wir arbeiten mit der Agentur Vibe Digital für unseren Shopware 6 Webshop zusammen und sind rundum zufrieden. Unser Ansprechpartner Patrick Schatzschneider hat das Frontend unseres Shops umgesetzt und betreut uns seitdem in allen Fragen und Weiterentwicklungen. Die Zusammenarbeit ist äußerst professionell, zuverlässig und angenehm. Anpassungen und Optimierungen werden stets sehr schnell, zielgerichtet und mit einem klaren Verständnis für unsere Anforderungen umgesetzt. Besonders schätzen wir die proaktive Beratung und die lösungsorientierte Herangehensweise. Auch mit Blick auf zukünftige Entwicklungen fühlen wir uns bestens aufgestellt und strategisch gut begleitet. Klare Empfehlung für alle, die einen kompetenten und verlässlichen Partner im Webshop-Umfeld suchen

50+ Projekte seit 2020 · Eine Auswahl

  • Admin Intelligence
  • ZfP Südwürttemberg
  • Brücke Uelzen
  • Bistum Regensburg
  • PP.rt
  • Fortis e.V.
  • Die Tagespost Stiftung für katholische Publizistik
  • SINOVA Schussental
  • Caritas Augsburg
  • Weinzentrale Eberle
  • GP.rt
  • Jakob-Christian-Adam Stiftung
  • Schneider-SET GmbH
  • EDEKA Frank
  • Bad Blau

FAQ

Häufige Fragen zum Webdesign

Was Webdesign und Relaunch kosten

Webdesign ist bei uns eine Phase des Relaunchs, kein eigenes Produkt: Sie zahlen es im Projektpreis, nicht extra. Ein Relaunch mit neuer Gestaltung liegt meist zwischen 15.000 und 35.000 €, die Spannen stehen offen auf unserer Preise-Seite. Unser Stundensatz liegt bei 110 €.

Ein einzelner Webdesigner ist oft günstiger und für eine kleine Seite eine gute Wahl. Bei uns bekommen Sie Gestaltung und Umsetzung aus einem Team, ein Design-System statt einzelner Entwürfe, und jemanden, der auch in drei Jahren noch erreichbar ist, wenn die Seite wachsen soll. Die Frage ist weniger „wer ist besser“ als „was soll die Seite in drei Jahren können“.

Ja, das ist der Normalfall. Logo, Farben und Schrift bleiben; wir übersetzen sie in ein System für die Website. Ein neues Corporate Design entwickeln wir nicht, dafür empfehlen wir eine Markenagentur.

Auf Wunsch ja, für die Ablage. Entschieden wird aber am Link: Der Entwurf ist eine echte Webseite mit Ihren Inhalten, die Sie auf dem Handy und am Schreibtisch öffnen. Ein PDF zeigt eine Breite und keinen Klick, genau das, was nachher Probleme macht.

Ja. HTML, Tokens, Styleguide und Bausteine gehören Ihnen, und jedes Team kann damit weiterarbeiten. Wir gestalten nur, wo wir auch bauen, weil Entwurf und Website bei uns dieselbe Quelle haben. Gebunden sind Sie daran nicht.

Vier bis sechs Wochen von der Richtungsentscheidung bis zum fertigen Design-System, bei fünf bis acht Seitentypen. Der Zeitplan hängt vor allem an Ihren Rückmeldungen.

Nicht zwingend. Das Design braucht aber eine Struktur: welche Seiten es gibt und was sie leisten sollen. Liegt das vor, fangen wir direkt an. Liegt es nicht vor, klären wir es in einem halben Tag mit Ihnen oder empfehlen die Konzeption, wenn mehr als eine Person mitentscheidet.

Das Design wird geprüft wie eine fertige Seite: Kontraste, Schriftgrößen, Fokus und Bedienung ohne Maus, bevor Sie freigeben. Ob die fertige Website die Anforderungen erfüllt, hängt auch von Umsetzung und Inhalten ab. Dafür gibt es unsere Leistung Barrierefreiheit mit dem Nachweis nach BITV 2.0.

Manchmal. Wenn Ihr TYPO3 aktuell ist und sauber gebaut, lässt sich das Design austauschen, ohne alles neu zu machen. Ob das bei Ihnen geht, zeigt der kostenlose TYPO3-Check. Oft ist der Relaunch am Ende günstiger als das Umbauen.

Texte liefern Sie, wir gestalten mit echten Inhalten, nicht mit Blindtext. Wo Bilder fehlen, erstellen wir Bildvorschläge im Stil Ihrer Marke. Ein Design, das nur mit perfekten Fotos funktioniert, ist keins.

Gestaltung, die arbeitet.

Im Erstgespräch sagen wir Ihnen, ob Ihre Struktur für das Design reicht oder ob erst eine Konzeption nötig ist, und was beides kostet. Antwort in unter 3 Stunden.

Lieber anrufen? 09075 5923957 Mo–Fr, 8–18 Uhr

Patrick Schatzschneider Patrick Schatzschneider Geschäftsführung & Entwicklung
Ihre Nachricht landet bei mir — nicht in einem Postfach. Wer im Erstgespräch sitzt, arbeitet später an Ihrem Projekt.

Vibe Digital GmbH · gegründet 2020 · Raum Ulm

  1. Sie schreiben oder rufen an Zwei Sätze reichen. Kein Formular mit zwölf Pflichtfeldern.
  2. Antwort in unter 3 h Von der Person, die Ihr Projekt später betreut — nicht vom Vertrieb.
  3. Schriftlicher Rahmen Nach dem Gespräch: Umfang, Zeitraum und Kosten schwarz auf weiß.