Dieter Petereit 29. September 2014

Webdesign-Beschleuniger InVision: Vom gemeinsamen Prototyping zur Design-Plattform für Teams

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Diese Designsoftware aus der Cloud wird Ihren Design-Prozess auf den Kopf stellen und Ihnen eine Produktivität bescheren, die Sie nicht für möglich gehalten haben. (Moment, das klingt eventuell zu begeistert. Sei’s drum, ich bin begeistert. Invision ist es wert, gelobt zu werden.) Schicken Sie Ihre Entwürfe bislang per E-Mail umher, in der steten Hoffnung, auch nach dem vierten und fünften Hin und Her noch den Überblick zu bewahren, längst wissend, dass das schon seit zwei Versionen nicht mehr so ist? Dann kann Invision Ihre Rettung sein. Denn mit dieser "Software as a Service" erstellen Sie Designs mit Ihrem Lieblings-Pixeleditor und fügen ganz komfortabel Interaktionen hinzu. Dann diskutieren Sie diese Designs mit Kunden, Teammitgliedern, wem auch immer Sie Zugriff geben, erstellen und erledigen Aufgaben, chatten oder sprechen 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 Sie getan…

InVision: Landing Page

InVision: Landing Page

Es war einmal: Webdesign in den Neunzigern

Wer hier langjährig liest, weiß, dass ich schon seit Beginn der Neunziger Websites erstelle. 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...
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. Ja, Sie haben richtig gelesen, Powerpoint, dem 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...

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 expoertierten 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 Ihnen 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 Sie gleichzeitig mit anderen Beteiligten am Projekt visuell arbeiten können. Sie markieren Fehler, bringen Anmerkungen an, erstellen 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önnen Sie 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...

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:

Klicke auf den unteren Button, um den Inhalt von YouTube nachzuladen.
Inhalt laden

PGlmcmFtZSB3aWR0aD0iNTAwIiBoZWlnaHQ9IjI4MSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9VYmRfYVA1Z05NUT9mZWF0dXJlPW9lbWJlZCZ3bW9kZT1vcGFxdWUiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYXV0b3BsYXk7IGVuY3J5cHRlZC1tZWRpYSIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==

Und dieses Video zeigt noch einmal konkreter, wie Invision funktioniert:

Klicke auf den unteren Button, um den Inhalt von YouTube nachzuladen.
Inhalt laden

PGlmcmFtZSB3aWR0aD0iNTAwIiBoZWlnaHQ9IjI4MSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC92ejJseXM0RGdkOD9mZWF0dXJlPW9lbWJlZCZ3bW9kZT1vcGFxdWUiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYXV0b3BsYXk7IGVuY3J5cHRlZC1tZWRpYSIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==

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 legen Sie das Mockup in Ebenen mit den unterschiedlichen Interaktionszuständen ab, indem Sie sich an eine simple Namenskonvention bei der Benennung eben dieser Ebenen halten. Änderungen an der Quelldatei werden synchron umgesetzt.

Einfacher war Prototyping noch nie. Die erforderliche Synchronisation können Sie entweder über die InVision Cloud oder Ihre eigene Dropbox laufen lassen.

InVision: Projektübersicht

InVision: die Projektübersicht

Ein weiteres neues Feature bietet eine ausgewachsene Versionskontrolle. InVision legt für jede Version eine Sicherung an, so dass Sie schnell zu jeder beliebigen Vorversion zurück wechseln können. Wir wissen alle, wie Kunden manchmal sind. Diese Versionierung läuft vollautomatisch ab, Sie brauchen sich um nichts zu kümmern. Sollten Sie 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:

Klicke auf den unteren Button, um den Inhalt von YouTube nachzuladen.
Inhalt laden

PGlmcmFtZSB3aWR0aD0iNTAwIiBoZWlnaHQ9IjI4MSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC92ejJseXM0RGdkOD9mZWF0dXJlPW9lbWJlZCZ3bW9kZT1vcGFxdWUiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYXV0b3BsYXk7IGVuY3J5cHRlZC1tZWRpYSIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==

Ende August hob InVision ein weiteres Highlight aus der Taufe. "Live Embed" 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önnen Sie vollkommen kostenlos nutzen. Das gilt jedenfalls, solange Sie nur ein einziges Projekt zur gleichen Zeit damit bearbeiten wollen. Der entsprechende Tarif trägt den sprechenden namen Free Plan. Wenn Sie bis zu drei Projekte anlegen wollen, so benötigen Sie mindestens den Starter Plan für 15 Dollar monatlich oder 156 Dollar jährlich.

Der Haken an der Sache ist, dass Sie weder mit Free, noch mit Starter die Premium-Features des Dienstes nutzen können. 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 Sie auf diesen Packen Funktionalität Wert legen, ist der Professional Plan Ihre 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

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 Sie sich spontan für InVision selber erwärmen können oder nicht, komplett kostenlos für jedermann verwendbar. Das UI-Kit wurde von UI8 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. Sie erhalten 8 PSD-Dateien mit den voll editierbaren Rohdaten, sowie 138 verschiedene Templates mit mehr als 250 Einzelelementen. Um TETHR zu erhalten, müssen Sie InVision eine funktionierende E-Mail-Adresse verraten, da der Downloadlink dort hingesendet wird. Bringen Sie 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 gehen Sie indes nicht ein. Vor allem wird nicht versucht, Sie zur Eintragung in einen Newsletter-Verteiler zu bewegen. Der Download bringt stattliche 217 MB auf die Waage.

Selbstverständlich arbeitet TETHR ganz vorzüglich mit der InVision App zusammen. Der interaktive Prototyp auf der TETHR-Website zeugt eindrucksvoll davon. Aber nochmal, Sie benötigen InVision nicht, um TETHR nutzen zu können.

Zusammenfassung für Eilige

InVision ist DIE Lösung 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 Sie mit mehreren Personen in Diskussionen über die richtige Gestaltung, die richtigen Texte und was nicht alles treten müssen, wird InVision Ihnen 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 Ihrem 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 nichts besseres als InVision.

Ich wünschte, ich hätte InVision schon vor fünfzehn Jahren gehabt. Ich sähe jetzt jünger aus…

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

3 Kommentare

  1. Naja, DIE Lösung. Schön wäre ein Vergleich, der die Vor- und Nachteile aller dieser vielen und doch sehr ähnlichen Tools herausstellt.

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück