Wer wusste, dass Adobe CC Wireframes kann?

Wireframing ist ein wichtiger Schritt bei der Gestaltung jeder Benutzeroberfläche, egal ob es sich um eine Website, Anwendung oder ein Softwareprodukt handelt. Ohne Ablenkung durch visuelle Elemente, Farben, Typografie, Stile und Effekte können Sie sich besser auf die Definition der Inhaltshierarchie und der Benutzererfahrung konzentrieren.

Das Erstellen von Low-Fidelity-Wireframes und -Prototypen hilft Ihnen dabei, früher und häufiger im Prozess zu testen und zu iterieren. Low-Fidelity-Drahtmodelle ermöglichen es Designern, schneller zu arbeiten und Produkte zu entwickeln, die Benutzer lieben werden.

Es gibt viele verschiedene Wireframing-Tools, aus denen Sie in freier Wildbahn wählen können. Welche Sie wählen, hängt von Ihren persönlichen Vorlieben und Ihrem Arbeitsstil ab.

Wie viele Designer, die von der Druckwelt zum digitalen Design gewechselt sind, bin ich Experte für Adobe-Anwendungen wie Illustrator, InDesign und Photoshop. Ich kann sie überall und jederzeit effizient und intuitiv nutzen (selbst wenn mich jemand mitten in der Nacht weckt und mir keine Tasse Kaffee gibt).

Es überrascht nicht, dass diese vielseitigen Anwendungen auch zu den Werkzeugen geworden sind, die ich für das visuelle Design von Web- und Anwendungen verwende. Damit mein Workflow am effizientesten ist, verwende ich sie auch für das Wireframing.

Bei jedem Projekt beginne ich normalerweise mit dem Entwerfen, indem ich sehr grobe Skizzen auf Papier oder auf meinem iPad- oder Smartphone-Bildschirm mache, wenn ich nicht in der Nähe meines Schreibtisches bin. Diese Skizzen dienen dazu, meine Gedanken zum gewählten Konzept zu fokussieren; Der Kunde wird wahrscheinlich nie einen von ihnen sehen. Wenn ich überzeugt bin, dass meine Idee funktioniert, gehe ich zum Wireframing über. Normalerweise verwende ich Adobe Illustrator und InDesign kombiniert: Illustrator zum Erstellen der meisten UI-Kit-Elemente und InDesign für das Wireframing selbst.

Ich werde später in diesem Artikel Schritt für Schritt erklären, wie Sie diese Tools auch in Ihren Wireframing-Workflow integrieren können, aber bevor ich ins Detail gehe, lassen Sie mich Ihnen die Stärken und Schwächen der Verwendung von InDesign als primäres Wireframing-Tool zeigen .

Die Vor- und Nachteile der Verwendung von Adobe InDesign als Wireframe- und Prototyping-Tool

Seit einiger Zeit ist Adobe InDesign nicht nur eine Desktop-Publishing-Anwendung, sondern wird auch häufig für das digitale Publizieren und die EPUB-Erstellung verwendet. Es gibt auch mehrere Gründe, warum es sich auch für das Wireframing eignet:

