InVision Studio: Überblick und Rückblick

InVision Studio ist ein Prototyping- und Animationstool, mit dem Sie dank flexibler Ebenen und einer unendlichen Leinwand schnell fortschrittliche, vektorbasierte Bildschirmdesigns erstellen können. Es gilt als eines der besten High-Fidelity-Prototyping-Tools auf dem Markt. Mit InVision Studio können Sie Ihren Arbeitsablauf beschleunigen; interessante, interaktive Prototypen erstellen; Kommunizieren Sie Ihre Designs an das Team und die Kunden; Testen Sie Ihre Designs; und klären Sie Fragen, Bedenken und Designänderungen vor der Entwicklungsphase.

InVision Studio ist Teil der InVision-Toolsuite, zu der auch InVision Cloud gehört, mit der Sie Ihren gesamten Produktdesign-Workflow verbinden, speichern und freigeben können, und InVision DSM, ein Designsystem-Manager und eine Bibliothek, in der Sie alle Ihre Marken- und UX-Komponenten. InVision Studio kann auf Mac und Windows verwendet werden. Sie können auch Sketch-Dateien importieren.

Funktionen von InVision Studio

Nach dem Herunterladen der InVision Studio-App erhalten Sie eine Auswahl an zu erstellenden Projekten. Nachdem Sie ausgewählt haben, was Sie entwerfen möchten, erhalten Sie eine Tour durch die Benutzeroberfläche.

Um einen Layer oder eine Komponente hinzuzufügen, klicken Sie oben auf das Pluszeichen. Wenn Sie eine Komponente hinzufügen, werden alle Ihre Optionen auf der rechten Seite angezeigt.

Lassen Sie uns einige der bemerkenswerten Funktionen von InVision durchgehen.

Ändern Sie die Größe und beschneiden Sie Bilder ohne Masken.

Diese Funktion, die als intelligenter Bildzuschnitt bezeichnet wird, schneidet Bilder automatisch zu, wenn Sie die Größe ändern. Dies ist vergleichbar mit dem Erstellen einer Bildfüllung in Sketch und dem anschließenden Einstellen auf „Füllen“, jedoch in weniger Schritten und auf intuitivere Weise. Intelligenter Bildausschnitt ist für Bilder mit einem Brennpunkt nahe der Mitte. Es ist auch am besten, wenn Sie einen Kreis, ein Rechteck oder ein abgerundetes Rechteck zuschneiden möchten. Für Bilder mit einem anderen Brennpunkt oder einer interessanteren Form sollten Sie eine Maske erstellen, um auf weitere Anpassungsoptionen zuzugreifen.

Quelle: LearnInVisionStudio.com

Fixieren Sie Elemente beim Scrollen.

Das Korrigieren der Kopf- und Fußzeile ist in InVision nicht neu, aber das Korrigieren anderer Elemente schon. Stellen Sie das Scrollen auf horizontal, vertikal oder beides ein und wählen Sie dann das Element aus, das Sie reparieren möchten, indem Sie oben rechts auf das Stecknadelsymbol klicken.

Verknüpfen Sie mehrere Zeichenflächen zu einer Animation.

Der Timer gibt Ihnen die Kontrolle über mehrere Zeichenflächen, die Sie in eine Animation umwandeln möchten. Sie können eine Animation auch wiederholen, damit die letzte Zeichenfläche auf die erste zeigt. Oder Sie können eine mehrstufige Animation direkt zu einem anderen Teil Ihres Designs erstellen. Komplexe Animationen wie diese sind ideal für Video-Intros und -Outros.

Erstellen Sie Wisch-Trigger für Parallax-Animationen.

Wischauslöser können Parallaxeneffekte und andere Arten von Animationen erzeugen, die beim Scrollen auftreten.

Erstellen Sie responsive Prototypen, ohne Code schreiben zu müssen.

