Vom Screen-Design zur fertigen Webseite

Viele denken beim Thema Website zuerst an das Design. Das ist verständlich. Bei uns entsteht dieses entweder durch unseren Designer Julian oder kommt von Kreativ- oder Performance-Agenturen unserer Kunden, wie zum Beispiel Collective. In beiden Fällen ist zu diesem Zeitpunkt oft schon viel strategische Arbeit passiert.

Gemeinsam mit den Marketing-Verantwortlichen wurden zentrale Fragen geklärt:

• Wie soll sich die Website anfühlen? 

• Welche Inhalte stehen im Fokus? 

• Und wie werden diese so aufbereitet, dass sie nicht nur gut aussehen, sondern auch wirken?

Das Ergebnis ist meist ein durchdachtes Screen-Design. Farben, Typografie und Layout greifen sauber ineinander. Es wirkt fertig. Greifbar. Fast so, als müsste man es nur noch «bauen».

Genau hier beginnt jedoch der eigentliche Teil unserer Arbeit im Entwickler-Team.

Denn was auf den ersten Blick wie eine fast fertige Website aussieht, ist in Wahrheit nur ein statischer Entwurf. Ich übersetzte dieses Design nicht einfach in Code. Meine entscheidende Frage lautet dabei: Wie wird daraus ein flexibles System, das langfristig funktioniert?

Ein Design zeigt, wie eine Website aussehen kann – aber nicht, wie sie sich im Alltag verhält. Es ist eine Momentaufnahme, kein skalierbares Fundament. In der Realität muss eine Website mit unterschiedlichsten Inhalten umgehen, auf allen Geräten funktionieren und von Marketing-Teams eigenständig weiterentwickelt werden können.

Und genau dort trennt sich gute Umsetzung von nachhaltiger digitaler Wertschöpfung.

Ein Design ist nur die Vorlage

Ein Screen-Design beantwortet viele visuelle Fragen: Wie sieht ein Titel aus? Wie sind Inhalte angeordnet? Welche Farben werden verwendet? Was es aber oft nicht zeigt:

• Wie verhält sich das Design auf verschiedenen Bildschirmgrössen (Mobile, Tablet, Desktop)?

• Wie verhält sich das Layout bei langen oder sehr kurzen Texten?

• Was passiert, wenn Inhalte fehlen oder weggelassen werden?

• Wie flexibel sind einzelne Bereiche?

• Wie lässt sich das Ganze im CMS pflegen?

Genau hier verschiebt sich der Fokus. Es geht nicht mehr nur um Gestaltung, sondern um Struktur, Logik und Wiederverwendbarkeit. Oder anders gesagt: Wir bauen nicht einfach eine Seite nach, wir bauen ein System.

Vom Einzelentwurf zum wiederverwendbaren System

Eine Website wird heute selten einmal gebaut und dann nie mehr angefasst. Inhalte ändern sich, neue Seiten kommen dazu, bestehende werden überarbeitet und Strukturen werden laufend weiterentwickelt. Deshalb ist es entscheidend, dass Marketer Inhalte selbstständig pflegen und erweitern können, ohne jedes Mal auf Entwickler (oder Designer) angewiesen zu sein.

Damit das funktioniert, trennen wir das Design in zwei Ebenen:

• Layout und Struktur

• Inhalte und Module

Das Ziel: Ein System, das konsistent bleibt und gleichzeitig flexibel genug ist, um mit echten Inhalten zu arbeiten.

Schritt 1: Design in kleinste Bausteine zerlegen

Der erste Schritt besteht darin, das Design in seine grundlegenden Elemente aufzuteilen. Wir definieren sogenannte «Atoms», also die kleinsten Bausteine:

• Überschriften (H1 bis H6)

• Fliesstext

• Buttons

• Formularfelder

• Farben und Abstände

Diese Elemente werden in einem Styleguide festgehalten. Dadurch stellen wir sicher, dass alles konsistent bleibt, egal auf welcher Seite oder in welchem Modul sie verwendet werden. Das ist die Grundlage für alles, was danach kommt.

Schritt 2: Module und Komponenten definieren

Auf Basis dieser Bausteine entstehen grössere Einheiten: Module. Typische Beispiele sind:

• Bild-Text-Kombinationen

• Card-Layouts

• Hero-Bereiche

Hier geht es nicht mehr nur darum, das Design nachzubauen. Wir definieren bewusst, wie ein Modul funktionieren soll. Das heisst konkret:

• Welche Inhalte gibt es in diesem Modul?

• Welche Felder sind optional?

• Gibt es eine minimale oder maximale Anzahl an Elementen (z.B. bei Cards)?

• Welche Varianten sind möglich?

Ein Titel ist zum Beispiel nicht einfach ein «Textfeld», sondern:

• Kann zwischen H1–H6 gewählt werden?

• Gibt es unterschiedliche Darstellungsvarianten?

• Ist die Darstellung vom Design her von der Semantik getrennt?

Oder bei Cards:

• Müssen Cards zwingend ein Bild enthalten?

• Funktionieren sie mit und ohne Link?

• Was passiert, wenn nur zwei statt vier Elemente vorhanden sind?