• Masterseiten – Mit Masterseiten können Sie schnell und konsistent globale Designelemente wie Navigation, Kopf- und Fußzeilen usw. anwenden. Sie können so viele Masterseiten erstellen, wie Sie benötigen, und darüber hinaus kann eine Masterseite auf einer anderen basieren.
• Solide Rasterunterstützung – Ermöglicht das einfache Erstellen und Anwenden verschiedener Arten von Rastern, ergänzende Spalten, horizontale und vertikale Hilfslinien zum Erstellen von Modulen und Unterraster für mehr Komplexität und Präzision.
• Alternative Layouts – Aktiviert Wireframes für mehrere Geräte und Ausrichtungen in derselben Datei.
• CC-Bibliotheken – Generiert eine Bibliothek mit verschiedenen wiederverwendbaren Elementen wie häufig verwendeten Objekten, Farben, Zeichen und Absatzstilen. Erstellen Sie Assets in InDesign, Illustrator oder Photoshop oder mit der mobilen Adobe Capture-App – je nachdem, was Sie bevorzugen.
• Ebenen – Bietet die Möglichkeit, Objekte und Inhalte im Drahtmodell selektiv zu organisieren, zu gruppieren, anzuzeigen/auszublenden und zu sperren/entsperren. Jede Seite eines mehrseitigen InDesign-Dokuments hat dieselbe Anzahl und Reihenfolge von Ebenen. Alle Änderungen, die Sie an Ebenen vornehmen, werden auf allen Seiten wiedergegeben, z. B. Sichtbarkeit, Stapelreihenfolge oder Löschen.
• Stile und Tabellen – Vollständige Kontrolle über das Aussehen Ihrer Texte, Objekte und Tabellen durch die Verwendung von InDesign-Stilen. Stile können voneinander erben, was die Möglichkeit bietet, die gewünschte Formatierung einfach im gesamten Dokument zu kaskadieren. Das Erstellen und Formatieren von Tabellen, die als Drahtgitter-Inhaltselemente oder sogar als Helfer für Layoutzwecke verwendet werden sollen, ist sehr einfach.
• Typekit-Integration – In High-Fidelity-Mockups können Sie alle Typekit-Schriftarten verwenden, die mit dem Desktop synchronisiert werden.
• Interaktivität und Animationen – Sie können die integrierten Interaktivitäts- und Animationsfunktionen von Adobe InDesign verwenden, um unterschiedliche Zustände von Web- oder Anwendungsdesignelementen für das Interaction Prototyping zu erstellen. Die meisten Menschen verwenden diese Funktionen beim Erstellen von Zeitschriften für digitale Veröffentlichungslösungen und den EPUB-Export mit festem Layout, aber sie eignen sich auch für das Prototyping.
• Exportoptionen – InDesign kann die von Ihnen erstellten Drahtmodelle und Prototypen in einer Vielzahl von Formaten exportieren. Interaktive PDFs werden wahrscheinlich in den meisten Fällen das Format Ihrer Wahl sein, aber Sie können auch die Funktion „Online veröffentlichen“ verwenden, um Ihr Dokument in interaktives HTML umzuwandeln, das in modernen Desktop- und mobilen Browsern angezeigt werden kann. Leider haben Sie mit Online veröffentlichen nicht viel Kontrolle über den Export, und exportierte Dateien werden auf Adobe-Servern gehostet. Sie können die Prototyp-URL an Ihren Client weitergeben oder sie in Ihre Website einbetten. Für mehr Kontrolle und direkten Export nach HTML5 können Sie die in5-Erweiterung von Ajar Productions verwenden.

Adobe InDesign hat viele Vorteile, um als Wireframe- und Prototyping-Tool verwendet zu werden, aber es hat auch einige Nachteile:

• Mangel an vordefinierten Wireframe-Vorlagen und -Elementen – Da InDesign kein Wireframe-Tool sein soll, müssen Sie Vorlagen und Objekt-Assets selbst erstellen und vorbereiten. (Ich werde Ihnen später in diesem Artikel zeigen, wie Sie mit diesem Schritt umgehen.) Die gute Nachricht ist, dass der Großteil dieser Arbeit nur einmal erledigt wird und Sie nach ein paar Stunden Arbeit bereit sind, Ihre Arbeit zu starten InDesign-Drahtmodellierung. Außerdem gibt es viele Assets und Wireframe-Kits, die Sie aus dem Internet herunterladen können, sodass Sie nicht alles selbst zeichnen müssen.
• Interaktivitäts- und Animationsfunktionen sind begrenzt – Obwohl Sie Seiten problemlos verbinden und etwas Interaktivität und Animationen hinzufügen können, kann der Vorgang manchmal lange dauern. Einige der einfachen Interaktionswerkzeuge sind nicht sehr intuitiv. Wenn Sie die Interaktivitätsfunktionen von InDesign noch nicht verwendet haben, müssen Sie eine leichte Lernkurve überwinden, bevor Sie sie effizient anwenden können.
• InDesign-Dokumente können nicht direkt als PSD-Dateien mit Ebenen exportiert werden – Wenn Sie Ihr visuelles Design in Adobe Photoshop erstellen und separate Drahtgitterelemente zum Erstellen Ihres Designs haben möchten, müssen Sie Ihre Drahtgitter zuerst in PDF exportieren. Dann müssen Sie das PDF in Illustrator öffnen und erneut als PSD mit Ebenen exportieren. Benutzer, die am Mac arbeiten, können auch ein kostenloses Skript von Rob Day verwenden, um InDesign-Dateien als PSD mit Ebenen zu speichern.

Eine gute Wireframe-Vorbereitung ist die halbe Arbeit

