Schlechte Angewohnheiten vor langer Zeit, als wir neue Projektideen und Benutzeranforderungsdokumente von unseren Kunden erhielten, vielleicht einige Ideen skizzierten und uns in faszinierendes Photoshop-Design stürzten.

Unsere Begründung für diese Methodik war, das Design-Gate sofort zum Laufen zu bringen, um Zeit für die Überarbeitung zu haben.

Nach einiger Zeit wurde uns klar, dass wir viel Zeit mit dem Entwerfen verbracht haben, warum? Überarbeitungen haben die ganze Zeit gedauert. Die Revisionen waren kompliziert; Wir mussten Layouts, Grafiken und Typografie anpassen. Alles war frustrierend, katastrophal für Projektzeitpläne, besorgniserregend für Kunden und ermüdend für uns. Es hat eine Weile gedauert, bis uns klar wurde, dass wir einen anderen Ansatz brauchen. Wir haben uns entschieden, zum ursprünglichen Prozess von „Square One” zurückzukehren, den wir früher „Wire-Framing” ignoriert haben. Wir begannen mit Grey-Boxes-Drahtmodellen, nahmen es in unseren Designprozess auf, wechselten dann zu einem anderen Prozess und fügten es dem Designprozess hinzu. Am Ende fügte sich das Modell dank „Wire-Framing” zusammen, es sparte uns Zeit und hat uns geholfen, Probleme früher anzugehen.Aus diesem Grund wähle ich Wireframing als „erstes Tor” im Designprozess.

Wire-Framing User Experience Designs

Wer weiß, im frühesten Stadium können Sie potenzielle Usability-Herausforderungen in Ihren Designs erkennen. Manchmal großartiges Projektkonzept mit strengen (URS-) Benutzeranforderungen, die sich während des anfänglichen Prozesses zu fügen scheinen. Wieder einmal passiert Schlimmeres, wenn wir anfangen, Pläne für Papiere zu erstellen. „Was ist passiert?” Wir haben das Drahtmodell ignoriert, das nur wenige Minuten dauert, um einen Plan zu skizzieren, als das bunte Photoshop. Beginnen Sie besser früher als später mit der Anpassung.

Wireframing als Zeitmanagement-Tool

Zeitmanagement ist eine wichtige Technik für jedes erfolgreiche Projekt, wenn ein Projekt auf einem engen Zeitplan steht; Sie denken vielleicht: „Warum sollte ich meine Zeit mit Wireframing verschwenden, also springe ich besser zu buntem Photoshop.” Wir haben diesen Fehler anfangs gemacht, aber stattdessen haben wir das gesamte Konzept überarbeitet, was zeitaufwändig und eine Verschwendung von Ressourcen war. Das Überarbeiten von Grey Boxes und Skizzen ist viel einfacher als das Überprüfen von Vollfarbdesigns, die in mehrere komplexe Elemente integriert sind.

Das Drahtmodell wird verwendet, um eine tatsächliche und korrekte Dimension einer Seite zu erstellen. Nach der Freigabe durch den Kunden benötigen wir nur noch ein grafisches Mittel, um das Erscheinungsbild zu verbessern. Der Trick ist, wenn die Drahtgitter, Skizzen und grauen Kästchen in Ordnung sind, haben wir keine Zeit für eine Überarbeitung. Stattdessen springen wir zum nächsten „visuellen” Teil des Prozesses.

Wireframing für die Kundenbindung

Das Seitenlayout mit Farben lenkt unsere Kunden manchmal ab; Vielleicht verabscheut ein Kunde die Farbe „Lila”. Die Emotionen des Kunden finden es schwierig, sich auf den Plan zu konzentrieren. Ihre Rückmeldungen können aufgrund ihrer Gefühle negativ sein. Am Ende fragen sie vielleicht nach „Neu anfangen”, die Designs mögen in Ordnung sein, aber das einzige, was den Kunden irritiert, ist die „lila” Farbe. Daher ist die Verwendung grauer Kästchen und Skizzen ein effektiver Weg, da dadurch die Ablenkung durch Elemente beseitigt wird.

Ein Wireframe hilft dabei, Feedback zu Größe und Layout zu erhalten, ohne dass sich der Kunde nur auf das Erscheinungsbild konzentriert. Die Verwendung des Wireframe-Ansatzes hilft uns auch, mehr über einen Kunden zu erfahren, was ihm gefällt? Die Stile, die Typografie usw., die Wireframe-Präsentation, ist wie eine Bindungszeit, ihr Feedback und ihre Interaktion lassen Sie über sie und ihre Designs wissen und was Sie in zukünftigen Phasen des Projekts erwarten können? Wenn Sie einen groben Entwurf auf Papier skizzieren, wird der Kunde immer wieder Kommentare zu Symbolen, Schaltflächen, Schriftarten usw. abgeben. Am Ende sagen sie, dass sie größere Schaltflächen bevorzugen als kleinere usw. Schließlich lernt ein Designer von den Kunden und beginnt, darauf zu achten Feedback-Muster und lernen, Wissen zu haben, kann Ihre Zeit, Energie und Ressourcen sparen.

