UX/UI-Design: der echte Prozess von der Forschung bis zur Übergabe

UX vs UI: der Unterschied, der Geld kostet

UX ist, wie eine Seite funktioniert. UI ist, wie sie aussieht. Gutes Design beginnt mit dem Problem eines Nutzers, nicht mit einer Farbpalette.Wenn jemand nicht weiß, wo er klicken soll, wird die schönste Benutzeroberfläche dir nicht helfen – sie schließen den Tab und gehen zu einem Wettbewerber, dessen Button sichtbar war.

Formal, Benutzererfahrung ist die gesamte Reise: wie eine Person angekommen ist, wonach sie gesucht hat, was sie gefunden hat, wie viele Schritte es gedauert hat, wo sie gestolpert ist, wie sie sich am Ende gefühlt hat. UI ist die visuelle Schicht dieser Reise: Typografie, Farbe, Raster, Button-Zustände, Icons, Abstände. Die Schichten sind verbunden, lösen aber unterschiedliche Probleme.

Warum der Unterschied kommerziell und nicht akademisch ist

Stell dir zwei Online-Shops vor. Der erste sieht schlicht aus, aber die Filter reagieren sofort, die Preise sind sofort sichtbar, und der Checkout benötigt nur drei Felder. Der zweite hat schöne Animationen, riesige Fotografien und einen Warenkorb, der eine Registrierung verlangt, bevor er die Versandkosten anzeigt. Der erste verkauft mehr. Nicht, weil das Aussehen nicht wichtig ist, sondern weil der Umsatz aus einer abgeschlossenen Aktion kommt, nicht aus einem Eindruck.

Hier ist also die funktionierende Formel: UX entscheidet, ob jemand das Ziel erreicht, UI entscheidet, ob sie dir auf dem Weg dorthin vertrauen. Du brauchst beides. Aber wenn du wählen musst, was du zuerst beheben möchtest, behebe die Logik.

Was Design nicht tut

• Es rettet kein schlechtes Produkt. Wenn Ihr Preis über dem Markt liegt, ohne Erklärung, wird das Layout das nicht verbergen.
• Es ersetzt keinen Traffic. Starke UX/UI-Design hebt die Konversion vom Besucher zur Anfrage, aber jemand muss immer noch die Besucher bringen.
• Es liest keine Gedanken. Ohne Daten über Kunden rät ein Designer — und Raten kostet mehr als Forschung.

Deshalb erscheint in unserem Studio-Dienstleistungen Design niemals als eigenständiger Posten mit der Bezeichnung "ein Mockup zeichnen". Es läuft parallel zu Analytik, Inhalt und Entwicklung — andernfalls erhalten Sie ein teures Bild, das niemand tatsächlich bauen kann.

Schritt 1. Forschung, Ziele und eine Wettbewerbsanalyse

Design beginnt mit der Frage "Was muss auf dieser Seite passieren", nicht "Welche Farbe gefällt Ihnen".Bis das beantwortet ist, wird jede Überarbeitung nach Geschmack diskutiert — und Geschmack ist ein Argument, das niemand gewinnt.

Was wir im Voraus festlegen

• Das Geschäftsziel.Anfragen? Bestellungen? Buchungen? Bewerbungen? Ein Ziel ist primär; die anderen sind sekundär.
• Die Zielaktion.Der spezifische Button, den eine Person drücken sollte. Wenn es fünf gibt und alle "der Hauptbutton" sind, wird keiner gedrückt.
• Die Zielgruppe.Wer sie sind, wie viel sie über das Thema wissen, welches Gerät sie verwenden, was sie bereits über Sie wissen.
• Die Einwände.Warum sie zögern: zu teuer, zu langsam, unklar, "werden sie überhaupt meine Art von Job machen".
• Die Einschränkungen.Fristen, Budget, bestehendes CRM, Markenidentität, rechtliche Anforderungen.

Daten müssen nicht teuer sein. Aufzeichnungen von Verkaufsgesprächen, Chatverläufe, Suchanfragen vor Ort, Heatmaps, die Fragen, die Kunden am häufigsten stellen — das reicht schon aus, um das Raten zu beenden. Wenn Analysen laufen, schauen Sie sich an, wo die Leute abspringen und an welchem Schritt.

Wettbewerbsanalyse — nicht zum Kopieren

