InVision, die Design-Plattform für Teams: Kollaboratives Prototyping mit dem Webdesign-Beschleuniger

Matthias · 23.10.2014

Liebe User, unser Gast-Autor Dieter Petereit (bekannt von Dr. Web) gibt euch heute einen Einblick in sein Wirken und Schaffen als Webdesigner und möchte seinen Erfahrungsbericht mit einem Tipp für alle Webdesigner unter euch garnieren.

Los geht es ...

Kennt ihr das? Ihr baut Entwürfe für Webseiten und schickt die dann per E-Mail umher. Dabei seid ihr in der steten, aber irrigen Hoffnung, auch nach dem vierten und fünften Hin und Her noch den Überblick zu bewahren. Wenn diese Sätze eure Ohren klingeln lassen, dann solltet ihr auf jeden Fall weiter lesen, denn dann ist InVision mit Sicherheit interessant für euch.

Mit dieser "Software as a Service" erstellt ihr Designs mit eurem Lieblings-Pixeleditor und fügt ganz komfortabel Interaktionen hinzu. Dann diskutiert ihr diese Designs mit Kunden, Teammitgliedern, mit wem auch immer ihr das müsst, erstellt und erledigt Aufgaben, chattet oder sprecht mit anderen Projektteilnehmern - alles in Echtzeit. Jeder, der ernsthaft in Projekten arbeitet, die die Größenordnung einer Website für den Pizzamann ums Eck übersteigen, sollte sich Invision ganz genau ansehen. Im folgenden Beitrag haben wir das für euch getan...

InVision: Landing Page Es war einmal: Webdesign in den Neunzigern

Ich bin einer dieser Dinosaurier, die schon seit Beginn der Neunziger Websites erstellen. Haufenweise Kunden aus haufenweise Branchen rund um die Welt durfte ich in den letzten zwanzig Jahren kennenlernen. Dabei stellten sich immer wieder zwei Probleme als besonders gravierend heraus. Zum einen handelte es sich um die Preisverhandlung nebst nachfolgendem tatsächlichen Erhalt des vereinbarten Salärs, aber das ist erstens eine andere Geschichte, und zweitens eine, bei der Invision nicht helfen kann. Das zweite große Problem war die Abstimmung des Designs.

Wie jeder andere Designer baute ich mit meinem kleinen Team ebenfalls grafische Photoshop-Mockups, um dem Kunden einen ersten Eindruck von unserer Idee für seinen Onlineauftritt zu vermitteln. Üblicherweise erstellten wir vier bis fünf verschiedene, davon einen ganz besonders hässlichen, um den Auswahlprozess zu beschleunigen.

Old Skool, Baby...

Mockups sendeten wir per E-Mail, das Feedback kam auf dem gleichen Wege. Allerdings importierte der Kunde unsere grafischen Entwürfe mit Vorliebe in sein Microsoft Word, um sie dann dort mit Anmerkungen und Skizzen zu versehen. Dieses aufgeblasene Dokument wurde sodann so lange hin und her gesendet, bis sowohl ich als auch der Kunde vollkommen den Überblick verloren hatten. Deswegen ging ich bei Kunden, die mit dem Auto erreichbar waren, bald so nicht mehr vor. Stattdessen sprang ich mit großen Ausdrucken der Entwürfe ins Auto, fuhr hin und setzte mich mit dem Kunden an den Konferenztisch. Im Gespräch skribbelten wir auf den Entwürfen herum.

Das war natürlich außerordentlich zeitintensiv und trotz des Aufwands nicht sonderlich zuverlässig. In den späten Neunzigern wandte ich mich dann Powerpoint zu. Kennt ihr doch, oder? Powerpoint, der Präsentations-Dinosaurier aus Redmond, der noch heute Konferenzteilnehmer in aller Welt in Angst und Schrecken zu versetzen versteht. Nur Powerpoint versetzte mich zu dem Zeitpunkt in die Lage, einem weiteren, neuen Problem zu begegnen. Kunden wollten nämlich nicht nur einen grafischen Entwurf der Seite sehen, sondern dieser sollte möglichst auch noch funktionieren - interaktiv und so.

Naheliegenderweise wollte ich aber nicht in einem frühen Entwurfsstadium schon ein funktionsfähiges Modell coden, wo doch nicht einmal das Design stand, meine Arbeit mithin mit allergrößter Wahrscheinlichkeit umsonst sein würde. Powerpoint erlaubte es mir, verschiedene Mockups in eine Slideshow zu verpacken und via Hotspots klickbare Bereiche zu schaffen. Das war nahe genug an echten Links und reichte stets für ein Aha-Erlebnis aus. Das Ergebnis konnte man so exportieren, dass der Kunde kein Powerpoint benötigte, um sich das Mockup in Ruhe auf dem eigenen Screen zu Gemüte zu führen. Diese Lösung war nicht schlecht, kratzte aber nur an der Oberfläche eines weitaus größeren Kommunikationsproblems.

Wir hatten ja nix...