7 faszinierende Dinge über Wireframes

1 Steigert die Teamarbeitserfahrung

Der Wire-Framing-Prozess bringt verschiedene Gruppen von Menschen mit unterschiedlichen Fähigkeiten zusammen; Jeder ist Teil des Projektprozesses. Projektmanager, Designer, Entwickler kommen alle zusammen, um ein Ziel zu erreichen. Das ist wertvoll, weil es die Teamarbeit verbessert und dafür sorgt, dass Teamkollegen einander besser verstehen. Mit dem „Wasserfall”-Modell können Projekte tatsächlich abgebrochen werden.

2 Transparente Kommunikation

Reibungsloser Kommunikationsfluss, früher litten wir darunter, dass einige Teammitglieder wie Entwickler nicht in die Projektdiskussion einbezogen wurden. Durch die Einbeziehung jeder einzelnen Person in den Wireframing-Prozess wird das Problem gelöst. Ein Entwickler kann ein Problem früher erkennen, das in E-Mails und Chats möglicherweise übersehen wird. Auf der anderen Seite sind Spezifikationen elegant und schön, aber schwerer zu visualisieren.

3 Binden Sie Kunden ein

Ein Wireframe hilft dabei, Feedback zu Größe und Layout zu erhalten, ohne dass sich der Kunde nur auf das Erscheinungsbild konzentriert. Die Verwendung des Wireframe-Ansatzes hilft uns auch, mehr über einen Kunden zu erfahren, was ihm gefällt? Die Stile, die Typografie usw., die Wireframe-Präsentation, ist wie eine Bindungszeit, ihr Feedback und ihre Interaktion lassen Sie über sie und ihre Designs wissen und was Sie in zukünftigen Phasen des Projekts erwarten können? Wenn Sie einen groben Entwurf auf Papier skizzieren, wird der Kunde immer wieder Kommentare zu Symbolen, Schaltflächen, Schriftarten usw. abgeben. Am Ende wird er sagen, dass er größere Schaltflächen als kleinere usw. bevorzugt. Schließlich lernt ein Designer von den Kunden und beginnt zuzusehen für Feedback-Muster und Lernen, Wissen zu haben, kann Ihre Zeit, Energie und Ressourcen sparen.

4 verschiedene Ansätze

Brainstorming ermöglicht es den Menschen, die verschiedenen Möglichkeiten zu finden, Projekte anzugehen. Sie sind einfach herzustellen und vor allem auf Papier zu skizzieren, alles, was Sie brauchen, ist ein Bleistift und ein Blatt Papier, und wir gehen Probleme aus verschiedenen Blickwinkeln an und zeichnen sie auf ein Blatt Papier. Sie können Zuordnungen kombinieren und löschen, bis Sie zwei oder vier sinnvolle Zuordnungen haben.

Verschiedene Ansätze umfassen den technischen Ansatz – neue und trendige technologische Funktionen, Benutzererfahrung und Usability-Tests, wie Benutzer ein Ziel und eine Aufgabe schnell erreichen, bevor sie sich langweilen, was wiederum zum Abbruch der Aufgabe führt, wiederum der umweltbezogene Ansatz – wer sind die Beteiligten? Auf welche Felder zielen wir ab? Welche Arten von Funktionen sind wichtig, die leicht zu einem bestimmten Stakeholder und einem bestimmten Fokusbereich passen?

5 Eine Grundlage für Tests

Mit 3 oder 5 Prototypen können Sie eine Projektskizze mit echten Benutzern testen. Es besteht die Auffassung, dass wir nur mit fertigen HTML-Prototypen testen können, aber das stimmt nicht. Auch die handgezeichneten Wireframes können zum Testen verwendet werden. Sie können den Benutzer um Vorschläge zu Schaltflächen bitten, die er gerne anklicken würde; Sie können auch Feedback zur Benennung von Tags erhalten und schließlich helfen, zu überprüfen, ob sie die richtige visuelle Hierarchie haben. Das Testen per Wireframe hilft, Probleme früher zu erkennen.

6 Schnelleres Projekt produziert

Es braucht wenig Zeit und Geld, um ein Wireframe-basiertes Projekt zu prototypisieren, da verschiedene Personengruppen am Wireframe-Prozess beteiligt waren. Daher werden unvorhergesehene Fehler, die zu Revisionen führen könnten, vor dem eigentlichen Projekt behandelt. Auch hier wurde das Projektlayout von den Kunden gesehen, und so ist die endgültige Designfreigabe erfolgt. Dies reduziert die Zeit für mehrere Konzepte.

Wireframing mit Photoshop

Graue Kästen und Skizzen mit Photoshop.

Schritt 1: Sammeln Sie zusätzliche Anforderungen von Kunden, starten Sie dann, um Photoshop vollständig zu kolorieren, und beginnen Sie mit Wireframing.

