Auftritte, die
nicht nur schön sind
Websites, Design-Systeme und Headless CMS. Gebaut für die Redaktion, die jeden Tag damit arbeitet — und für Leute, die die Seite über eine schlechte Leitung öffnen.
Webdesign &
Markenauftritte
- Corporate Website
- Relaunch
- Brand & Art Direction
- Design-Systeme
- Headless CMS
- Core Web Vitals
Als Webdesign-Agentur aus Köln gestalten wir Markenauftritte und Unternehmenswebsites, die aussehen wie das Unternehmen dahinter — von der Positionierung über die visuelle Identität bis zum Website-Relaunch eines gewachsenen Auftritts. Kein Template, sondern ein Design-System, das mit euren Inhalten mitwächst.
Redaktionell arbeitet ihr danach selbst. Wir bauen auf Headless CMS — unter anderem WordPress im Headless-Betrieb — mit Bausteinen, die sich nicht kaputt kombinieren lassen. Neue Seiten entstehen dadurch in der Marketingabteilung und nicht in einem Ticket bei uns.
Schnell ist bei uns ein Gestaltungsmerkmal: Core Web Vitals und Barrierefreiheit stehen als Vorgabe fest, bevor die erste Fläche entsteht. Das Ergebnis ist ein Markenauftritt, der auf dem Messestand genauso funktioniert wie auf einem alten Diensthandy im Zug.
Woran es meistens hakt
-
Jede Unterseite sieht anders aus
Über die Jahre hat jede Kampagne ihre eigenen Bausteine mitgebracht. Zwölf Button-Varianten, keine davon dokumentiert.
-
Nur die Agentur kann Inhalte pflegen
Für jede Textänderung geht ein Ticket raus. Die Redaktion hat aufgehört, es zu versuchen.
-
Schön im Pitch, langsam im Alltag
Die Startseite lädt vier Sekunden, weil das Heldenvideo 12 MB hat und niemand danach gemessen hat.
-
Barrierefreiheit steht auf der Liste für später
Bis eine Prüfung kommt. Danach wird nachgerüstet, was von Anfang an billiger gewesen wäre.
Was wir dagegen tun
-
Ein System statt Einzelseiten
Bausteine mit Namen, Regeln und Zuständen. Neue Seiten entstehen daraus, statt daneben.
-
Die Redaktion baut selbst
Bausteine im CMS, die nichts kaputtmachen können. Wir schulen euch einmal, danach braucht ihr uns dafür nicht.
-
Geschwindigkeit ist ein Abnahmekriterium
Budgets pro Seitentyp, gemessen bei jedem Release. Wer das Budget reißt, kommt nicht durch.
-
Zugänglich ab dem ersten Entwurf
Kontraste, Fokus, Tastaturbedienung und Screenreader-Test gehören zur Definition von fertig — nicht in Phase zwei.
Ein System, aus dem sich zwei Marken bauen lassen.
Ein Design-System ist keine Sammlung von Screens, sondern eine Handvoll Entscheidungen: Stufen, Farben, Abstände, Zustände. Sind die geklärt, ist eine zweite Marke eine Konfiguration und kein zweites Projekt. Der Schalter unten tauscht nur die Token aus — Markup und Komponenten bleiben dieselben.
Typo-Stufen
- Überschrift--step-3
- Zwischentitel--step-1
- Fließtext, den man lange liest--step-0
- Beschriftung--step--1
Satzbild
Zeilenlänge, Zeilenabstand und Schriftgrad gehören zusammen und werden einmal entschieden: rund 65 Zeichen pro Zeile, anderthalbfacher Abstand. Zwischen zwei Marken ändert sich daran nichts.
Farbtoken
- --surface
- --line
- --ink
- --accent
- --muted
Abstände
- space-1
- space-2
- space-4
- space-8
Komponenten
Produkt
Serie 40 Kompaktlager
Zwei Größen, sechs Ausführungen, ab Lager verfügbar.
Beide Beispielmarken sind erfunden. Der Punkt ist nicht, wie sie aussehen, sondern dass unter beiden dasselbe Markup liegt.
Was am Ende in eurer Hand liegt.
-
Design-System
Bausteine mit Namen, Regeln und Zuständen — als Figma-Bibliothek und als Code, die dieselben Token benutzen.
-
Redaktionsfähige Seiten
Bausteine, aus denen die Redaktion neue Seiten baut, ohne dass etwas auseinanderfällt.
-
Headless CMS
Inhalte liegen getrennt von der Darstellung. Dieselben Texte können später in App und Newsletter laufen.
-
Geschwindigkeits-Budget
Pro Seitentyp festgelegt und bei jedem Release gemessen. Überschreitung ist ein Fehler, keine Diskussion.
-
Barrierefreiheits-Nachweis
Prüfprotokoll nach WCAG 2.2 AA, inklusive der Stellen, an denen wir bewusst abweichen — mit Begründung.
-
Redaktionshandbuch
Wann welcher Baustein gilt, wie Bilder zugeschnitten werden, was ein guter Alternativtext ist.
Vier Phasen, immer in dieser Reihenfolge.
-
01
Klären
bevor die erste Fläche entsteht
Wer liest hier eigentlich, und was sucht die Person? Ergebnis: Seitenstruktur, Inhaltsarten und die Entscheidung, was wegfällt.
-
02
Gestalten
sobald die Marke steht
Nicht Seite für Seite, sondern System: Stufen, Farben, Abstände, Zustände. Geprüft an den drei hässlichsten echten Inhalten.
-
03
Bauen
sobald das System steht
Komponenten, CMS-Anbindung, Messung. Die Redaktion arbeitet ab dem ersten Baustein mit, nicht erst zur Abnahme.
-
04
Übergeben
zum Launch
Zwei Tage Schulung, Handbuch, und ein Monat, in dem wir noch danebensitzen.
Schnell ist ein Gestaltungsmerkmal.
Eine Seite, die schön aussieht und langsam lädt, ist nicht schön. Wir messen gegen die drei Werte, mit denen Google die Nutzererfahrung bewertet — und legen sie vor dem Entwurf fest, nicht danach.
-
LCP — wann der Inhalt steht
Largest Contentful Paint misst, wann der Hauptinhalt sichtbar ist. Googles Schwelle für „gut“ liegt bei 2,5 Sekunden. Das ist der Wert, den ein Besucher als „schnell“ empfindet.
-
INP — wann sie reagiert
Interaction to Next Paint misst die Antwort auf einen Klick. Schwelle: 200 Millisekunden. Der Wert, der Gestaltung und Technik am härtesten gegeneinanderstellt.
-
CLS — wie sehr sie springt
Cumulative Layout Shift misst, wie viel sich beim Laden noch verschiebt. Schwelle: 0,1. Dahinter steckt fast immer ein Bild ohne Maßangabe.
-
Gemessen wird im Feld
Laborwerte sind Wunschdenken auf einem schnellen Rechner. Was zählt, sind die Daten echter Besucher auf echten Geräten.
-
Gewicht vor dem Entwurf
Wie schwer eine Seite werden darf, steht fest, bevor die erste Fläche entsteht. Vorher ist es eine Entscheidung, nachher eine Diskussion.
-
Bilder sind der Regelfall
Nicht die Ausnahme. Formate, Maße und Ladereihenfolge gehören ins Design-System und nicht in die Nachbesserung kurz vor dem Launch.
Drei Modelle, ehrlich beschrieben.
-
Festpreis
Für klar geschnittene Vorhaben
Wenn nach dem Klären alles steht, geht auch ein Festpreis. Bandbreite statt Wunschzahl, Nachträge nur bei echten Änderungen.
- Klar abgegrenzter Umfang
- Fester Termin
- Änderungen über Change Requests
-
Meistens die richtige Wahl
Zeit & Material
Der Regelfall
Ein festes Team für eine feste Kapazität. Ihr priorisiert alle zwei Wochen neu, wir liefern kontinuierlich.
- Feste Teamgröße
- Alle 14 Tage neu priorisieren
- Monatlich kündbar nach der Einarbeitung
-
Retainer
Für Betrieb und Weiterentwicklung
Feste Kapazität pro Monat für Wartung, Sicherheit und kleinere Ausbauten. Mit Reaktionszeiten, die im Vertrag stehen.
- Garantierte Reaktionszeit
- Rufbereitschaft optional
- Unverbrauchte Stunden verfallen nicht sofort
-
Oft ja. WordPress und TYPO3 lassen sich sauber headless betreiben, und ein Wechsel nur um des Wechsels willen kostet Geld ohne Gegenwert. Wir sagen euch ehrlich, wann es sich trotzdem lohnt.
-
Ja, und zwar als Bibliothek mit denselben Token wie der Code — nicht als Sammlung flacher Screens. Wenn Design und Code auseinanderlaufen, liegt es meist daran, dass sie nie dieselbe Quelle hatten.
-
Ein Budget pro Seitentyp, gemessen bei jedem Release, plus die üblichen Handgriffe: keine Schriftflut, Bilder in der richtigen Größe, so wenig JavaScript wie möglich. Die meisten langsamen Seiten sind nicht schlecht gebaut, sondern nie gemessen worden.
-
Ja, aber ungern ohne den Bau. Ein System, das nie durch echte Inhalte gegangen ist, hält dem ersten Redaktionstag selten stand.
-
Für viele Angebote gilt sie seit Juni 2025 verbindlich. Wir bauen ohnehin nach WCAG 2.2 AA und liefern das Prüfprotokoll mit — inklusive der Punkte, die ihr redaktionell selbst einhalten müsst.
Was in solchen Vorhaben meistens danebensteht.
-
E-Commerce
Ein Shop ist der sichtbare Teil. Der unsichtbare ist die Frage, welches System beim Preis recht hat.
-
Digitale Produkte
Ein Portal ist schnell gebaut und lange in Benutzung. Wer es entwirft, sollte wissen, wer es danach bedient.
-
Webhosting & Betrieb
Was gebaut wird, läuft danach jahrelang. Wer den Pager trägt, gehört deshalb früh an den Tisch.
Zeig uns, was ihr heute habt
15 Minuten, ohne Verkaufsdeck. Danach weißt du, ob ein System oder nur ein Anstrich das Richtige ist.