Was ist ein Mockup?
Ein Mockup ist der nächste Schritt im Design-Prozess nach dem Wireframe. Während ein Wireframe nur das Grundgerüst zeigt, beinhaltet ein Mockup das finale visuelle Design: Farben, Typografie, echte Bilder, Icons und das exakte Layout. Es ist ein “statisches Vorschaubild” der späteren Webseite.
Typische Einsatzgebiete
Mockups werden meist in spezieller Design-Software wie Figma, Sketch oder Adobe XD erstellt. Sie dienen vor allem einem Zweck: Der Abstimmung mit dem Kunden. Dem Kunden wird das visuelle Endergebnis präsentiert, sodass er ein exaktes Gefühl für die Ästhetik der Seite (“Look & Feel”) bekommt, bevor auch nur eine Zeile Code geschrieben wird.
Ein fertiges Mockup dient anschließend als genaue Vorlage für die Webentwickler, die das Design mithilfe von HTML, CSS und JavaScript in eine funktionale Webseite umsetzen.