Sie schauen sich Wettbewerber an, um die Regeln des Marktes zu lernen und um die Lücken zu finden. Die Regeln sind das, was ein Nutzer standardmäßig erwartet: Preis, Zeitrahmen, was enthalten ist, Bewertungen. Die Lücken sind das, was niemand anbietet: einen Rechner, ehrliche Lieferzeiten, echte Fotos anstelle von Stockfotos, eine einfache Erklärung des Prozesses. Das Layout von jemandem zu kopieren, ist sinnlos — Sie wissen nicht, ob es für sie funktioniert, und Sie erben ihre Fehler zusammen mit ihren Entscheidungen.

Eine heuristische Überprüfung

Wenn eine Seite bereits existiert, überprüfen Sie sie anhand grundlegender Benutzerfreundlichkeit der WebsitePrinzipien, bevor jemand etwas zeichnet: Ist klar, wo Sie sind; ist der Systemstatus sichtbar; kann eine Aktion rückgängig gemacht werden; sind Fehler verständlich; spricht die Benutzeroberfläche die Sprache des Kunden; müssen Sie Dinge zwischen den Bildschirmen im Kopf behalten. Zwei Tage davon ergeben eine Problemliste, von der die Hälfte ohne ein Redesign behoben werden kann.

Schritt 2. Benutzerszenarien statt Seiten

Die Leute kommen nicht "auf eine Website" — sie kommen, um etwas zu erledigen.Also entwerfen Sie Szenarien, keine Seiten: was eine Person Schritt für Schritt von der Ankunft bis zum Ergebnis tut.

Ein Szenario passt in einen einfachen Satz. "Ein Elternteil sucht einen Nachmittagsclub in der Nähe des Hauses, möchte den Zeitplan und den Preis sehen und in fünf Minuten eine Probesitzung von einem Telefon aus buchen." Das ist es. Aus diesem Satz allein können Sie die Anforderungen erkennen: einen Standortfilter, einen lesbaren Zeitplan, einen Preis ohne "Kontaktieren Sie uns für Details", ein kurzes Formular und eine antippbare Telefonnummer.

Wie viele Szenarien Sie benötigen

Für eine Dienstleistungsseite normalerweise drei bis fünf. Mehr und Sie verteilen sich zu dünn; weniger und Ihnen fehlt etwas. Ein typisches Set: "habe noch nie von diesem Unternehmen gehört, recherchiere nur", "vergleiche mit einem Wettbewerber, suche nach einem Grund, einen auszuwählen", "bereits entschieden, möchte schnell Kontakt aufnehmen", "bestehender Kunde, benötige einen Kontakt oder ein Dokument".

Verschiedene Zustände, verschiedene Bildschirme

Junior-Designer zeichnen nur den perfekten Zustand: vollständiger Katalog, kurze Namen, jedes Foto an seinem Platz. Die Realität ist reicher. Jeder wichtige Bildschirm benötigt Zustände:

• Leer — der Filter hat nichts gefunden, der Warenkorb ist leer, es gibt noch keine Bestellungen. Was sieht die Person und wohin geht sie als Nächstes?
• Laden — was auf dem Bildschirm angezeigt wird, während die Daten übertragen werden.
• Fehler — der Server ist nicht erreichbar, die Zahlung ist fehlgeschlagen, ein Feld ist falsch.
• Überlauf — ein dreizeiliger Produktname, 40 Artikel, eine 2.000-Zeichen-Bewertung.
• Erfolg — das Formular wurde gesendet. Was jetzt? "Danke" ist keine Antwort; die Leute wollen wissen, wann jemand anruft.

Zustände sind der langweiligste und wertvollste Teil der Arbeit. Sie sind genau das, was ein Mockup von einem Mockup trennt, das deinen Entwickler alle halbe Stunde kontaktieren lässt.

Schritt 3. Informationsarchitektur

Die Informationsarchitektur ist der Ort, an dem Dinge leben und wie sie genannt werden.Es löst die Hälfte Ihrer Navigationsprobleme, bevor der erste Pixel existiert.

Die Arbeit klingt einfach und ist in der Praxis mühsam: Alle Inhalte sammeln, nach Bedeutung gruppieren, die Gruppen in den Worten des Kunden benennen, die Priorität festlegen. Der Schlüsselteil ist die Worte des Kunden. "Lösungen" macht für Sie Sinn; die Person sucht nach "Kühlschrankreparatur". Ihr internes Organigramm sollte niemals ins Menü durchsickern.

