Webdesign-Prozess: Vom Konzept zum Screendesign

Von der Strategie zum Screendesign

Im ersten Teil dieser Serie haben wir erklärt, wie ein sauberes Website-Konzept entsteht: Ziele, Zielgruppen, Kernbotschaften, Funktionsumfang. Dieser Post setzt genau dort an. Screendesign ist keine Geschmacksfrage, sondern die visuelle Übersetzung deiner Strategie in ein Interface, das Kunden und Partner überzeugt.

Wir arbeiten aus Köln als Webdesign-Agentur für den Mittelstand. Was du hier liest, ist unser Vorgehen aus über einem Jahrzehnt Projekten, nicht ein generischer Prozess aus dem Lehrbuch.

Was fließt ins Design ein?

Ein gutes Screendesign ist nie ein Zufallsprodukt. Es speist sich aus zwei Quellen: der Strategie aus Schritt 1 und der Corporate Identity des Kunden. Beides zusammen ergibt die Leitplanken, innerhalb derer wir gestalten.

Welche Software: WordPress, Webflow, Lovable, Figma?

Die häufigste Frage in dieser Phase: Auf welcher Plattform bauen wir? WordPress, Webflow, Lovable, ein eigenes System? Handgezeichnete Skizze, Figma-Datei, statische Screens oder KI-Prototyp?

Unsere Antwort ist unbequem, aber ehrlich: In der Designphase ist das egal.

Ein Design muss drei Dinge leisten:

1. Es muss konvertieren – also die im Konzept definierten Ziele erreichen.
2. Es muss zum Unternehmen passen – zu Marke, Kunden, Mitarbeitern und Management.
3. Es muss Kunden und Partner beeindrucken – ohne sich dabei aufzudrängen.

Ob wir das Design mit Stift auf Papier, in Figma, als statische Bildpräsentation oder als interaktiver KI-Prototyp entwickeln, ändert daran nichts. Die Plattformwahl gehört in die Entwicklungsphase, nicht in die Gestaltung.

Form follows Function – jede Design-Entscheidung braucht einen Grund

„Sieht gut aus" ist keine Begründung. Jedes Element auf einer Seite muss auf eine Frage antworten, die in der Konzeptphase gestellt wurde. Warum steht dieser Button hier und nicht drei Zeilen tiefer? Warum diese Headline und nicht die Alternative? Warum ein Video und nicht ein Bild?

Wir arbeiten mit einem einfachen Prinzip: Zu jeder Design-Entscheidung notieren wir die zugrundeliegende Zielfrage aus dem Konzept. Ohne Bezug fliegt das Element wieder raus. Das schützt vor Overdesign und macht Feedback-Runden objektiv, weil wir nicht über Geschmack diskutieren, sondern über Zielerreichung.

Interaktiver Klickdummy statt statischer Screens

Statische Screens sind ein Kompromiss aus einer Zeit, in der interaktive Prototypen zu teuer waren. Unsere Erfahrung aus vielen Kundenprojekten: Menschen, die nicht täglich mit Design oder Webentwicklung zu tun haben, tun sich schwer, ein Interface aus Standbildern zu bewerten. Animationshinweise werden übersehen, responsive Verhalten muss man erklären, Interaktionslogiken sind auf Papier abstrakt.

Durch die Fortschritte bei generativer KI bauen wir bereits in der Entwurfsphase interaktive Klickdummies. Der Kunde erlebt die Seite, klickt sich durch, spürt die Rhythmen, prüft die Übergänge. Wie ein Design wirklich wirkt, lässt sich an einem Bild nicht erkennen – erst im Zusammenspiel von Bewegung, Reaktion und Geschwindigkeit.

Der zweite Vorteil ist ein wirtschaftlicher: Der Sprung von Entwurf zu Entwicklung wird kürzer. Elemente, Interaktionen und Komponenten aus dem Klickdummy lassen sich zum Teil direkt in die spätere Umsetzung übernehmen, statt sie ein zweites Mal aufzubauen.

Das Maluure-Sorgfaltsprinzip

Eine Website darf sich keine Fehler erlauben. Klingt hart, ist aber Psychologie. Nutzer übertragen die Qualität einer Website auf die Qualität der dahinterstehenden Leistung – auch dann, wenn sachlich kein Zusammenhang besteht.

Stanford-Forscher haben in einer Studie mit 2.684 Teilnehmenden gezeigt, dass Nutzer bei der Bewertung der Glaubwürdigkeit einer Website am häufigsten den „design look" nennen – häufiger als Inhalt, Betreiber oder Quellenangaben.^[1] Und Lindgaard et al. konnten belegen, dass sich diese Beurteilung schon nach 50 Millisekunden festsetzt.^[2] Danach filtert dein Kunde alles Weitere durch diesen ersten Eindruck.

Konkret heißt das: Text, der unprofessionell am Rand klebt, ein Bildhintergrund, der nicht sauber freigestellt ist, eine Headline, die auf Mobil umbricht – jeder dieser Fehler wird psychologisch mit deiner Leistung verknüpft. Auch wenn du in Wirklichkeit exzellente Arbeit lieferst.