Dann trat eine Firma namens Macromedia auf den Plan und brachte ein Produkt mit, das sie Fireworks nannten. Ich wandte mich Fireworks zu und schaute nie wieder zu Powerpoint zurück. Mit Fireworks waren wir endlich in der Lage, Mockups so zu bauen, wie wir das von Photoshop gewohnt waren, allerdings unterstützte Fireworks den Webdesign-Prozess viel besser. Mit Fireworks konnten wir direkt in die Mockups klickbare Bereiche und sonstige Interaktionen integrieren. Danach exportierten wir das Projekt als HTML, luden es auf einen Webserver hoch und hatten eine voll funktionsfähige Präsentation im Web.

Diese Lösung war ebenfalls nicht schlecht, liess aber etliche Probleme, vor allem im Prozess der Kollaboration, komplett ungelöst. Die eigentliche Kommunikation musste nach wie vor per E-Mail und Telefon erfolgen. Aufgaben wurden über eine Drittlösung, etwa Basecamp, verwaltet. Der Prozess als Ganzes war stark fragmentiert und weit entfernt davon, als zufriedenstellend bezeichnet zu werden.

Aber, so war es halt in den alten Zeiten, als die Gummistiefel noch aus Holz waren. Wir hatten ja nix. Warum nun habe ich euch all das erzählt?

InVision: und schon macht die Projekt-Zusammenarbeit Spaß

Wir spulen vor ins Jahr 2014. All diese Probleme sind Geschichte. Denn heutzutage haben wir );]InVision. InVision ist eine Software as a Service, mit dem sich nicht nur das kollaborative Design-Prototyping stark vereinfachen, beschleunigen und verbessern lässt. Invision bringt auch die komplette Kommunikations-Ebene mit. Für so eine Lösung hätte ich in den Neunzigern mit Freude ein kleines Vermögen hingeblättert und immer noch Geld gespart.

InVision erlaubt die Erstellung interaktiver Design-Mockups, die man dann automatisiert hochlädt und mit allen am Projekt beteiligten Personen bearbeiten kann. Die Software verfügt über einen Präsentationsmodus, in dem ihr gleichzeitig mit anderen Beteiligten am Projekt visuell arbeiten könnt. Ihr markiert Fehler, bringt Anmerkungen an, erstellt Aufgaben direkt aus Designelementen - alles in Echtzeit und synchron über alle angeschlossenen Teilnehmer. InVision liefert die Möglichkeit des Gruppen-Chat mit und sogar Sprachanrufe über IP sind möglich. Dabei könnt ihr mit InVision nicht nur überzeugende Mockups für das Desktop-Web erstellen. Vielmehr unterstützt die Software auch die Erstellung interaktiver Mockups für mobile Geräte, komplett mit Touchsteuerung.

InVision: Hier kommentiert man Designs direkt im Design... Kommunikation ist hier nicht Teil des Leistungsumfangs, sondern fest im Kern des Produkts verankert. Feedback wird direkt da gegeben, wo es entsteht. Dabei ist Feedback keine Einbahnstraße. Vielmehr kann Feedback wie aus Foren bekannt als Thread diskutiert werden. Auf diese Weise bleiben die Diskurse sehr fokussiert auf das betroffene Element. Verwirrung kann nicht entstehen. Es ist stets klar, wovon die Rede ist, wenn am jeweiligen Element kommentiert wird. So bleibt jeder Projektbeteiligte informiert und auf dem aktuellen Stand der Dinge.

Dieses kurze Video gibt einen guten Überblick vom Problem zur Lösung und erklärt die Gesamtkonzeption hinter Invision:

Für die Erstellung der Mockups arbeitet InVision mit jedem Editor zusammen, der in der Lage ist, Dateien der Formate JPG, PNG, PDF oder einige andere zu erzeugen. Mit einem der letzten Updates ging InVision noch einen Riesenschritt weiter. Jetzt ist es sogar möglich, Quelldateien aus Photoshop, Illustrator und Sketch direkt im Projekt zu nutzen. Den Export nach JPG etc. kann man sich somit sparen. InVision erzeugt alle erforderlichen Screens aus den Quelldaten automatisch. Dazu legt man einfach das Mockup in Ebenen mit den unterschiedlichen Interaktionszuständen ab, indem man sich an eine simple Namenskonvention bei der Benennung eben dieser Ebenen hält. Änderungen an der Quelldatei werden synchron umgesetzt.

Einfacher war Prototyping noch nie. Die erforderliche Synchronisation könnt ihr entweder über die InVision Cloud oder eure eigene Dropbox laufen lassen.

InVision: die Projektübersicht

Ein weiteres neues Feature bietet eine ausgewachsene Versionskontrolle. InVision legt für jede Version eine Sicherung an, so dass ihr schnell zu jeder beliebigen Vorversion zurück wechseln könnt. Wir wissen alle, wie Kunden manchmal sind. Diese Versionierung läuft vollautomatisch ab, ihr braucht euch um nichts zu kümmern. Solltet ihr mit einem Mac arbeiten, kann InVision Sync, ein kleines Helferlein für die automatische Synchronisation den Workflow noch einmal spürbar beschleunigen.

