Website-Mockup: So sehen Sie den Entwurf, bevor Sie zahlen

Die teuerste Korrektur an einer Website ist die, die erst nach dem Livegang gemeldet wird. Eine verschobene Sektion oder eine zusätzliche Unterseite im Mockup ist schnell erledigt, im fertigen Code können daraus mehrere Stunden Arbeit werden. Deshalb ist das Website-Mockup der günstigste Moment, um es sich noch einmal anders zu überlegen.

In diesem Ratgeber zeige ich, wie Sie Ihre Website sehen, bevor Sie für den Bau bezahlen: worin sich Skizze, Mockup und Prototyp unterscheiden, was Sie in jeder Phase bekommen sollten, was Sie nicht bewerten sollten und wie Sie Anmerkungen so schreiben, dass sie schon beim ersten Lesen verstanden werden. Dazu gibt es eine Liste mit 10 Fragen, die Sie beim Betrachten des Entwurfs stellen können.

Skizze, Mockup, Prototyp und Baukasten: vier Wege zur Vorschau

Diese Begriffe werden oft durcheinander verwendet. Fragen Sie deshalb zu Beginn der Zusammenarbeit, was Sie genau bekommen. Die Phasen unterscheiden sich im Detailgrad und darin, was sich an ihnen beurteilen lässt.

Nicht jedes Projekt braucht alle Phasen. Bei mir entstehen Mockup und Grafikdesign gemeinsam in Figma, gleich in der Version für Desktop und Smartphone, sodass Sie die Website sehen, bevor auch nur eine Zeile Code geschrieben ist. Ein klickbarer Prototyp lohnt sich am meisten, wenn die Website mehr kann als gewöhnliche Unterseiten: ein mehrstufiges Formular, einen Rechner oder Buchungen. Bei einer einfachen Firmenwebsite genügt in der Regel ein gutes Mockup.

Was Sie vor der Freigabe des Entwurfs bekommen sollten

Ein Mockup, das nur einmal in einem Gespräch gezeigt wird, ohne Link, reicht nicht. Vor der Freigabe sollten Sie Folgendes haben:

• einen Link zum Entwurf, den Sie selbst, jederzeit und auch auf dem Smartphone öffnen können,
• eine Smartphone-Version jeder wichtigen Unterseite, nicht nur der Startseite,
• eine Liste der Unterseiten mit einer kurzen Beschreibung, was auf jeder stehen wird,
• die Information, woher Texte und Fotos kommen: von Ihnen, von der ausführenden Seite oder aus einer Bilddatenbank,
• die Zahl der Korrekturrunden, im Angebot festgehalten,
• bei einer Modernisierung: eine Liste der alten Adressen und die Information, wohin sie nach der Änderung führen. Sonst können Unterseiten, die Ihnen heute Besuche über Google bringen, einfach verschwinden.

Fragen Sie auch, was mit dem Entwurf geschieht, wenn Sie nach der Mockup-Phase nicht weitermachen: ob Sie die Datei und das Recht zu ihrer Nutzung erhalten. Das gehört in den Vertrag und nicht in ein mündliches Versprechen. Gut ist, wenn die Zahlung in Etappen aufgeteilt ist und die Freigabe des Mockups eine davon bildet. Worauf Sie im Angebot sonst noch achten sollten, beschreibe ich im Ratgeber Was kostet eine Website 2026.

Was Sie am Mockup nicht bewerten sollten

Ein Teil der Elemente im Mockup ist reiner Platzhalter. Wenn Sie sich darauf konzentrieren, verbrauchen Sie eine Korrekturrunde für Dinge, die sich ohnehin ändern.

• Der Text „Lorem ipsum“. Das ist ein pseudolateinischer Blindtext, der nur zeigt, wie viel Platz der Inhalt einnehmen wird. Beurteilen Sie Länge und Aufbau, nicht den Sinn. Wenn Ihr echter Text dreimal so lang wird, sagen Sie das sofort, denn das verändert das Layout der Sektionen.
• Fotos aus Bilddatenbanken. Sie landen oft nur zur Probe im Mockup. Bei Diensten wie Adobe Stock trägt die Vorschau ein Wasserzeichen, das erst mit dem Kauf der Lizenz verschwindet. Klären Sie, ob auf der Website Ihre eigenen Fotos von Projekten oder gekaufte Fotos stehen und wer die Lizenzen bezahlt.
• Beispielzahlen und Bewertungen. „15 Jahre Erfahrung“ oder „500 zufriedene Kunden“ im Mockup sind meist nur Füllmaterial. Achten Sie darauf, dass vor der Veröffentlichung Ihre echten Angaben dort stehen.
• Der genaue Farbton. Jeder Monitor und jedes Smartphone zeigt Farben ein wenig anders. Wenn Sie Firmenfarben haben, geben Sie deren Codes an, statt nach Augenmaß zu urteilen.

