Hey, Hi und Hallo.

Wir haben alles getestet: Handgezeichnete Scribbles & Wireframes, starre Photoshop-Layouts, InVision, Macaw, Webflow, Edge Reflow und Muse von Adobe. Keins der Prototyping-Tools macht uns bis hierhin wirklich glücklich. Ist Project Comet unsere lang ersehnte Rettung?

Worum geht es: Websites und ihr Verhalten sollen so früh es geht erlebbar werden. Sowohl Kunden als auch Entwickler sollen direkt sehen können, wie sich der Screendesigner die Website vorstellt. Und vielleicht am wichtigsten: Der Screendesigner selbst kann mithilfe der Tools einzelne Usecases nachverfolgen und die eigene Gestaltung hinsichtlich Usability und Verhalten auf verschiedensten Endgeräten überprüfen und testen.

Aber was taugen die aktuellen Produkte? Sparen sie uns am Ende wirklich Zeit und damit Geld? Vereinfachen Sie unsere Arbeitsweise? Machen Sie uns effizienter? So einfach diese Fragen sind, so schwer ist es sie zu beantworten.

Wir sagen: Erst Sinn und Zweck vereinbaren. Dann ein Tool wählen.

Der Platzhirsch Photoshop

Mit Photoshop werden die händischen Skizzen reingezeichnet und digitalisiert. Die Dateien gehen danach an unsere Entwickler und die wiederum bauen die Bilder in Buchstaben um – einfach gesprochen. (Kundenrunde, Diskussionen, Abstimmungen etc. wurden hier bewusst rausgekürzt) Das erfordert aber viel Zeit und oft muss Rücksprache gehalten werden. Klar – Coder können nur selten in die Köpfe von kreativen schauen und wissen dann nicht, wie sich etwas bewegen oder verhalten soll. Außerdem bedeutet es für einen Screendesigner einen immensen Zeitaufwand zig Versionen jeder einzelnen Unterseite zu gestalten: Großer Bildschirm, normaler Desktop, kleines Laptop, Tablet quer, Tablet hoch und Smartphone (und ggf. noch weitaus mehr…). Wie gesagt: Zeitaufwändig, langsam und es bedarf einiges an Geld, bis der Kunde das erste klickbare Erlebnis sieht.

Das UX-Design mit Invison überprüfen?

Beim UX-Design geht es nicht um das bloße Anordnen von (vielleicht klickbaren) Flächen und Elementen, deren Hover-Zustände und Animation – sondern hauptsächlich darum, wie der Benutzer durch und über die Website oder App geführt wird. Dafür ist Invision großartig. Aus den einzelnen (in Photoshop oder Sketch) gestalteten Screens können komplette Dummys gebaut werden, die man im Team (also auch mit dem Kunden) besprechen kann. Die Kommentarfunktion hilft Probleme frühzeitig zu erkennen und gemeinsam zu lösen. So hilft Invison dabei den „Benutzungs-Ablauf“ zu optimieren.
Wo Invision aber schnell an seine Grenzen stößt ist, wenn es darum geht, das Verhalten einer responsiven Website darzustellen. Jede Bildschirmgröße braucht einen eigenen Usecase, einfache Design-Änderungen bedeuten oft wieder komplett von vorne beginnen zu müssen. Und vernünftige Animation fällt leider auch aus.

Mit Reflow und Macaw responsive Websites gestalten?

Relativ neu auf dem Markt ist Macaw. Ähnlich wie auch Edge Reflow von Adobe ist Macaw eine Art leichtes Photoshop speziell für’s Webdesign. Besonders schön dabei: Am Ende kommen nicht nur Bilddateien raus, sondern auch Code. Der ist bei Macaw passabel, bei Edge Reflow eher zum in die Tonne treten. Aber auch wenn der Code noch nicht das Wahre ist, gefällt uns der Ansatz gut. Der Webdesigner kann das Verhalten der Website bestimmen. Dem Kunden kann man so schon früh klickbare Dummys präsentieren. Diese passen sich – und das ist ein gewaltiges Plus – an die Breite des Browserfensters an. Die Programme erlauben es uns Break-Points zu definieren, an denen das Layout umspringt. Am Ende gibt es also responsive Webdesign direkt ab der Grafik-Abteilung – und das bereits schon relativ früh im Projektablauf.

Naja. Fast zumindest. Denn auch diese Programme haben deutliche Defizite: Animationen sind kaum bis gar nicht umsetzbar. Das heißt wiederum, dass mit relativ hohem zeitlichen Aufwand ein fluides Layout gestaltet wird, am Ende aber weder Kunde noch Entwickler klar ist, wie sich Schaltflächen, Übergänge oder Elemente wie Akkordeonboxen verhalten sollen. Also muss doch wieder die Entwicklungsabteilung ran, den Code entschlacken, umschreiben und die Funktionen einbauen, die sich der Konzepter und/oder Screendesigner ausgedacht hat. Das bedarf wieder viel Rücksprache und man sitzt erneut zusammen vor dem Bildschirm; eine Kommentarfunktion gibt es ja nicht. Nicht, dass gemeinsames Besprechen nicht unser Ding ist, ganz im Gegenteil. Nur kommen wir so immer wieder nicht zielgerichtet weiter und sprechen über unnötig verkomplizierte oder auch nicht machbare Dinge.