Beginnen Sie mit der Feinabstimmung Ihrer Arbeitsumgebung. Wenn Sie für diese Art von Arbeit noch keinen gespeicherten Arbeitsbereich in Illustrator und InDesign haben, erstellen Sie einen. Beginnen Sie in Illustrator mit dem vordefinierten Web-Arbeitsbereich und passen Sie ihn Ihren Wünschen an: Schließen Sie selten verwendete Bedienfelder, öffnen Sie diejenigen, die Sie häufig verwenden, und ordnen Sie sie dann Ihrem Arbeitsstil entsprechend an.

Wenn Sie fertig sind, speichern Sie den Arbeitsbereich, indem Sie „Fenster“ > „Arbeitsbereich“ > „Neuer Arbeitsbereich“ wählen. Machen Sie dasselbe in InDesign, indem Sie den Arbeitsbereich „Digitales Veröffentlichen“ als Starter verwenden.

Zusammenbau von Wireframe-/Mockup-/Prototyp-Kits

Ein effizienter Wireframing-Workflow mit Illustrator und InDesign erfordert, dass Sie zunächst etwas Zeit in die Erstellung Ihres Assets-Kits für die Benutzeroberfläche investieren. Seit der Einführung von Adobe Creative Cloud sind CC-Bibliotheken die beste Möglichkeit, alle Ihre UI-Kit-Komponenten zu speichern.

Sie können eine oder mehrere Bibliotheken für Wireframing- und Prototyping-Zwecke erstellen. Sie können beispielsweise eine Bibliothek für Website-Wireframing, eine andere für iOS-Anwendungen, eine dritte für Android-Anwendungen usw. erstellen.

Um eine Adobe CC-Bibliothek zu erstellen, öffnen Sie das Bedienfeld „Bibliotheken“ und wählen Sie im Hamburger-Menü des Bedienfelds die Option „Neue Bibliothek erstellen“. Assets, die Sie in Bibliotheken einfügen, können auf allen Geräten, bei denen Sie sich mit Ihrer Adobe-ID anmelden, in verschiedenen Desktop- oder mobilen Apps von Adobe erstellt und verwendet werden. Das heißt, Sie können mit dem Projekt auf Ihrem iPad oder iPhone beginnen, auf Ihrem Desktop-Computer im Büro fortfahren und Änderungen in letzter Minute auf Ihrem Heim-Laptop vornehmen, wobei dieselben Assets auf allen Geräten verfügbar sind.

Wenn Sie als Teil eines größeren Teams arbeiten, können Bibliothekselemente von Teammitgliedern gemeinsam genutzt werden. Bibliotheken können Farben, Grafiken, Ebenenstile (nur Photoshop) sowie Absatz- und Zeichenstile enthalten. Sie fügen Assets in Bibliotheken hinzu, indem Sie auf die entsprechende Schaltfläche unten im Bedienfeld „CC-Bibliothek“ klicken, während das entsprechende Element ausgewählt ist. Sie können auch Grafikelemente hinzufügen, indem Sie sie direkt von Ihrer Zeichenfläche in das Bedienfeld „Bibliotheken“ ziehen.

Assets in Bibliotheken sind nach Kategorien organisiert. Halten Sie sich an bewährte Verfahren und benennen Sie jedes Asset mit einem aussagekräftigen Namen um. Bibliotheken sind durchsuchbar, und wenn Sie ein Objekt finden, indem Sie den Anfang seines Namens eingeben, sparen Sie später viel Zeit, insbesondere wenn Sie viele verschiedene Elemente in Ihren Bibliotheken haben. Um den Namen eines Assets zu ändern, doppelklicken Sie darauf und geben Sie einen neuen ein.

Erstellen von Wireframe-Kit-Komponenten

Obwohl Adobe InDesign über einige grundlegende Zeichenwerkzeuge verfügt, die denen von Illustrator ziemlich ähnlich sind, ist Illustrator eine viel bessere Wahl zum Zeichnen verschiedener Elemente in Ihrem Drahtmodell. Erstellen Sie als Faustregel alle Kit-Elemente, die komplexer gezeichnet werden müssen als einfache geometrische Formen in Illustrator. Erstellen Sie in InDesign einfachere Elemente, die Text enthalten, den Sie im Layout ändern müssen, z. B. einfache Schaltflächen.

Erstellen Sie zunächst eine Liste aller Elemente, die Sie im Wireframe benötigen, z. B. Navigationselemente, Seitenelemente einschließlich Bilder, Videoframes und Textfelder, Symbole, Avatare, Formularelemente und alle anderen Elemente der Benutzeroberfläche. Nachdem Ihre Liste fertig ist, können Sie zu Illustrator und InDesign gehen, um diese Elemente zu erstellen.