Beurteilen Sie am Mockup dagegen die Reihenfolge der Inhalte, die Lesbarkeit, ob sofort klar ist, womit sich die Firma beschäftigt, und wie leicht man sie kontaktieren kann.

Prüfen Sie das Mockup auf dem Smartphone, nicht nur am Computer

Ein Mockup sieht man sich meist auf einem großen Monitor an. Ihre Kundschaft sieht die Website oft auf dem Smartphone: in der Arbeitspause, in der Warteschlange oder auf der Baustelle.

Auch Google schaut vor allem auf das Smartphone. In der Dokumentation für Website-Verantwortliche schreibt Google, dass für die Indexierung und die Ermittlung der Position die Version der Seite für mobile Geräte verwendet wird. Inhalte, die in der Smartphone-Version fehlen, werden bei der Indexierung nicht berücksichtigt.

So prüfen Sie das Mockup auf dem Smartphone:

1. Bitten Sie um einen Link zur mobilen Version oder zum Prototyp. Den Prototyp-Link aus Figma öffnen Sie im Browser Ihres Smartphones, bequemer geht es in der Figma-App für iOS und Android (die App setzt ein Konto voraus).
2. Sehen Sie sich den Entwurf in Originalgröße an, mit dem Smartphone in einer Hand. Auf einem Monitor wirkt alles größer und besser lesbar.
3. Prüfen Sie den ersten Bildschirm: Sieht man ohne Scrollen, womit Sie sich beschäftigen, und gibt es eine Schaltfläche zum Anrufen?
4. Gehen Sie den Weg Ihrer Kundschaft durch: vom Menü zur Leistung, von der Leistung zum Formular. Zählen Sie die Klicks.

Bei mir umfasst der Entwurf die Version für Desktop und Smartphone, und die fertige Website teste ich vor dem Start auf echten Smartphones.

10 Fragen zum Mockup

Drucken Sie diese Liste aus oder öffnen Sie sie neben dem Entwurf. Notieren Sie zu jeder Frage die Antwort in einem Satz.

1. Weiß ich nach wenigen Sekunden auf der Startseite, was die Firma macht und in welcher Stadt oder Region?
2. Sind auf dem ersten Smartphone-Bildschirm eine Telefonnummer oder eine Kontaktschaltfläche zu sehen?
3. Hat jede Unterseite eine zentrale Schaltfläche, die sagt, was als Nächstes zu tun ist?
4. Sind alle Leistungen dabei, die ich verkaufen möchte, in der Reihenfolge von der wichtigsten abwärts?
5. Was sieht jemand, der von Google direkt auf einer Leistungsseite landet und die Startseite überspringt?
6. Wo sind die Belege: Bewertungen, Fotos von Projekten, Zertifikate, Garantie?
7. Wie funktioniert das Menü auf dem Smartphone, und wie viele Klicks liegen zwischen Kundschaft und Formular?
8. Fragt das Formular nur nach dem, was ich wirklich für ein Angebot brauche, und was sieht die Person nach dem Absenden?
9. Wer bereitet Texte und Fotos vor, bis wann und für wie viel?
10. Was fehlt im Mockup noch: Fußzeile, Datenschutzerklärung, Cookie-Banner, Fehlermeldungen im Formular, 404-Seite?

Die Fragen 1–3 sind die wichtigsten. Wenn Sie bei einer davon „Ich weiß nicht“ antworten, haben Sie die erste Anmerkung für die Umsetzung.

So schreiben Sie Anmerkungen, die verstanden werden

„Gefällt mir nicht“ ist die häufigste Anmerkung und die am wenigsten hilfreiche. Die ausführende Seite weiß nicht, was sie ändern soll, und rät, und Sie bekommen die nächste Version, die auch nicht passt. Eine gute Anmerkung hat vier Teile: wo, was ist jetzt, was soll es sein und warum. Eine Vorlage zum Kopieren:

• Wo: Angebot, Smartphone-Version, Sektion mit den Preisen.
• Ist: drei Pakete nebeneinander, die Preise sind schwer zu lesen.
• Soll: Pakete untereinander, das mittlere oben.
• Warum: Unsere Kundschaft fragt am häufigsten nach dem mittleren Paket.

Einige Beispiele nach dem Muster „Statt X schreiben Sie Y“:

