Gestaltet für den Code: Warum Design und Umsetzung aus einer Hand günstiger sind

Die kurze Antwort: Weil die teuersten Stunden in einem Website-Projekt selten beim Gestalten oder beim Programmieren entstehen, sondern dazwischen. Ein Entwurf geht von einer Person zur nächsten, die nächste interpretiert ihn, die erste findet Abweichungen, beide stimmen sich ab, der Kunde sieht eine Zwischenversion, die keiner von beiden so wollte. Wenn dasselbe Team gestaltet und baut, fallen diese Runden weg.

Deshalb ist Gestaltung durch uns unser Hauptangebot. Ihre Agentur bringt das Corporate Design und die Inhalte Ihres Kunden, wir gestalten, bauen und liefern die fertige Website, white-label und zum Fixpreis. Sie behalten den Kunden, das Konzept und die Freigaben. Wir kümmern uns um den Teil, der sonst zwischen zwei Firmen hin- und hergeht. Direkten Kontakt zu Ihrem Kunden gibt es nur, wenn Sie ihn wünschen.

Drei Stellen kennen alle, die schon einmal einen fremden Entwurf umgesetzt haben.

Die kleine Breite. Ein Entwurf zeigt den Desktop und vielleicht ein Telefon. Dazwischen liegen Tablets, schmale Laptops, gedrehte Geräte und Browserfenster mit 200 % Zoom. Die Richtlinien des W3C verlangen, dass Inhalte bei einer Breite von 320 CSS-Pixeln ohne waagrechtes Scrollen funktionieren ^[3]. Wer das nicht mitgestaltet, lässt es den Entwickler entscheiden, und der Kunde sieht in der Vorschau eine Lösung, die er nie freigegeben hat. Wir lösen das nicht mit einem eigenen Layout für jeden Breakpoint. Wir gestalten Mobile First und legen Regeln fest, die für jede Breite gelten: fließende Schriftgrößen und Abstände, Bausteine, die sich ihrem Platz anpassen. Wie das im Detail aussieht, steht in Figma- oder KI-Layout umsetzen.

Die unsichtbaren Zustände. Was passiert, wenn jemand mit der Tastatur durch die Seite geht, ein Formular falsch ausfüllt oder ein Text doppelt so lang ist wie im Entwurf? Das W3C empfiehlt unter anderem, dass Bedienelemente klar erkennbar und Formularfelder klar beschriftet sind ^[5]; Klickflächen sollen mindestens 24 mal 24 CSS-Pixel groß sein, mit wenigen Ausnahmen ^[4]. Fehlt das im Entwurf, wird es später nachgereicht, mit einer zusätzlichen Freigaberunde.

Die Technik hinter dem Bild. Bilder ohne feste Maße, nachladende Elemente und Webfonts gehören laut web.dev zu den häufigsten Ursachen dafür, dass Seiten beim Laden springen ^[2]. Wer beim Gestalten weiß, wie die Seite gebaut wird, plant Bildformate, Schriftschnitte und Platzhalter so, dass die Seite ruhig und schnell lädt. Das ist der Unterschied zwischen einem Layout, das gut aussieht, und einem, das gut aussieht und gut läuft.

Jede dieser Lücken ist für sich klein. Zusammen ergeben sie die Runde, die in keinem Angebot steht: Der Entwickler fragt nach, die Gestalterin antwortet, der Kunde sieht eine Zwischenlösung und möchte etwas anderes. Bei einem Fixpreis trägt diese Runde jemand, und meistens ist es die Agentur in der Mitte.

Erstens eine feste Zahl. Gestaltung ist im Paket fest kalkuliert, als klar ausgewiesener Teil des Fixpreises und nicht als offener Posten neben der Umsetzung. Sie kalkulieren Ihr Angebot auf einem Preis und legen Ihre Marge selbst fest; die Pakete stehen auf der Startseite, wie die Zusammenarbeit läuft, steht unter Subunternehmer für Agenturen.

Zweitens weniger Abstimmung. Korrekturen sammeln Sie gebündelt und schriftlich an den drei Freigabepunkten ^[1]. Niemand muss erklären, warum der Code vom Entwurf abweicht, weil es keine zwei Versionen gibt.

Drittens eine Website, die Ihr Kunde pflegen kann. Wir gestalten mit Blick auf die Redaktion: Abschnitte, die sich kombinieren lassen, Bildformate, die auch mit dem nächsten Foto funktionieren, Texte, die länger werden dürfen. Wie aus dem Corporate Design ein solches System wird, beschreibt der Artikel Corporate Design rein, Website raus.

Gibt es schon einen Entwurf, etwa aus Figma oder einem KI-Werkzeug, setzen wir ihn zum selben Fixpreis in sauberen Code um. Was ein solcher Entwurf mitbringen sollte, steht in Figma- oder KI-Layout umsetzen.