Ein Mockup zeigt, wie eine Website später aussehen wird. Anders als beim Wireframe, der lediglich Anordnung und Struktur skizziert, sind hier bereits Farbwelt, Schriften, Bilder und Abstände enthalten. Das Ergebnis wirkt wie ein Bildschirmfoto der fertigen Seite, ist technisch aber eine reine Grafik.
Der Nutzen im Projekt
Der Entwurf schafft eine gemeinsame Vorstellung, bevor die Umsetzung beginnt. Änderungswünsche zu Farben, Bildsprache oder Reihenfolge lassen sich in dieser Phase in Minuten umsetzen – im fertigen Code kosten dieselben Wünsche deutlich mehr Zeit. Üblich sind Mockups für die Startseite und ein bis zwei typische Unterseiten; daraus leitet sich das übrige Layout ab.
Echte Inhalte im Entwurf
Am aussagekräftigsten wird ein Entwurf mit den tatsächlichen Texten und Bildern. Platzhalter verdecken gern, dass eine Überschrift in der Realität dreimal so lang ausfällt oder ein Produktfoto ein anderes Format mitbringt. Wer früh mit echten Inhalten arbeitet, erkennt solche Stellen im Entwurf und spart sich Überraschungen bei der Umsetzung.