In dieser digitalen Welt steigt die Nachfrage nach E-Commerce-Websites von Tag zu Tag, da alle Unternehmen auf Online angewiesen sind. Und da E-Commerce auf der ganzen Welt konkurriert, möchte jeder die beste Plattform schaffen.
Und die Hauptvoraussetzung für die Erstellung der besten E-Commerce-Website ist die Gestaltung eines effektiven Wireframes.
Wireframing ist die erste Stufe des Website-Designprozesses. Der Zweck von Wireframing besteht darin, auf wirklich minimale Weise zu arbeiten, um mit dem Organisieren und Herausfinden des Flusses einer Seite zu beginnen.
Es ist die Vorstufe, bevor Sie sich Gedanken über Dinge wie Schriftarten und Farben machen. Mit Wireframing können Sie sehr schnell arbeiten und viele Ideen generieren.
Wenn Sie darüber nachdenken, Ihre eigene zu haben E-Commerce-Website, befolgen Sie diese Richtlinien. Hier finden Sie die notwendigen Tipps und Best Practices für Wireframes für eine E-Commerce-Website.
Wireframing: Best Practices und Tipps
Beginnen Sie Ihr Wireframing immer mit nur einem Stift und einem Blatt Papier. Man könnte am Computer anfangen und das machen viele Leute. Es ist jedoch besser, nur graue Kästchen zu verwenden und die Standardschriftart zu verwenden.
Wenn Sie versuchen, die Dinge richtig auszurichten oder eine Schachtel auf die genau richtige Größe zu bringen, dann konzentrieren Sie sich auf diese kleinen Details. Dann verliert man den Flow und kann keine schnellen Ideen generieren.
Wenn Sie sich also nur an Stift und Papier halten, können Sie wirklich chaotisch sein und Ideen hervorbringen. Lassen Sie uns über die Dinge sprechen, die Sie beachten sollten, um ein Wireframe für eine E-Commerce-Website zu entwerfen.
Kennen Sie den Inhalt Ihrer E-Commerce-Website
Bevor Sie beginnen, müssen Sie wissen, welche Inhalte auf der Seite erscheinen, die Sie entwerfen. Ihre Aufgabe ist es, die Informationen so zu gestalten, dass Sie wissen müssen, welche Informationen auf der Seite erscheinen. Die Informationen, die Sie vermitteln müssen, bevor Sie mit dem Entwerfen beginnen können.
Das bedeutet nicht, dass Sie die genaue Kopie fertiggestellt haben müssen, Sie müssen nur eine ungefähre Vorstellung von den Informationen haben. Worum es geht und wie viel davon es gibt. Hier habe ich eine Liste einiger gängiger Inhalte einer E-Commerce-Website erstellt.
- Eine Überschrift
- Bio-Info
- Eine Fußzeile
- Fotos und Titel für jeden Beitrag
- Vielleicht ein Klappentext
- Social-Media-Links
- Eine Suchleiste und eine Newsletter-Anmeldung
Verwenden Sie die Technik von Crazy 8, um Ideen zu generieren
Um mit der Generierung von Ideen zu beginnen, können Sie eine Technik verwenden, die als bekannt ist 'verrückte 8'. Gemäß dieser Technik müssen Sie ein Blatt Papier in 8 verschiedene Abschnitte falten und dann tun 8 schnellstmöglich verschiedene Ideen für ein Wireframe.
Sie können so groß oder so klein zeichnen, wie Sie möchten, was für Sie am besten funktioniert. Manchmal, wenn die Seite lang ist, möchten Sie vielleicht vier auf einer Seite und dann vier auf der anderen Seite machen. Dies funktioniert als Aufwärmtechnik für Ihr Gehirn. Designer finden es immer faszinierend, weil sie zunächst nach Ideen für E-Commerce-Websites suchen.
Es gibt nur einen offensichtlichen Weg, wie Sie alles arrangieren möchten. Aber wenn Sie sich dazu zwingen, an immer mehr Konzepte zu denken, werden Sie überrascht sein, wie viele Ideen Sie gerade in Ihrem Kopf versteckt haben.
Stellen Sie sich ein Drahtmodell wie einen Bauplan vor
Erwägen Sie, eine Entwurf Ihrer eCommerce-Website beim Wireframing. Das Ziel eines Wireframes ist es, das Grundgerüst für jeden Bildschirm in Ihrem Design zu erstellen. Auf diese Weise können Sie das Gesamtlayout des Designs mit Ihren Kunden überprüfen.
Zeichnen Sie ein neues Mockup
Es spielt wirklich keine Rolle, ob es so aussieht, als ob ein Kind es zu jemand anderem gezeichnet hätte; der Punkt ist, dass Sie Ihre Ideen herausgebracht haben. Jetzt wissen Sie, was es bedeutet, und Sie haben einen Ort, an dem Sie mit Ihrem Design beginnen können. Sehen Sie sich nach dieser Phase die 8 Konzepte an und setzen Sie einen kleinen Stern neben das, von dem Sie glauben, dass es sich lohnt, es zu erkunden.
Manchmal werde ich dann gehen und ein neues Mockup von all diesen Teilen zusammen zeichnen. Aber im Allgemeinen müssen Sie an dieser Stelle zum Computer wechseln.
Welches Programm benötigen Sie?
Um ein Wireframe für eine E-Commerce-Website zu erstellen, ist kein Programm erforderlich. Alles, was Sie brauchen, ist ein gutes altes Stück Papier und etwas zum Schreiben. Ich verwende jedoch lieber Invision Freihand beim Erstellen meiner Wireframes.
Stifte und Papier sind großartig, aber freihändig können Sie Ihre Wireframes direkt an den Kunden senden. Präsentieren Sie sie in Echtzeit und geben Sie ihnen auch die Möglichkeit, Notizen im selben Dokument zu machen. Auf diese Weise können Sie schnell iterieren und liefern.
Verwenden Sie die Sketch-App für das Wireframing Ihrer E-Commerce-Website
Sie können ein Programm namens Sketch verwenden, um Ihre Wireframes zu verspotten. Verwenden Sie hier jedoch einfache graue Kästchen und den Standardtext. Der Grund dafür ist, dass Sie Ihren Kunden viele Designs zeigen müssen. Die Verwendung von Farben oder richtigen Symbolen oder irgendetwas anderem wird alles verwirren.
Erstellen Sie nicht nur ein Drahtmodell in Sketch. Machen Sie so viele, wie Sie denken, Ideen für Ihre Lieblingsteile dieses Skizzierprozesses zu haben. Danach ist es eine gute Idee, darüber zu schlafen. Auf diese Weise können Sie mit einem frischen Geist und einer neuen Perspektive darauf zurückkommen, bevor Sie zur nächsten Phase übergehen.
Kennen Sie den Zweck Ihrer Produkte
Wenn Sie ein Wireframe starten, müssen Sie wissen, was Ihr Produkt leisten muss. Angenommen, Sie erstellen Wireframes für einen einfachen Anmeldebildschirm für eine mobile App einer E-Commerce-Website. Diese Bildschirme haben in der Regel einige erforderliche Elemente wie ein Feld für Benutzername und Passwort, eine Schaltfläche zum Senden, einen Call-to-Action usw.
Aber das Hauptziel ist es, den Benutzer anzumelden. Listen Sie die Anforderungen auf, die Sie kennen, bevor Sie mit der eigentlichen Erstellung des Wireframes beginnen.
Versuchen Sie, sie in der Reihenfolge ihrer Priorität oder in der Reihenfolge aufzulisten, was für den Benutzer am wichtigsten ist. Jetzt, da Sie Ihre Anforderungen haben, können Sie zum wichtigen Teil kommen.
Skizzierung
Das Skizzieren ist beim Wireframing unerlässlich, da es Ihnen ermöglicht, Ihre Ideen schnell umzusetzen. Wenn Sie besorgt sind, wird das Skizzieren mit einer Maus eine Herausforderung sein. Freihand macht es ziemlich einfach, ein einfaches Rechteck zu erstellen.
Sie können beim Zeichnen Ihrer Form einfach die Alt- oder Wahltaste gedrückt halten, um sie zu glätten. Dies funktioniert auch mit Kreisen. Sie können beim Zeichnen auch Verschiebungen halten, um gerade Linien zu erstellen, und sogar mit Ihren Füllungs- und Deckkraftoptionen spielen.
Wie Sie sehen können, ist Wireframing keine besonders komplexe Arbeit, wenn es um visuelle Darstellungen geht. Es besteht hauptsächlich aus Kästchen und Text, wie der Rest des Internets. Der Unterschied liegt in der Denkweise dahinter. Alles, was in einem Wireframe erstellt wird, dient ausschließlich dem Zweck, Ihre Ideen schnell zu kommunizieren.
Bestes Gerät für das Wireframing Ihrer E-Commerce-Website
Sie können iPad Pro, Apple Pencil und eine App namens Concepts verwenden. In dieser App können Sie eine unbegrenzte Leinwand haben. Und Sie können einfach weiter skizzieren und die Seite einfach immer verschieben, um mehr Ideen zu bekommen.
Wesentliche Elemente, die Sie für Ihre E-Commerce-Website einschließen müssen
Die Produktlistenseite ist ein Muss für jede E-Commerce-Website. Sie müssen also eine gute und attraktive Zielseite entwerfen. Außerdem gibt es einige Elemente, die Sie beim Wireframing beachten sollten. Sie sind-
- Produktkarten
- Filter
- Design der Produktdetailseite
- Bilder von hoher Qualität
- Warenkorb-Schaltfläche
- Preisknopf
- Details zur Produktbeschreibung
- Checkout-Schaltflächen
- Gutscheincodes
Zusammenfassung
Konzentrieren Sie sich beim Wireframing einer E-Commerce-Website einfach auf die Benutzererfahrung. Im ersten Schritt geht es nur noch um Papier und Bleistift, später geht es um den optischen Schliff.
Befolgen Sie diese Richtlinien, um großartige Online-Einkaufserlebnisse zu erzielen. Denken Sie daran, dass die richtige Hierarchie und Ausrichtung einfach zu scannende Produktseiten erstellt.
Und mit Z-Muster im Seitendesign wird Ihnen auch erstaunliche Benutzererlebnisse bieten. Denken Sie immer daran, sich in die Lage der Benutzer zu versetzen und an die wichtigsten Informationen zu denken. Das ist alles über Wireframing für E-Commerce-Websites.
Ein erfahrener Designer würde nehmen 4-7 Tage, um ein Wireframe zu erstellen. Und für einen durchschnittlichen Designer kann es zu Verzögerungen kommen 12-20 Tage oder mehr.
Wireframe ist eine Blaupause und ein Mockup ist ein visuelles Modell. Das heißt, wenn Sie Ihren Bleistiftskizzen eine digitale und farbige Form geben, wird daraus ein Mockup.