Adobe Illustrator erlebt ein Comeback in der Welt des Webdesigns. Nicht nur SVG wird online immer häufiger verwendet, sondern auch immer mehr Designer nutzen Vektoren für das Wireframing. Die folgenden Tipps helfen Ihnen, Illustrator als Wireframing-Tool optimal zu nutzen.

Beim Wireframing geht es darum, schnell zu arbeiten und schnell zu iterieren. Es geht nicht darum, attraktive Oberflächen zu erstellen; Ihre oberste Priorität ist es, Informationen und Erfahrungen zu entwerfen.

1. Go Monochrome

Wireframes verdeutlichen die Hierarchie auf einer Webseite; sie zeigen visuell die Reihenfolge, in der Benutzer die verfügbaren Informationen verarbeiten sollten. Wenn Sie möchten, dass die Benutzer die Überschrift verarbeiten, bevor sie auf die Schaltfläche „Jetzt kaufen“ klicken, muss die Überschrift die Schaltfläche „übertrumpfen“, indem sie mehr Aufmerksamkeit erfordert.

Diese visuelle Hierarchie kann auf verschiedene Weise definiert werden. Wir können die Größe nutzen, um die Schlagzeile auffälliger zu machen, wir können sie positionieren (indem wir sie vor dem Button platzieren). Wir könnten Farbe, Kontrast und eine Reihe anderer Dinge verwenden, aber das macht die Dinge in einem Wireframe nur noch verwirrender.

Indem wir die Farbe aus der Gleichung herausnehmen, wird die visuelle Beziehung, die durch Position, Größe und (wenn Sie einen Schritt weiter gehen wollen) Kontrast definiert wird, viel klarer.

Wir bauen hier keine hübschen, pixel-perfekten UI-Kits. Halten Sie sich an eine begrenzte Palette von Grautönen und verwenden Sie Farbe nur für Beschriftungen und Notizen.

2. Behalten Sie Ebenen für bestimmte Zwecke

Als Beschriftungen, Notizen und Kommentare, ist es eine gute Idee, jede auf einer eigenen Ebene zu platzieren. Das Gleiche gilt für alles andere, was einen bestimmten Zweck hat, wie Verhalten, Interaktion, Gesten usw.

Platzieren Sie visuelle Elemente auf einer Ebene, Verhalten auf einer anderen und Beschriftungen auf einer anderen, so dass Sie ihre Sichtbarkeit bei Bedarf leicht umschalten können.

3. Symbole nutzen

D.R.Y. wird im Allgemeinen als Programmierbegriff verwendet, ist aber ebenso auf den Design-Workflow anwendbar. In jedem Wireframe werden wir bestimmte Objekte verwenden und wiederverwenden. Machen Sie diese Objekte zu Symbolen, und alle Änderungen, die Sie an einem Objekt vornehmen, werden sofort in den anderen Objekten übernommen.

Zum Beispiel hier ein einfaches Formularfeld:

Ziehen wir es in den Bereich Symbole (Umschalt + Befehl + F11)

Wir können dieses Symbol nun beliebig oft aus dem Bereich Symbole auf die Zeichenfläche ziehen. Mit einem Doppelklick auf ein beliebiges Symbol isolieren wir es (ähnlich wie bei gruppierten Objekten) und können es bearbeiten. Alle Änderungen, die wir vornehmen, in diesem Fall das Abrunden der Ecken des Rechtecks, werden auf jedes einzelne der verwendeten Formularfeldsymbole angewendet.

Wenn wir eine Sammlung von Symbolen haben, können wir sie auch als Set speichern:

So können wir sie in Zukunft in andere Dateien laden.

Wenn Sie mehr über die Symbolpalette erfahren möchten, werfen Sie einen Blick auf Quick Tip: Arbeiten mit Symbolen in Adobe Illustrator.

4. Pfeilspitzen eignen sich perfekt zum Zeigen

Ein guter Tipp ist die Verwendung von Strichpfeilspitzen, die in Illustrator seit CS5 sofort verfügbar sind. Wireframes sind die ideale Gelegenheit, um Interaktionen, Anwendungsfluss, Navigation und Bewegung visuell zu beschreiben.

Heutzutage können wir ganz einfach Pfeilspitzen zu Strichen hinzufügen, direkt aus dem Strichbereich.

Wir können sogar die Illustrator-Quelldatei „Arrowheads.ai“ bearbeiten, wie von Ryan Cornwell erklärt, und unsere eigenen Pfeilspitzen hinzufügen.

Hinweis: Ärgerlicherweise wendet das Pipettenwerkzeug Pfeilspitzen nicht zusammen mit anderen Konturenstilen an, so dass es nicht so einfach ist, den von Ihnen gewählten Effekt zu duplizieren. Dennoch sind sie perfekt für das Wireframing geeignet.