Mit responsiven Prototypen können Sie alles prozentual machen und die Größe jedes Elements basierend auf der Zeichenflächengröße ändern. Sie können dann Prototypen erstellen, die auf alle Arten von Bildschirmen reagieren. Dies erleichtert die Erstellung von Mockups unterschiedlicher Größe. Wenn Sie ein Design in Studio als „in der Größe veränderbar“ festlegen, wird es bei der Anzeige im Browser automatisch angepasst.

Quelle: LearnInVisionStudio.com

Spiegeln Sie Prototypen auf Ihr Telefon.

Wenn Sie eine Animation oder einen Prototyp auf Ihrem Handy testen möchten, können Sie diese teilen, „Spiegeln“ auswählen und dann den QR-Code in der mobilen App scannen.

Verwenden Sie skizzenartige Verknüpfungen.

Wenn Sie Sketch verwenden, werden Sie bereits mit den Shortcuts vertraut sein, die InVision Studio verwendet – fast alle sind gleich, insbesondere was den Inspektor, die Ebenen und die Symbolleiste betrifft.

Wechseln Sie zwischen hellen und dunklen Themen.

Nicht-Designer erkennen möglicherweise nicht, wie nützlich diese Funktion ist. Wenn Sie eine helle Benutzeroberfläche entwerfen, kann der zusätzliche Kontrast eines dunklen Designs hilfreich sein (und umgekehrt).

Arbeiten Sie in Echtzeit mit dem Team zusammen.

Zusammenarbeit und Arbeitsablauf werden vereinfacht, und Teammitglieder können in Echtzeit entwerfen und kommentieren. Mit globaler Synchronisierung und Echtzeit-Updates wird niemand aus der Schleife herauskommen.

Entwerfen mit InVision Studio in einem Browser

Ich möchte Ihnen kurz zeigen, wie es ist, mit der Browserversion von InVision Studio zu arbeiten. Wir werden kurz darauf eingehen, ein Board zu entwerfen, einen Prototypen zu erstellen und den Freihandmodus zu verwenden.

Entwerfen eines Boards

Ihre Kommandozentrale befindet sich oben rechts auf dem Bildschirm. Die fünf Symbole stehen für:

• Kopfzeile bearbeiten
• Layouttyp festlegen
• Einstellungen
• Kommentare
• Teilen

Kopfzeile bearbeiten

Ich habe ein bisschen mit dem Header herumgespielt. Nachdem Sie auf "Kopfzeile bearbeiten" geklickt haben, wurden diese Optionen angezeigt:

Ich ersetzte das Bild und den Text, verwischte es leicht und fügte eine leichte Überlagerung hinzu, um den Text hervorzuheben. Besonders toll finde ich die Option „Größe“ – man fährt einfach mit der Maus darüber und wählt aus drei Größen aus.

Layouttyp festlegen

Ich habe dann den Layouttyp in "Akribisch" geändert. Dies ist für die Inhaltsblöcke unter der Kopfzeile, die angezeigt werden, wenn Sie nach unten scrollen.

Bearbeiten zusätzlicher Abschnitte

Wenn Sie den Mauszeiger rechts neben dem Abschnittstitel bewegen, sehen Sie drei Symbole. Der Abwärtspfeil ist „Abschnitt nach unten verschieben“ und das „X“ ist „Abschnittstitel entfernen“. Wenn Sie es löschen und Ihre Meinung ändern, können Sie einfach den Mauszeiger über denselben Bereich bewegen und haben die Möglichkeit, einen neuen Abschnittstitel hinzuzufügen.

Durch Klicken auf das Pluszeichen rechts neben dem Pfeil und „X“ erhalten Sie ein neues Menü. Von links nach rechts stehen die Symbole für:

• Ein Farbmuster hinzufügen
• Füg ein Notiz hinzu
• Datei hochladen