Erstellen Sie zunächst ein neues Dokument für Drahtmodell- oder Mockup-Kit-Komponenten. Vergewissern Sie sich, dass Sie im Dialogfeld „Neues Dokument“ entweder „Web-/Geräteprofil in Illustrator“ oder „Web-/Digital-Publishing-Intent“ ausgewählt haben. Dadurch wird sichergestellt, dass Pixel als Einheiten verwendet werden und der Farbmodus auf RGB eingestellt ist.

Machen Sie Wireframe-Kit-Assets so einfach wie möglich, da sie schnelle visuelle Hinweise darauf geben müssen, was sie darstellen, ohne zu detailliert zu sein. Sie sollten sehr begrenzte Farbpaletten von vorzugsweise wenigen Grautönen verwenden. Heben Sie wichtigere Elemente optisch hervor, indem Sie sie mit dunkleren Farbtönen einfärben oder ihnen einen höheren Kontrast verleihen.

Erstellen Sie für originalgetreuere Mockups oder Prototypen UI-Kits mit detaillierteren Elementen, die die jeweilige Farbpalette des jeweiligen Projekts verwenden. Für einfachen Zugriff auf Farbpaletten fügen Sie sie zu CC-Bibliotheken hinzu.

Adobe Illustrator-Assets in CC-Bibliotheken

Elemente, die Sie aus Illustrator zu Bibliotheken hinzufügen, sind standardmäßig verknüpft (seit Adobe CC 2015). Das heißt, wenn Sie ein Bibliothekselement in Illustrator ändern, werden die Änderungen in allen verwendeten Instanzen übernommen. Wenn Sie dem Dokument ein nicht verknüpftes Asset hinzufügen möchten, drücken Sie die Wahl-/Alt-Taste, während Sie es aus dem Bedienfeld ziehen.

Wenn Sie verknüpfte Illustrator-Elemente in InDesign verwenden, haben sie ein kleines Wolkensymbol in der oberen linken Ecke, wenn das Dokument im Normalmodus angezeigt wird. Sie werden alle auch im Links-Bedienfeld aufgelistet. Wenn Sie ein Bibliothekselement in Illustrator ändern, werden Änderungen im InDesign-Dokument nicht automatisch vorgenommen. Das Wolkensymbol wird durch ein modifiziertes Link-Ausrufezeichen-Symbol ersetzt, und Sie müssen diese Links aktualisieren.

InDesign-Elemente, die Sie in einem InDesign-Dokument platzieren, werden nicht verknüpft. Das bedeutet, dass Sie Instanzen unabhängig vom Original bearbeiten können, und wenn das ursprüngliche Asset geändert wird, werden diese Änderungen nicht auf Assets übertragen, die bereits im Layout platziert wurden.

Berücksichtigen Sie diese Eigenschaften beim Erstellen von Drahtmodellen: Fügen Sie Elemente aus Illustrator zur Bibliothek hinzu, wenn Sie davon ausgehen, dass sie global geändert und aktualisiert werden müssen, oder fügen Sie sie aus InDesign hinzu, wenn Sie wissen, dass Sie sie einzeln ändern möchten. Beachten Sie, dass Sie Grafiken auch in Illustrator erstellen, sie in InDesign kopieren/einfügen und dann bei Bedarf ändern können, bevor Sie sie als InDesign-Element zur Bibliothek hinzufügen.

Wenn Sie vergessen haben, welches Grafik-Asset von welcher Anwendung erstellt wird, sehen Sie sich die rechte Seite jedes Elements im Bedienfeld „Bibliothek“ an, während Sie „Elemente anzeigen“ als Liste verwenden.

Adobe InDesign Flexibilität mit Inhalt und Text

Um sicherzustellen, dass Sie Text und Typografie in Ihren Drahtmodellen einfach ändern können, erstellen Sie Textcontainer in InDesign. InDesign hat eine nette Funktion zum Füllen von Textfeldern mit Platzhaltertext. Wenn Sie ein Textfeld zeichnen, klicken Sie mit der rechten Maustaste darauf und wählen Sie Mit Platzhaltertext füllen .

Fügen Sie Textfelder wie jedes andere Grafikelement zur Adobe-Bibliothek hinzu, indem Sie sie ziehen. Wenn Sie diese Textelemente später als Teil Ihres Drahtmodell-Layouts verwenden, können Sie das Textfeld sowie seinen Inhalt in Ihrem Drahtmodell ändern.