5. Einrasten am Raster für einheitliche Abstände und Größen

In vielerlei Hinsicht folgt dies auf den Verzicht auf Farbe. Durch die Vereinheitlichung von Abmessungen und Abständen wird ein Element der Ablenkung aus den Wireframes entfernt, was uns hilft, uns visuell auf das Wesentliche zu konzentrieren.

Es spielt keine Rolle, ob die genauen Abmessungen nicht das widerspiegeln, wie die Benutzeroberfläche später aussehen wird; solange die Hierarchie und die Beziehungen erhalten bleiben, können wir loslegen.

Wenden Sie ein Raster auf Ihr Artboard an, indem Sie Ansicht > Raster anzeigen wählen. Wenn Sie Ansicht > Am Raster ausrichten wählen, können Sie Ihre Objekte präzise positionieren.

Um genau festzulegen, wie Ihr Raster aussehen soll (und denken Sie daran, dass Sie es hier nicht auf winzige Details abgesehen haben), gehen Sie zu Illustrator > Voreinstellungen > Hilfslinien & Raster… Dort können Sie den Abstand zwischen den Rasterlinien festlegen und dann angeben, wie viele Unterteilungen Sie innerhalb dieser Linien haben möchten.

Hinweis: Fühlen Sie sich frei, Ihr Raster in etwas anderem als Grau zu färben; es wird nicht Teil des Endprodukts sein.

6. Verwenden Sie Grafikstile für flexible Schaltflächen

Abhängig vom Grad der Wiedergabetreue (d.h. wie realitätsgetreu die endgültige Website sein soll) können Sie z.B. in den Schaltflächen echten Text haben. Damit diese Schaltflächen je nach Inhalt wachsen und schrumpfen, verwenden Sie keine Objekte, sondern Grafikstile.

Beginnen wir mit einer Zeichenkette aus Blindtext.

Öffnen wir nun den Bereich „Erscheinungsbild“, indem wir auf „Fenster > Erscheinungsbild“ gehen.

Mit dem Fensterbereich „Erscheinungsbild“ können Sie einem Objekt mehrere Füllungen hinzufügen. In diesem Bild sehen Sie mehrere übereinander gestapelte Füllungen.

Fürs Erste brauchen wir nur zwei Füllungen, also fügen wir eine dunkle Füllung für den Text und eine hellere Farbe für den Hintergrund hinzu.

Augenblicklich können wir den hellgrauen Hintergrund nicht sehen, da er genau die gleiche Form wie die oberste Füllung hat. Wir können jedoch jede Füllung isolieren und separat bearbeiten. Wählen Sie die untere Füllung im Erscheinungsbildbereich aus und gehen Sie dann auf Effekt > In Form konvertieren > Abgerundetes Rechteck…

Geben Sie einige Einstellungen ein, wie Sie es für richtig halten, stellen Sie nur sicher, dass die Größe relativ zu dem Objekt ist, auf das wir dies anwenden.

Die hellgraue Füllung am unteren Rand hat jetzt die Form eines abgerundeten Rechtecks angenommen, relativ zur Größe des Textes. Eine Schaltfläche! Um dieses Erscheinungsbild auf andere Objekte zu übertragen, öffnen Sie das Fenster „Grafikstile“ und ziehen Sie die gesamte Schaltfläche hinein. Das Erscheinungsbild wird als Stil gespeichert, den Sie wiederverwenden können.

Hier ein Beispiel für eine längere Textzeile. Klicken Sie bei ausgewähltem Text auf den neu erstellten Grafikstil (den ich doppelt angeklickt und umbenannt habe), um ihn sofort anzuwenden.

7. Einrichten einiger häufig verwendeter Zeichenflächen

Schnelligkeit ist das A und O beim Wireframing! Kritzeln Sie ein Layout auf, machen Sie weiter, kritzeln Sie ein anderes auf, machen Sie weiter. Es ist daher sinnvoll, einen fertigen Ausgangspunkt zu haben, auf den Sie leicht zugreifen können. Vielleicht arbeiten Sie am besten zuerst auf einer großen Zeichenfläche und ziehen die fertigen Objekte in eine separate Datei, oder Sie ziehen es vor, direkt mit Zeichenflächen in der richtigen Größe zu arbeiten.

Hier ist zum Beispiel ein Layout mit einem iPad-Bildschirm (1536x2048px) und vier iPhone 4S-Bildschirmen (640x960px), obwohl Sie eine Datei mit einer beliebigen Anzahl von Geräte-Bildschirmbeispielen vorbereiten können. Legen Sie Ihre bevorzugten Abmessungen entweder manuell fest oder wählen Sie eine der verfügbaren Voreinstellungen aus den Zeichenflächenoptionen:

Fügen Sie alle allgemeinen Hilfslinien, Ebenennamen, Symbolsätze usw. ein, die Sie verwenden. Speichern Sie das Ganze dann als Vorlage für die spätere Verwendung (Datei > Als Vorlage speichern…). Dieser Ausgangspunkt steht Ihnen dann zur Verfügung, wenn Sie Datei > Neu aus Vorlage… wählen, komplett mit allen Teilen, die Sie dort gelassen haben.

8. TextExpander für Blindtext verwenden

Illustrator enthält keine Werkzeuge für Blindtext. Es gibt einige Skripte, mit denen man spielen kann, aber der einfachste Weg, Blindtext in Ihre Illustrator-Wireframes zu bekommen, ist die Verwendung von TextExpander.

Hinweis: Wenn Sie ein Windows-Benutzer sind, bietet PhraseExpress eine ähnliche Funktionalität wie TextExpander

Fügen Sie eine Reihe von Textabschnitten hinzu, die Sie häufig für Wireframes verwenden (z. B. eine große Überschrift, eine kurze Überschrift, Texte unterschiedlicher Länge, typische Schaltflächentexte, Menüelemente usw.), so dass sie von Illustrator aus leicht verfügbar sind.

Indem Sie einen Schlüsselbegriff für jedes Snippet definieren, ersetzt TextExpander diesen Begriff durch Ihren Inhalt, wenn Sie ihn eingeben, was Ihnen viel Zeit spart. Sie können auch die Ordneroptionen verwenden, um sicherzustellen, dass diese Snippets nur in Illustrator wirksam werden, wenn Sie das möchten.

Um mehr über die Optimierung Ihres TextExpander-Workflows zu erfahren, werfen Sie einen Blick auf Master TextExpander With These Helpful Tips & Tricks.

9. Üben Sie logische Dateinamen

Das Herzstück des Wireframing ist die schnelle Visualisierung von Änderungen und Ideen, aber das kann zu einem riesigen Haufen ungeordneter Dateien führen, wenn Sie nicht aufpassen. Der Schlüssel liegt darin, in wichtigen Phasen zu speichern und logische Dateinamenskonventionen zu verwenden.

Zum Beispiel könnten wir jeden Dateinamen mit dem Namen der Seite beginnen, an der wir arbeiten. Dann könnte es sinnvoll sein, eine Art von Variantennamen zu verwenden, und danach die Versionsnummer: page-variant-version.ai

Beispielsweise könnten wir an einer Landing Page arbeiten, die sich auf die Werbung für eine E-Mail-Kampagne oder ein Ebook konzentriert. Wir könnten Dateinamen haben wie:

Dies sorgt nicht nur für Ordnung in den Projektordnern, sondern ist auch eine Form der manuellen Versionierung. Matt Smith geht in seinem Artikel Wireframing With Illustrator and InDesign näher auf diese Idee ein.

10. Speichern in Dropbox für einfache Versionierung

Die Idee der Versionierung geht noch weiter: Wenn Sie Ihre Dateien direkt in Dropbox speichern, können Sie diese Aufgabe komplett von Ihrer ToDo-Liste streichen. Sogar das kostenlose Angebot von Dropbox speichert jedes Mal, wenn Sie Ihre Dateien speichern, dreißig Tage lang eine Kopie davon.

Auch Layervault bietet mit seinem kostenlosen Angebot ähnliche Möglichkeiten.

In jedem Fall ist dies besonders nützlich, wenn Sie mit einem Team zusammenarbeiten. Wenn alle Mitglieder von einem zentralen Ort aus arbeiten und die Möglichkeit haben, jede Version wiederherzustellen, wenn jemand etwas Seltsames tut, ist das ideal für die Teamarbeit.

Abschluss

Viele dieser Tipps sind ganz persönlich auf meinen eigenen Arbeitsablauf bezogen und lassen sich vielleicht nicht perfekt auf Ihre eigene Arbeitsweise übertragen. Ich hoffe jedoch, dass sie zumindest ein wenig Neugierde wecken und Sie zum Nachdenken über die Art und Weise anregen, wie Sie Web-Layouts drahtlos gestalten. Wenn Sie noch weitere Tipps haben, teilen Sie sie bitte in den Kommentaren mit!

Weiter lesen

• Wireframing mit InDesign und Illustrator
• Wireframing mit Illustrator und InDesign (feiner Unterschied!)
• Ein Leitfaden für Anfänger im Wireframing
• Illustrator und Pfeilspitzen