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

Ein Wireframing-Leitfaden für Einsteiger

by
Length:LongLanguages:
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 Roland Dietz (you can also view the original English article)

Wireframing ist ein wichtiger Schritt in jedem Screen-Design-Prozess. Das Wireframing - übersetzt bedeutet es in etwa das Erstellen eines Drahtgerüsts - ermöglicht es Ihnen in erster Linie, die Informationshierarchie des Designs zu definieren. Dies wiederum erleichtert es Ihnen das Layout in der Reihenfolge anzuordnen, in der die Informationen dem Nutzer präsentiert werden sollen. Sind Sie bereit, Wireframing auszuprobieren? Dann ist es jetzt an der Zeit, nasse Füße zu bekommen.

A simple wireframe

Ein Wireframe ist vergleichbar mit der Blaupause eines Architekten: Bevor Sie verstehen, wie Sie das Haus bauen sollen, müssen Sie es erst in einer zweidimensionalen Schwarz-Weiß-Zeichnung betrachten. Gleiches gilt für ein Screen-Design. Sie können nicht die Pixelebenen in Photoshop erstellen oder anfangen Codeblöcke zu schreiben, ohne zu wissen, wo die Informationen überhaupt angezeigt werden sollen.

Auf einer tieferen Ebene ist ein Wireframe auch sehr hilfreich bei der Bestimmung, wie der Benutzer mit dem Interface interagiert. Zum Beispiel können Wireframes verschiedene Zustände der Schaltflächen darstellen oder die Verhaltensweise eines Menüs aufzeigen.

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

Wireframing ist wichtig. Denn es erlaubt dem Designer die Planung des Layouts und der Interaktion mit den Schnittstellen, ohne von Farben, Schriftbild oder sogar Texten abgelenkt zu werden. Ich erkläre es meinen Kunden gerne so: Wenn es dem Benutzer anhand des schwarz-weißen Wireframes nicht gelingt herauszufinden, wie er agieren und navigieren muss, ist es egal, welche Farben letztlich verwendet werden. Eine Schaltfläche muss gut erkennbar sein, auch wenn sie nicht leuchtend eingefärbt ist.

Ganz wie das Fundament eines Hauses: es muss stark und zuverlässig sein, bevor Sie sich entscheiden, ob Sie das Gebäude mit einem teuren Anstrich verschönern.

Schritt 1: Inspirieren lassen

Ein Bild sagt mehr als tausend Worte. Bevor wir weiter ins Detail gehen sollten Sie sich auf I ♥ wirefames umschauen. Sie erhalten einen kurzen Überblick und sehen, wie andere Designer ihren Wireframing-Prozess gestalten.

I Heart Wireframes

Auch sollten Sie das raffinierte Browser-Bookmarklet Wirify aufrufen und testen. Es ermöglicht Ihnen, eine beliebige Live-Website als Wireframe-Version anzuzeigen.

cnncom with wirify

Indem Sie wiederholt beobachten, wie andere Designer oder Websites ihre Wireframes gestalten, werden Sie langsam ein Gefühl dafür bekommen, wie Wireframing Ihnen helfen kann, Informationen für die Darstellung auf dem Bildschirm zu organisieren.

Schritt 2: Erarbeiten der eigenen Vorgehensweise

Design ist ein organischer Prozess und jeder Designer entwickelt seine eigene Technik, wie er den Wireframing-Prozess und dessen anschließende Umsetzung zu Layouts oder Code gestaltet. Auch sie müssen Ihre eigene Vorgehensweise finden und sie an Ihre Arbeitsgewohnheiten und Ihre eigenen Stärken anpassen. Untenstehendes Diagramm zeigt einige typische Vorgehensweisen:

Wireframes Process

37signals ist ein bekannter Verfechter der Vorgehensweise, lediglich mit Skizzen zu arbeiten und diese direkt in Code umzusetzen. Allerdings scheint es vorzukommen, dass einige ihrer Designer in ihrem Designprozess auch auf visulle Modelle zurückgreifen.

Ich selbst habe mich durch viele Design-zu-Code-Zyklen gearbeitet und dadurch einen gestrafften Arbeitsablauf entwickelt. Ich überdenke auch die Wahl eines für das Projekt verwendeten HTML-/CSS-Frameworks, ein Schritt, dem mancher keine Aufmerksamkeit schenkt.

Ein Beispiel: hätte ich eine Vielzahlt von Websites mit Blueprint zu erstellen würde ich sowohl meine Wireframes als auch Blueprint auf das selbe 12-Spalten-Raster einstellen. Dies beschleunigt das Prototyping und den Designprozess erheblich, erspart es mir doch, die Breite eines jeden Elements ins CSS-Stylesheet zu schreiben. Elemente haben jetzt eine vordefinierte Breite zwischen 1 und 12 Spalten! Mittlerweile bevorzuge ich cssgrid, da es auch Responsive Design unterstützt, verwende aber nach wie vor die 12-spaltige Einteilung, die Sie auch als Photoshop-Template herunterladen können.

