Webdesign – der Design-Prozess

Prozessübersicht:

• Phase 1: Design-Analyse
• Phase 2: Design-Konzeption
• Phase 3: Visuelle Gestaltung
• Phase 4: Design-Finalisierung & Übergabe

Unser Vorgehen stellt sicher, dass das Design Nutzerbedürfnisse, Markenidentität und individuelle Ziele des Kunden berücksichtigt.

Phase 1: Design-Analyse

Ziel: Verständnis von Kunde, Branche, Nutzer und Mitbewerber.

Input:

• Informationen vom Kunden (Unternehmen, Zielgruppe, Ziele, Designvorstellungen)
• Bestehende Inhalte & Corporate Design
• Wettbewerbsanalyse

Prozess / Schritte:

• Analyse der Zielgruppe
• Analyse der Branche und Mitbewerber
• Erfassen von Markenwerten und bisherigen Assets

Output / Ergebnis:

• Klar definierte Design-Anforderungen
• Liste der Designziele
• Briefing für die nächste Phase

Rollen:

• Lilac Media: Durchführung der Analyse, Erstellung des Briefings
• Kunde: Bereitstellung von Informationen und Feedback

Phase 2: Design-Konzeption

Ziel: Strukturelle Grundlage für die Gestaltung schaffen.

Input:

• Analyse-Ergebnisse aus Phase 1
• Designziele und Kundenwünsche

Prozess / Schritte:

• Erstellung des Layout- und Navigationskonzepts
• Entwicklung eines visuellen Grundkonzepts abgestimmt auf Markenidentität
• Auswahl von Typografie, Farbpalette, Bildstil (grundlegend)

Output / Ergebnis:

• Konzept-Dokument / Wireframes
• Designrichtlinien für visuelle Gestaltung

Rollen:

• Lilac Media: Entwurf des Konzepts, Abstimmung mit dem Kunden
• Kunde: Feedback zu Struktur und Konzept

Phase 3: Visuelle Gestaltung

Ziel: Konkrete, visuelle Umsetzung des Design-Konzepts.

Input:

• Konzept-Dokument aus Phase 2
• Kundenfeedback

Prozess / Schritte:

• Gestaltung der Screens / Seitenlayouts
• Integration von Farb- und Typografie-Richtlinien
• Abstimmung der visuellen Elemente auf Marke und Zielgruppe

Output / Ergebnis:

• Finaler Design-Entwurf (Prototyp)
• Vorschau der wichtigsten Seiten / Templates

Rollen:

• Lilac Media: Erstellung des Designs, Anpassung nach Feedback
• Kunde: Feedback zu finalen Entwürfen

Phase 4: Design-Finalisierung & Übergabe

Ziel: Abschluss des Design-Prozesses und Vorbereitung für Umsetzung.

Input:

• Finaler Entwurf aus Phase 3
• Letzte Rückmeldungen des Kunden

Prozess / Schritte:

• Umsetzung kleiner Anpassungen
• Fertiger Prototyp zur Übergabe
• Sicherstellung der Konsistenz über alle Seiten

Output / Ergebnis:

• Freigegebenes finales Design
• Fertiger Prototyp für die weitere Inhaltsintegration

Rollen:

• Lilac Media: Feinschliff und Übergabe
• Kunde: Freigabe und Abnahme

Fallbeispiel: Webdesign für eine neu gegründete Hausarztpraxis

Ausgangssituation & Ziel

Eine Hausärztin gründet eine neue Praxis. Ziel der Website ist es, Patienten klar und verständlich durch organisatorische Abläufe zu führen – insbesondere bei Terminen, Rezepten und Überweisungen. Das Design soll die Praxisorganisation unterstützen und dem Praxisteam Arbeit abnehmen.

Lilac Media übernimmt die Konzeption und Gestaltung eines klaren, nutzerfreundlichen Webdesigns.

Phase 1: Design-Analyse

Zu Beginn wurde gemeinsam definiert, welche Aufgaben die Website für Patienten erfüllen soll. Der Fokus lag auf Orientierung, Verständlichkeit und Reduktion von Rückfragen.

Ein Corporate Design existierte nicht. Die Kundin wünschte kein Logo, sondern nannte lediglich die Farbwelt Bordeaux, Weiß und Silbergrau sowie ein bewusst schlichtes, klares Erscheinungsbild.

Die Inhalte wurden arbeitsteilig vorbereitet: Die Kundin lieferte kurze, reduzierte Texte, während Lilac Media vor Ort in der Praxis authentische Fotos erstellte.

Phase 2: Design-Konzeption

Auf Basis der Analyse entstand ein Designkonzept, das ohne Logo und mit sehr reduziertem Text funktioniert. Ein zentrales Gestaltungselement war die Wahl der Typografie.

Zum Einsatz kam eine breite, serifenlose Schrift, die auch bei wenig Text visuelle Präsenz erzeugt und gleichzeitig sehr gut lesbar ist. Das Schriftbild vermittelt Stabilität und Sicherheit – unabhängig vom jeweiligen Inhalt.

Phase 3: Visuelle Gestaltung

Die Gestaltung folgt einem kompakten, ruhigen Layout mit klarer Navigation. Bordeaux wird gezielt als Leitfarbe eingesetzt, um Menüelemente und zentrale Handlungsaufforderungen hervorzuheben.

Die Menübezeichnungen sind bewusst handlungsorientiert gewählt, sodass Patienten sofort erkennen, wie sie Termine vereinbaren oder Anliegen klären können. Der Inhaltsbereich ist zurückhaltend gestaltet, um Informationen schnell und ohne Ablenkung erfassbar zu machen.

Phase 4: Design-Finalisierung & Übergabe

Nach der Abstimmung mit der Hausärztin wurde das Design konsistent auf alle Seitentypen übertragen und finalisiert. Jede Seite erhielt ein thematisch passendes Praxisfoto.

Für die Texte wurden lesefreundliche Layouts entwickelt, die je nach Inhaltstyp variieren. Der finale Design-Prototyp wurde übergeben und bildet die gestalterische Grundlage für weitere Seiten und Inhalte.