Regeln, die Zeit sparen

• Das Menü ist kein Ablageort.Fünf bis sieben Hauptpunkte. Wenn es nicht passt, ist die Gruppierung falsch.
• Tiefe von maximal drei Klickszu jeder wichtigen Seite. Darüber hinaus verlieren Sie Menschen.
• Eine Bedeutung, eine Seite.Zwei ähnliche Seiten konkurrieren in der Navigation und in der Suche miteinander.
• Das Label ist die Abfrage.Ein Menüpunkt sollte mit der Art und Weise übereinstimmen, wie eine Person tatsächlich darüber denkt und spricht.

Priorität innerhalb der Seite

Innerhalb einer Seite gilt die gleiche Logik: zuerst die Antwort, dann die Details, dann der Beweis, dann die Handlung. Ein Besucher entscheidet in Sekunden, ob er am richtigen Ort ist, und er entscheidet bereits beim ersten Bildschirm. Wenn oben auf der Seite "Willkommen auf unserer Website" steht, haben Sie Ihr wertvollstes Immobilienangebot für einen Platzhalter ausgegeben.

Die Blockreihenfolge ist auch Design — und es ist der Teil, der am meisten Geld bewegt. Wir haben die Logik der Blocksequenz in unserem Artikel über Struktur der Landing Page: dieselben Mechaniken, komprimiert auf eine einzige Seite.

Architektur testen ohne Mockup

Geben Sie die Liste der Abschnittsnamen fünf Personen außerhalb des Projekts, bitten Sie sie, diese in Gruppen zu sortieren und zu sagen, was sie erwarten würden, wo sie es finden. Die Meinungsverschiedenheiten zeigen Ihnen die Problembereiche in einer Stunde. Es ist günstig und es ist besser, als in einem Besprechungsraum zu streiten.

Schritt 4. Wireframes: das Skelett ohne Make-up

Ein Wireframe ist ein schwarz-weißes Schema eines Bildschirms: was kommt nach was, was wichtiger ist, wo die Aktion stattfindet.Keine ausgefallene Schrift, keine Schatten, keine Fotografie. Absichtlich.

Der Sinn der Graustufen besteht darin, alles zu entfernen, was von der Struktur ablenkt. Zeigen Sie ein farbiges Mockup und der Kunde wird unweigerlich sagen "mach den Button heller", und das Gespräch darüber, dass der Button am falschen Platz ist, findet nie statt. Ein Graustufen-Wireframezieht die Diskussion zurück zum Wesentlichen: Ist klar, was dieses Unternehmen ist, was es anbietet, warum man ihm vertrauen sollte und was als Nächstes zu tun ist.

Was in einen Wireframe gehört

• Echte Überschriften und Beschriftungen, nicht Lorem ipsum. Platzhaltertext lügt sowohl über Länge als auch über Bedeutung.
• Die tatsächliche Anzahl der Elemente: Wenn der Katalog 12 Artikel hat, zeichnen Sie nicht drei.
• Jeder wichtige Zustand aus dem vorherigen Schritt.
• Mobile und Desktop-Versionen der wichtigsten Bildschirme sofort, nicht "wir passen es später an".

Wie viele Bildschirme sollen gezeichnet werden

Nicht alle. Sie zeichnen Seitentypen: Startseite, Dienstleistungsseite, Katalog, Artikelseite, Formular, Artikel, Kontakt, Dienstleistungsseiten (404, Danke). Alles andere wird aus denselben Blöcken zusammengesetzt. Wenn jede neue Seite ein neues Mockup benötigt, haben Sie kein System — Sie haben einen Haufen Bilder.

Dies ist der günstigste Ort, um zu streiten

Einen Block in einem Wireframe zu verschieben, dauert Minuten. Es in einer gebauten, CMS-verkabelten Seite zu verschieben, kostet Tage und Geld. Also genau hier sollten Sie Widerstand leisten, unangenehme Fragen stellen und Begründungen verlangen. Von hier an steigt der Preis für eine Änderung mit jedem Schritt.

Schritt 5. Das UI-Konzept: wie Vertrauen aussieht

Sobald die Struktur vereinbart ist, kommt die visuelle Ebene. Ihre Aufgabe ist nicht Dekoration — sie macht die Struktur offensichtlich und verdient Vertrauen.

