Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing

Ein Leitfaden für Anfänger zum Wireframing

by
Read Time:13 minsLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

German (Deutsch) translation by Valentina (you can also view the original English article)

Wireframing ist ein wichtiger Schritt in jedem Screen-Design-Prozess. Es ermöglicht Ihnen in erster Linie, die Informationshierarchie Ihres Designs zu definieren, wodurch Sie das Layout einfacher planen können, je nachdem, wie Ihr Benutzer die Informationen verarbeiten soll. Wenn Sie Wireframing noch nicht verwendet haben, ist es an der Zeit, Ihre Füße nass zu machen.

A simple wireframeA simple wireframeA simple wireframe

Es ist wie ein architektonischer Entwurf; Sie müssen es in zweidimensionalen Schwarz-Weiß-Diagrammen sehen, bevor Sie verstehen, wie das eigentliche Haus gebaut wird. In ähnlicher Weise können Sie bei einem Bildschirmdesign nicht mit dem Erstellen von Pixelebenen in Photoshop oder dem Schreiben von Codeblöcken beginnen, ohne zu wissen, wohin die Informationen gehen.

Auf einer tieferen Ebene ist ein Wireframe auch sehr nützlich, um zu bestimmen, wie der Benutzer mit der Schnittstelle interagiert. Drahtmodelle können beispielsweise verschiedene Zustände von Schaltflächen- oder Menüverhalten enthalten.

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunicationa simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunicationa simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

Wireframing ist wichtig, weil es dem Designer ermöglicht, das Layout und die Interaktion einer Schnittstelle zu planen, ohne von Farben, Schriftarten oder sogar Kopien abgelenkt zu werden. Ich erkläre meinen Kunden gerne, dass es egal ist, welche Farben Sie letztendlich verwenden, wenn ein Benutzer nicht herausfinden kann, wohin er auf einem Schwarzweiß-Drahtmodell gehen soll. Ein Knopf muss offensichtlich sein, auch wenn er nicht glänzend oder bunt ist.

Wie das Fundament eines Gebäudes muss es grundsätzlich stabil sein, bevor Sie sich für einen teuren Anstrich entscheiden.


Schritt 1: Inspiration bekommen

Bevor Sie ins Detail gehen, da ein Bild tausend Worte sagen kann, werfen Sie einen Blick auf I ♥ Wirefames. Sie erhalten einen schnellen Überblick und ein visuelles Verständnis davon, wie andere Designer ihren Wireframing-Prozess handhaben.

I Heart WireframesI Heart WireframesI Heart Wireframes

Vielleicht schnappen Sie sich auch dieses raffinierte Browser-Bookmarklet Wirify, mit dem Sie eine "Wireframe-d"-Version jeder Live-Site anzeigen können.

cnncom with wirifycnncom with wirifycnncom with wirify

Wenn Sie ständig beobachten, was andere Designer oder Websites für ihre Wireframes tun, werden Sie sich langsam ein Bild davon machen, wie ein Wireframe dabei hilft, Informationen für den Bildschirm zu organisieren.


Schritt 2: Entwerfen Ihres Prozesses

Design ist ein organischer Prozess und daher gehen verschiedene Designer Wireframing und seine Übersetzung in Visuals oder Code auf unterschiedliche Weise an. Sie müssen den Prozess finden, der Ihre eigenen Stärken hervorbringt und mit dem Sie sich am wohlsten fühlen. Unten ist ein Diagramm, das einige typische Prozesse zeigt:

Wireframes ProcessWireframes ProcessWireframes Process

37signals ist bekannt dafür, die Verwendung von Skizzen zu befürworten und direkt zum Code überzugehen, obwohl einige ihrer Designer anscheinend auch visuelle Mockups in ihren Prozess einbeziehen.

Für mich habe ich genug Design-to-Code-Zyklen durchlaufen, um einen etwas rationalisierten Prozess zu haben. Dies ist ein Schritt, über den einige Leute vielleicht nicht nachdenken, aber ich ziehe auch jedes HTML/css-Framework in Betracht, das ich in dem Projekt verwenden würde.

Zum Beispiel habe ich eine Menge Sites in Blueprint erstellt, also habe ich sowohl meine Wireframes als auch Blueprint auf dasselbe 12-Spalten-Raster eingestellt. Dies beschleunigt die Prototyping- und Entwicklungszeit erheblich, da nicht die Breite jedes Elements in mein CSS-Stylesheet geschrieben werden muss, sondern jetzt eine Breite von einer bis zwölf Spalten vordefiniert ist. Ich verwende jetzt stattdessen cssgrid für die Unterstützung von Responsives Design, aber es ist immer noch auf ein 12-Spalten-Raster eingestellt, das Sie als Photoshop-Vorlage herunterladen können.