Bei der Website für Schwaben Aesthetic und Dr. Mathew Muringaseril hat dieses Prinzip den Ausschlag gegeben. Als ästhetischer Chirurg lebt der Kunde von einem einzigen Signal: absolute Präzision. Jeder unsaubere Abstand, jede zu weiche Kante hätte diesen Anspruch untergraben. Also musste jede Kachel, jede Typografie, jeder Bildrahmen exakt sitzen. Dasselbe gilt in abgeschwächter Form für jedes ernsthafte Kundenprojekt.

Unsere Design-Power aus Köln

Design ist Handwerk. Handwerk braucht Erfahrung. Wir arbeiten mit einem Inhouse-Team aus Designerinnen und Designern, das gemeinsam mehrere Jahrzehnte Berufserfahrung mitbringt – von Corporate Design über Editorial bis zu Interface und Motion.

Für Spezialdisziplinen wie 3D, Illustration oder Custom-Typografie arbeiten wir mit einem Netzwerk ausgewählter Freelancer zusammen, mit denen wir seit Jahren feste Prozesse teilen. Nach außen bleibt es ein Ansprechpartner: Wir übernehmen Projektleitung, Qualitätssicherung und Verantwortung für das Endergebnis.

• Inhouse-Team für Konzept, Screendesign, Interface und Motion
• Feste Freelance-Partner für 3D, Illustration, Typografie und Sondergewerke
• Ein Ansprechpartner, ein Projektmanagement, eine Verantwortung
• Standort Köln, Zusammenarbeit deutschlandweit remote und vor Ort

Was kostet Screendesign bei einer Webdesign-Agentur?

Die ehrliche Antwort: Es kommt an. Preise für Screendesign schwanken bei seriösen Agenturen in Deutschland zwischen etwa 4.000 und 20.000 Euro netto für eine mittelständische Unternehmenswebsite. Die Spannbreite hat handfeste Gründe – nicht Willkür.

Die wichtigsten Einflussfaktoren:

• Anzahl der Templates. Eine Startseite plus fünf Unterseiten-Layouts ist ein anderer Aufwand als 15 individuell gestaltete Content-Typen.
• Reifegrad der Corporate Identity. Liegt eine saubere CI mit Farben, Typografie und Bildwelt vor, spart das Tage. Fehlt sie, gehört sie in den Scope oder in ein Vorprojekt.
• Interaktivität und Motion. Ein statisches Layout ist günstiger als ein interaktiver Klickdummy mit Micro-Interactions, Scroll-Effekten und responsivem Verhalten.
• Anzahl der Freigabezyklen. Zwei Feedback-Runden sind Standard, fünf treiben den Preis. Klare Entscheidungswege auf Kundenseite senken die Kosten spürbar.
• Individualisierung vs. Baukasten. Ein individuelles Screendesign ist teurer als ein Theme-Refresh – dafür differenziert es dich am Markt.

Bei Maluure kalkulieren wir Screendesign transparent nach Aufwand und dokumentieren jede Position. Als Webdesign-Agentur aus Köln arbeiten wir mit fest kalkulierten Paketen für den Mittelstand, ohne Aufschläge für Standorte oder Corporate-Overhead.

Wie lange dauert die Designphase?

Für eine mittelständische Unternehmenswebsite planen wir drei bis sechs Wochen vom ersten Entwurf bis zum freigegebenen Klickdummy. Kürzere Zeiträume sind bei kleinem Scope möglich, längere entstehen fast immer nicht durch Design-Arbeit, sondern durch Freigabezyklen auf Kundenseite.

Ein typischer Ablauf:

1. Woche 1: Moodboards und Design-Richtung. Aus Konzept und CI entstehen zwei bis drei visuelle Richtungen. Kunde wählt eine aus.
2. Woche 2–3: Screendesign der Kern-Templates. Startseite, wichtigste Landingpage, Produkt- oder Leistungsseite, Kontakt.
3. Woche 3–4: Klickdummy. Verknüpfung, Interaktionen, responsive Zustände. Präsentation und Feedback-Runde.
4. Woche 4–6: Feinschliff. Zweite Feedback-Runde, Detailoptimierung, finale Freigabe.

Drei Hebel entscheiden über die tatsächliche Dauer: Wie schnell Feedback kommt, ob eine Person oder ein Gremium entscheidet, und wie gut das Konzept aus Schritt 1 gearbeitet ist. Ein sauberes Konzept spart in der Designphase erfahrungsgemäß ein bis zwei Wochen.

Was danach kommt

Erst wenn das Screendesign steht, das Kunden-Feedback im Klickdummy eingearbeitet ist und alle Detailfragen geklärt sind, gehen wir in die Entwicklung. Wie wir dort vorgehen – Wahl der Plattform, Code-Qualität, Performance, SEO-Basis, Launch-Prozess – ist Thema des dritten Teils dieser Serie.

Passt dazu

• Website erstellen lassen – Preise 2026 (mit Rechner): Preisrahmen fürs Screendesign transparent kalkulieren.
• Leistung: Branding: Marke und Design-System als Grundlage vor dem Screendesign.
• Leistung: Print: Screendesign konsistent in gedruckte Formate übersetzen.