Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 8. April 2016

Kollaboration: Design-Diskussionen direkt im Browser führen

Kollaboration: Design-Diskussionen direkt im Browser führen

Statt Entwürfe und fertige Layouts vor Ort beim Kunden zu präsentieren, wird immer häufiger der Weg über das Internet genutzt. Wurden Layouts früher gern per E-Mail verschickt, gibt es mittlerweile zahlreiche Tools, die das Präsentieren und Einholen von Feedback, Kollaboration ganz allgemein, vereinfachen. Neben rein grafischen Layouts und Mockups gibt es auch Dienste, die Screenshots von Websites erstellen oder direkt das Kommentieren an realen Websites erlauben. Wir zeigen dir heute vier verschiedene Werkzeuge, mit denen du auf unterschiedliche Art und Weise zum Ziel gelangst.

Kollaboration: Design-Diskussionen direkt im Browser führen

„Live Capture“ von InVision: Screenshots per Erweiterung anfertigen

Die Prototyping-Plattform InVision stellt mit „Live Capture“ eine Erweiterung für Chrome zur Verfügung, mit der du spielend einfach Screenshots von Websites anfertigst, die du verteilen und kommentieren lassen kannst.

invision-live-capture_erweiterung
Screenshot einer Website per Erweiterung erstellen

„Live Capture“ nimmt dazu nicht nur vom sichtbaren Bereich einer Seite einen Screenshot, sondern von der kompletten Seite – und das jeweils in der aktuell im Browser dargestellten Auflösung. Anschließend steht dir der Screenshot in InVision zur Verfügung und du kannst ihn teilen, um ihn in einem Team oder bei Kunden präsentieren zu können.

invision-live-capture_kommentar
Screenshot mit Kommentar versehen

„Live Capture“ erlaubt dir, einen Link zu generieren und diesen zu verschicken. Anschließend können alle, die über diesen Link verfügen und sich kostenlos bei InVision registriert haben, im Screenshot Kommentare hinterlassen. Diese werden dazu einfach an einer beliebigen Stelle im Screenshot platziert.

invision-live-capture_live
Per „LiveShare“ gemeinsam im Screenshot zeichnen

Neben der einfachen Kommentarfunktion gibt es noch die Möglichkeit des „LiveShare“. Hierbei arbeiten mehrere Benutzer gleichzeitig an einem Entwurf und kommentieren und diskutieren ihn gemeinsam. Dazu kannst du beispielsweise mit einem Stift im Layout frei zeichnen und Texte hinzufügen.

Für Mac-User gibt es ein „LiveShare“-Plug-in für Photoshop. Hiermit teilst du deine Arbeitsfläche in Photoshop mit anderen Nutzern.

Die Nutzung von InVision und somit von „Live Capture“ ist für bis zu drei Projekte kostenlos. Mehr Projekte sind für 13 bis 89 US-Dollar im Monat möglich.

Diigo: Feedback für Live-Websites einholen

Wer statt Screenshots lieber an einer „lebenden“ Website arbeitet, sollte sich Diigo einmal ansehen. Dieses Tool erlaubt es dir, direkt an einer Website Kommentare zu hinterlassen – ohne dass zuvor ein Screenshot erstellt wird. Dazu muss ebenfalls eine Browser-Erweiterung installiert werden, die es – zumindest derzeit – nur für Chrome gibt.

diigeo_erweiterung
Per Erweiterung Screenshot und Kommentare erstellen

Nach der Installation erstellst du über diese Erweiterung an einer beliebigen Stelle einer Website einen Kommentar. Hierzu wählst du auf der Website einen Punkt aus, an dem der Kommentar als Notiz hinterlegt werden soll. Alternativ kannst du einen Text auf einer Website markieren und dazu einen Kommentar hinterlassen.

Wie es sich für ein Tool dieser Art gehört, gibt es die Möglichkeit, andere Benutzer einzuladen. So kannst du Projekte für Gruppen freigeben, denen du beliebige Teilnehmer hinzufügst. Alle Teilnehmer einer Gruppe können kommentieren und andere Kommentare einsehen und darauf reagieren.

