Teil 3: Zwischen Wunsch und Wirklichkeit: UI/UX-Design
Die Basis steht. Im ersten Teil unseres Playbooks wurde der Schmerz definiert, in Teil 2 haben wir mit Personas, Sitemap und Wireframes den digitalen Bauplan erstellt. Jetzt kommt der kreative Teil. Doch Design ist bei KREAVIS keine Geschmacksfrage, sondern die visuelle Übersetzung der Strategie. Wir zeigen dir, wie wir aus dem schwarz-weißen Skelett (Wireframes) ein lebendiges, überzeugendes Produkt machen.
Wir sind Przem, dein Projektmanager-Vollprofi, und Emma, deine Web-Entwicklerin mit UX-Fokus. Los geht’s!
Phase 1: UX vs. UI – Was ist hier eigentlich Design?
Wenn Kunden an Design denken, sehen sie oft nur das fertige Produkt. Wir müssen an dieser Stelle wieder die Angst nehmen und klären: Design ist nicht nur "hübsch". Es besteht aus zwei Hälften:
| Disziplin | Klartext-Erklärung | Unsere Strategie |
|---|---|---|
| UX (User Experience) | Das Gefühl. Wie leicht findet Bärbel den Support-Button? UX ist die Funktion und die Emotion des Nutzers. Das haben wir in den Wireframes festgelegt! | Die UX ist durch die Wireframes zementiert. Unsere Aufgabe ist jetzt, sie durch das UI-Design zu optimieren, nicht zu zerstören. |
| UI (User Interface) | Der Look. Welche Farben? Welche Schriftarten? Wie groß ist das Formular? UI ist die Ästhetik und das Corporate Design der Oberfläche. | Der UI-Design-Prozess sorgt dafür, dass das Produkt unsere Markenstrategie widerspiegelt und Vertrauen schafft. |
Die Regel: Das UI-Design muss immer der Logik der UX folgen. Wenn wir in den Wireframes (Teil 2) entschieden haben, dass ein Element wichtig ist, muss das Design dies visuell unterstreichen!
Phase 2: Vom Wireframe zur visuellen Identität (Branding & Expertise)
Die Wireframes liefern das Was und Wo. Das UI-Design liefert das Wie. Hier kommt unsere Branding-Expertise und unser flexibles Netzwerk ins Spiel.
Unsere Expertin: Die Designs werden von unserer Screendesign-Expertin Mercedes erstellt. Als absolute Vollprofi im UI/UX stellt sie sicher, dass unsere strategischen Vorgaben mit maximaler visueller Wirkung umgesetzt werden.
Prototyping und Feedbackschleife
Wir springen nicht sofort in den Code. Wir nutzen einen klickbaren Prototypen (z. B. in Figma).
- Das Prototyping: Mercedes überträgt die Wireframes der wichtigsten Seiten (z. B. der Startseite) in einen interaktiven Prototypen. Der Kunde sieht und fühlt das Design, bevor ein Code geschrieben wurde.
- Die Wahrheit: Im KD-Projekt hat der erste Prototyp den Geschmack des Kunden in einigen Details nicht getroffen. Das ist kein Drama! Es ist der Beweis, dass unser Vorgehen funktioniert. Wir sind unkompliziert und drehen lieber eine Ehrenrunde, als ein Design umzusetzen, das nicht zu 100% überzeugt.
- Vier-Augen-Prinzip: Wir haben einen leicht abgeänderten zweiten Prototypen präsentiert. Dieser hat ins Schwarze getroffen, weil wir die strategischen Ziele nie aus den Augen verloren haben, aber die visuelle Sprache justiert haben.
Das Design ist erst freigegeben, wenn es die strategischen Anforderungen erfüllt UND der Kunde voll dahintersteht. Das minimiert Fehler und gibt dem Kunden maximale Sicherheit.
Ausblick auf Teil 4: Die Stimme der Marke finden
Der Bauplan ist gezeichnet, das Design ist abgestimmt. Aber Moment: Was nützt das beste Design, wenn der Text nicht überzeugt? Bevor wir in den Code springen, muss die Stimme der Marke perfektioniert werden.
Im nächsten Beitrag zeigen wir: Wie wir durch eine Markenschärfung den Purpose unseres Kunden definieren. Denn nur wenn das Warum klar ist, kann die Website in Tonalität und Text den Vertrieb optimal unterstützen und die Wahrnehmung des Kunden im Markt erfolgreich verändern.
Mit Liebe getextet von
Emma
Fachgebiete
Code-Zauberin, Handball-Jongleurin
Kurz gesagt
Bringt Ordnung ins Code-Chaos und sorgt dafür, dass Design und Funktion zusammenpassen. Wenn sie nicht gerade Frontend-Feinschliff betreibt, optimiert sie Ladezeiten oder pixelperfekte Details – verständlich, präzise, mit viel Gespür.
Lieblingssatz im Team
„Das geht auch barrierefrei!“