Erwägen Sie auch, Schaltflächen-UI-Elemente in InDesign zu erstellen. Um eine Schaltfläche zu erstellen, erstellen Sie einen Textrahmen, geben Sie den Text ein und verwenden Sie dann „Objekt“ > „Textrahmenoptionen“, um den Einschubabstand zu definieren. Passen Sie die vertikale Ausrichtung von Text in einem Feld an, indem Sie die gewünschte Option aus dem Dropdown-Menü Ausrichten auswählen.

Wechseln Sie zur Registerkarte Automatische Größe und wählen Sie eine geeignete automatische Größenanpassung (das wäre wahrscheinlich nur die Breite) und einen geeigneten Bezugspunkt. Wenn Sie möchten, dass InDesign Ihren Text nicht in mehr als eine Zeile unterbricht, aktivieren Sie die Option „Keine Zeilenumbrüche“.

Verwenden Sie vorhandene Ressourcen

Im Internet sind viele Wireframing- und Prototyping-UI-Kits für Adobe Illustrator verfügbar, die Sie kaufen oder sogar kostenlos herunterladen können, wenn Sie eine fertige Lösung wünschen. Vielleicht haben Sie bereits Elemente, die Sie aus Ihren abgeschlossenen Projekten ausgraben können. Öffnen Sie diese Dokumente, optimieren Sie alle zuvor erstellten Elemente nach Bedarf und fügen Sie sie in ihre jeweiligen Bibliotheken ein.

Wenn Sie für eine bestimmte Plattform entwerfen, z. B. eine iOS- oder Android-Anwendung, stellen Sie sicher, dass Sie deren Richtlinien für Benutzeroberflächen sorgfältig lesen und geeignete Elemente verwenden. Es kann praktisch sein, UI-Elemente in Ihrem Kit zu haben, die für verschiedene Plattformen spezifisch sind.

Konzentrieren Sie sich nicht zu sehr darauf, jedes zukünftige Asset oder jeden Zustand in Ihren Bibliotheken zu berücksichtigen, bevor Sie mit dem eigentlichen Wireframing-Prozess beginnen. Sie können später Assets zu Ihren Bibliotheken hinzufügen und darauf aufbauen.

Erstellen von InDesign-Drahtmodellvorlagen

Es bleibt noch ein wichtiger Vorbereitungsschritt: Erstellen Sie InDesign-Vorlagen, die Sie zum Erstellen von Wireframes verwenden. Beginnen Sie mit der Erstellung eines neuen Dokuments mit der Absicht Web oder Digital Publishing und definieren Sie geeignete Seitengrößen für die Bildschirme, für die Sie entwerfen.

Da es empfehlenswert ist, für die Anordnung Ihrer Drahtgitterelemente eine Art Raster zu verwenden, richten Sie die Ränder ein und erstellen Sie ein Spaltenraster, indem Sie die gewünschte Anzahl von Spalten und den Bundsteg festlegen. Sie können diese Einstellungen später über „Layout“ > „Ränder und Spalten“ ändern, wobei die jeweilige Masterseite (oder Seiten) im Seitenbedienfeld ausgewählt ist.

Wenn Sie horizontale Hilfslinien und ergänzende vertikale Hilfslinien benötigen, erstellen Sie diese manuell oder erstellen Sie ein zusätzliches Raster, indem Sie „Layout“ > „Hilfslinien erstellen“ verwenden. Beim Erstellen eines Rasters ist es hilfreich, eines der Online-Rasterberechnungstools wie den Gridulator zu verwenden.

Sie können auch zusätzliche Vorlagen für Präsentationszwecke mit Gerätemodellen als Rahmen für Ihre Wireframes erstellen. Da ein InDesign-Dokument mit einem anderen verknüpft werden kann, können Sie Drahtmodelle in einem InDesign-Dokument erstellen und es dann für Präsentationen in einem anderen platzieren.

Obwohl es auf den ersten Blick kompliziert erscheinen mag, ist dies eigentlich ein sehr einfacher und effektiver Arbeitsablauf. Das Aufbewahren tatsächlicher Wireframes in einem separaten Dokument erleichtert den weiteren Aufbau von genehmigten Wireframes zu einem ausgefeilten visuellen Design.