Vertrauen in eine Benutzeroberfläche wird aus langweiligen Dingen aufgebaut: einem ordentlichen Raster, konsistentem Abstand, lesbarem Text, echten Fotos anstelle von Stockfotos, ehrlichen Zahlen, einer Abwesenheit von visuellem Lärm. Niemand denkt "Ich liebe dieses modulare Raster" — sie fühlen einfach, dass hier alles in Ordnung ist, also wird die Arbeit wahrscheinlich auch in Ordnung sein. Umgekehrt gilt: falsch ausgerichtete Kundenlogos und drei verschiedene Blautöne wirken wie "zusammengeworfen".

Woraus ein UI-Konzept besteht

• Typografie.Die Typografie-Paarung, Größen, Zeilenhöhe, Zeilenlänge. Es macht 80 % des Gefühls einer Website aus, denn eine Website besteht hauptsächlich aus Text.
• Farbe.Eine neutrale Basis, ein Akzent, der für die Zielaktion reserviert ist, funktionale Farben für Fehler und Erfolge. Setze den Akzent nur auf das, was wichtig ist, sonst funktioniert es nicht.
• Raster und Rhythmus.Ein Abstandsschritt (ein Vielfaches von 4 oder 8, sagen wir) anstelle von Schätzen jeder Lücke.
• Bilder.Deine eigenen Fotos von der Arbeit und den Menschen übertreffen perfekte Stockfotos, denn niemand glaubt an Stock.
• Ton.Die Benutzeroberfläche spricht: formell, freundlich, technisch. Das ist eine Entscheidung, kein Zufall.

Ein Konzept ist ein Bildschirm, nicht die gesamte Website

In der Regel präsentiert man die Startseite oder eine wichtige Dienstleistungsseite in zwei oder drei Richtungen. Das Ziel ist es, sich auf eine Sprache zu einigen, nicht eine endgültige Version abzunehmen. Wie diese Sprache in realen Projekten aussieht, ist leichter zu sehen in der Portfolio: verschiedene Sektoren benötigen einen unterschiedlichen visuellen Tonfall, obwohl der Prozess dahinter identisch ist.

Und der wesentliche Punkt: Ein Konzept wird danach beurteilt, "dient es dem Ziel", nicht "gefällt es mir". Mehr dazu im Feedback-Bereich.

Schritt 6. Designsystem und Komponenten

Ein Designsystem ist eine Sammlung von fertigen Bausteinen plus die Regeln für den Bau mit ihnen.Schaltflächen, Felder, Karten, Überschriften, Abstände, Zustände — einmal definiert und überall wiederverwendet.

Ohne ein System wird jeder neue Bildschirm von Grund auf neu gezeichnet. Sechs Monate später beherbergt die Website sieben Grautöne, vier Schaltflächengrößen und drei Arten von Produktkarten, und niemand erinnert sich, warum. Mit einem System wird eine neue Seite in Stunden statt in Tagen zusammengestellt und sieht aus wie ein Teil des Ganzen.

Was ist in einem System

• Tokens.Farben, Schriftgrößen, Radien, Schatten, der Abstands-Schritt — als benannte Variablen, nicht als vor Ort erfundene Werte.
• Komponenten.Ein Button mit jedem Zustand (Standard, Hover, Fokus, gedrückt, ladend, deaktiviert), ein Eingabefeld mit Fehler und Hinweis, eine Karte, ein Modal, ein Tisch, Pagination.
• Kompositionsregeln.Welche Überschrift wann, wie viel Abstand zwischen Blöcken, wie sich Elemente bei Überlauf verhalten.
• Muster.Formulare, Filter, Checkout — Standardassemblierungen, die aus Komponenten bestehen.

Warum es dem Kunden wichtig sein sollte, nicht nur dem Designer.

Ein System ist eine Einsparung für Ihre Zukunft. Ein neuer Service, eine Kampagnen-Landingpage, ein zusätzlicher Abschnitt — all das wird aus dem bestehenden zusammengestellt und benötigt kein neues Designprojekt. Es verhindert auch, dass die Seite im Laufe der Zeit auseinander driftet, während verschiedene Personen Änderungen vornehmen.

Der Umfang hängt vom Projekt ab: Eine kleine Broschüren-Website benötigt eine einzige Seite mit Regeln, ein großer Katalog oder ein Produkt benötigt eine ordentliche Bibliothek. Auf dem Astrina-Projekt ist das Komponentensystem genau das, was jede Seitenart konsistent aussehen ließ, ohne jeden Bildschirm separat zu gestalten.

