Der erste Wurf
Konzepte aufsetzen, ausprobieren, verfeinern und präsentieren oder die User Experience testen: Mit interaktiven Prototyping-Tools ist all das schnell und einfach möglich. In PAGE 09.2014 sprachen wir unter anderem mit Webentwickler Simon Widjaja über Adobe Edge Reflow.
Konzepte aufsetzen, ausprobieren, verfeinern und präsentieren oder die User Experience testen: Mit interaktiven Prototyping-Tools ist all das schnell und einfach möglich. Zudem eignen sie sich hervorragend als Produktionsvorlage. In PAGE 09.2014 befragten wir Konzepter, warum sie eine bestimmte Klickdummy-Software favorisieren.
Hier lesen Sie das Interview mit Webentwickler Simon Widjaja, der die Preview von Adobe Edge Reflow auf ihre Fähigkeiten als Prototyping-Tool hin geprüft hat.
Adobe Edge Reflow
Simon Widjaja, Dipl. Creative Media Designer und Webentwickler aus purer Leidenschaft in Köln, schwört auf das Responsive-Design-Framework Edge Reflow. Bisher ist es erst in einer Preview-Version erhältlich, doch schon bald soll es unter dem Motto »Designing in the browser« auf den Markt kommen
Wie schnell lernt man Edge Reflow?
Simon Widjaja: Die Benutzeroberfläche von ist intuitiv und überschaubar, da das Tool nur einen einzigen Usecase im Visier hat: Entwürfe für responsive Layouts. Entsprechend richtet sich Edge Reflow primär an Konzepter und Designer, die sich nicht in Code ausdrücken wollen und können. Wer täglich viel Zeit in den Adobe-Tools verbringt, findet sich also schnell zurecht. Da Photoshop als Asset-Lieferant nahtlos in Edge Reflow integriert ist und bereits in nahezu jedem Designprozess eine zentrale Rolle spielt, kann man vorhandenes Wissen zumindest bei der Asset-Produktion direkt einsetzen.
Wie viel Programmierung ist nötig?
Edge Reflow richtet sich an die nichtprogrammierende Zunft. Dennoch ist man eindeutig im Vorteil, wenn man über grundlegendes HTML- und CSS-Know-how verfügt.
Und der Preis?
Aktuell ist die Edge-Reflow-Preview jenseits der 30-Tage-Testversion nur als Bestandteil der Adobe Creative Cloud erhältlich. Setzt man bereits die aktuellen Versionen von Photoshop, Illustrator oder InDesign ein, hat man ohne weitere Zusatzkosten auch Zugriff auf Edge Reflow. Wie teuer das Einzel-Abonnement nach dem finalen Release ist, bleibt abzuwarten.
Kann man den Code weiterverwerten?
Da man bereits während der Designphase valides HTML/CSS produziert, gibt es dafür verschiedene Möglichkeiten. So lassen sich beispielsweise sämtliche CSS-Eigenschaften eines Elements samt dazugehöriger Media Queries einsehen und mit einem Klick kopieren, um sie dann händisch in ein reales Projekt zu kopieren. Darüber hinaus bietet Edge Reflow die Möglichkeit, das gesamte Projekt in Code-Form abzuspeichern. Da dieser Code jedoch bisher alles andere als optimal ist, muss man hier das finale Release abwarten.
Was sind die Vor- und Nachteile von Edge Reflow?
Seine primäre Stärke liegt sicherlich darin, dass der Konzepter vom ersten Klick an auf einer realen Browseroberfläche gestaltet. Damit ist das Endergebnis in jedem Fall browserkompatibel. Dank der nahtlosen Integration von Edge Inspect können auch Responsive-Design-Laien unkompliziert und unmittelbar Zwischenergebnisse auf realen Mobilgeräten testen.
Gravierende Schwächen zeigen sich, zumindest in der Preview, eindeutig bei der Code-Qualität. Beispielsweise werden aktuell zur CSS-Referenzierung ausschließlich IDs anstelle von Klassen verwendet, was in realen Projekten ein No-Go ist. Doch für die Erstellung von Konzepten und Prototypen ist dies eher irrelevant.
Mehr zum Thema Interactive Prototyping finden Sie in PAGE 09.2014 im PAGE-Shop!
Das könnte dich auch interessieren