Das folgende kurze Video erläutert das Feature einprägsam:

Ende August hob InVision ein weiteres Highlight aus der Taufe. "" heißt das neueste Feature. Damit lassen sich interaktive Prototypen direkt in Dienste wie Trello, Basecamp oder Slack integrieren. Spezielle Shortcodes für jeden unterstützen Dienst müssen bloß aus- und wieder einkopiert werden. Einfacher kann man sich die Vorgehensweise nicht vorstellen.

InVision: Live Embed InVision: Kostet nix, wenn...

InVision könnt ihr vollkommen kostenlos nutzen. Das gilt jedenfalls, solange ihr nur ein einziges Projekt zur gleichen Zeit damit bearbeiten wollt. Der entsprechende Tarif trägt den sprechenden Namen Free Plan. Wenn ihr bis zu drei Projekte anlegen wollt, so benötigt ihr mindestens den Starter Plan für 15 Dollar monatlich oder 156 Dollar jährlich.

Der Haken an der Sache ist, dass ihr weder mit Free, noch mit Starter die Premium-Features des Dienstes nutzen könnt. Und das sind die eigentlich attraktiven Assets, nämlich die Versionierung, das Dateimanagement, der PDF-Export, das Einbinden der Prototypen auf Dritt-Websites oder der Download der Prototypen für die Offline-Verwendung. Wenn ihr auf diesen Packen Funktionalität Wert legt, ist der Professional Plan eure erste Wahl. Dieser kostet denn auch 25 Dollar im Monat, respektive 264 Dollar im Jahr. Das klingt auf den ersten Blick nach einem Haufen Geld, ist aber sicherlich schon mit einem einzigen mittelgroßen Projekt kostenmäßig abzudecken und bezahlt sich letztlich durch den eingesparten Aufwand mehr als selbst.

InVision: Activity Feed Teams von bis zu fünf Designern können noch etwas sparen, indem sie den Team Plan für 100 Dollar monatlich oder 1.080 Dollar jährlich buchen. Hier spart man letztlich den fünften Mann komplett, im Vergleich zu fünf Professional Plänen.

InVision kann prominente Testimonials vorweisen, darunter Adobe, Evernote, Yahoo, Zendesk, EA und etliche weitere, vor allem in jüngster Zeit zu Ruhm, Ehre und Geld gelangte Startups.

InVisions TETHR: Sehr umfangreiches Kit für die Erstellung von iOS-Oberflächen gratis

Sehr erwähnenswert ist auch das jüngst veröffentlichte Kit für die Erstellung von Benutzeroberflächen für iOS-Geräte, das auf den einprägsamen Namen TETHR hört. TETHR ist unabhängig davon, ob ihr euch spontan für InVision selber erwärmen könnt oder nicht, komplett kostenlos für jedermann verwendbar. Das UI-Kit wurde von im Auftrag von InVision erstellt. Der Nutzung sind keine Grenzen auferlegt. Den Wert des Kits gibt InVision mit 80 Dollar an. Der Download lohnt sich aber nicht nur wegen des ersparten Geldes.

Der Lieferumfang des iOS-Kits ist riesig. Ihr erhaltet 8 PSD-Dateien mit den voll editierbaren Rohdaten, sowie 138 verschiedene Templates mit mehr als 250 Einzelelementen. Um TETHR zu erhalten, müsst ihr InVision eine funktionierende E-Mail-Adresse verraten, da der Downloadlink dort hingesendet wird. Bringt dabei etwas Geduld mit. In meinem Falle dauerte es immerhin fünf Minuten, bis ich den Link in meiner Inbox vorfand. Sowas ist man ja in Zeiten des Echtzeit-Web mit Pubsubhubbub und Konsorten gar nicht mehr gewohnt. Weitere Verpflichtungen geht ihr nicht ein. Der Download bringt stattliche 217 MB auf die Waage.

Selbstverständlich arbeitet TETHR mit der InVision App zusammen. Der interaktive Prototyp auf der TETHR-Website zeugt eindrucksvoll davon. Aber nochmal, ihr benötigt InVision nicht, um TETHR nutzen zu können.

Zusammenfassung für Eilige

InVision ist eine der besten Lösungen für alle Designer und Developer von Web- oder mobile Apps, die nicht die alleinige Hoheit über das Look and Feel ihres Produkts haben. Und zumindest den Kunden als weiteren Einflussfaktor haben wir ja alle. Sobald ihr mit mehreren Personen in Diskussionen über die richtige Gestaltung, die richtigen Texte und was nicht alles treten müsst, wird InVision euch die Arbeit massiv erleichtern. Neben dem Design-Prototyping deckt InVision die komplette Kommunikation und übrige Kollaboration, etwa das Dateimanagement vollständig ab. Dabei arbeitet es auch mit Photoshop, Illustrator, Sketch oder eurem persönlichen Favoriten zusammen. Wer sich nicht scheut, ein paar Dollar für ein Premium-Werkzeug zur Unterstützung des Design-Workflows auszugeben, findet derzeit nicht so leicht etwas besseres als InVision.