E-Commerce
Home | E-Commerce | Prototyping
Prototyping mit der Webdesign-Agentur Webneo

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

Wobei dürfen unsere Experten Sie unterstützen?















    * Pflichtfeld


    Adobe-XD-Logo
    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.

    Indem Sie dieses Video laden, stimmen Sie der Datenschutzrichtlinie von Youtube zu und akzeptieren die Verwendung von Cookies.

    Indem Sie dieses Video laden, stimmen Sie der Datenschutzrichtlinie von Youtube zu und akzeptieren die Verwendung von Cookies.

    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.

    AdobeXD-Prototyp-Beispiel-WEBneo-3
    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.

    Indem Sie dieses Video laden, stimmen Sie der Datenschutzrichtlinie von Youtube zu und akzeptieren die Verwendung von Cookies.

    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!

    Mann Schreibt in Notizbuch neben Laptop

    Wobei dürfen unsere Experten Sie unterstützen?















      * Pflichtfeld