• Statt „Die Überschrift ist schwach“ schreiben Sie: „Die Überschrift spricht über Qualität, aber unsere Kundschaft fragt vor allem nach dem Termin. Mein Vorschlag: ‚Bäder schlüsselfertig in 6 Wochen, Krakau und Umgebung‘“.
• Statt „Macht es moderner“ schreiben Sie: „Mir gefällt die Website [Link]: große Fotos von Projekten und wenig Text auf dem ersten Bildschirm. Können wir die Startseite so aufbauen?“
• Statt „Die Farbe ist falsch“ schreiben Sie: „Die Schaltfläche verschwimmt mit dem Hintergrundfoto. Bitte in Orange aus unserem Logo oder mit stärkerem Kontrast.“
• Statt „Schiebt das weiter nach oben“ schreiben Sie: „Auf dem Smartphone soll die Telefonnummer ohne Scrollen sichtbar sein.“

Drei Regeln, mit denen Sie Korrekturrunden sparen:

• Eine Liste pro Runde. Sammeln Sie die Anmerkungen aller Personen in der Firma und schicken Sie sie gemeinsam, nummeriert. Zehn E-Mails mit je einer Anmerkung sind der direkte Weg zu Missverständnissen.
• Anmerkung an der richtigen Stelle. In Figma am Computer schalten Sie den Kommentarmodus ein (Taste C) und klicken auf die Stelle, um die es geht. Ohne Figma genügt ein Screenshot mit einem Pfeil.
• „Muss“ getrennt von „wäre schön“. So weiß die ausführende Seite, was Bedingung für die Freigabe ist und was nur ein Vorschlag.

Wie viele Korrekturen sind üblich? Wichtiger als die Zahl selbst ist, dass sie im Angebot steht und klar ist, was eine Runde bedeutet: eine gesammelte Liste, nicht jede Nachricht einzeln. Bei mir sind zwei Korrekturrunden im Preis des Entwurfs enthalten. Kleine Änderungen nach der Freigabe sind normal, aber ein neues Layout oder eine neue Unterseite, wenn die Website schon im Code steht, ist in der Regel zusätzliche Arbeit, die gesondert berechnet wird.

Kostenloser Entwurf im Baukasten, bevor Sie etwas bestellen

Wenn es Ihnen schwerfällt, sich eine Website aus grauen Rechtecken vorzustellen, beginnen Sie mit etwas Echtem. In meinem kostenlosen Website-Baukasten füllen Sie in 2–3 Minuten ein Formular aus, und die KI (Google Gemini) schreibt in etwa 10–20 Sekunden eine Website mit vier Unterseiten: Startseite, Angebot, Über uns und Kontakt. Sie fügen Logo, Fotos, Firmenfarbe und Schrift hinzu und wählen einen hellen oder dunklen Hintergrund.

Die Texte überarbeiten Sie im Browser: Sie klicken auf einen Satz und schreiben. Sätze mit Zahlen und Versprechen markiert der Baukasten zur Prüfung, und die Schaltfläche „Napisz inaczej“ (Anders schreiben) schreibt eine Sektion neu (bis zu 3 Mal pro Website). Der Entwurf wartet 7 Tage ab der letzten Änderung, aber höchstens 30 Tage. Der Baukasten und die Dateien sind kostenlos, ohne Abo. Die einzige Bedingung ist der Vermerk „Wykonanie: RobimyWeb“ (Umsetzung: RobimyWeb) in der Fußzeile, und bezahlen müssen Sie nur Domain und Hosting.

Ein solcher Entwurf hilft auf zwei Arten. Wenn eine einfache Website genügt, haben Sie sie sofort. Wenn nicht, wissen Sie schon, welche Unterseiten, Texte und Fotos Sie brauchen, und das Gespräch über ein maßgeschneidertes Projekt geht schneller. Bedenken Sie, dass die heruntergeladene Website kein Bearbeitungspanel hat, und ein Onlineshop, Buchungen, ein Angebotsrechner oder viele Unterseiten für Leistungen und Städte sind schon eine Aufgabe für eine maßgeschneiderte Website. Den Baukasten beschreibe ich Schritt für Schritt im Ratgeber Kostenlose Website für Ihre Firma.

Zusammenfassung

Das Mockup ist der günstigste Moment, um es sich anders zu überlegen. Bitten Sie um einen Link mit der Smartphone-Version, bewerten Sie weder Blindtext noch Fotos aus der Bilddatenbank, gehen Sie die 10 Fragen durch und schreiben Sie Anmerkungen nach dem Muster: wo, ist, soll, warum.

Wenn Sie eine neue Website planen, bekommen Sie in der schlüsselfertigen Firmenwebsite (ab 4.900 PLN netto) einen Entwurf in Figma für Desktop und Smartphone sowie zwei Korrekturrunden, bevor ich die erste Zeile Code schreibe. Wenn Sie eine alte Website auffrischen möchten, sehen Sie sich die Website-Modernisierung an (ab 2.900 PLN netto). Schreiben Sie mir: Das Angebot bekommen Sie in 24 Stunden, und Neukunden erhalten 20 % Rabatt auf den ersten Auftrag.