Blogeintrag
04
Strategie

Was ist Wireframing? Unsere Prinzipien.

Veröffentlicht: 04. Juni 2020

Lesen

Übersicht

Ein Wireframe (deutsch “Drahtgittermodell”) ist ein Layout eines digitalen Frontends, das zeigt, welche Elemente später auf dem User Interface vorhanden sein werden. Wireframes werden häufig verwendet, um Inhalte und Funktionen auf einer Seite darzustellen, wobei die Benutzeranforderungen und eine klar strukturierte User Journey starke Berücksichtigung finden.

Was sind Wireframes?

Insbesondere in agilen Unternehmen und Startups, in denen Produktdesign und -entwicklung oft kollaborativ und iterativ durchgeführt werden, sind Wireframes von entscheidender Bedeutung. Sie spielen eine unschätzbare Rolle, wenn es darum geht, alle auf einer Seite zu halten, und zu sehen, wie die Anforderungen, die User Journey und das Layout der Anwendung strukturiert sind. Das Ziel eines Drahtgitters ist es, zu Beginn eines Projekts, ein visuelles Verständnis einer Seite zu vermitteln, um die Zustimmung der Stakeholder und des Projektteams zu erhalten, bevor die kreative Phase beginnt. Wireframes können auch zum Erstellen der globalen und sekundären Navigation verwendet werden, um sicherzustellen, dass die für die Seite verwendete Terminologie und Struktur den Erwartungen der Benutzer entspricht.

Warum Wireframing?

Wireframes dienen als Blaupause für das Design. Sie legen den Weg für die konzeptionelle Strukturierung der Anwendung fest, sei es visuell oder strukturell. Wireframes helfen uns bei der Kommunikation folgender Punkte:


  • Inhalt: Es hilft uns zu wissen, welche Inhalte auf der Seite angezeigt werden.
  • Struktur: Wie können die Teile der Anwendung zusammenpassen?
  • Informationshierarchie: Wie werden die Informationen zusammen organisiert und angezeigt?
  • Funktionalität: Wie funktioniert die Schnittstelle?
  • Verhalten: Wie werden die Benutzer mit der Benutzeroberfläche interagieren? Und wie verhält es sich?

Der eigentliche Zweck von Wireframes hängt von den Personen ab, die sie beauftragen oder erstellen. Es ist eher so, als würden wir die Informationen vermitteln, die andere benötigen, um zu wissen, ob wir die Skizzen von Hand ändern müssen oder in die Prototypisierung übergehen können. Mit Wireframes soll eine klare Vision eines Projektes vermittelt werden.

Prinzip 1: Die User und Ihre Bedürfnisse zuerst

Zunächst ist es wichtig sehr genau zu wissen, wer Ihr Produkt/ Dienstleistung verwendet/ nutzt. Ist diese Zielgruppe genau definiert betrachtet man die Art uns Weise wie diese Usergruppe das Produkt/ die Dienstleistung konsumiert. Die Webseite, Anwendung auf genau diese individuellen Bedürfnisse und Benutzerströme abzustimmen, ist ein wichtiger Bestandteil des Wirefiamings als Teil einer strategisch geplanten User Expereience. Beim Wireframing identifizieren und denken wir zum ersten Mal über die tatsächlichen Benutzeroberfläche nach. Sie müssen eine gewisse Empathie zum User entwickeln und in die Benutzeroberfläche einfließen lassen. Das Problem des Benutzers ist Ihr Problem und Sie sind die Hauptperson im Problemlösungsprozess.

Prinzip 2: Wireframes als Vorbereitung

Großartige Produkte sind großartig und erfolgreich, weil sie auf guten Plänen aufbauen. Wireframes können dafür genutzt werden, die Anforderungen an eine Benutzeroberfläche vorbereitend für ein MockUp, Prototyping oder die Entwicklung genutzt werden.

Prinzip 3: Erwartungen formulieren nicht nur Ziele setzen!

