E – COMMERCE
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
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.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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 DEVICES
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.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
DAS ERGEBNIS MIT KUNDEN TEILEN
LINKAUSGABE UND KOMMENTARFUNKTION