the 12-column cssgrid template

Wie bereits erwähnt liegt es ist in Ihren Händen zu entscheiden, welche Vorgehensweise Sie bevorzugen. Manchmal müssen Sie mehrere Varianten ausprobieren bevor Sie entscheiden können, welches das effektivste Verfahren ist. Manche Menschen beherrschen das Skizzieren wirklich gut und bevorzugen es vielleicht, komplett auf ein Werkzeug zum Wireframing zu verzichten. Andere Designer arbeiten lieber mit sehr detaillierten Wireframes, um Abweichungen minimieren oder um jede einzelne Iteration genau zu durchdenken, während das Design beginnt, Form und Gestalt anzunehmen.

Wie von selbst werden Sie anfangen, Ihr eigenes bevorzugten Verfahren zu entwickeln. Für dieses Tutorial werde ich meinen typischen Arbeitsablauf als Beispiel verwenden:

Die Tatsache, dass ich meistens Illustrator als Wireframing-Werkzeug benutze, hat hauptsächlich drei Gründe:

  1. Stile – Sie können Text und anderen Objekten Stile zuweisen und diese im gesamten Projekt wiederverwenden, ähnlich der Verwendung von CSS.
  2. Mehrere Objekte lassen sich sehr einfach gleichzeitig modifizieren, verschieben oder skalieren.
  3. Die Arbeit kann später komforabel in Photoshop fortgesetzt werden.

Dennnoch nutze ich auch andere Werkzeuge. Abhängig ist dies immer von den Anforderungen, die durch das Projekt gestellt werden. Im nächsten Abschnitt werde ich kurz auf einige der beliebtesten Werkzeuge eingehen und ihre Stärken und Schwächen aufzeigen.

Step 3: Wahl des Werkzeugs

Im Folgenden finden Sie einige der beliebtesten Werkzeuge in zufälliger Reihenfolge aufgelistet:

Balsamiq

Balsamiq verdankt seine Beliebtheit der Tatsache, dass die mit diesem Programm erstellten Wireframes wie Skizzen aussehen, was deutlich macht, dass es sich nicht um das fertige Endprodukt, sondern um einen Entwurf handelt. Balsamiq hat eine riesige Bibliothek von wiederverwendbaren Komponenten, die Sie ganz einfach per Drag & Drop in Ihren Wireframes verwenden können.

Sample Balsamiq wireframe from the Balsamiq website

Balsamiq steht nahezu plattformunabhänig als Desktopversion für Mac, Windows und Linux zur Verfügung. Zusätzlich existiert eine Webversion, falls Sie es bevorzugen, in der Cloud zu arbeiten. Anwendungen von Drittherstellern, zum Beispiel iMockups für iOS, unterstützen ebenso die Balsamiq Exportformate.

Omnigraffle

Ein alter Mac-Favorit, Omnigraffle, hat ebenfalls eine Bibliothek wiederverwendbarer Komponenten mit breiter Unterstützung namens Graffletopia. Die Bibliothek wurde von den Nutzern des Programms erstellt und laufend mit neuen Elementen ergänzt.

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

Nachdem Omnigraffle als Applikation zur Erstellung von Diagrammen entwickelt wurde, besitzt es auch komplexe Funktionen wie automatische Layouts, frei definierbare Objektstile, Smart Guides und Grafikwerkzeuge. Einige dieser Funktionen bietet auch die CS-Suite von Adobe. Wenn Sie CS-Suite jedoch nicht ohnehin besizten, ist Omnigraffle eine gute Alternative zu einem interessanten Preis (ca. $100), wenn es darum geht, detaillierte Wireframes zu erstellen.

Axure

Axure war eines der ersten professionellen Wireframing- und Prototyping-Werkzeuge und kann beinahe als deren Großvater bezeichnet werden. Bis vor kurzem war es nur unter Windows verfügbar. Ich persönlich habe nicht viel Erfahrung mit Axure, weiß aber, dass es von Fachleuten gerne verwendet wird.

Flairbuilder

Als neues Mitglied auf dem Parkett bietet Flairbuilder eine umfangreiche Unterstützung für Interaktionen.

from show  hide to if-else interactions

Dem Programm zueigen ist eine umfangreiche Komponentenbibliothek, es unterstützt Masterseiten und Sie können den Prototyp für eine Onlineansicht exportieren.

Online-Anwendungen

Desktop-Programme sind nicht Ihr Ding? Dann dürften Sie Anwendungen wie Mockflow, Hotgloo oder Mockingbird bevorzugen.

Keynote/Powerpoint