Was sind die Schritte im Entwurfsprozess, wer ist involviert, was sind die Fristen für jeden Schritt, welche Genauigkeit ist für eine ordnungsgemäße Kommunikation erforderlich und viele Fragen mehr. Mit Wireframes überlegen Sie, was Sie von der Benutzeroberfläche erwarten und was von Ihnen erwartet wird.

Prinzip 4: Allem eine Bedeutung geben.

Unsere Wireframes, MockUps und Prototypen sind Kommunikationsmethoden wie jede andere Sprache auf der Welt. Jedes Textstück, jede Farbe, jeder Farbverlauf, jeder Schatten, jede Form und jedes Bild, das wir für Sie aufschreiben, hat eine Bedeutung, genau wie es Definitionen für jedes Wort gibt.

Prinzip 5: Konsistenz nicht Einheitlichkeit!

Wenn möglich, sollten dieselbe Designsprache / dieselben Muster verwendet werden, um mit den Usern zu kommunizieren und ihnen dabei zu helfen, sich mit Ihrem Produkt/ Dienstleistung vertraut zu machen. Dabei kann nicht jedes Szenario berücksichtigt und in einem Design Style Guide dokumentiert werden. Viele Ereignisse erfordern oft individuell Bedingungen. Was die Dinge verbinden sollte, ist ein konsistenter Ansatz, den die Benutzer verstehen und dem sie im besten Fall auch vertrauen werden.

Prinzip 6: Experiment und Zusammenarbei

Der beste Weg, um ein effektives Produkt zu entwickeln, besteht darin, etwas Kleines zu vergrößern, es schnell weiterzuentwickeln und weit zu optimieren. Mit Hilfe von Iterationen verwandeln wir kleine Fehler in Lektionen. Das Low-Fidelity-Design hilft uns und unserem Team, viele potenzielle Lösungen schnell zu erkunden, bevor wir uns auf eine Lösung konzentrieren und diese polieren und zum Endprodukt verfeinern. Zunächst scheint es viele Lösungen für eine Designherausforderung zu geben. Sie können jedoch erst entscheiden, welche am besten funktioniert, wenn Sie einige davon erkundet und vor sich ausgelegt haben - um zu sehen, zu berühren und zu fühlen. Unerfahrene Designer werden sich zu sehr auf ihre ursprünglichen Ideen festlegen und sich in die wahrscheinlich falsche Lösung verlieben - gute Designer wissen es besser. Letztendlich arbeiten wir in der falschen Genauigkeit, wenn Sie Produktkonzepte nicht schnell erstellen können. Und Sie verschwenden wertvolle Zeit, wenn unsere Drahtgitter nur Graustufenversionen eines Designs sind, auf das Sie sich bereits konzentriert haben. Verwenden Sie Wireframing als Mittel zum Zweck, nicht als Selbstzweck.

Fazit

Wireframes stellen eine visuelle Anleitung für das Framework Ihres Produkts und dessen Navigation dar. Aussehen und Optik spielen zu diesem Projektzeitpunkt keine Rolle. Das Hauptanliegen bei einem Wireframe sollte sein, die Inhalte auf eine Weise zu präsentieren, die ein typischer Benutzern dieser Art von Diensten gewohnt ist. Unsere Mission ist dabei, Ihren Usern das Erreichen ihrer Ziele zu erleichtern. Indem wir Ihre Informationen auf diese Weise präsentieren, richten wir die Geschäftsziele Ihres Produkts an den Bedürfnissen Ihrer Benutzer aus. Dies gibt dem Projektteam, insbesondere den Designern, Vertrauen in die weitere Entwicklung. Wireframes sparen außerdem viel Zeit und Geld beim austesten verschiedener Varianten als im späteren Entwicklungsstadium. Als Agentur stehen uns viele Tools und Dienste zur Verfügung, um für Sie individuelle Wireframes zu erstellen. Die Auswahl des geeigneten Tools hängt dabei stark vom individuellen Projekt ab. Sprechen Sie uns an.

Bitte scrollen Sie nach unten, bis 100% erreicht sind...

Zurück zum Blog Zurück zum Blog

100%