Es ist auch einfach, präsentationsfertige Vorlagen zu erstellen, in denen Sie Wireframes platzieren, Beschriftungen und Kommentare hinzufügen und dem Kunden Ihre beste Lösung zeigen können. Wenn Sie Änderungen an einer Wireframe-Datei vornehmen, aktualisieren Sie sie einfach wie jeden anderen Link in einem Präsentationsdokument und ta-daaa! Alle Änderungen sind auch in Ihrer Präsentation enthalten.

Im Ebenenbedienfeld können Sie separate Ebenen für verschiedene Arten von Inhalten vorbereiten: Elemente der Benutzeroberfläche, interaktive Funktionen, Gesten, Beschriftungen und Notizen. Wenn Sie für ein bestimmtes Projekt weitere Ebenen benötigen, können Sie diese während des Wireframing-Prozesses jederzeit problemlos hinzufügen.

Wenn Sie mit dem Erstellen fertig sind, speichern Sie Ihre Vorlagen als InDesign.indt-Vorlagendateien. Nachdem alle benötigten Vorlagen gespeichert sind, können Sie endlich effizient mit dem Wireframing beginnen.

Aufbau von Wireframes

Das Wichtigste zuerst – beginnen Sie mit der Masterseite. Ziehen Sie alle globalen Elemente, die auf allen Bildschirmen Ihres Projekts gleich sein sollen, aus der Bibliothek. Wenn Sie eine Website gestalten, sind dies normalerweise Kopfzeilen mit Logo, Navigation und Fußzeile. Da Sie mehr als eine Masterseite erstellen und diese voneinander erben können, können Sie die Vorteile der Verschachtelung von Masterseiten nutzen.

Je nach Projekt können Sie beispielsweise eine Musterseite für ein UI-Element erstellen, z. B. ein modales oder Dialog-Popup, und dann neue Muster auf der Grundlage des ersten Musters erstellen, wobei Sie nur die Elemente ändern, die anders sein müssen.

Sie können Master-Elemente auf normalen Dokumentseiten nicht auswählen, ändern oder löschen, es sei denn, Sie klicken darauf, während Sie Befehlstaste/Strg + Umschalttaste gedrückt halten, um den Master zu überschreiben. Sobald Ihr Element überschrieben wurde, können Sie jeden seiner Parameter ändern oder es vollständig aus dem Layout löschen.

Denken Sie daran, dass Parameter, die Sie nicht geändert haben, auch dann noch vom Master geerbt werden, wenn Sie das Element überschreiben. Wenn Sie beispielsweise ein Element überschreiben, indem Sie seine Farbe ändern, ändert sich seine Größe nicht, da es immer noch mit dem Master verbunden ist. Wenn Sie es außerdem auf der Musterseite ändern, wird es auch für das Element geändert, das Sie zuvor überschrieben haben.

Wenn Sie zusätzliche Seiten in Ihr Wireframing-Dokument einfügen, denken Sie daran, sie auf ihrer jeweiligen Vorlage zu basieren. Wenn Sie die Mustervorlage für Seiten ändern müssen, die sich bereits im Layout befinden, wählen Sie sie im Seitenbedienfeld aus, klicken Sie mit der rechten Maustaste und wählen Sie Mustervorlage auf Seiten anwenden. Verwenden Sie die Bibliothekselemente und ordnen Sie sie mit den Optionen „Intelligente Hilfslinien“ und „Ausrichten“ an, um die endgültigen UI-Drahtgitter-Layouts zu erstellen.

Wenn Sie Designs für mehr als eine Bildschirmgröße erstellen, erstellen Sie alternative Layouts unter „Layouts“ > „Alternatives Layout erstellen“ oder im Bedienfeld „Seiten“. Sie können flüssige Layoutregeln verwenden, wenn Sie alternative Layouts erstellen, um Seitenelemente automatisch von einer Größe und Ausrichtung in eine andere zu übernehmen, oder Sie können sie manuell steuern. Verwenden Sie zum Anwenden und Testen von Liquid-Layout-Regeln das Seitenwerkzeug oder öffnen Sie das Bedienfeld „Fenster“ > „Interaktiv“ > „Liquid-Layout“.

Interaktivität hinzufügen

Adobe InDesign verfügt über eine Reihe von Interaktivitätsfunktionen, die Sie beim Erstellen von Drahtmodellen oder Prototypen nutzen können. Welche Funktionen Sie einbeziehen, hängt vom endgültigen Format ab, das Sie für Ihre Wireframes, Prototypen oder Präsentationen benötigen.