Schritt 7. Prototyp, Übergabe an Entwickler und Design-QA

Ein Prototyp ist ein klickbares Mockup, in dem Sie ein ganzes Szenario durchspielen können, bevor eine einzige Codezeile existiert.Es beantwortet die Frage, die ein statisches Bild nicht beantworten kann: "Was passiert, wenn ich dies drücke?"

Prototypen fangen teure Fehler ein: ein überflüssiger Schritt in einem Formular, eine Sackgasse nach der Einreichung, ein verwirrender Rückweg, ein Filter, der sich selbst zurücksetzt. Fünf Personen, die das Szenario laut durchspielen, lehren Sie mehr als ein Monat interner Debatten. Sie brauchen kein Labor – Sie brauchen jemanden aus dem Publikum, eine Aufgabe und einen Beobachter, der still bleibt.

Was ein Übergabeprotokoll tatsächlich enthält

• Mockups in zwei oder drei Schlüsselbreiten: mobil, Tablet/zwischen, Desktop.
• Jede Komponente und jeder Bildschirmzustand.
• Tokens und Regeln: Farben, Schriftart, Abstandsmaß, Überlaufverhalten.
• Verhalten: was klickbar ist, was sich öffnet, was animiert und über wie viele Millisekunden.
• Endgültiger Text, kein Platzhaltertext. Assets: Icons, Bilder, Logos in den richtigen Formaten.
• Randfälle: ein sehr langer Titel, ein fehlendes Foto, null Ergebnisse.

Ein guter Übergabeprozess ist nicht "hier ist ein Link zur Datei". Es ist ein Meeting, in dem der Designer und der Entwickler die Mockups durchgehen und die nicht offensichtlichen Teile laut aussprechen. Eine halbe Stunde Gespräch spart eine Woche an Nachrichten.

Design QA: die Überprüfung nach dem Build

Sobald die Seite zusammengestellt ist, geht der Designer sie erneut durch — diesmal im Browser. Abstände, Textumbrüche, Zustände, Verhalten mit echten Daten, Fokus, Animationsgeschwindigkeit, Formularverhalten. Es ist eine kurze Phase, aber wenn man sie überspringt, gibt es immer eine Lücke zwischen dem Mockup und der Live-Seite. Die Regel ist einfach: Bis die Design QA bestanden ist, ist das Projekt nicht abgeschlossen.

Mobile-First und Barrierefreiheit in einfacher Sprache

Du beginnst mit dem Design auf dem Handy-Bildschirm — nicht weil es modisch ist, sondern weil die Einschränkungen dort strenger sind.Wenn der Inhalt bei 360 Pixel Breite passt und funktioniert, entfaltet er sich mühelos auf dem Desktop. Die andere Richtung funktioniert fast nie.

Mobile-First ist eine Disziplin der Prioritäten. Auf einem kleinen Bildschirm kannst du nicht alles auf einmal zeigen, also bist du gezwungen ehrlich zu beantworten, was wichtiger ist. Diese Antwort verbessert dann auch die Desktop-Version.

Was man auf dem Handy überprüfen sollte

• Tipptargets nicht kleiner als ein Fingertipp. Winzige Links, die zusammengepresst sind, führen zu Fehl-Tipps und Irritation.
• Nichts läuft über den Rand; es gibt kein horizontales Scrollen.
• Die Telefonnummer wählt, die Adresse öffnet eine Karte, Formularfelder rufen die richtige Tastatur auf.
• Die wichtige Aktion ist ohne endloses Scrollen erreichbar.
• Schwere Bilder bremsen das Laden bei einer mobilen Verbindung nicht.

Barrierefreiheit: vier Dinge, die dir 80% des Ergebnisses bringen

• Kontrast.Hellgrauer Text auf Weiß sieht in einem Mockup elegant aus und ist im Freien bei Sonnenlicht unleserlich. Kontrast hilft Menschen mit Sehbehinderungen – und es hilft dir, auf einem günstigen Bildschirm, unterwegs.
• Fokus.Beim Navigieren mit einer Tastatur können Sie sehen, auf welchem Element Sie sich befinden. Den Fokusrahmen "weil er hässlich ist" zu entfernen, ist ein häufiger und schwerwiegender Fehler.
• Tastatur.Das gesamte Formular kann ausgefüllt und ohne Maus abgesendet werden. Ein Modal kann geschlossen werden; ein Menü kann verlassen werden.
• Alt-Text.Eine kurze Beschreibung dessen, was ein Bild bedeutet. Es hilft sowohl blinden Nutzern als auch Suchmaschinen.

