Vom Wireframe zum Click-Dummy (Look & Feel)

Um sich vom Wettbewerb zu unterschieden und darüber hinaus Ihren potenziellen Kunden eine optisch ansprechende Website zu präsentieren auf der sie sich wohlfühlen, ist ein gut strukturiertes und professionelles Webdesign notwendig. WEBneo als Internetagentur für Webdesign in Dresden kann Sie genau dabei unterstützen und Ihre Website grafisch optimieren!

Von der Idee bis zur fertigen Website müssen viele kleine Schritte gegangen werden. Eine effektive Methode ist dabei die Erstellung eines Prototyps der Website. Dafür werden zu Beginn der Konzeptionsphase Skizzen und anschließend genauere Wireframes (Drahtmodelle) für den Kunden erstellt, wobei Wireframes die grobe Seitenstruktur der zukünftigen Website darstellen. Der Kunde erhält daraufhin die Skizzen und Wireframes und kann ein erstes Feedback abgeben. Sobald die Freigabe erfolgt, werden die Skizzen und Wireframes zu einem Mockup, Click-Dummy bzw. Prototypen weiterentwickelt.

Der Kunde erhält anschließend den fertigen Prototypen. Diesen kann er dann ausgiebig testen, prüfen und mit ihm experimentieren. Sollten während dieser Phase Änderungswünsche seitens des Kunden aufkommen, sind diese leicht und zügig umsetzbar.

Ihr Prototyp von Webneo

Scroll- und klickbare Entwürfe mit interaktiven Bedienungselementen
Keine statischen Screens
Darstellung interaktiver Menüs – ganz einfach
Testing der Bedienungsfreundlichkeit noch VOR der Entwicklungsphase
Responsive Darstellung für alle gängigen Ausgabegeräte
Aufrufbar und teilbar als Link ohne nötigen Download
Kommunikation innerhalb des Prototypen durch Kommentarfunktion für mehrere Personen

Jetzt unverbindliches Erstgespräch vereinbaren!

Definition und Funktionen

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. Darüber hinaus ist es möglich, sowohl die gesamte Seitenstruktur abzubilden als auch einzelne ausgewählte Seiten.

Der Vorteil in der Erstellung eines Prototyps liegt in der Möglichkeit Seiten zu verknüpfen, einfache oder komplexere Animationen zu erstellen und die noch nicht fertige Site schon im Vorfeld durch den Kunden erlebbar zu machen. Da der Kunde mit dem Prototyp selbst interagieren kann hat er die Chance, schon vor der Entwicklung einen Eindruck zu erhalten, wie Design und Funktion miteinander harmonieren (live usability test).

Die Erstellung eines Prototyps ist daher in den meisten Fällen eine effiziente Vorgehensweise. Auf diese Weise kann vorläufig Feedback geäußert werden, Änderungen sind leichter vorzunehmen und Zeit und Kosten werden gespart.

Das sind die 3 Schritte zu Ihrem Prototyp

3 Schritte bis zum Prototyp

Seitenschema konzipieren

1. Wireframe erstellen

Der Bau eines konzeptionellen Grundgerüsts anhand der vorher gezeichneten Scribbles erfolgt mit Hilfe von Bausteinen (Text, Bild, Teaserbox, usw.). Im Video sehen Sie bereits den Bau in der Software (Adobe XD).

Die bis zu diesem Schritt noch vorwiegend grafischen Bausteine sind Platzhalter für die späteren Inhalte wie Bilder, Textbereiche, Buttons, Teaserboxen und vieles mehr.

Sinnvoll angeordnet und dimensioniert ergeben die Bausteine (Elemente) schließlich das Layout. Der gewünschte funktionelle Aufbau soll dabei auch optisch ein stimmiges Gesamtbild ergeben.

Inhalte und Details einfügen

2. Wireframe mit Inhalt füllen

Wenn das Drahtmodell (Wireframe) der Website steht kann es durch Bilder und inhaltliche Texte mit Leben gefüllt werden.

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 gewährleisten wir eine möglichst realistische Bedienungserfahrung für den Nutzer.

Anpassung an mobile Geräte

3. Responsives Design

Nachdem die Feinabstimmungen abgeschlossen sind wird der Prozess für die jeweils fehlenden Viewportansichten wie die Desktopansicht, Tablets im Hoch- und Querformat sowie Smartphones im Portrait- und Landscapemodus wiederholt. Einige Elemente können dabei aus dem schon fertigen (XD-)Prototypen übernommen werden und verkürzen so den Erstellungsprozess.

Die Möglichkeit der einfachen und intuitiven Verformbarkeit und Skalierbarkeit von Objekten oder Elementen sowie der Anpassbarkeit von Schriften vereinfachen die unterschiedliche Darstellung der Prototypen für die jeweiligen Endgeräte.

Das Ergebnis mit Kunden teilen

Linkausgabe und Kommentarfunktion

Für den fertigen Prototyp kann im XD ein eigener Link generiert werden, welcher anschließend an den Kunden geschickt wird. So erhält der Kunde die Möglichkeit alle Ansichten zu begutachten, das Design und den User-Flow zu prüfen sowie live über die Kommentarfunktion seine Meinung zu äußern.

Der Kunde ist 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.

Ü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, Dropdownmenüs oder Effekten durch die Verlinkung der Elemente erzeugt. So lässt sich die User-Experience testen.

WEBneo als Internetagentur für professionelles Webdesign ist Ihr geeigneter Ansprechpartner für die Ausarbeitung und Entwicklung eines ansprechenden Webdesigns für Ihre Kunden! Wir erstellen für Sie den Prototyp Ihrer Website, den Sie ausgiebig testen können! So erhalten Sie eine genaue Vorstellung Ihrer zukünftigen Website. Darüber hinaus sind wir in der Lage, Änderungswünsche flexibel und direkt umzusetzen. Gern begleiten wir Sie auch über das Webdesign hinaus bis zur Planung von Optimierungsmaßnahmen wie die Suchmaschinenoptimierung. So steigern Sie die Reichweite Ihrer Webseite und werden neue Kunden generieren.

Haben wir Sie von unseren Leistungen überzeugt? Dann schicken Sie uns jederzeit eine unverbindliche Anfrage. Wir freuen uns auf Sie!

Jetzt unverbindliches Erstgespräch vereinbaren!