Diese Entscheidungen sorgen dafür, dass Module später flexibel einsetzbar sind und nicht nur für genau einen Anwendungsfall funktionieren.

Gleichzeitig achten wir bewusst darauf, ähnliche Sektionen und Module zu vereinheitlichen. Oft gibt es im Design mehrere Varianten mit ähnlicher Funktion oder Darstellung. Statt für jede Variante ein eigenes Modul zu bauen, fassen wir diese zusammen und schaffen eine konsistente, wiederverwendbare Lösung. Design-Variationen werden dabei nicht als separate Module umgesetzt, sondern als Einstellungen innerhalb eines Moduls. Zum Beispiel bei einem Bild-Text-Modul: Reihenfolge von Bild und Text, Spaltenverhältnisse oder Ausrichtungen können flexibel gewählt werden. So bleibt das System schlank und gleichzeitig vielseitig und flexibel einsetzbar.

In diesem Schritt prüfen wir auch kritisch, ob das Design in der Praxis so sinnvoll ist. Gibt es Stellen, die technisch unnötig komplex wären? Oder Bereiche, die aus UX-Sicht verbessert werden könnten?

Kleine Anpassungen, wie klarere Hierarchien, bessere Lesbarkeit oder vereinfachte Interaktionen, machen oft einen grossen Unterschied. Ziel ist nicht, das Design grundlegend zu verändern, sondern es so umzusetzen, dass es im echten Einsatz optimal funktioniert.

Ein weiterer wichtiger Punkt ist das responsive Verhalten. Nicht jedes Design zeigt alle Ansichten vollständig ausdefiniert. Gibt es Varianten für Mobile und Tablet oder nur eine Desktop-Version?

In vielen Fällen wird das Verhalten zwischen den Breakpoints von uns mitgedacht und sinnvoll abgeleitet. Das bedeutet: Wir interpretieren das Design weiter und stellen sicher, dass es auf allen Geräten sauber funktioniert.

Schritt 3: Inhalte mitdenken statt idealisieren

Ein häufiger Fehler: Man arbeitet mit perfekten Inhalten (oder noch schlimmer: mit Platzhaltern oder Dummytexten), die Realität sieht aber selten so aus. Texte sind länger oder kürzer als geplant. Bilder fehlen oder haben andere Seitenverhältnisse. Inhalte ändern sich kurzfristig. Genau deshalb testen wir Module bewusst mit unterschiedlichen Szenarien:

• Sehr lange und kurze Titel & Texte

• Fehlende Inhalte

• Zusätzliche Informationen

So stellen wir sicher, dass das Design nicht nur «im Idealfall» funktioniert, sondern im echten Alltag. Für Marketing-Teams ist das entscheidend. Je flexibler ein System ist, desto einfacher wird die Pflege.

Gleichzeitig zeigt sich hier oft, ob ein Design wirklich nutzerfreundlich ist. Wenn Inhalte nur unter idealen Bedingungen funktionieren, wird es im Alltag schnell schwierig. Deshalb achten wir bewusst darauf, dass Struktur und Inhalte auch aus UX-Sicht klar, verständlich und robust bleiben.

Schritt 4: Umsetzung im CMS mit Fokus auf Nutzung

Die definierten Module werden anschliessend im CMS umgesetzt (in unserem Fall HubSpot). Hier geht es vor allem um eine Frage: Wie einfach ist die Nutzung für den Editor? Deshalb achten wir auf:

• klare und verständliche Eingabefelder

• sinnvolle Gruppierungen von Inhalten

• wiederverwendbare Strukturen (z.B. Repeater für Listen oder Cards)

Zusätzlich berücksichtigen wir globale oder wiederkehrende Inhalte. Elemente wie Kontaktpersonen, Adressen oder andere wiederholt genutzte Inhalte werden zentral gepflegt und an verschiedenen Stellen ausgespielt. So müssen Änderungen nur einmal vorgenommen werden und bleiben über die gesamte Website hinweg konsistent. Das Ergebnis ist eine Oberfläche, die nicht nur technisch funktioniert, sondern im Alltag auch wirklich genutzt werden kann.

Warum dieser Prozess entscheidend ist

Vielleicht wirkt dieser Ansatz auf den ersten Blick aufwendiger als eine direkte Umsetzung «nach Design». Langfristig spart er aber Zeit und verhindert viele typische Probleme:

• Unflexible Seiten

• Inkonsistenzen im Design

• Abhängigkeit von Entwicklern bei jeder kleinen Anpassung

Stattdessen entsteht eine Website, die mitwächst und sich an neue Anforderungen anpassen kann.

Der Unterschied entsteht im Alltag

Ein gutes Screen-Design ist ein wichtiger Startpunkt. Aber erst durch die richtige Struktur, klare Module und durchdachte Umsetzung entsteht eine wirklich funktionierende Website.

Wer von Anfang an in Systemen denkt, stellt sicher, dass eine Website auch über den Launch hinaus flexibel und nutzbar bleibt. Inhalte lassen sich einfacher pflegen, Seiten schneller erstellen und Anpassungen sauber umsetzen.

Und genau das macht am Ende den Unterschied zwischen einer «schönen Website» und einer, die im Alltag wirklich funktioniert.