Wenn Sie mit der Maus über einen Inhaltsblock fahren, werden die Größenänderungsoptionen wie bei der Kopfzeile erneut angezeigt. Wenn Sie eine andere Größe auswählen, wird der Rest des Layouts automatisch aktualisiert, um die Blöcke neu einzupassen. Ein Klick auf einen Inhaltsblock öffnet rechts ein Fenster.

Wenn Sie mit der Maus über eine der Farben in der Leiste fahren, wird deren Farbcode angezeigt. In diesem Fenster können Teammitglieder auch einen Kommentar zu diesem speziellen Designblock hinterlassen.

Erstellen eines Prototyps

Ich habe auch mit der Prototyp-Demo herumgespielt, um Ihnen die Möglichkeiten zu zeigen.

Hier befindet sich Ihr Kontrollzentrum am unteren Rand. Beginnend mit dem Augensymbol von links nach rechts sind die Symbole wie folgt:

• Vorschau Modus
• Build-Modus
• Kommentarmodus
• Prüfmodus
• Verlaufsmodus
• Soziales Teilen
• Bildschirme hochladen
• Aufbau
• Bildschirmstatus

Freihandmodus

Der Freihandmodus beginnt mit einer interaktiven Demo, die Ihnen schnell zeigt, wie Sie ihn verwenden. Dann arbeiten Sie mit einer unendlichen Leinwand, um Ihr Projekt zusammenzustellen. Wenn Sie in der App arbeiten, können Sie den Link „Live mit Freehand zusammenarbeiten“ an ein Teammitglied senden und dieses kann in Echtzeit auf das Projekt zeichnen und Text hinzufügen.

InVision Studio-Preise

Der kostenlose Plan beinhaltet einen Prototyp mit unbegrenzten Mitarbeitern und Bildschirmen. Wenn das alles ist, was Sie brauchen, müssen Sie nie bezahlen. Demos zählen nicht zum Limit. Wenn Sie mehr als einen Prototyp entwerfen, erhalten Sie sechs Tage lang kostenlosen Zugang zum Erstellen einer unbegrenzten Anzahl von Prototypen. Danach müssen Sie ein Upgrade durchführen, um zusätzliche Prototypen zu erstellen und zu verwenden. Wenn Sie ein Upgrade durchführen möchten, sind hier ihre Pläne:

Abschließende Gedanken

Im Vergleich zu anderen Designtools ist InVision Studio möglicherweise etwas langsam und manchmal fehlerhaft – das heißt nicht, dass es im Allgemeinen langsam ist, nur langsamer (manchmal) als andere ähnliche Tools wie Adobe XD, Figma und Sketch. Ich habe dieses Problem nicht persönlich erlebt, aber es taucht oft in Rezensionen auf. Außerdem bietet InVision Studio keine Plugin-Unterstützung. Wenn Ihnen das also wichtig ist, ziehen Sie stattdessen Sketch in Betracht.

Beim Prototyping ist InVision Studio jedoch kaum zu schlagen, insbesondere wenn Sie mit einem Team zusammenarbeiten müssen. Es ist vielleicht nicht so leistungsstark wie Adobe XD, aber es ist immer noch eines der besten Prototyping-Tools, die Sie finden werden.

Die Benutzeroberfläche von InVision Studio ist einfach zu erlernen und zu verwenden, und die Symbole sind elegant und modern. Es gibt auch viel Hilfe mit Tutorials, Touren und Links zu weiteren Anleitungen. (Aber ich habe Rezensionen gelesen, die das Gegenteil besagen, also denke ich, dass es Geschmackssache ist.) Bei InVision Studio gibt es sehr wenig Rätselraten, und Sie können direkt zu Ihrer eigentlichen Aufgabe kommen: Erstellen.

Beim Entwerfen gilt als goldene Regel der Goldene Schnitt. Sehen Sie sich meinen ultimativen Leitfaden zur Verwendung und zum Verständnis des Goldenen Schnitts an.

Ausgewähltes Bild über Visual Generation / shutterstock.com