Barrierefreiheit ist keine separate teure Phase. Es ist eine Reihe von Gewohnheiten: Verlassen Sie sich niemals nur auf Farben, um Bedeutung zu vermitteln, kennzeichnen Sie Felder anstelle von Platzhaltern, schreiben Sie Fehlermeldungen, auf die ein Mensch reagieren kann. In der Entwurfsphase integriert, kostet es Cent. Nach dem Start hinzugefügt, kostet es echtes Geld.

Text ist Teil des Designs

Eine Benutzeroberfläche besteht mehr aus Worten als aus Grafiken.Die Überschrift, das Feldlabel, der Text des Buttons, die Fehlermeldung – all dies sind Designentscheidungen, die in Buchstaben festgehalten werden.

Was uns eine Regel gibt: Designen ohne fertige Inhalte ist Wahrsagerei. Der Designer erfindet eine dreiteilige Überschrift; die des Kunden hat zwölf. Erfindet drei Vorteile; die echten sind zwei, und sie sind unterschiedlich. Der Mockup bricht in der Inhaltsphase zusammen, und alle sind überrascht.

Worte, die Schnittstellen fixieren

• Buttons beschreiben das Ergebnis."Ein Angebot einholen" schlägt "Absenden". Eine Person sollte wissen, was nach dem Klick passiert.
• Überschriften beantworten, sie reizen nicht."Websites für medizinische Kliniken" funktioniert; "Wir gestalten die Zukunft" nicht.
• Fehler sagen, was zu tun ist."Ungültiges Format" ist schlecht. "Geben Sie die Telefonnummer als +44… ein" ist gut.
• Labels schlagen Rätselraten.Wenn ein Feld etwas Spezifisches benötigt, sage es vorher, nicht danach.
• Weniger Worte, gleiche Bedeutung.Jeder zusätzliche Satz verringert die Wahrscheinlichkeit, dass der notwendige gelesen wird.

Eine Praxis spart Wochen: Entwerfe den Text für die wichtigsten Bildschirme, bevor irgendetwas gezeichnet wird — sogar grob, in einer Tabelle. Dann arbeitet der Designer mit realen Längen und realen Bedeutungen, anstatt die Realität anzupassen, um in ein Layout zu passen.

Wie man nützliches Feedback gibt und wie viele Überarbeitungsrunden normal sind

Die häufigste Ursache für langwierige Projekte ist nicht "ein schlechter Designer" — es ist Feedback, das als Geschmack ausgedrückt wird."Es spricht mich nicht an", "mach es moderner", "meine Frau mochte es nicht" — darauf kannst du nicht mit Arbeit reagieren, nur mit einem weiteren Versuch zu raten.

Die Formel für einen nützlichen Kommentar

Sprich über das Problem, nicht über die Lösung. Die Struktur ist: was ich sehe → was mich besorgt → was es riskiert. Zum Beispiel: "Der erste Bildschirm sagt nicht, dass wir landesweit arbeiten. Kunden fragen gleich beim ersten Anruf danach – ich fürchte, einige von ihnen werden das Formular überhaupt nicht erreichen." Das ist etwas, mit dem ein Designer arbeiten kann. "Mach den Button rot" ist eine fertige Lösung, und es geht wahrscheinlich nicht um den Button.

Regeln, die die Genehmigung beschleunigen

• Sammle Überarbeitungen in einer Liste von allen Beteiligten, anstatt sie den ganzen Tag über in den Chat zu tropfen.
• Bestimme einen einzigen Entscheidungsträger. Wenn fünf Personen zustimmen, wird das Mockup zu einem Durchschnitt – und Durchschnitte verkaufen nicht.
• Sieh es dir auf deinem eigenen Telefon an, nicht nur auf einem großen Monitor. So sehen deine Kunden es.
• Öffne abgeschlossene Entscheidungen nicht wieder. Eine vereinbarte Struktur öffnet sich für neue Fakten, nicht für eine neue Stimmung.