Wenn Sie als PDF exportieren, ist die Interaktivität eingeschränkt, aber Sie können zumindest Links zwischen Bildschirmen erstellen, indem Sie das Hyperlink-Bedienfeld verwenden, um sie zu erstellen. Wählen Sie das Element aus, das sich als Link verhalten soll, und klicken Sie auf das Symbol „Neuer Hyperlink“. Wählen Sie im Dropdown-Menü Link zu die Option Seite aus und geben Sie die gewünschte Seitenzahl ein. Wiederholen Sie diese Aktion für alle Elemente, die Sie als Links zwischen den Bildschirmen verhalten möchten.

Sie können auch Hyperlinks zu Objekten hinzufügen, die sich auf den Masterseiten befinden, was eine echte Zeitersparnis sein kann. Erstellen Sie einmal Links auf der Masterseite und sie funktionieren auf allen Bildschirmen Ihres Dokuments.

Sie können Schaltflächen aus beliebigen Grafiken, Texten, Bildern oder Gruppen von Elementen erstellen. Um eine Schaltfläche aus einem ausgewählten Objekt zu erstellen, verwenden Sie das Bedienfeld „Fenster“ > „Interaktiv“ > „Schaltflächen und Formulare“ und klicken Sie auf das Symbol „In Schaltfläche konvertieren“.

Schaltflächen können unterschiedliche Zustände haben, die für normale, Rollover- und Klick-Darstellungen erstellt werden. Um Rollover- oder Klick-Zustände zu Schaltflächen hinzuzufügen, klicken Sie im Bedienfeld „Schaltflächen“ darauf und bearbeiten Sie die Schaltflächendarstellung für jeden Status. Um einer Schaltfläche eine Aktion hinzuzufügen, klicken Sie auf ein Pluszeichen und wählen Sie es aus der Liste aus. Beachten Sie, dass Aktionen unter SWF/EPUB in interaktiven PDFs nicht funktionieren.

Um Popup-Elemente zu erstellen, wählen Sie Schaltflächen und Formulare ein-/ausblenden. Um Schaltflächen bis zum Auslösen auszublenden, aktivieren Sie die Option Ausgeblendet bis zum Auslösen. Sie können Objekte mit mehreren Zuständen in ein interaktives PDF einfügen, aber nur, wenn Sie sie zuerst als SWF-Datei exportieren und sie dann für den PDF-Export wieder in das InDesign-Layout einfügen. Dieser Arbeitsablauf ist mühsam und die PDFs können nicht in allen PDF-Readern richtig angezeigt werden, also vermeiden Sie dies, es sei denn, es ist wirklich notwendig.

Wenn Sie Ihr Dokument mithilfe der Funktion „Online veröffentlichen“ von InDesign CC 2015 in einen HTML-Prototyp konvertieren möchten, können Sie viele weitere interaktive Optionen wie Animationen, Objekte mit mehreren Zuständen und Aktionen mit mehreren Schaltflächen verwenden, einschließlich all derer, die für den SWF/EPUB-Export vorgesehen sind.

Sie können einfache Animationen hinzufügen, indem Sie das Animationsbedienfeld verwenden und eine der integrierten Voreinstellungen aus dem Dropdown-Menü auswählen und ihre Eigenschaften festlegen. Auf ein Objekt kann nur eine Animation angewendet werden, aber wenn Sie weitere hinzufügen müssen, gruppieren Sie Ihr Objekt mit einem leeren Feld und verwenden Sie die neue Animation für dieses neu erstellte Objekt.

Erstellen Sie für UI-Elemente, die unterschiedliche Zustände anzeigen müssen, ein Objekt mit mehreren Zuständen. Erstellen Sie für jeden Zustand ein separates Objekt. Objekte können ein einzelnes Element (Bild, Textfeld, Grafik) oder eine Gruppe verschiedener Elemente sein. Öffnen Sie das Bedienfeld „Fenster“ > „Interaktiv“ > „Objektstatus“, wählen Sie alle Objekte aus, die Sie für das Objekt mit mehreren Zuständen erstellt haben, und klicken Sie unten im Bedienfeld auf die Schaltfläche „Neu“.

Nachdem Ihr Objekt mit mehreren Status erstellt wurde, müssen Sie Schaltflächen erstellen, um von einem Objektstatus in einen anderen zu wechseln. Die Aktionen „Zum nächsten Zustand gehen“ oder „Zum vorherigen Zustand gehen“ zeigen den spezifischen Objektzustand mit der Aktion „Gehe zu Zustand“ an.

