Wireframing ist ein grundlegender Teil des Design-Workflows eines jeden Webentwicklers. Erfahre, wie du deine gesamte Website von Anfang bis Ende als Wireframe gestaltest und wie du sie in Elementor einfach nachbauen kannst.
Die Benutzererfahrung lebt von Konsistenz, Logik und Klarheit. Beim Betrachten einer Website oder einer Benutzeroberfläche erwarten Besucher*innen ein visuelles Design, dessen Größe, Layout und Anklickbarkeit sie in keiner Weise überwältigt oder verwirrt. Stattdessen sehnen sich die Besucher*innen deiner Website nach visueller Harmonie, gleichmäßig verteilten Elementen, einer logischen visuellen Hierarchie und natürlich nach einem intuitiven Benutzerfluss, der Sinn macht.
Das ist genau der Grund, warum wir Wireframes lieben. Da wir wissen, wie wichtig visuelles Design für Webdesigner (wie uns) ist, glauben wir, dass du durch das Erlernen der Bedeutung von Wireframes und deren Implementierung in deinen Design-Workflow deine Fähigkeiten und deine Glaubwürdigkeit als Webdesign-Experte verbessern wirst.
Und sei versichert, dass du mit dem Drag and Drop Website Builder von Elementor jedes Wireframe oder jeden Prototyp ganz einfach in eine WordPress-Site umwandeln kannst. Das ist natürlich nur eine Option, denn die meisten modernen Design-Tools bieten die Möglichkeit, Links und Klickmöglichkeiten zwischen deinen Wireframes hinzuzufügen, also einen interaktiven Prototyp-Modus.
Noch nie war es so einfach, den gesamten Designprozess innerhalb der Elementor-Plattform von Anfang bis Ende abzuschließen.
Was ist ein Website-Wireframe?
Ein Website-Wireframe ist eine visuelle Darstellung oder ein Umriss einer Website. Wireframes sind eine Sammlung von Platzhaltern (schwarz-weiß umrandete Formen), die darstellen, wie eine Website gestaltet werden könnte. Jede Form steht für ein bestimmtes Designelement auf der Seite, z. B. ein Bild, ein Logo, Menüpunkte, Schaltflächen usw.
Wireframing ist eine Technik für Webdesign und User Experience Design, die als Low-Fidelity-Mockup dient, um die Anordnung und das Layout dieser Platzhalterformen zu veranschaulichen, die zusammen die grundlegende Basis und Struktur einer Webseite oder eines digitalen Bildschirms bilden.
Im Grunde genommen rechtfertigt jede Art von Struktur, die deine Website enthalten wird, ob visuell oder textuell, eine Phase in deinem Designprozess, die sich ausschließlich auf ihre Größe, ihr Layout und ihre Nähe zu den umgebenden Seitenelementen konzentriert. Das Wireframing ist eine der ersten Phasen dieses mehrstufigen Prozesses. Später in diesem Beitrag werden wir jedes Segment dieses Prozesses besprechen und erläutern, wo das Wireframing seinen Platz findet.
Wie du bald sehen wirst, sind Wireframes eine eigenständige Einheit in der Welt von UX und Webdesign. Sie sind nicht nur wichtig. Sie sind entscheidend.
Warum du deine Website mit einem Wireframe versehen solltest
Als Webentwickler*in besteht einer der wichtigsten Werte bei der Erstellung eines Wireframes darin, dass es Layout-Ideen, Inhalte und das gesamte Seitendesign der Website, die du erstellst, vermittelt.
Wenn du dich dafür entscheidest, Wireframing in deinen Design-Workflow einzubauen, hast du die Möglichkeit, Folgendes zu tun.
- Visualisierung des Layouts deiner Inhalte
- Spare Zeit und Mühe bei deinem Designprozess
- Teste und behebe Probleme mit der Benutzerfreundlichkei
- Perfektionierung deiner Informationsarchitektur
- Testen und Verfeinern der Navigation
- Teste die Benutzerfreundlichkeit mit Benutzertests und Interviews
- Führ schnelles Prototyping für jedes Seitenelement durch
- Evaluier, wie dein Seitenlayout UX- und Design-Best-Practices anwendet
Ein weiterer großer Vorteil des Wireframing-Prozesses besteht darin, dass er Klarheit darüber verschafft, wie die Informationen auf dem Bildschirm angeordnet werden, was auch als Informationsarchitektur der Seite bezeichnet wird.
Wireframes perfektionieren deinen Design-Workflow
Der UX/UI-Designprozess ist ein mehrstufiger Prozess, der manchmal sehr kompliziert und überwältigend sein kann. Das Wireframing ist eines der allerersten Segmente deines Design-Workflows und ein entscheidender Bestandteil für eine klare Usability und eine ausgefeilte User Experience.
Wenn du ein Wireframe für einen Bildschirm erstellst, den du entwirfst, kannst du dir mehrere Größen- und Layout-Optionen für die Elemente auf deinem Bildschirm vorstellen. Du kannst verschiedene Layouts und Anordnungen ausprobieren, indem du Elemente verschiebst, um zu sehen, was am besten funktioniert.
Es ist auch eine Frage der Funktionalität, denn du entwirfst den visuellen Prozess eines Benutzerablaufs, der im Wesentlichen aus einer Reihe von Handlungselementen besteht. Sie müssen sicherstellen, dass das Layout und die Informationsarchitektur jedes einzelnen Bildschirms auf der ultimativen Klarheit basieren, um den Benutzerfluss zu ermöglichen. Die Erstellung von Wireframes, die diesen Prozess abbilden, ist der vielversprechendste Weg, um Funktionsmängel zu beseitigen, die du sonst vielleicht übersehen hättest.
Du kannst sogar mehrere Wireframes eines Bildschirms erstellen, die die verschiedenen Layout-Möglichkeiten zeigen, mit denen du dann Feedback von Kunden oder potenziellen Nutzern einholen kannst, welche Version am besten funktioniert.
Das Testen verschiedener Wireframe-Versionen eines Bildschirms ist eine gute Möglichkeit, um sicherzustellen, dass jedes Segment deines Design-Workflows so umfassend und gut durchdacht wie möglich ist. Wenn du ein Wireframe hast, in das du investiert hast und das du aus einer Vielzahl von Optionen als das bestmögliche Layout ausgewählt hast, wird die nächste Phase des Prototyping ein reibungsloser, fehlerfreier Prozess sein.
Wireframes vereinfachen die QA-Prüfung
Wenn etwas auf einem Wireframe nicht funktioniert, dann ist die Wahrscheinlichkeit groß, dass es auch beim Design nicht funktioniert. Aber dies zu entdecken, wenn du schon knietief in der Gestaltung deiner High-Fidelity-Mockups steckst, wäre gelinde gesagt frustrierend. Es würde bedeuten, dass du jedes Mal von vorne anfangen müsstest, wenn du auch nur den kleinsten Fehler oder ein Funktionsproblem in deinem Prototyp bemerkst.
Wenn du mehrere Versionen deines Prototyps testen willst, macht dir das Wireframing das Leben sehr viel leichter. Es ist viel einfacher und schneller, mehrere Versionen eines Wireframes zu erstellen als mehrere Versionen eines High-Fidelity-Mockups.
Wenn du die Funktionalität eines Wireframes bewertest, bestätigst du, dass das Layout und die Reihenfolge der Elemente auf jedem Bildschirm es den Benutzern ermöglichen, die notwendigen Aufgaben zu erledigen. Bei einem grundlegenden Asset wie einem Wireframe ist es viel einfacher, sich auf die Kernelemente zu konzentrieren, die möglicherweise geändert werden müssen oder auch nicht.
Bei einem detaillierten High-Fidelity-Mockup ist die Identifizierung notwendiger Änderungen oder Korrekturen unter Umständen nicht so einfach. Das liegt daran, dass es wahrscheinlicher ist, dass Fehler übersehen werden, wenn man sich durch eine Vielzahl von Designdetails und Illustrationen wühlt. Es ist am besten, mit der Grundlage zu beginnen und entsprechend fortzuschreiten, während du jede Stufe der User Journey verfestigst.
Es ist einfacher, Änderungen vorzunehmen
Während des gesamten Entwurfsprozesses eines Projekts geben die Kund*innen oft (mehr als einmal) Rückmeldungen zu Änderungen, die sie an den Entwürfen, die du ihnen zeigst, gerne sehen würden.
Diese Änderungen können sowohl klein als auch groß sein, zum Beispiel:
- Größe der Schaltflächen
- Schriftgrößen
- Spaltenlayout
- Menütyp (Hamburger, Dropdown, usw.)
- Und vieles mehr.
Es ist hilfreich, die Bedeutung von Designüberarbeitungen im Zusammenhang mit der Entscheidungsfindung der Kund*innen zu verstehen. Während des gesamten Designprozesses stehen Webentwickler*Innen in ständigem Kontakt mit ihren Kunden über den Fortschritt der von ihnen entworfenen Website. Ein großer Teil der Diskussion besteht darin, die Zustimmung der Kund*innen zu deinen Designentscheidungen einzuholen. Allein dieser Genehmigungsprozess ist einer der größten Anreize für die Erstellung von Website-Wireframes.
Wireframes ermöglichen die Anpassung an Kundenbedürfnisse
Wie wir bereits festgestellt haben, ist eine der wichtigsten Phasen in jedem Webprojekt die Zustimmung des Kunden zu Designentscheidungen.
Da du in der Wireframe-Phase noch nicht mit dem visuellen Designprozess begonnen hast, werden die Entscheidungen, die dein Kunde genehmigen muss, wahrscheinlich nicht mit dem Branding zusammenhängen (Logo-Design, Farbschemata, Typografie usw.).
Stattdessen werden die Entscheidungen, die du und dein Kunde in der Wireframing-Phase treffen werden, wahrscheinlich mit der Informationshierarchie zusammenhängen. Wie wir als Webentwickler*innen wissen, bestimmt die Informationshierarchie deine Inhaltsstrategie von A bis Z und ist somit einer der wichtigsten Bausteine bei der Erstellung einer Website.
Ein Beispiel für ein Szenario, in dem dein Kunde eine Designentscheidung genehmigen muss, ist die Erstellung eines E-Commerce-Shops. Nehmen wir an, dein Projekt besteht darin, eine Website für ein Bekleidungsgeschäft zu erstellen, und du musst eine Reihe von Bildschirmen (z. B. eine Produktarchivseite und eine Seite mit einzelnen Produkten) und Benachrichtigungs-Popups für den Fall entwerfen, dass ein Kunde einen Artikel ansieht und ihn in seinen Einkaufswagen legt.
Möglicherweise möchte dein Kunde die Benutzer*innen dazu ermutigen, ihren Einkauf fortzusetzen, nachdem sie einen Artikel in den Warenkorb gelegt haben, und die Einzelproduktseite zu verlassen und zum Produktarchiv zurückzukehren.
Wenn die wichtigste Aktion für den Käufer darin besteht, weiter zu stöbern, wird die Informationshierarchie etwa so aussehen:
Die primäre Aktionsschaltfläche dient dazu, das Surfen fortzusetzen, und die Option „In den Warenkorb“ ist weniger prominent.
Möchte der Kunde hingegen zu einem sofortigen Kauf ermutigen, bei dem der Käufer so schnell wie möglich zu seinem Einkaufswagen geht, könnte das Design (sowohl visuell als auch verbal) eher so aussehen:
Die Erstellung dieser beiden Benachrichtigungsoptionen dauert nur ein paar Sekunden, und wenn du dem Kunden beide Möglichkeiten vorstellst, siehst du nicht nur professioneller aus, sondern zeigst auch, dass du die potenziellen Ziele des Kunden verstehst. Es spart auch Zeit, da du den Bildschirm in mehreren Sitzungen umgestalten musst.
In Anbetracht der Wahrscheinlichkeit, dass du und dein Kunde viel Zeit damit verbringen werden, die Informationshierarchie zu besprechen, wollen wir nun näher auf die Bedeutung dieses Themas eingehen und erläutern, wie es sich auf deine und die Designentscheidungen deines Kunden auswirkt.
Wireframes priorisieren deine Informationshierarchie
Der Unterschied zwischen den beiden Beispielen auf einer Online-Shopping-Website, die wir oben besprochen haben, zeigt genau, worum es bei der Informationshierarch. Wireframeie geht. Im ersten Beispiel ist es das Ziel des Website-Besitzers, den Käufer zu ermutigen, die Kollektion weiter zu durchsuchen und zum Produktarchiv zurückzukehren. Aus diesem Grund wird in der Überschrift des Benachrichtigungsbildschirms direkt der Vorteil hervorgehoben, dass man zurückkehren kann, um weitere Produkte anzusehen. Die Schaltflächen weisen in die gleiche Richtung. Die primäre Schaltfläche (auf der rechten Seite, in der dunkleren Farbe) ist diejenige, die zum Produktarchiv navigiert.
Natürlich gibt es keine erzwungene Navigation, so dass der Benutzer die zweite Option (sekundäre Schaltfläche) hat, um direkt zu seinem Warenkorb zu gelangen. Aber die Hervorhebung der primären Schaltfläche „Weiterblättern“ ermutigt ihn, das Gegenteil zu tun.
Die Größe und Positionierung von Designelementen sind ebenfalls Indikatoren für die Informationshierarchie. Auf dem obigen Benachrichtigungsbildschirm ist die wichtigste Nachricht „Ihr Artikel befindet sich offiziell in Ihrem Einkaufswagen“, weshalb sie in der größten Schriftgröße und mit der größten Schriftstärke auf dem Bildschirm angezeigt wird und ganz oben steht. Benutzer*innen versteht automatisch, dass dies der erste Satz ist, den er lesen sollte.
Wireframe vs. Mockup vs. Prototyp
Die Design-Terminologie kann verwirrend sein, daher sollten wir sicherstellen, dass wir alle Begriffe klären. Wireframes können als architektonische Blaupause betrachtet werden, ein Mockup als farbige, detaillierte Zeichnung des Gebäudes und der Prototyp des Musterhauses. Sie dienen jeweils einem ganz anderen Zweck, haben aber alle ein gemeinsames Ziel: die Verfeinerung und Verfestigung jeder Phase des Designprozesses.
Wireframe
Wie bereits erwähnt, handelt es sich bei einem Wireframe um eine statische, wenig realitätsnahe visuelle Darstellung einer Schnittstelle, die nur einfache Formen verwendet.
Mit der Zeit können sich einige Platzhalter zu echten Grafikelementen oder Text entwickeln, damit Designer und Entwickler ein besseres Gefühl dafür bekommen, wie alles zusammenpasst.
Da Wireframes ausschließlich aus schwarzen und weißen Platzhaltern bestehen, konzentrieren sie sich auf die Darstellung des genauen Formats und Layouts der Webseite, einschließlich der Abstände, Ränder, Informationshierarchie und Größe der Elemente. Erst nachdem diese Low-Fidelity-Mockups fertiggestellt sind, beginnen die Designer mit der Auswahl eines Farbschemas und dem gesamten visuellen Designprozess, auch bekannt als Benutzeroberfläche. Wireframes bieten Designer*innen die Möglichkeit, die Kernstruktur und die Funktionalität jeder Komponente auf seiner Website oder seinem digitalen Bildschirm zu perfektionieren.
Es gibt auch eine Taxonomie für die Darstellung verschiedener Designelemente auf einer Seite. Wenn du zum Beispiel ein Wireframe-Element für deine Navigationsleiste illustrierst, wirst du dein Logo mit einem einfachen Kreis darstellen. Du zeigst die Designelemente nicht im Detail, sondern gibst nur an, wo sie sich befinden und wie sie angeordnet sind, indem du ein Quadrat oder einen Kreis zeichnest, um sie darzustellen.
Zusätzlich zu den Formen, die deine Designelemente umreißen, enthält dein Wireframe entweder Lorem-ipsum-Text als Platzhalter oder alternativ den eigentlichen Text, den du schreiben und in deine Website einfügen wirst. Dazu gehören Titel, Absätze, Schaltflächen usw., die in der Größe angezeigt werden sollten, die du in deinem High-Fidelity-Prototyp/endgültigen Produkt verwenden wirst.
Sobald die Größe, das Layout und die Abstände deiner Elemente bestätigt sind, ist dein Wireframe fertig und du kannst zur nächsten Phase der Gestaltung deiner Website übergehen: der Erstellung von Mockups.
2. Mockup
Ein Mockup unterscheidet sich von einem Wireframe dadurch, dass es sich darauf konzentriert, wie ein digitaler Bildschirm aussehen wird, und nicht nur, wie seine Struktur aussehen wird. Abgesehen davon sind High-Fidelity-Mockups in der Regel statische Darstellungen des Entwurfs, im Gegensatz zu Prototypen, bei denen es sich in der Regel um interaktive Darstellungen handelt. Wir werden dies in Kürze besprechen. Aus diesem Grund werden Mockups auch als Mid- oder High-Fidelity-Darstellung des Designs bezeichnet.
Wenn du mit der Gestaltung deiner Mockups begonnen hast, bedeutet das, dass dein Branding, deine Logos, deine Typografie und deine UI-Elemente bereits entworfen wurden (mit Raum für Überarbeitungen und Änderungen). Im Vergleich zu Wireframes ähneln Mockups tatsächlich einem fertigen Produkt oder einer Website oder sehen zumindest so aus. Sie stellen einen Wendepunkt in Ihrem Designprozess dar, da sich Ihre Benutzeroberfläche allmählich als greifbares, visuelles Gut manifestiert.
Ein weiterer wesentlicher Unterschied zwischen Wireframes und Mockups besteht darin, dass Wireframes entweder mit Stift oder Papier oder mit einem beliebigen Tool erstellt werden, mit dem du Kästchen und umrissene Formen auf einem digitalen Bildschirm erstellen kannst. Du könntest aber auch Vektorgrafik-Tools verwenden und damit einfach schwarze, weiße und graue Formen und Kästen zeichnen.
Für Mockups musst du ein spezielles Mockup-Tool wie Figma, Sketch, Axure, InVision oder andere verwenden. Wir werden unsere Empfehlungen für Wireframe- und Mockup-Tools später in diesem Beitrag besprechen.
Vielleicht findest du es sehr hilfreich, einen früheren Blogbeitrag von uns zu lesen, in dem es darum geht, wie du deine Mockups und Prototypen in eine WordPress-Site umwandelst.
3. Prototype
Prototypen sind eine genauere Darstellung dessen, wie deine Bildschirme aussehen werden. Sie können sogar als ein frühes Modell deines Entwurfs betrachtet werden. Prototypen sind fast immer eine interaktive (anklickbare) Simulation Ihres Entwurfs, die jedes Designdetail und jedes Navigationselement enthält. Die Rolle eines Prototyps besteht darin, dass du dein Design testen kannst, indem du siehst, wie es im wirklichen Leben aussehen wird, und sogar sehen kannst, wie die Benutzer damit auf dem Bildschirm interagieren werden.
Prototypen sind sowohl für Designer als auch für Entwickler*innen von großem Wert, da sowohl Designfehler als auch Pannen in der Benutzerführung in einem Prototyp leicht erkannt werden können.
Beispiele für Probleme, die durch Prototypen aufgedeckt werden können, sind:
- Erkennen, dass die Bilder für einen bestimmten Bereich des Bildschirms zu groß sind
- Erkennen, dass die Größe der verschiedenen Überschriften nicht einheitlich ist
- Erkennen, dass bestimmte Schaltflächen nicht anklickbar sind oder auf den falschen Bildschirm verweisen
Ein weiterer Vorteil, den Entwickler aus dem Testen von High-Fidelity-Prototypen ziehen, ist die Beurteilung, ob sie jedes im Prototyp verwendete Designdetail codieren können, und wenn ja, wie. Wenn Entwickler einen Prototyp bewerten, können sie auch besser einschätzen, wie sie ihre Zeit einteilen müssen.
Anhand der Komplexität des Prototyps können die Entwickler abschätzen, wie viel Zeit und Ressourcen sie für die Programmierung des Entwurfs benötigen. Dies ermöglicht eine höhere Produktivität und Effizienz.
Für Designer*innen ist ein starker Anreiz für die Erstellung von High-Fidelity-Prototypen, dass sie damit die User Journey testen können, die sie für jeden Besucher ermöglichen wollen. Jetzt, da dein Prototyp anklickbar ist, kannst du die notwendige(n) User Journey(s) konstruieren.
Zusätzlich zur Überprüfung der Funktionalität der einzelnen Benutzerströme müssen Sie sicherstellen, dass jede Schaltfläche oder jeder Link auf jedem Bildschirm zum richtigen Bildschirm führt.
Aber die Funktionalität ist nur die halbe Miete. Jeder Designer muss sich vergewissern (was oft mehrere Testrunden erfordert), dass der Zielbenutzer in der Lage ist, die möglichen Aktionen zu verstehen, die er mit Hilfe des Prototyps ausführen kann. Mit anderen Worten: Du willst sicherstellen, dass deine User Journeys für deine Besucher klar und intuitiv sind.
Wenn eine Schaltfläche, ein Textabschnitt usw. verwirrend oder unklar ist, kannst du diese Lücken oft schon beim Testen deines Prototyps erkennen.
Nachdem wir nun ein besseres Verständnis für die Bedeutung der einzelnen Phasen des Designprozesses – sowohl einzeln als auch zusammen – haben, können wir uns genauer ansehen, warum Wireframes, die grundlegendste und grundlegendste Art von Prototypen, so wertvoll sind.
Website Wireframe Template
Du kannst viele Wireframes-Vorlagen auf Envato finden, wie diese von WebDonut:
Wie man eine Website entwirft
Die Brücke zwischen deinen Wireframes und deiner WordPress-Site zu schlagen, kann ein ziemlich komplexer Prozess sein. Der Abstand oder die Kluft zwischen einer PSD- oder Sketch-Datei und einem visuellen WordPress-Editor wie Elementor kann zu groß erscheinen, um ihn zu verstehen. Deshalb hat unsere Monday Masterclass genau dieses Thema in einer ihrer Episoden aufgegriffen.
Lass uns kurz die grundlegenden Schritte bei der Erstellung eines Prototyps besprechen, den du einfach in eine Elementor-Site umwandeln kannst.
Schritt 1: Erstellen eines Wireframe
Eine unserer Methoden zur Erstellung von Wireframes ist Sketch. Aber eigentlich funktioniert jedes Prototyping-Tool Ihrer Wahl genauso gut. Dein Standard-Wireframe enthält die in der obigen Abbildung gezeigten Komponenten.
Wie du auf dem Bild siehst, ist jedes Designelement in Schwarz und Weiß gehalten, ohne Farbe oder Designdetails. Es handelt sich um eine einfache, altmodische Zeichnung, die sich ausschließlich auf die Struktur und das Layout konzentriert.
Einige Faustregeln, die du bei der Erstellung deiner Wireframes beachten solltest, sind:
- Wenn Du Dein Wireframe erstellst, überlege und notiere Dir, welches Widget Du in Elementor verwenden wirst, um diesen Teil Deines Website-Designs zu erstellen.
- Lege für jeden Bildschirmzustand eine Zeichenfläche an. Das heißt, wenn es einen Anmeldeprozess gibt, solltest du für jeden Schritt eine eigene Zeichenfläche erstellen (Anmelden, Benutzername erstellen, Passwort erstellen usw.). Auf diese Weise gibt es keine Verwirrung und keine vergessenen Elemente bei der Gestaltung.
- Lege die Abmessungen fest, bevor du mit der Erstellung deiner Assets beginnst. Jede Zeichenfläche sollte eine einheitliche Größe haben, und alle Designelemente sollten entsprechend skaliert werden. Die beste Methode für die Größenanpassung beim UX- und Webdesign ist die Anpassung der Zeichenflächen an die tatsächlichen Bildschirmgrößen der Geräte. Diese Einstellung ist in den meisten modernen Design-Tools verfügbar.
- Wireframes dürfen nicht zu sehr ins Detail gehen. Denk an Platzhalter und nur an Platzhalter. Wireframes sind der richtige Zeitpunkt, um Ihre Struktur zu entwerfen. Sobald diese steht, kann man sich Gedanken über die visuellen Aspekte machen.
- Wireframes enthalten keine Farben, Schriftarten, Logos oder andere echte Designelemente, die von der reinen Konzentration auf die Struktur einer Website ablenken.
Beste Wireframing-Tools
Einige von uns bevorzugte Wireframe-Tools sind:
Stift und Papier
Viele Designer beginnen ihren Wireframing-Prozess mit einem leeren Blatt Papier und einem Bleistift oder schwarzen Stift. Dann beginn zu skizzieren und erstelle so genannte Low-Fidelity-Wireframes. Diese sehen genauso aus wie normale digitale Wireframes, sind aber von Hand gezeichnet und lassen sich noch einfacher überarbeiten und optimieren als digitale Wireframes. Viele Designer bevorzugen es, mit diesen handgezeichneten Skizzen zu beginnen, um eine Grundlage für ihr Design-Layout zu schaffen und ihre kreative Ader zu entfachen.
Adobe XD
Adobe XD ist ein vektorbasiertes UX/UI-Tool, das Teil der Adobe Creative Cloud Suite ist. Im Gegensatz zu den meisten anderen Adobe-Programmen kann Adobe XD kostenlos genutzt werden, allerdings nur für ein Projekt. Designer verwenden Adobe XD, um Wireframes, Prototypen und digitale Screendesigns wie Websites und Desktop- oder mobile Anwendungen zu erstellen.
Skizze
Sketch ist ein weiteres vektorbasiertes digitales Design-Tool (nur für Mac), das für die Gestaltung von Websites und allen digitalen Oberflächen wie Wireframes, Prototypen, Websites, Apps usw. verwendet wird. Sketch läuft über ein einjähriges lizenzbasiertes Abonnement. Es ist eine sehr beliebte Option für Mac-Benutzer, die eine billigere und leichtere Alternative zu Photoshop oder Illustrator suchen.
Figma
Figma ist etwas neuer auf dem Designmarkt und ist ein browserbasiertes UI-Design-Tool (mit einer Desktop-App-Option). Figma kann .sketch-Dateien öffnen und ist eine großartige Option für Designer, Entwickler und Kollegen, die in einem Team zusammenarbeiten möchten.
Adobe Photoshop
Photoshop ist ein Grafikeditor, der sich auf die Bildbearbeitung spezialisiert hat. Photoshop hat viele, viele Anwendungsfälle, und Webdesign ist einer davon (und auch Prototyping). Designer verwenden Photoshop häufig für die Bearbeitung von Fotos, die Optimierung von Bildern, die Erstellung von Web-Assets und die Erstellung von Seitenlayouts.
Schritt 2: Konvertierung deines Wireframe in ein Mockup
Nachdem du nun weißt, wie wichtig Wireframing bei der Gestaltung einer Website ist, lass uns darüber reden, was der nächste Schritt ist, sobald du dein Wireframe im Schlepptau hast.
Der erste Schritt auf dem Weg vom Wireframe zum Prototyp ist das Duplizieren des Wireframes. Du solltest eine Originalkopie deines Wireframes aufbewahren, damit du später darauf zurückgreifen oder es überarbeiten kannst. Die Datei, die du bearbeiten möchtest, ist das Duplikat und nicht das Original.
Dann empfehlen wir die folgenden Schritte:
1. Bildmaterial
Ersetzte deine Bildplatzhalter durch die entsprechenden Bilder und Illustrationen. Dazu gehören dein Logo und alle anderen Bilder, Icons und Illustrationen, die du verwenden willst.
2. Text und Schriftart
Wenn du Lorem ipsum-Text verwendet hast, ersetze ihn durch den echten Text und wende die Schriftart und Größe deiner Wahl entsprechend an. Wenn du deinen eigenen Text verwendet hast, dann wende deine Schriftart und Größe direkt an.
3. Schaltflächen
Wende dein Design und deine Größe auf Schaltflächen an.
4. Visuelle Gestaltung
Verwende dein Farbschema und alle anderen visuellen Designdetails.
5. Ausrichtung
Passe die Ausrichtung, den Abstand, die Ränder, die Mindesthöhe, die Mindestbreite und alle Details in Bezug auf die Symmetrie an.
6. Elementor Widgets
Bestimme, welche Elementor-Widgets du für jedes Element deines Prototyps verwenden kannst.
Schritt 3: Konvertiere dein High-Fidelity Mockup in einen interaktiven Prototyp
Ein interaktiver Prototyp ist, wie der Name schon sagt, eine interaktive Version deines High-Fidelity-Mockups, bei dem der Designer Klickziele zum Design hinzugefügt und Reaktionen für jede mögliche Benutzerinteraktion auf jedem Bildschirm (oder Art Board) festgelegt hat.
Das Ziel deines interaktiven Prototyps ist es, dein bestehendes High-Fidelity-Mockup klickbar zu machen, damit du die Benutzeraktionen des Designs sowie die allgemeine Benutzerfreundlichkeit und Funktionalität testen kannst.
Nutzertests sind ein eigenes Thema in der Welt der Nutzererfahrung und eine Phase im Designprozess, in der Designer den Prototyp testen – entweder indem sie Nutzer finden und/oder den Prototyp selbst testen, um ihre Screendesigns zu bestätigen und zu sehen, ob die Klickbarkeit und die gesamte UX/UI für ihre Zielgruppe „Sinn machen“. Und natürlich, um etwaige Fehler oder unklare Designelemente zu erkennen, die überarbeitet oder fein abgestimmt werden müssen.
Zusätzlich (oder anstelle) eines interaktiven Prototyps in deinem Design-Tool kannst du deinen interaktiven Prototyp auch direkt bei der Erstellung deiner Website in Elementor erstellen. Dies könnte eine interaktive Version deines High-Fidelity-Mockups sein, sobald du die Call-to-Actions und Buttons in deine Website integriert hast, aber bevor du dich entscheidest, sie zu veröffentlichen – auch bekannt als Vorschaumodus.
Und schließlich, wenn du dich für dein interaktives Prototyping entschieden und die notwendigen Überarbeitungen vorgenommen hast, ist es an der Zeit, die Zustimmung deines Kunden für deinen High-Fidelity-Prototypen einzuholen. Sobald der Kunde den Prototyp selbst getestet und Feedback für notwendige Änderungen gegeben hat, ist es an der Zeit, mit der Arbeit in Elementor zu beginnen.
Wireframing ist der beste Weg
Da muss man wissen, wie wichtig Wireframing und Prototyping für den Design-Workflow sind, damit Sie bei Ihren kommenden Elementor-Projekten viel erreichen können. Denk daran, dass die Frage, welche Widgets du verwenden kannst, um deine Design-Entscheidungen in die Elementor-Plattform zu übertragen, keine „schwarz-weiße“ Angelegenheit ist. Es gibt oft mehrere Möglichkeiten, eine Art von Design in Elementor zu erstellen; es ist nur eine Frage der Kreativität, etwas, in dem sich alle Webentwickler gut auskennen, um es mal so zu sagen.
Übersetzt von Lisa Kraus
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www./elementor.com/blog/wireframe-website/