Keynotopia "wandelt Ihr Lieblings-Präsentationsprogramm zu einem der besten Rapid-Prototyping-Werkzeuge für die Erstellung von mobilen, Web-und Desktop-App Mockups". Nicht-Mac-Anwender müssen sich nicht ärgern: Keynotopia bietet auch Powerpoint-Vorlagen.

Ich kann Ihnen Keynotopia besonders empfehlen, wenn Sie besonders schnell Wireframes oder Prototypen für mobile Anwendungen erstellen wollen. Eine weitere gute Alternative ist Keynote Kungfu.

Adobe CS

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

Fireworks

Sie können den gesamten Design-Prozess mit Fireworks arbeiten, Angefangen von der Erstellung der Wireframes bis hin zur vollständigen Ausarbeitung des Designs. Fireworks unterstützt Master-Seiten (wiederverwendbare Vorlagen, deren nachträgliche Änderungen sich auf die Kind-Seiten auswirken) und Element-Bibliotheken. Interaktive Prototypen lassen sich mit Fireworks relativ schnell erstellen.

Illustrator

Dies ist eines meiner bevorzugten Werkzeuge, da ich Illustrator bereits sehr gut kenne und ich bin davon überzeugt, dass auch viele andere Designer mit Illustrator vertraut sind. Ich verwende Illustrator, wenn ich schnell komplexe Wireframes erstellen möchte und keine Interaktivität benötige.

Was macht Illustrator zum Gewinner? Die Möglichkeit, meine Arbeit in ein Photoshop-Dokument mit editierbaren Ebenen zu exportieren, ausgezeichnete Unterstützung des Kopierens und Einfügens in Photoshop und umfangreiche Kontrolle über die Typografie, mit Stilvorlagen, die Sie speichern, bearbeiten und wiederverwenden können, in etwa vergleichbar mit CSS.

Indesign

Indesign besitzt die gleichen Stärken wie Illustrator und übertrumpft diesen sogar mit noch weitreichenderen Kontrollmöglichkeiten hinsichtlich der Typografie. Erwähnenswert sind auch die Unterstützung von Master-Seiten und nicht zuletzt die Möglichkeit, interaktive Prototypen zu erstellen.

Have you seen the interactive controls of InDesign

Ich bevorzuge Indesign wenn ich interaktive, mehrseitige Prototypen von hoher Qualität erstellen will. Größter Nachteil ist die mangelhafte Unterstützung des Exports der erstellten Vorlagen nach Photoshop.

ProtoShare

"Leistungsstarkes Prototyping einfach gemacht." Kürzlich wurde Version 9 mit einer neuen Wysiwyg-Palette veröffentlicht. Es lohnt sich, einen Blick darauf zu werfen.

Schritt 4: Raster erstellen

Es gibt viele theoretische Grundlagen zu Grid-Systemen. Ohne zu sehr ins Detail zu gehen kann man sagen, ein Grid-System ist eine strukturierte und einfache Möglichkeit, Elemente zu positionieren.

Für dieses Tutorial nutze ich Illustrator. Die folgenden Schritte können Sie aber auch mit jedem anderen der genannten Programme nachvollziehen.

Zuerst bestimmen Sie die Größe des Dokuments. Ich verwende 1280 x 900 Pixel, da ich cssgrid einsetzen möchte. Dies ermöglicht es, die Webseite zwischen der Auflösung mobiler Geräte bis hin zu einer maximalen Breite von 1140 Pixel zu skalieren.

Platzieren Sie die heruntergeladene Vorlage von cssgrid in Ihrem Dokument.

Tip:

Es steht bereits eine Vielzahl an Rastervorlagen zum Download zur Verfügung. Wenn Sie jedoch eigene Vorlagen erstellen möchten, finden Sie auf responsify.it ein nützliches Online-Tool.

Schritt 5: Das Layout mit Kästen definieren

Fangen Sie an, Kästen auf dem Gitter zu platzieren. Denken Sie dabei an die Reihenfolge, in der Sie die Informationen Ihren Besuchern präsentieren wollen, am einfachsten von oben nach unten, gefolgt von links nach rechts. Unten sehen Sie ein typisches Beispiel eines Wireframes mit einem Layout, das zurzeit gerne von Softwarefirmen verwendet wird:

Abhängig vom Ziel und dem Zielpublikum können Sie Ihrer Kreativität freien Lauf lassen, sollten dabei aber nicht die Hierarchie der Informationen im Auge behalten. Hier ein Praxisbeispiel eines Kundenprojekts, bei dem ich mich nicht an der konventionellen Gestaltung einer Unternehmens-Webseite gehalten habe:

Und hier ein Layout für ein Blog, mit sorgfältig positionierten Werbeflächen und speziellen Informationen für den Besucher:

Schritt 6: Auszeichnen der Informationshierarchie mittels Typografie