diigo_kommentar
Kommentare frei auf der Website platzieren und farblich unterscheidbar machen

Natürlich sind die Kommentare nicht öffentlich, sondern nur für bestimmte Teilnehmer sichtbar. Normale Besucher der Website sehen diese nicht.

Einen Nachteil hat das Kommentieren an einer Live-Website. Die Kommentare werden absolut platziert. Bei responsiv gestalteten Websites verschieben sich je nach Auflösung jedoch die Elemente einer Seite. Die Kommentare sind aber immer absolut positioniert und stehen daher häufig nur bei einer bestimmten Auflösung an der richtigen Stelle.

Neben einem kostenfreien Plan gibt es mehrere kostenpflichtige Pläne zwischen 7 und 59 Dollar im Jahr. Die kostenpflichtigen Pläne verzichten auf Werbung und haben zusätzliche Funktionen wie das Durchsuchen der hinterlegten Kommentare.

Marqueed: Umfangreiches Teilen und Kommentieren von Layouts

Marqueed ist nicht spezialisiert auf Websites, sondern erlaubt das Teilen und Kommentieren beliebiger grafischer Layouts. Hierbei lädst du Mockups in gängigen Dateiformaten hoch. Unterstützt werden unter anderem PDF- sowie Photoshop-Dateien. Diese werden nach dem Hochladen in „einfache“ Grafiken umgewandelt. Bei PDF-Dateien werden mehrseitige Dokumente unterstützt. Die einzelnen Seiten sind dabei als einzelne Grafiken dargestellt.

marqueed_hochladen
Layouts in gängigen Formaten hochladen oder Screenhot per URL erstellen lassen

Marqueed kann ebenso genutzt werden, um Websites zu kommentieren. Dazu wird einfach eine URL angegeben, aus der der Dienst automatisch einen Screenshot erstellt. Dieser kann dann wie andere hochgeladene Dateien behandelt werden. Außerdem erlaubt das Tool den Zugriff auf Dateien in deiner Dropbox.


Kommentare erstellen

Maqrueed läuft allerdings nur in zwei Browsern – im Chrome und im Safari. Mit anderen Browsern kannst du den Dienst nicht nutzen.

Bounce: Hochladen und Kommentieren ohne Registrierung

Ganz ähnlich wie Marqueed funktioniert der Dienst Bounce. Auch dieses Tool erlaubt dir, Grafiken hochzuladen oder Screenshots von Seiten zu erstellen. Beim Kommentieren wählst du nicht einen bestimmten Punkt aus, sondern markierst einen rechteckigen Bereich, welchen du mit einem Kommentar versiehst.

bounce_screenshot
Screenshot einer beliebigen Website erstellen

Innerhalb dieser Bereiche kannst du neben einfachem Text Rechtecke, Kreise und Pfeile platzieren.

Im Gegensatz zu den anderen hier vorgestellten Diensten funktioniert Bounce ganz ohne Registrierung. Ohne Anmeldung lädst du Dateien hoch und erstellst Screenshots. Über einen generierten Link teilst du ein Layout mit anderen. Dabei kann jeder Teilnehmer ganz einfach einen Namen angeben, mit dem er sich „ausweist“.

bounce_kommentar
Kommentarbereich definieren und mit Text und grafischen Eleneten füllen

Die Nutzung von Bounce ist kostenlos.

Fazit

Alle vorgestellten Dienste haben ihre Vor- und Nachteile. Die einen funktionieren nur mit Erweiterung oder in bestimmten Browsern. Andere setzen ihren Fokus auf automatisch generierte Screenshots oder auf das Hochladen von Layouts.

Eines haben alle Tools gemeinsam: Sie vereinfachen das Präsentieren und Kommentieren beziehungsweise Diskutieren von Entwürfen in Teams beziehungsweise Gruppen.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.