Im Gespräch mit Ihrer Webagentur über Ihre neue Webseite fallen schon zu Beginn Begriffe wie Mockup, Wireframe oder Prototyp. Diesen Begriffen begegnet man im täglichen Leben so gut wie nie. Ausserdem werden sie im Zusammenhang mit Webseiten oft synonym verwendet, was nicht gerade zum Verständnis beiträgt. Deshalb geben wir Ihnen hier ein wenig Hintergrundinformation.
Was ist ein Wireframe?
Die Entwicklung einer Webseite ist ein komplexer mehrstufiger Prozess, der sowohl das visuelle Erscheinungsbild als auch die Funktionalität berücksichtigen muss. Der Designprozess beginnt oft mit einer händischen Skizze als Resultat eines Brainstormings. Sie fasst alle Ideen mehr oder weniger strukturiert zusammen. Aus dieser Skizze entwickelt die Webagentur zunächst das Wireframe, um einen besseren Überblick über die Struktur zu gewinnen. Hier legt sie die Platzierung der wichtigsten Elemente der Webseite fest. Das Wireframe ist also der erste strukturelle Entwurf einer Webseite.
Was ist ein Mockup?
Auf Grundlage des Wireframe entwickelt die Webagentur schliesslich das Mockup. Das Mockup ist ein visueller Entwurf der Webseite, der nicht nur das Layout einschliesslich Platzierung aller Elemente sondern auch die Farbgebung, zu verwendende Typografie, Beispielfotos als Platzhalter oder weitere grafische Details enthält. Im Mockup Design berücksichtigen wir auch die Organisation der Inhalte nach logischen und hierarchischen Gesichtspunkten.
Das Ergebnis sieht daher idealerweise schon aus wie ein Screenshot der endgültigen Webseite. Das Mockup lässt in diesem Stadium auch bereits die angestrebte Benutzerführung erkennen. Sie ist aber immer noch statisch, d.h. Links sind zwar angezeigt aber nicht klickbar. Auch Textpassagen sind noch nicht ausformuliert, sondern bestehen lediglich aus Fülltexten, wie “Lorem ipsum” oder ähnlichen.
Weil aber ein Mockup schon mit vielen Details ausgestaltet ist und ein realistisches Bild des Endproduktes vermittelt, präsentieren wir unseren Kunden dieses als Diskussionsgrundlage. Der Kunde kann nun seine Vorstellungen und Änderungswünsche einbringen. Diese lassen sich leicht und ohne grossen Aufwand implementieren, da hierfür keine komplexe Kodierung erforderlich ist.
Unsere Mockups basieren auf der neuesten Adobe XD Version und bieten somit die optimale Schnittstelle zur anschliessenden Weiterverarbeitung der Softwareentwicklung.
Warum braucht man ein Mockup?
Der wichtigste Grund, ein Mockup zu erstellen, sind die geringeren Kosten dieses Vorgehens. Das arbeits- und kostenintensive Programmieren der Webseite kann nämlich so bis in die Endphase hinausgeschoben werden, wenn das komplette Konzept steht. Dann sind auch nicht mehr viele Änderungen erforderlich, die weitere teure Programmierarbeiten erfordern würden.
Darüber hinaus lassen sich Fehler im Design frühzeitig erkennen und beseitigen, die den visuellen Eindruck, aber auch die Funktionalität beeinträchtigen könnten. Korrekturen sowie das Ausprobieren verschiedener Designvarianten sind in diesem Stadium leicht und ohne grossen Kostenaufwand möglich.
Interaktives Mockup erstellen
Ein Mockup erwacht aber erst wirklich zum Leben und gewinnt an Überzeugungskraft, sobald es interaktiv ist. Eigentlich verdient es in diesem Stadium die Bezeichnung Prototyp. Erst das Anklicken der einzelnen Menüpunkte und das Navigieren von Seite zu Seite verdeutlicht, ob die Benutzerführung so ist, wie sie sein sollte. Sehr wichtig ist auch zu sehen, ob die Click-to-Action-Buttons korrekt implementiert sind.
Sollte das Mockup responsive sein?
Da Google die Parole “mobile first” herausgegeben hat, ist die Antwort ein klares Ja. Zudem erfolgen mittlerweile mehr als die Hälfte aller Suchanfragen über Smartphones und Tablets. Wenn irgend möglich, sollte daher in diesem Stadium das Mockup responsive sein. Damit kann man ein optimales Nutzererlebnis auch für mobile Nutzer sicherstellen.
Testphase
Bevor die finale Phase der Programmierung beginnt, sollte das Mockup unter möglichst realistischen Bedingungen getestet werden. Idealerweise führen diese Tests bisher nicht involvierte und daher unvoreingenommene Personen aus, die auch nicht über Fachwissen in Design und Technik verfügen. So lassen sich leicht eventuelle Schwachstellen in der Benutzerführung erkennen, die noch noch vor der endgültigen Programmierung behoben werden können.
Werden Sie sichtbar
SEO ist das Qualitätsmanagement Ihrer Website.
Der Prozess von Sichtbar Online Marketing AG
Das Erstellen eines Mockups ist ein wesentliches Element im Prozess der Webseitenentwicklung von Sichtbar Online Marketing AG. Es hilft, die Kosten zu begrenzen und bietet unsere Kunden volle Transparenz und die Möglichkeit, mit eigenen Ideen und Vorstellungen diesen Prozess zu beeinflussen.