Mit Prototyping zur erfolgreichen Website

VOM WIREFRAME ZUM CLICK-DUMMY (LOOK & FEEL) – PROTOTYPING MIT DER WEBDESIGN AGENTUR WEBNEO

Um sich vom Wettbewerb zu unterscheiden und darüber hinaus eine optisch ansprechende Website zu präsentieren, auf der sich potenzielle Kunden wohlfühlen, ist ein gut strukturiertes und professionelles Webdesign notwendig. Von der Idee bis zur fertigen Website müssen viele kleine Schritte gegangen werden. Eine effektive Methode bildet dabei die Erstellung eines Prototyps der Website. Damit kann die Bedienungsfreundlichkeit noch vor der Entwicklungsphase getestet werden.

In diesem Blogbeitrag möchten wir Ihnen erklären, was genau ein Prototyp ist und welche Vorteile Sie mit diesem gewinnen. Wie Sie in drei Schritten zum Webdesign Prototypen kommen, erfahren Sie jetzt!

Was genau ist Prototyping?

Der Prototyp ist ein bereits optisch ausgearbeitetes Modell der späteren Website. Dabei bilden Formen, Farben, Schriften, Abstände bzw. Weißräume das spätere Ergebnis ab. Der Grad der Ausarbeitung ist dabei variabel. So können z. B. alle benötigten Texte und Bilder eingefügt werden oder es wird mit Platzhalter-Inhalten gearbeitet. Überdies ist es möglich, sowohl die gesamte Seitenstruktur abzubilden als auch einzelne ausgewählte Seiten. Dafür werden zu Beginn der Konzeptionsphase Skizzen und anschließend genauere Wireframes (Drahtmodelle) erstellt, wobei Wireframes die grobe Seitenstruktur der zukünftigen Website darstellen. Daraufhin kann der Kunde ein erstes Feedback zu den Skizzen und Wireframes abgeben. Sobald die Freigabe erfolgt, werden die Skizzen und Wireframes zu einem Mockup, Click-Dummy bzw. Prototyp weiterentwickelt. Anschließend entsteht der fertige Prototyp der Website. Dieser kann schließlich von Ihnen ausgiebig getestet, geprüft und durchexperimentiert werden. Sollten während dieser Phase Änderungswünsche aufkommen, sind diese leicht und zügig umsetzbar.

2. WIREFRAME MIT INHALT FÜLLEN

In diesem aufwendigen Schritt wird darüber hinaus das harmonische Zusammenspiel zwischen Farben, Typografie und Grafikelementen experimentell ausgetestet. In Feinabstimmungen erfolgt dabei die Optimierung von u.a. Formen, Größen und Abständen. Grafische Highlights können zudem mit externen Programmen wie Photoshop und Illustrator erstellt und importiert werden. Durch die Erzeugung von Verknüpfungen und Animationen wird eine möglichst realistische Bedienungserfahrung für den Nutzer gewährleistet. Somit kann die Nutzererfahrung auf der Seite simuliert werden, welche ein wichtiger Faktor für erfolgreiche Suchmaschinenoptimierung ist.

Wie Sie das fertige Ergebnis teilen und kommentieren

Für den fertigen Prototyp kann im XD ein eigener Link generiert werden, welcher anschließend geteilt werden kann. So wird die Möglichkeit geschaffen, alle Ansichten zu begutachten, das Design und den User-Flow zu prüfen sowie live über die Kommentarfunktion seine Meinung zu äußern. So ist der Kommentator also in der Lage, direkt mit dem Ersteller des Prototyps zu kommunizieren. Eventuelle Änderungswünsche am Prototyp können gleich vorgenommen und nach einer Aktualisierung im Adobe XD mit demselben Link aufgerufen werden. Dadurch können verschiedene Versionen der gleichen Landingpage einfach geteilt und kommentiert werden. Das beschleunigt den Designprozess stark und ermöglicht die schnelle Erstellung von A/B-Testseiten — perfekt für effektive Suchmaschinenwerbung.

Über das Navigationsmenü oder über interne Verlinkungen der Elemente im Prototyp ist der Nutzer zudem befähigt, die verschiedenen Seiten der künftigen Website anzusehen. Darüber hinaus wird der Eindruck funktionierender Schaltflächen, Dropdown-Menüs oder Effekte durch die Verlinkung der Elemente erzeugt. So lässt sich die User-Experience testen.