Die Frage kam an unserem letzten digitalen Pitch Day auf. Und sie ist nicht unberechtigt, denn oft werden die Begriffe synonym verwendet.

Wireframe

Ein Wireframe (deutsch: „Drahtgittermodell“) ist ein früher, konzeptioneller Entwurf einer Anwendung oder Webseite. Er wird genutzt, um Nutzerführung und Struktur zu gestalten. Wireframes sind in ihrer Einfachheit besonders hilfreich, weil:

  • Bild und Farbe nicht von der Struktur ablenken
  • Wir sie schnell erstellen und leicht anpassen können

Mockup

Im Webdesign ist das Mockup (wörtlich: „Attrappe“) ein realistisch wirkendes Layout einer Anwendung. Über Mockups:

  • Stimmen wir den Gesamteindruck, inklusive Texte und Bilder, final ab
  • Testen wir Usability und User Experience

Bei einfachen Produkten – z.B. einer Landing Page – kann ein Mockup meist direkt in die Entwicklung gehen. Bei komplexen Anwendungen muss oft noch das Interaktionsdesign beschrieben und ein interaktiver Prototyp getestet werden.

  • Mockup Webseite Möbelhaus mit hochpreisigen Produkten
  • Mockup Webseite Möbelhaus mit modernen Produkten
  • Mockup Webseite Möbelhaus mit günstigen Produkten

Fazit

Wir zeigen, wie ein Wireframe sich in drei verschiedene Mockups überführen lässt. Durch ihr visuelles Design sprechen sie drei verschiedene Zielgruppen an und verkaufen verschiedene Produkte. In unserem obenstehenden Beispiel:

  • Hochpreisige Produkte mit hoher Qualität
  • Moderner Stil
  • Günstige Produkte

Während Wireframes schnell die Struktur von Inhalten kommunizieren, geben Mockups einen recht akkuraten – wenngleich statischen – Eindruck vom finalen Produkt