Website Mockup und Prototyp: beste Erstellungsmethoden

Oft stellen wir uns im Kopf Dinge vor, die großartig zu sein scheinen, sich aber schnell als schlechte Ideen herausstellen, sobald wir sie in die Realität umsetzen.

Ungefähr so, wie ein Stück Papier oder ein Computerbildschirm.

Jeder kennt den Spruch: Ein Bild sagt mehr als tausend Worte. Was ist aber, wenn es nicht nur ein Bild ist, sondern ein funktionierendes Modell, mit dem Sie interagieren können? Man würde dieses funktionierende Modell als Prototyp bezeichnet.

Der Prototyp ist kein Mockup und auch kein Wireframe. Dennoch können Sie beide in Ihren Entwurfsprozess integrieren.

Der Unterschied zwischen Prototyp, Website Mockup und Wireframe

Ein Wireframe, Website Mockup und Prototyp kann als eine Phase in einem Entwurfsprozess bezeichnet werden.

Jede einzelne Phase kommt der Darstellung der endgültigen funktionierenden Website einen Schritt näher. Dabei können Sie jede Einzelne anhand ihrer „Nähe“ zum Endprodukt identifizieren.

Der Wireframe ist ein Layout mit abstrakten grafischen Elementen wie Linien und Kästchen, ähnlich einem elektronischen Schaltplan. Sie können sehen, wie sich ein Element auf andere bezieht.

Wireframes sind also Dokumente mit einer eher niedrigeren Wiedergabetreue.


Wireframe


Ein Website Mockup ist ein besser aussehende Wireframe. Sie haben eine einfache Struktur mit grauen Kästchen, die Bilder, Originalgrafiken, Schriftarten und Farben darstellen, die mit der Markenidentität des Kunden übereinstimmen.

Mit einem Website Mockup stellen Sie dar, wie eine Website das Wesentliche einer Marke erfasst. Das Website Mockup kann Ihnen dabei helfen, dem Kunden zu zeigen, wie eine Website aussehen wird, ohne zu viel Zeit in die eigentliche Erstellung zu investieren.

Denken Sie daran, sich nicht mit der Überarbeitung von Website Mockups aufzuhalten. All diese Änderungen können Sie dann am eigentlichen Prototyp vornehmen.

Der Prototyp ist eine interaktive Darstellung einer Website. Es ist nicht erforderlich, dass jede Interaktion und Animation voll funktionstüchtig ist. Wichtige Elemente sollten aber laufen, um ihre Funktionsweise näherzubringen.

Der Prototyp ist eine der endgültigen Website sehr ähnliche Version. Die meisten, aber nicht unbedingt alle Komponenten, sind vorhanden.

Aufgrund der Interaktivität sind Prototypen den Website-Mockups überlegen. Aus diesem Grund überspringen wir Mockups in der Regel und gehen direkt zum Prototyp über.

Kennen Sie Ihr Publikum

Der Design- und Entwicklungsprozess involviert viele verschiedene Leute, von Entwicklern und Autoren für Inhalte bis hin zu Marketingfachleuten und CEOs. Stellen Sie also sicher, dass Ihr Prototyp über Funktionen verfügt, die für Ihr Publikum relevant sind.

Ein Texter ist nicht an hübsch animierten Übergängen interessiert, sondern bereitet Prototypen mit deren Inhalten vor.

Ein wichtiger Punkt ist, dass Sie Ihren Prototypen Leuten präsentieren, die nicht monatelang darüber nachgedacht haben. Die Perspektive eines potentiellen Endnutzers kann einem ganz neue Blickwinkel eröffnen.

Drei Dinge, die Sie brauchen:

• Das Wissen, wer Ihre Endnutzer sein werden
• Das Verständnis für die Erwartungen an diese Art von Websites
• Den Test auf Benutzerfreundlichkeit des Prototyps

Forschung

Beginnen Sie mit dem Sammeln von Informationen. Schauen Sie sich andere Webseiten Ihrer Branche an. Finden Sie heraus, welche Websites Ihre Zielgruppe regelmässig besucht und warum sie wiederkommt.

Fragen Sie sich selbst: Welche Funktionen machen diese Websites zu einem angenehmen Erlebnis?

Nutzen Sie diese Nachforschung als Inspirationsquelle und als Warnung davor, was zu vermeiden ist.

Skizzieren

Auf dieser Stufe sind Stift und Papier Ihre besten Freunde. Zeichnen Sie die wichtigsten Elemente Ihrer zukünftigen Seiten auf ein Blatt Papier. Mit Stift und Papier ist das Engagement minimal.

Das Erstellen schneller Skizzen ermöglicht es Ihnen, kreative Lösungen zu identifizieren. Es spart Zeit und kann Ihnen dabei helfen, sich eine grundlegende Struktur vorzustellen, bevor Sie zu Pixeln wechseln.

Zeichnungen sollten frei sein, ohne auf Schriftarten, Farben und Oberflächenelemente Rücksicht zu nehmen. An dieser Stelle halten Sie die grossen Ideen fest. 


Skizzieren mit Stift und Papier

Umfang definieren

Überlegen Sie, was Ihr Prototyp demonstrieren soll und erstellen Sie eine Liste der Seiten, die Sie dafür benötigen. Erstellen Sie eine Website neu, dann listen sie in der Regel alle Seiten auf.

Prototyp erstellen

Beim Erstellen eines Prototyps müssen Sie den richtigen Inhalt verwenden. Er muss nicht vollständig ausgearbeitet sein, aber die Überschriften sollten stehen und die Abschnitte sollten mehr oder weniger vordefiniert sein.

Die Verwendung von Mustertexten bietet sich an, jedoch ist es besser, den tatsächlichen Text zu verwenden, auch wenn es sich nur um einen frühen Entwurf handelt. Es sollte genügend Inhalt vorhanden sein, um jemandem eine Vorstellung davon zu geben, um welche Seite es sich handelt.

Fragen Sie sich selbst: Wozu dient jede einzelne Seite?

Besonders beim Entwerfen für mobile Geräte ist es wichtig, den Fokus auf jeder Seite zu finden. Entfernen Sie ablenkende und sich wiederholende Elemente (ausser möglicherweise Ihrem CTA).

Fazit

Das Erstellen einer Website ohne Prototyp ist wie der Versuch, ein Haus ohne Bauplan zu bauen.

Sicherlich können Sie Materialien so kombinieren, dass sie einem Gebäude ähneln, aber höchstwahrscheinlich verwirren Sie sich selbst und verlieren allmählich den Überblick über den Zweck der Website.

Ein funktionaler Prototyp ist eine Sache, die Sie beim Erstellen von Websites nicht vernachlässigen dürfen. Es spart viel Zeit bei der Kommunikation mit Softwareentwicklern und dem Rest des Teams.

Ausserdem sparen Sie Kosten, die für die Neugestaltung und Behebung der Fehler aufgewendet werden müssten.