Schritt 2: Erstellen Sie das Dokument basierend auf einem 960-Rastersystem (1100 Pixel breit und 760 hoch). Sie können dies unter „Raster in Photoshop einstellen” lernen.

Schritt 3: Das Farbeimer-Werkzeug (G) wird verwendet, um den Hintergrund mit einer hellgrauen Farbe zu füllen, um zu erklären, dass es eine Hintergrundfarbe oder ein Bild geben wird.

Schritt 4: Wählen Sie das Rechteck-Werkzeug aus der Symbolleiste und zeichnen Sie ein Kästchen, um den Inhaltsbereich zu symbolisieren. Wir verwenden das 960-Rastersystem; Meine gezeichnete Box wird 940 Pixel breit sein. Machen Sie die Vordergrundfarbe mit „Paint Bucket Tool” weiß, damit sie sich vor unserem grauen Hintergrund abhebt.

Schritt 5: Um den Prozess viel schneller zu machen, geben Sie einfach (Buchstabe D) ein, um den Vordergrund auf Schwarz oder eine beliebige Farbe, die zu Ihnen passt, und den Hintergrund auf Weiß oder eine beliebige Farbe einzustellen. Zeichnen Sie dann schwarze Kästchen, um die Inhaltsbereiche darzustellen. Auch hier können Sie die Deckkraft der Hintergründe ändern, um sie grau oder in einer beliebigen Farbe erscheinen zu lassen.

Schritt 6: Fügen Sie innerhalb des Rasters ein Rechteck hinzu, um etwas darzustellen. Geben Sie in diesem Fall „Login Button” den Deckkraftwert („30″) ein, um die Deckkraft des Rechtecks („30″) zu verringern, nachdem das Rechteck gezeichnet wurde. Sie können Text mit dem Textwerkzeug (T) in der Textwerkzeugleiste hinzufügen, um den Text „LOGIN” über dem Feld hinzuzufügen. Fügen Sie ein weiteres Rechteck hinzu, um den Navigationsbereich zu erstellen, und verringern Sie erneut den Deckkraftwert, um ihn grau zu machen.

Schritt 7: Fügen Sie Rechtecke hinzu, um die Inhaltsspaltenbereiche zu erstellen. Verwenden Sie ein zweispaltiges Layout mit einer etwas größeren Hauptinhaltsspalte und einer kleineren Spalte für das Startseitenbild. Stellen Sie die Deckkraft für die Spalten auf 10 % ein und fügen Sie ein weiteres Rechteck hinzu, um die Fußzeile am unteren Rand der Seite darzustellen.

Seite 8: Fügen Sie im Inhaltsbereich mit dem Photoshop-Befehl Typ > Lorem Ipsum einfügen Blindtexte hinzu.

Andere Anwendungen

Andere Anwendung für Wireframing, die von Nicht-Grafik-Designern verwendet werden kann, um interaktive und schöne Wireframes zu erstellen.

OmniGraffle

Es ist wie Micro-Visio, es hat sehr schöne Schablonen, die für High-Tech-Design verwendet werden können, und die Funktionen sind erstaunlich. Das ist das beste.

Ninja-Mock

Mein Favorit, KOSTENLOS zu verwenden, hat sehr schöne Funktionen und Schablonen, die zum Erstellen eines interaktiven Projektkonzepts verwendet werden können. Es ermöglicht Benutzern, offline und online zu arbeiten.

Schöne Diagramme

Das ist gut für Anfänger, es ist KOSTENLOS und die Schnittstellen sind leicht verständlich.

Balsamico

Eine schnelle Möglichkeit, einem Kunden Designkonzepte zu vermitteln, es hat eine kostenlose Demo, mit der Benutzer das Endprodukt speichern können. Hat alle Elemente, die zum Skizzieren benötigt werden, sowie einen einzigartigen Handzeichnungs-Look.

Google Drive-Zeichnung

Kann für Bildschirmmodelle verwendet werden, es ist nicht vollständig Wire-Framing-Typ, aber es hat Funktionen wie ein gutes Tool für die Zusammenarbeit, schnell, kostenlos und einfach zu bedienen.

Gliffy

Gliffy Es ist einfacher zu verwenden, es ist glatter und bietet Diagrammfunktionen wie Flussdiagramme und Pläne, es hat Venn-Diagramme mit Netzwerkprozessen und UML, das Exporte in SVG, PNG und JPEG hat.

Lumzy

Es ist eine Flash-Anwendung, bietet eine Plattform für die Zusammenarbeit, ist kostenlos, schnell und hat schließlich verschiedene Arten von Steuerelementen, die einfach zu verwenden sind.

Moqups

Kostenlos, schnell und einfach zu verwenden, ich benötige kein Browser-Plug-in, die Verknüpfung von Bildschirm und Schaltfläche erfolgt einwandfrei, sodass eine Person eine Demonstration veröffentlichen kann, damit die Clients sie anzeigen und verwenden können. Der Export von Bildern gemäß Spezifikation ist erlaubt. Abgesehen davon wurde Standard-HTML5 und JavaScript in Moqups integriert.

Aufnahmequelle: instantshift.com