Mit Muse Animation gestalten?

Bei Animation schlägt jetzt die Stunde von Adobe Muse. Theoretisch. Parallax, Hover-Zustände, Animationen… Wenn es blinkt, sich bewegt oder sonst was die Aufmerksamkeit des Users auf sich ziehen soll, dann ist Muse ein tolles Programm. Leider spuckt Muse am Ende des Tages aber weder responsive Websites aus, noch ist der Code zu gebrauchen. Eine Kommentarfunktion sucht man auch hier vergebens. Da sind wir wesentlich schneller, wenn man alles grob skizziert und dann mit Links zu codrops oder GitHub anhänge. Dann versteht nämlich die Gattung Coder auch klar, was der Screendesigner will, bekommen direkt Codeschnipsel, die ihnen das Leben einfacher machen und wir wissen, dass es so umgesetzt werden kann, wie wir uns das vorstellen.

Allzweckwaffe Webflow?

Nicht ganz. Auch hier steht mehr die Reinzeichung als das Prototyping an sich im Vordergrund. Der Umfang ist größer als bei Reflow und Macaw und der Funktion für das Gestalten von responsiv Websites ist auch mächtig. Das beste aber: Webflow kann animieren. So richtig!
Über die Qualität des Codes wissen wir aktuell noch nicht wirklich viel – bislang hatte noch keiner unserer Entwickler die notwendige Zeit, sich das mal genauer anzusehen. Von dieser Ungewissheit aber abgesehen ist Webflow ein großartiges Tool für den Desingprozess –  aber als Prototyping-Tool wieder nicht unbedingt zu gebrauchen: Durch den wahnsinnigen Funktionsumfang braucht es einerseits eine Weile, bis man sich überhaupt eingearbeitet hat und andererseits ist man für unseren Geschmack zu schnell im Bereich des grafischen Reinzeichnens. Und das ist an der Stelle eines Projekts noch gar nicht nötig und lenkt die Ressourcen unnötig in nicht zielgerichtete und projektdienliche Bereiche. Leider fehlt uns auch hier die Kommentarfunktion wie es sie z.B. in Invision gibt, die das gemeinsame Denken ermöglicht.

Denn wir meinen: Wenn sich alle Beteiligten früh im Prozess ein klareres Bild vom Gesamten schaffen können, ist die Kommunikation einfacher und man findet schneller zu passenden Lösungen. Das bedeutet weniger Korrekturschleifen und spart uns Zeit und dem Kunden bares Geld.
Insofern ist der Prototyp der schnellste Weg zur Gewissheit.

Adobes Project Comet – Der aufstrebende Stern am Himmel der Tools?

Neulich sind wir über das Project Comet von Adobe gestolpert. Im Blog von Adobe wird Comet als stabiles UX-Design-Tool für 2016 angekündigt. Das Beste daran ist, dass in einem Tool auf verschiedenen Zeichenflächen sowohl Design als auch Prototyping zusammengefasst werden. Der Sprung von Photoshop oder Sketch in Invision würde also entfallen. Was hier so schön klingt ist aber noch nicht einmal das Ende der Fahnenstange. Es gibt die Möglichkeit gemeinsam an Projekten zu arbeiten und zu kommentieren. Außerdem finden wir das Feature ziemlich schnieke, dass man Änderungen am Design live auf Endgeräte (z.B. Smartphones) ausspielen kann. Wir ändern also am Arbeitsrechner das Design und unser Smartphone zeigt uns gleichzeitig die Änderung im Prototyping-Modus an.

Außerdem – auch das ist unserer Meinung nach ein großes Plus – soll es möglich sein, einzelne Elemente direkt in Photoshop oder Illustrator zu bearbeiten oder anzupassen, sowie PSD-Files direkt in Comet zu öffnen.

Ob Adobes Project Comet am Ende aber sogar HTML und CSS ausgibt, konnten wir bisher noch nicht herausfinden. Wisst ihr dazu mehr? Was nutzt ihr an Tools und – vor allem: wie kombiniert ihr sie? Lasst es uns in den Kommentaren wissen, oder schreibt uns einfach eine Mail.

Prototyping – ein Fazit?!

Bis hierhin haben wir also viel versucht, aber noch lange nicht unser Ziel erreicht; wir suchen noch immer nach der eierlegenden Wollmilchsau. Stand jetzt haben wir für jeden Anspruch ein eigenes Programm oder sogar ein paar verschiedene zur Auswahl. Mit Bedacht eingesetzt kann man so schon wundervolles Web designen und die Gestaltung auch an den Kunden vermitteln. Ob Comet das Programm sein wird, das 2016 alles über den Haufen wirft und uns das Leben vereinfacht? Wir wissen es nicht. Aber wir hoffen, dass das Suchen bald ein Ende haben wird und wir statt gefühlten 10000 Programmen nur noch eines auf dem Rechner haben. That would be so awesome. #awesomeness