Wenn Sie mit der Anordnung der Boxen zufrieden sind, füllen Sie diese mit Textteilen und -ausschnitten umd ein Gefühl dafür zu bekommen, ob die Informationen gut strukturiert angeordnet sind. Die Faustregel ist die gleiche: Die Informationen, die Sie Ihrem Publikum übermitteln wollen, muss klar verständlich sein, auch in einem Wireframe ohne Farbauszeichnung.

Beginnen Sie einfach mit verschiedenen Schriftgrößen. Dies ist eine gute Möglichkeit, zwischen den einzelnen Informationsebenen zu unterscheiden.

Scheuen Sie sich in diesem Stadium nicht davor, ein wenig zu experimentieren. Während Sie nach und nach Details hinzufügen zeigt es sich manchmal, dass das ursprüngliche Layout nicht gut funktioniert. Das ist der eigentliche Sinn des Wireframings: möglichst viele Anordnungen zu testen und Stück für Stück die optimale Anordnung für die Präsentation Ihrer Informationen zu erarbeiten.

Im folgenden Beispiel habe ich mich dazu entschlossen, den Screenshots mehr Gewicht zu verleihen und habe begonnen, mit schwarzen Kästen die Bereiche zu kennzeichnen, die auf der Webseite einen bedeutenden visuellen Bereich einnehmen werden:

Schritt 7: Feinabstimmung mittels Graustufen

Unter Ausnutzung des gesamten Spektrums an Graustufen können Sie das visuelle Gewicht Ihrer Elemente bestimmen, ohne eine Farbpalette zu verwenden. Tatsächlich kann Ihnen dies sogar später den visuellen Design-Prozess erleichtern.

Schritt 8: Wireframe von hoher Qualität erstellen

Dieser Schritt ist optional, aber gut geeignet, um sich in kleinen Schritten vorzuarbeiten. Einen Wireframe hoher Qualität zu erstellen bedeutet nichts anderes, als möglichst viele weitere Details hinzuzufügen, ohne jedoch das visuelle Design granular auszuarbieten. Es kann bedeuten, den Wireframe mit den Originaltexten zuf befüllen und zu versuchen, die optimale Schriftgröße zu bestimmen:

Es kann auch das Einfärben von Elementen beinhalten:

Die Grundidee ist, dass Sie später, während Umsetzung des Layout und des Codes, vollständig am Wireframe orientieren können und die Experimentier- oder Ausarbeitungsphase komplett abgeschlossen ist. Gewinnnen Sie Zeit, indem Sie die Entwicklungsphase (Rückmeldung <-> Wireframing) möglichst schnell mit Ihrem leicht bedienbaren Wireframing-Werkzeug durch, statt Ebenen und Pixel in Photoshop herumzuschieben.

Ergänzend wäre zu sagen, dass es auch Szenarien gibt, bei denen man darauf verzichten sollte, zu viele Details herauszuarbeiten und stattdessen gleich interaktives Prototyping zu betreiben (so wie bei 37signals). Das Argument für diese Vorgehensweise ist, dass bestimmte Details der Interaktion nicht auf der bildhaften Ebene dargestellt werden können.

Wenn Sie in einem Entwicklungsteam arbeiten, können Sie die freigegebenen Wireframes an die Entwickler zur Codierung des Grundgerüsts weitergeben, während Sie am Layout weiterarbeiten.

Schritt 9: Übersetzen des Wireframes in ein Layout

Wie zuvor erwähnt, bevorzuge ich Illustrator fürs Wireframing, weil es mir die Möglichkeit bietet, direkt und unter weitgehender editierbarkeit der Textebenen in eine Photoshop-Datei zu exportieren. Deshalb muss ich mich während der Arbeit in Photoshop nur selten der eingeschränkten typografischen Möglichkeiten des Programms bedienen (die in der Version CS6 stark verbessert wurden):

Photoshop Export Options

Hier ein Beispiel für die Umsetzung eines Wireframes in ein fertiges Layout. Das Grundgerüst des Wireframes ist weitgehend erhalten geblieben, wurde jedoch optisch überarbeitet und ergänzt. Hier können Sie die Webseite live betrachten:

Webwise 2010

Ausblick

Nun sind Sie am Ende des Tutorials angelangt. Ich hoffe, ich konnte Sie zu eigenen Experimenten inspirieren! Wie für jeden Designprozess gilt auch hier: verändern, verändern, verändern.

Auch sollten Sie verschieden Werkzeuge und Arbeitsabläufe ausprobieren. Investieren Sie diese Zeit, um so das Programm finden, das Ihnen ein intuitives arbeiten ermöglicht.

Sie sind herzlich eingeladen, Ihre Fragen in den Kommentare zu stellen. Und nicht zuletzt: vielen Dank fürs Lesen!

Zusätzliche Ressourcen

Weitere Informationen zum Wireframing finden Sie auf folgenden Seiten:

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.