Designs professionell mit InVision bereitstellen

Die Präsentation von Designs ist eine der zentralen Anforderungen in der App-Entwicklung. Entwickler sind auf deine Designs angewiesen, um die App erfolgreich umzusetzen. In dieser Anleitung zeige ich dir, wie du deine Designs mühelos in InVision bereitstellst, damit dein Designteam stets Zugriff auf die aktuellsten Versionen hat. Mit InVision sorgt du dafür, dass deine Ideen optimal visualisiert und kommuniziert werden, während du gleichzeitig Änderungen unkompliziert einpflegen kannst.

Wichtigste Erkenntnisse

• InVision ermöglicht eine einfache Synchronisation und Präsentation von Designs.
• Du kannst deine Designs direkt aus Sketch exportieren und in InVision hochladen.
• Das Tool bietet verschiedene Modi zur Ansicht und Interaktion mit Prototypen.
• Feedback- und Kommentarfunktionen unterstützen die Zusammenarbeit zwischen Designern und Entwicklern.

Schritt-für-Schritt-Anleitung

Schritt 1: Neues Projekt in InVision erstellen

Zuerst öffnest du InVision und legst ein neues Projekt an. Wähle dazu die Option, ein „Prototype“ zu erstellen, und entscheide dich für das iPhone-Template, um deine Designs optimal für mobile Endgeräte zu präsentieren. Wähle als Projektnamen „Mobility Stream Udemy“ aus, und klicke auf „Erstellen“.

Schritt 2: Designs aus Sketch exportieren

Nachdem du dein Projekt eingerichtet hast, importierst du deine Designs aus Sketch. Bei diesem Prozess musst du sicherstellen, dass du die richtigen Artboards auswählst und diese in InVision hochlädst. Du kannst die Dateien direkt per Drag-and-Drop in das InVision-Projekt ziehen. Hierfür ist es wichtig, das richtige Exportformat aus Sketch zu wählen, um Komplikationen zu vermeiden.

Schritt 3: InVision Plugin installieren

Um den Prozess der Synchronisation zu vereinfachen, solltest du das InVision Plugin für Sketch nutzen. Installiere das Plugin, melde dich mit deinem InVision-Konto an und aktiviere die Synchronisationsoption. Dies ermöglicht es dir, Designänderungen direkt aus Sketch in dein InVision-Projekt zu übertragen, ohne dass du die Dateien manuell hochladen musst.

Schritt 4: Artefakte mit Schnittstellen versehen

Jetzt kannst du die Benutzeroberfläche deiner App erstellen und die einzelnen Screens interaktiv gestalten. Klicke auf die Schaltflächen im Build Mode, um Hotspots zu erstellen, die die Navigation in der App simulieren. Du kannst verschiedene Übergänge wie „Slide in“ oder „Instant“ wählen, um die Benutzererfahrung realistisch darzustellen.

Schritt 5: Transitions festlegen

Wenn du Interaktionen hinzugefügt hast, ist es wichtig, die richtigen Animationen für die Übergänge zwischen den Screens festzulegen. Hierbei kannst du den Typ der Animation auswählen, die beim Wechsel zu einem anderen Screen wirksam wird. Achte darauf, dass diese Details für die Entwickler klar und präzise dargestellt sind, damit sie das gewünschte Verhalten umsetzen können.

Schritt 6: Farben und Hintergründe festlegen

Du solltest auch sicherstellen, dass alle Hintergrundfarben und stilistischen Details stimmen. Oft wird vergessen, Hintergrundfarben in den Sketch-Dateien festzulegen. Gehe jeden Screen durch und prüfe, ob die Hintergründe, die du im Design vorgesehen hast, auch in InVision angezeigt werden. Achte darauf, dass alles harmonisch aussieht.

Schritt 7: Synchronisation und Update

Nachdem du alle Änderungen vorgenommen hast, ist es an der Zeit, alles zu synchronisieren. Speichere die Änderungen in Sketch und klicke auf den Synchronisationsbutton im Plugin. Dies wird deinen neuen Screens und Anpassungen automatisch in InVision aktualisieren. Beachte, dass dieser Prozess etwas Zeit in Anspruch nehmen kann.

Schritt 8: Feedback sammeln

Nutze die Kommentar- und Feedbackfunktion in InVision, um allgemeine Fragen zu deinen Designs zu klären. Du kannst direkt im Prototyp ein Kommentar hinzufügen, der dann von anderen Teammitgliedern beantwortet werden kann. Dies ist besonders hilfreich, um sicherzustellen, dass dein Design dem Briefing entspricht und alle Erwartungen erfüllt werden.

Schritt 9: Abschluss der Präsentation

Zuletzt solltest du deine Designs testen und sicherstellen, dass alles einwandfrei funktioniert. Überprüfe alle Hotspots, die du erstellt hast, und simuliere die Interaktion, um Erfahrungen aus der Benutzerperspektive zu gewinnen. So stellst du sicher, dass das Gesamtbild stimmig ist, bevor du es deinem Team oder den Entwicklern präsentierst.

Zusammenfassung - Designs erfolgreich in InVision bereitstellen

In dieser Anleitung hast du gelernt, wie du deine Designs Schritt für Schritt in InVision bereitstellst. Du hast erfahren, wie einfach es ist, mit InVision zu arbeiten und wie du die Effizienz deiner Designübertragungen steigern kannst. Eine sorgfältige Vorbereitung und die Nutzung hilfreicher Funktionen werden dir helfen, deine Projekte erfolgreich zu gestalten und deinen Entwicklern die benötigten Informationen zu liefern.