the 12-column cssgrid templatethe 12-column cssgrid templatethe 12-column cssgrid template

Wie ich bereits sagte, liegt es an Ihnen, zu entscheiden, mit welchem Verfahren Sie sich wohl fühlen. Manchmal müssen Sie es mehrere Male ausprobieren, bevor Sie feststellen, welches das effektivste Verfahren ist. Manche Leute können wirklich gut skizzieren und ziehen es vor, überhaupt kein Wireframing-Tool zu verwenden. Andere Designer möchten vielleicht so viele Schritte wie möglich haben, um Abweichungen zu minimieren oder ihnen zu ermöglichen, jede einzelne Iteration durchzudenken, wenn das Design Form und Gestalt annimmt.

Sie werden schließlich Ihren eigenen bevorzugten Prozess entwickeln, aber aus Gründen des Tutorials werde ich meinen typischen Prozess als Beispiel verwenden:

Der Grund, warum ich normalerweise Illustrator als mein Wireframing-Tool verwende, hat hauptsächlich drei Gründe:

  1. Stile – Sie können Typ- und Objektstile speichern und sie überall wiederverwenden, genau wie bei CSS.
  2. Es ist einfach, mehrere Objekte zu ändern, zu verschieben oder zu skalieren.
  3. Es bietet einen einfachen Übergang zu Photoshop später.

Ich verwende jedoch andere Tools und es hängt vom Projektszenario ab. Im nächsten Abschnitt werde ich einige beliebte Tools, ihre Stärken und ihre Schwächen kurz skizzieren.


Schritt 3: Wählen Sie Ihre Tools aus

Hier sind einige beliebte Tools in keiner bestimmten Reihenfolge:

Balsamiq

Balsamiq wurde populär, da mit Balsamiq hergestellte Wireframes Skizzen ähneln, wodurch sofort klar wird, dass es sich bei dem Wireframe nicht um ein fertiges Produkt, sondern um eine Arbeit in Arbeit handelt. Balsamiq verfügt auch über eine riesige Bibliothek wiederverwendbarer Komponenten, die Sie ganz einfach per Drag-and-Drop zum Entwerfen Ihrer Wireframes verwenden können.

Sample Balsamiq wireframe from the Balsamiq websiteSample Balsamiq wireframe from the Balsamiq websiteSample Balsamiq wireframe from the Balsamiq website

Sie können es auch auf fast jeder Plattform verwenden, mit Desktop-Versionen für Mac, Windows und Linux, und es gibt eine Web-Version, wenn Sie es vorziehen, in der Cloud zu arbeiten. Apps von Drittanbietern wie iMockups für iOS unterstützen auch Balsamiq-Exportformate.

Omnigraffle

Omnigraffle ist ein alter Mac-Favorit und verfügt auch über eine weithin unterstützte, von Benutzern beigesteuerte Bibliothek mit wiederverwendbaren Komponenten. Graffletopie.

youll like omnigraffle if you enjoy using beautiful stencils like this oneyoull like omnigraffle if you enjoy using beautiful stencils like this oneyoull like omnigraffle if you enjoy using beautiful stencils like this one

Da Omnigraffle speziell als Diagrammanwendung entwickelt wurde, verfügt es auch über komplexe Funktionen wie automatisches Layout, Unterstützung benutzerdefinierter Objektstile, intelligente Hilfslinien und Graph-Tools. Einige dieser Funktionen sind auch in der Adobe CS-Suite verfügbar, aber wenn Sie die CS-Suite nicht haben, bietet Omnigraffle ein gutes Preis-Leistungs-Verhältnis (~ 100 US-Dollar) für die Erstellung detaillierter Wireframes.

Axure

Fast wie der Urvater der Wireframing-Tools war Axure eines der ersten professionellen Wireframing-/Prototyping-Tools. Bis vor kurzem war es nur unter Windows verfügbar. Ich persönlich habe nicht viel Erfahrung damit, aber es ist bekannt, dass es unter Branchenexperten ein weit verbreitetes Tool ist.

Flairbuilder

Als neues Kind auf dem Block hat Flairbuilder eine sehr starke Unterstützung für Interaktionen.

from show hide to if-else interactionsfrom show hide to if-else interactionsfrom show hide to if-else interactions

Es hat auch eine riesige Komponentenbibliothek, unterstützt Masterseiten und Sie können den Prototyp exportieren, um ihn online anzuzeigen.

Online-Bewerbungen

Wenn Desktop-Software nicht Ihr Ding ist, gibt es Tools wie Mockflow, Hotgloo und Mockingbird.

Keynote/Powerpoint