Wenn Sie einen scrollbaren Rahmen in Ihrem Wireframe/Prototyp haben möchten, können Sie ihn am einfachsten mit der Universal Scrolling Frames-Erweiterung von Ajar Productions erstellen. Nachdem Sie die Erweiterung heruntergeladen und installiert haben, können Sie sie als InDesign-Bedienfeld verwenden. Für einen scrollbaren Rahmen müssen Sie sowohl Inhalt als auch einen Rahmen für einen Container erstellen.

Der scrollbare Inhalt kann ein Textrahmen, ein Bild oder mehrere gruppierte Elemente sein. Wenn Sie mit dem Erstellen des Inhalts und der Containerbox fertig sind, wählen Sie den Inhalt und Bearbeiten > Ausschneiden aus. Wählen Sie dann den Container aus und fügen Sie den Inhalt darin ein, indem Sie Bearbeiten > Einfügen in verwenden. Wählen Sie den Container aus und passen Sie mithilfe von Universal Scrolling Frames die gewünschte Scrollrichtung an.

Durch die Kombination von Schaltflächen, Objekten mit mehreren Zuständen, Animationen und scrollbaren Rahmen können Sie ein umfassendes interaktives Erlebnis erzielen. Verwenden Sie zum Testen der Interaktivität in InDesign das Bedienfeld „EPUB-Interaktivitätsvorschau“. Sie können eine einzelne Seite oder das gesamte Dokument in der Vorschau anzeigen. Vergrößern Sie das Vorschaufenster nach Bedarf.

Wenn Sie die interaktiven Funktionen von Adobe InDesign noch nicht verwendet haben, seien Sie darauf vorbereitet, da es zunächst eine gewisse Lernkurve gibt. Aber mit ein wenig Übung und etwas Trial-and-Error werden Sie sie schnell beherrschen.

Fertige Dokumente exportieren

Wenn Sie mit der Erstellung der Wireframes und Präsentationsdateien fertig sind, müssen Sie dem Kunden nur noch Ihre großartigen Ideen auf die bestmögliche Weise präsentieren. Zu diesem Zweck müssen Sie Ihre Wireframes in einem Format exportieren, das Ihr Kunde in der Vorschau anzeigen kann. Obwohl InDesign-Dateien in eine Vielzahl von Formaten exportiert werden können, werden Sie wahrscheinlich das interaktive PDF oder die Funktion „Online veröffentlichen“ verwenden, wenn Sie funktionale Low- oder High-Fidelity-Prototypen testen. Wählen Sie zum Speichern als interaktives PDF im Dropdown-Menü „Format“ im Dialogfeld „Exportieren“ die Option „Adobe PDF (interaktiv)“ und passen Sie die Eigenschaften nach Bedarf an. Vergessen Sie nicht, Formulare und Medien anzukreuzen, wenn Sie interaktive Elemente einbinden möchten. Kunden können PDF-Drahtmodelle im kostenlosen Adobe Reader anzeigen und alle ihre Kommentare in dieselbe Datei schreiben.

Sie können auch ein aus InDesign exportiertes PDF-Dokument verwenden, um einen InVision-Prototyp (oder ein anderes Tool, das PDFs unterstützt) zu erstellen. Wenn Ihr standardmäßiges Prototyping-Tool, vielleicht Marvel, kein PDF importieren kann, exportieren Sie Ihre InDesign-Drahtmodellseiten als JPEG- oder PNG-Bilder.

Um einen HTML-Prototyp interaktiv zu exportieren, der in modernen Browsern auf verschiedenen Geräten angezeigt werden kann, gehen Sie zu Datei > Online veröffentlichen oder klicken Sie in der Anwendungsleiste auf die Schaltfläche Online veröffentlichen. Nachdem das Dokument für die Online-Veröffentlichung vorbereitet und hochgeladen wurde, können Sie eine Dokument-URL kopieren, um sie mit Stakeholdern zu teilen und den Überprüfungsprozess zu starten. Sie können den veröffentlichten Prototyp auch auf Ihrer Website einbetten.

Ein Nachteil der Funktion „Online veröffentlichen“ besteht darin, dass sie keine zusätzliche Kontrolle über den Export hat und Dateien immer auf den Servern von Adobe gespeichert werden. Außerdem ist es immer noch eine Vorschaufunktion und Sie können nicht sicher sein, in welche Richtung Adobe es entwickeln wird oder ob es sogar eingestellt wird.

Sobald Ihr Wireframe/Prototyp exportiert ist, ist es an der Zeit, mit dem Testen, Überprüfen und Iterieren zu beginnen.