Wie viele Runden sind normal

Übliche Praxis: zwei Runden Überarbeitungen pro Phase (Struktur, Konzept, Mockups) plus ein finales Feinschliff. Das ist keine Geizigkeit des Studios — es schützt das Projekt. Endlose Runden bedeuten fast immer, dass das Ziel nicht vereinbart ist, nicht die Pixel. Wenn in der dritten Runde über dasselbe gestritten wird, liegt das Problem in der Forschungsphase, und dorthin solltest du zurückkehren.

Teure, häufige Fehler

• Ohne Inhalt gestalten.Ein Mockup, das auf Platzhaltertext basiert, bricht zusammen, wenn der echte Text ankommt. Immer.
• Einen Mitbewerber kopieren.Du kopierst ein Bild, ohne zu wissen, ob es für sie funktioniert.
• Dekoration über Klarheit.Animation, Parallax und Slider anstelle der Antwort auf "Was verkaufst du".
• Viele Ziele auf einem Bildschirm.Fünf gleichgewichtete Schaltflächen ergeben null Klicks.
• Für die Jury entwerfen.Ein Awards-Mockup und ein Verkaufs-Mockup sind unterschiedliche Genres.
• Niemand besitzt die Akzeptanz.Ein Projekt ohne einen Entscheidungsträger zieht sich über Monate hin.

Checkliste: ein Design beurteilen, bevor es in die Entwicklung geht

Bevor die Mockups in den Bau gehen, führe diese Liste aus. Jeder Punkt ist eine Änderung, die jetzt Minuten und später Tage kostet.

Bedeutung

• In 5 Sekunden sagt dir der erste Bildschirm: welche Firma das ist, was sie anbietet, an wen und was als Nächstes zu tun ist.
• Jeder Bildschirm hat eine Hauptaktion, und sie ist visuell die Hauptaktion.
• Wichtige Einwände werden beantwortet: Preis oder Preisspanne, Zeitrahmen, Garantien, wer du bist.
• Jede Behauptung ist belegt: Fallstudien, Bewertungen mit Namen, Zahlen, die Sie tatsächlich beweisen können.

Struktur

• Blöcke folgen "Antwort → Detail → Beweis → Aktion".
• Navigation: 5–7 Elemente, Beschriftungen in den Worten des Kunden, alles Wichtige innerhalb von 3 Klicks.
• Keine zwei Seiten über dasselbe Thema.

Vollständigkeit

• Es gibt eine mobile Version jeder Seitenart, nicht nur für Desktop.
• Zustände sind definiert: leer, lädt, Fehler, Erfolg, langer Text, viele Elemente.
• Der Text ist final, die Bilder sind echt, kein Lorem ipsum irgendwo.
• Nützliche Seiten existieren: 404, Dankeschön, Zahlungsfehler, falls Sie eine benötigen.

System und Barrierefreiheit

• Schaltflächen, Felder und Karten stammen aus einem Set, anstatt pro Bildschirm neu gezeichnet zu werden.
• Der Abstand folgt einem einzigen Schritt; es gibt genau so viele Farben wie nötig.
• Der Textkontrast ist ausreichend, der Fokus ist sichtbar, das Formular kann mit der Tastatur ausgefüllt werden.
• Bilder haben Alt-Beschreibungen, Felder haben Beschriftungen, Fehler haben menschenlesbaren Text.

Bauvorbereitung

• Ein Entwickler hat die Mockups vor der Genehmigung überprüft und bestätigt, dass sie planmäßig umsetzbar sind.
• Das Verhalten ist dokumentiert: Klicks, Öffnungen, Animationen, Formularverhalten.
• Es ist klar, was im Admin bearbeitet werden kann und was fest codiert ist.
• Jemand wird benannt, um das Design-QA nach dem Build zu akzeptieren.

Wenn jeder Punkt ein Ja ist, übergeben Sie es mit Zuversicht. Wenn mehr als drei ein Nein sind, sind Sie nicht bereit – und der Build wird diese Löcher nicht stopfen, er wird sie in Beton gießen. Möchten Sie einen externen Blick auf Ihre aktuelle Website oder auf die Mockups, die jemand für Sie erstellt hat?Nehmen Sie Kontakt auf – wir werden es mit dieser gleichen Liste abgleichen und Ihnen ehrlich sagen, was Sie zuerst beheben sollten.

Häufig gestellte Fragen