Keynotopia "verwandelt Ihre bevorzugte Präsentationsanwendung in das beste Rapid-Prototyping-Tool zum Erstellen von Mobil-, Web- und Desktop-App-Mockups". Für Nicht-Mac-Benutzer, keine Sorge, Keynotopia bietet auch Powerpoint-Vorlagen.

Ich persönlich empfehle es sehr, wenn Sie mobile Anwendungen schnell verdrahten oder prototypieren müssen. Eine weitere gute Alternative ist Keynote Kungfu.

Adobe CS

Für diejenigen, die bereits mit der Adobe-Suite vertraut sind, sind Fireworks, Illustrator und Indesign sehr leistungsfähige Wireframing-Tools mit ihren individuellen Stärken und Schwächen.

Fireworks

Sie können den gesamten Designprozess in Fireworks bearbeiten, von einfachen Wireframes bis hin zum vollständigen Visual. Fireworks unterstützt Masterseiten (stellen Sie sich diese als wiederverwendbare Vorlagen vor, bei denen jede Bearbeitung der Mastervorlage auf Ihre untergeordneten Seiten angewendet werden kann), Elementbibliotheken und Sie können mit Fireworks relativ schnell interaktive Prototypen erstellen.

Illustrator

Dies ist eines meiner Lieblingstools, da ich mit Illustrator bereits sehr vertraut bin und ich bin mir sicher, dass viele Designer hier auch damit vertraut sind. Ich verwende Illustrator, wenn ich versuche, schnelle, aber komplexe Wireframes ohne Interaktivität zu erstellen.

Was macht es zu einem Gewinner? Die Möglichkeit, als PSD mit bearbeitbaren Ebenen zu exportieren, starke Unterstützung für Kopieren und Einfügen in Photoshop und starke Typografie-Steuerelemente mit Schriftstilen, die Sie speichern, bearbeiten und wiederverwenden können, fast wie CSS.

Indesign

Ähnliche Stärken wie Illustrator mit noch stärkeren typografischen Stilsteuerungen, starker Unterstützung von Masterseiten und der neueren Möglichkeit, interaktive Prototypen zu erstellen.

Have you seen the interactive controls of InDesign

Ich wähle Indesign, wenn ich interaktive mehrseitige Prototypen mit hoher Wiedergabetreue erstellen muss. Die einzige Einschränkung für mich ist die schwache Exportunterstützung für Photoshop zum Entwerfen von Visuals.

ProtoShare

"Leistungsstarkes Prototyping leicht gemacht." Kürzlich veröffentlichte Version 9 mit einer neuen Wysiwyg-Palette. Auschecken lohnt sich.


Schritt 4: Einrichten eines Rasters

Es gibt viel Theorie zu Rastersystemen, aber ohne zu sehr darauf einzugehen, werde ich es als "ein strukturierter und einfacher Weg zum Layout von Elementen" erklären.

Ich verwende Illustrator für dieses Tutorial, aber die Schritte können auf jedes Ihrer Tools angewendet werden.

Legen Sie zunächst eine Dokumentgröße fest. Ich habe 1280 x 900 verwendet, weil ich CSSGrid verwenden werde, mit dem meine Website problemlos zwischen mobilen Auflösungen auf maximal 1140 Pixel skaliert werden kann.

Platzieren Sie die heruntergeladene Vorlage von cssgrid in Ihrem Dokument.

Tipp:

Es gibt viele Rastervorlagen zum Herunterladen, aber wenn Sie daran interessiert sind, Ihre eigenen anzupassen, schauen Sie sich responsify.it an.


Schritt 5: Layout mit Boxen bestimmen

Beginnen Sie mit dem Zeichnen von Kästchen auf dem Raster. Überlegen Sie sich die Reihenfolge der Informationen, die Sie Ihren Besuchern präsentieren möchten, von oben nach unten ist es am einfachsten, gefolgt von links nach rechts. Unten ist ein Beispiel für ein Wireframe, das ein Layout hat, das heutzutage von Softwareunternehmen häufig verwendet wird:

Abhängig von Ihrem Ziel und der Entität, für die Sie entwerfen, können Sie manchmal mit dem Layout kreativ sein, aber dennoch die Hierarchie der Informationen im Auge behalten. Dies ist ein reales Beispiel für einen meiner Kunden, bei dem ich aus den herkömmlichen Website-Layouts von Technologieunternehmen ausgebrochen bin:

Hier ist ein Layout für einen Blog mit sorgfältig positionierten Werbecontainern und spezifischen Anweisungen für den Kunden:


Schritt 6: Definieren Sie die Informationshierarchie mit Typografie

Nachdem Sie mit der Anordnung der Boxen zufrieden sind, fangen Sie an, Teile Ihres Inhalts einzufügen, um ein Gefühl dafür zu bekommen, ob die Informationen gut strukturiert sind. Die Faustregel ist dieselbe: Die Informationen, die Sie Ihrem Publikum vermitteln möchten, müssen klar sein, auch in einem schwarz-weißen Wireframe.

Schon die Verwendung unterschiedlicher Schriftgrößen am Anfang ist eine gute Möglichkeit, zwischen den verschiedenen Informationsebenen zu unterscheiden.

Scheuen Sie sich nicht, in dieser Phase zu experimentieren. Wenn Sie mehr Details eingeben, stellen Sie manchmal fest, dass das ursprüngliche Layout nicht richtig funktioniert. Das ist der springende Punkt des Wireframing-Prozesses; um so viele Iterationen wie möglich durchzuführen, um die beste Art der Darstellung der zu kommunizierenden Informationen einzugrenzen.

Im folgenden Beispiel habe ich beschlossen, dass die Screenshots mehr Wirkung haben, und ich habe auch begonnen, Blackboxen zu verwenden, um zu definieren, welche Bereiche für diese Website visuell wichtig sind:

Schritt 7: Feinabstimmung mit Graustufen

Die Verwendung des gesamten Graustufenspektrums kann Ihnen helfen, die visuelle Stärke Ihrer Elemente zu bestimmen, ohne eine Farbpalette auswählen zu müssen. Tatsächlich kann es Ihnen später beim visuellen Designprozess helfen.


Schritt 8: Hi-Definition-Wireframe

Dies ist ein optionaler Schritt, aber wenn Sie die Dinge schrittweise vorgehen möchten, sollten Sie es vielleicht ausprobieren. Ein High-Definition-Drahtmodell zu erstellen bedeutet, einfach so viele Details wie möglich hinzuzufügen, ohne zu granular in die visuellen Details zu gehen. Es kann bedeuten, die tatsächliche Kopie in das Drahtmodell einzufügen und zu versuchen, die idealen Schriftgrößen zu bestimmen:

Es könnte auch Farben beinhalten:

Die allgemeine Idee ist, dass Sie in der visuellen / Code-Phase im Poliermodus und nicht mehr im Entwurfs- oder Experimentiermodus sein möchten. Führen Sie die Iterationszyklen (Feedback <-> Wireframing) so schnell wie möglich in einer Wireframing-Anwendung durch, mit der Sie vertraut sind, anstatt Ebenen und Pixel in Photoshop zu verschieben.

Davon abgesehen kann es in bestimmten Szenarien idealer sein, die Definition der Details zu überspringen und direkt in eine interaktive Prototyping-Phase (ala 37signals) zu gehen. Das Argument dafür ist, dass bestimmte Interaktionsdetails auf einem flachen Bild nicht vollständig kommuniziert werden können.

Wenn Sie mit einem Entwicklerteam zusammenarbeiten, möchten Sie möglicherweise die genehmigten Wireframes an die Entwickler weitergeben, um das grundlegende Framework zu programmieren, während Sie am Visual arbeiten.


Schritt 9: Übersetzen eines Wireframes in ein Visual

Der bereits erwähnte Grund, warum ich Illustrator für das Wireframing vorziehe, liegt darin, dass ich es in eine .psd exportieren kann, wobei die meisten Schriftebenen bearbeitbar sind. Wenn ich in Photoshop bin, muss ich den Text nicht mehr so viel bearbeiten (Photoshop hat minderwertige Tools zur Textsteuerung, obwohl sie in CS6 stark verbessert wurden):

Photoshop Export OptionsPhotoshop Export OptionsPhotoshop Export Options

Hier ist ein Beispiel für ein Wireframe, das in ein Visual übersetzt wurde. Das Rückgrat des Drahtmodells ist ziemlich intakt, obwohl es visuelle Optimierungen gibt. Sie können diese Website auch live sehen:

Webwise 2010Webwise 2010Webwise 2010

Abschluss

Hier beenden wir dieses Tutorial. Ich hoffe, es hat Sie zum Experimentieren inspiriert! Scheuen Sie sich wie bei jedem Designprozess nicht vor Iteration, Iteration und Iteration.

Verbringen Sie auch einige Zeit damit, mit verschiedenen Tools und Prozessen zu experimentieren. Sie werden feststellen, dass sich der Zeitaufwand lohnt, sobald Sie eine Anwendung gefunden haben, die sich für Sie intuitiv anfühlt.

Bitte zögern Sie nicht, Fragen in den Kommentaren zu stellen, danke fürs Lesen!


Zusätzliche Ressourcen

Wenn Sie noch mehr über Wireframing erfahren möchten, sollten Sie sich diese Ressourcen ansehen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.