Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Arbeiten am Rande der Effizienz

Adobe Fireworks - Plädoyer für den Einsatz mediengerechter Software

Arbeiten am Rande der Effizienz

Obgleich alleine der Name der Software Adobe Photoshop kaum Zweifel daran lässt, welchen Anwendungsbereich der Hersteller für die Software vorsieht, wird sie von vielen Webworkern kurioserweise für das grafische Design von Webanwendungen eingesetzt. Auch wenn mit Fireworks vom selben Anbieter eine dezidierte Software für diesen Aufgabenbereich angeboten wird. Ein pointierter Einblick in den Alltag eines freiberuflichen Designers.

Ich habe dir die Layout-Dateien auf den Server gelegt. Innerlich stutzend, dass der Agenturkollege am Telefon im Plural sprach, lud ich den gezippten Ordner herunter und öffnete ihn. Meine Irritation wich augenblicklich dem Gefühl diffuser Panik. Ich zählte 55 Adobe-Photoshop-Dateien, jede bis zu 50 MB groß. Die Anzahl der Layout-Dateien entsprach damit exakt der Anzahl an Screenshots, die das Pflichtenheft enthielt. Die bis zu hundertzwanzig Ebenen einer einzelnen Datei, verteilt auf bis zur fünf Unterebenen, ließen eine sicherlich gut gemeinte, aber über das gesunde Maß hinausgehende Obsession zur Ordnungsliebe erahnen.

Hastig suchte ich das Angebot, das ich anhand des Briefings an die Agentur geschickt hatte. Meine Ahnung, was die Schieflage der zeitlichen Kalkulation betraf, wurde bitter bestätigt. Nun gut, die Suppe hatte ich mir selber eingebrockt. Ich hatte nicht gefragt, in welchem Format sie die Designs liefern würden. Ich riss eine Seite vom Notizblock ab, notierte mir das völlig ausreichende Stichwort und heftete das Blatt an die direkt neben dem Rechner hängende Pinnwand, von der mir meine ganz persönlichen zehn Gebote jeden Morgen ins Gesicht sprangen.

Illustration: Das elfte Gebot des wirtschaftlichen Überlebens für Fireworks Anwender
Das elfte Gebot des wirtschaftlichen Überlebens für Fireworks Anwender

Omnipräsenz ist nicht gleich Omnipotenz

Glücklicherweise aber waren die Anforderungen des Kunden der Agentur in diesem Fall moderat. Es sollte ein interaktiver Prototyp erstellt werden, der anhand einiger Produkt- und Kategorieseiten beispielhaft die Benutzerführung des neuen Shops veranschaulicht.

Moderat oder nicht: Dies war kein Job, der mit Adobe Photoshop erledigt werden konnte. Das Programm kennt kein Konzept der Seitenverwaltung und lässt alles an Funktionalität vermissen, was Interaktivität auch nur simuliert.

Obwohl Empathie für den Designer wahrscheinlich angebrachter gewesen wäre, konnte ich ein nachdenkliches Grummeln nicht unterdrücken. Darüber, dass so viele Agenturen aufgrund vermeintlich wirtschaftlicher Vorteile oder/und ominöser Hinweise auf existierende Branchenstandards (die man täglich selber mit prägt) Photoshop selbst dort einsetzen, wo offensichtlich geeignetere Anwendungen existieren.

Allzu laute Kritik wäre allerdings regelrecht unanständig gewesen, war ich als Freiberufler doch – wie auch jetzt – oft genug ungewollt Nutznießer dieser Haltung. Mit Adobe Fireworks, das alle für die Aufgabe notwendigen Funktionen und Werkzeuge bereitstellt, würde sich der Protoyp schnell umsetzen lassen. Ich öffnete das Programm.

Neustart

Ein neues Dokument auf Grundlage der Größenvorgaben der Layout-Dateien war schnell angelegt. Zu Anfang erstellte ich mit wenigen Handgriffen ein Grid, dessen Dimensionen auf den Guides der Photoshop-Dateien basierten.

Der nächste logische Schritt war das Anlegen einer Masterseite für den Prototypen. Schon beim flüchtigen Betrachten der Layout-Dateien war mir aufgefallen, dass der gesamte Kopfbereich einschließlich Navigation, die Fußleiste sowie einige Schmuckelemente in jeder Datei identisch waren. Sie waren damit ideale Kandidaten für die Masterseite.

Das Konzept der Seiten und Masterseiten in Fireworks ermöglicht die Abbildung unterschiedlicher Ansichten innerhalb einer einzigen Layout-Datei (vergleichbar dem Prinzip der Musterseiten in Adobe InDesign). Während die Masterseite eine Form der Vorlage ist, repräsentieren Seiten die unterschiedlichen Ansichten eines Layouts. Alle Objekte der Masterseite werden in den Seiten angezeigt, Änderungen an Objekten der Masterseite sind unmittelbar in den einzelnen Seiten sichtbar. Jede Seite hat individuelle Undo/Redo-Stufen und Eigenschaften wie Seitengröße, Exporteinstellungen u.v.m.

Illustration: Konzept der Masterseiten und Seiten in Adobe Fireworkst
Die Objekte der Masterseite (links) werden in allen Seiten (rechts) angezeigt
Illustration: Konzept der Masterseiten in Adobe Fireworks
Änderungen in der Masterseite werden unmittelbar in allen Seiten angezeigt

Ich öffnete eine der Layout-Dateien in Photoshop. Aus gutem Grund richtete sich mein Blick umgehend auf die Ebenenpalette. Dort mussten sie irgendwo zu finden sein – die Objekte, die ich selektieren und kopieren wollte. In der Hoffnung, dass die obsessive Ordnungsliebe des Kollegen dazu geführt hatte, relevante Elemente in jeweils eindeutig benannte Ebenenordner zu gruppieren, scrollte ich durch die Hierarchie der Ebenenpalette. Dankenswerterweise wurde ich nicht enttäuscht…

Fireworks ist auf die Arbeit mit Objekten ausgerichtet.

Was sich wenig spektakulär liest, ist bei genauerer Betrachtung ein großes Plus im Bedienkonzept der Software und unterstützt effizientes Arbeiten außerordentlich. Um ein (oder mehrere) Objekt(e) zu selektieren und zu bearbeiten, bedarf es keiner ständigen Wechsel zwischen Objekt und Ebenenpalette. Der Fokus bleibt auf der Leinwand, auf dem Objekt, mit dem wir arbeiten.

Ein oder mehrere Objekte werden per Mausklick oder mit einem um die Objekte zu ziehenden Rahmen selektiert. Verdeckte Objekte sind mit dem Werkzeug Hintere auswählen unmittelbar auswählbar. Die Eigenschaften selektierter Objekte lassen sich gemeinsam bearbeiten. So ist bspw. möglich, einen Schlagschatten auf beliebig viele Objekte in einem Arbeitsschritt anzuwenden.

Nachdem ich den Ebenenordner gefunden hatte, konnte ich gerade noch den Impuls vermeiden, ihn mit Apple+C kopieren zu wollen (wie ich es in Fireworks gewohnt bin), sondern musste den wenig intuitiven Weg gehen, den Photoshop mir vorgab. Anschließend öffnete ich die neuen Dateien in Fireworks und fügte die Objekte in meine Masterseite ein. Gleiches wiederholte ich mit den weiteren Objekten, die ich in die neue Seite übernehmen wollte. Wieder zurück in Fireworks, konnte ich angenehmerweise wieder die Vorteile eines mediengerechten Bedienkonzeptes nutzen.

Perfekt. Meine Masterseite nahm Gestalt an.

Botox für den Protoypen

Der Projektleiter hatte es im Briefing schon angedeutet: Die Navigationselemente bräuchten deutlich mehr Luft als in den bisherigen Designs zu sehen war und bat mich, dies im Zuge der Prototyp-Erstellung zu berücksichtigen.

Die einzelnen Navigationselemente bestanden aus abgerundeten Rechtecken. Eine einfache Skalierung hätte zur Folge, dass die Rundungen unproportional verzerrt werden. Das in Fireworks enthaltene Werkzeug 9-Slice-Skalierung verhindert genau dies. Entsprechend der im nächsten Schritt anzulegenden Seiten, selektierte ich drei Navigationsobjekte und gab ihnen ein wenig mehr Höhe und Breite.

Illustration: Anwendung des 9-Slice-Skalieren-Werkzeugs
Abgerundete Objekte proportional mit dem 9-Slice-Skalieren Werkzeug skalieren

Nun, da die Masterseite vorbereitet war, legte ich drei neue Seiten an, jede eine exemplarische Ansicht jeweils einer Hauptkategorie, einer Einzelkategorie und einer Produkdetailseite. Das würde für den Prototypen ausreichend sein. Erneut extrahierte ich die relevanten Objekte der einzelnen Seiten aus den Photoshop Dateien; nur das in den Designs verwendeten Bildmaterial sparte ich aus, da ich mit dem Fireworks Plug-in Placeholder deutlich flexiblere Bild- und Filmplatzhalter generieren konnte, die zudem skalierbar bleiben. Ohne die Artefakte, die beim Bearbeiten von Bitmaps entstehen. Auch ließen sich textliche Platzhalter unter zur Hilfenahme des Plugin Lorem Ipsum unkompliziert an umgebene Objekte ausrichten, so dass ich auf eine Übernahme der Textebenen der Designvorlagen ebenfalls verzichtete.

Illustration: Ansichten der  Hauptkategorie, Einzelgategorie und Produktdetailseite
Ansichten: Hauptkategorie, Einzelkategorie, Produktdetailseite

Die Struktur stand also jetzt. Was noch fehlte, waren die Schritte, die aus den bisher statischen Einzelseiten einen navigierbaren Prototypen machen würden. Mit dem nächsten Kaffee, der dampfend neben mir stand, würde dies schnell erledigt sein.

Laufen lernen!

Immer, wenn ich Designs in Fireworks Interaktivität einhauchte, wurde mir der konzeptionelle Unterschied zu Photoshop besonders drastisch bewusst. Die Darstellung verschiedener Zustände eines Objektes, wie es bspw. für Navigationselemente üblich ist, wird in Photoshop über das Ein-/Ausblenden von Ebenen statisch simuliert. Was zu unzähligen Exportdateien führt, durch die sich der Kunde blättern muss. (Inter)aktiv ist hier bestenfalls der Kunde, der auf seinem Rechner Dateien öffnet und schließt, öffnet und…

Ich selektierte meine Masterseite, auf deren Leinwand ich, neben anderen Objekten, die Navigation plaziert hatte, legte mit Hilfe des Segment-Werkzeug für jeden Navigationspunkt klick- und adressierbare Bereiche an und verlinkte sie mit den gewünschten Zielseiten.

Illustration: Anwendung des Segment-Werkzeug
Mit dem Segment-Werkzeug adressierbare Bereiche erstellen

Schon jetzt war es über die in Fireworks vorhandene Vorschau-Funktion möglich, die Seiten in einem Browser zu betrachten und sie über die Navigationspunkte anzusteuern. Um das Ganze visuell ein wenig attraktiver zu machen, definierte ich über die Status-Palette noch einen zweiten Status und änderte in diesem die Textfarbe der Navigationsobjekte. Fertig war der MouseOver-Effekt für die Navigation.

Mit Status können beliebig viele Zustände einer Seite erzeugt werden. Jede Seite hat mindestens einen oder aber beliebig viele Status. Die zwei wichtigsten Anwendungsbereiche sind Simulation unterschiedlicher Ereigniszustände von Navigationselementen und das Erstellen von Animationen. Jeder Status hat individuelle Eigenschaften, wie Geschwindigkeit, Art der Animation etc.

Export

Der Prototyp war damit erstellt. Vor Ort in der Agentur hatte ich mitbekommen, dass der Kunde viel unterwegs ist und seine mobilen Gadgets offensichtlich sehr lieb hat und intensiv nutzt. Neben einer Ausgabe des Protoypen mit der Option HTML und Bilder, exportierte ich ihn aus diesem Grund zusätzlich als interaktive PDF-Datei. So konnte der Prototyp auch auf Geräten betrachtet werden, deren Betriebssystem auf den vermeintlichen Luxus eines Dateisystems verzichteten (wie bspw. Apple iOS). Per E-Mail an den Kunden geschickt, ließ sich der in der PDF eingebundene Prototyp somit – unabhängig von Ausgabegerät und schneller Internet-Verbindung – jederzeit aufrufen und anschauen.

Die Export-Option HTML und Bilder erzeugt anhand der zuvor definierten Segmente (s. Abschnitt Laufen lernen) verlinkte HTML-Seiten und Grafiken. Die nicht interaktiven Bereiche werden als Grafiken exportiert und in die generierten HTML-Seiten eingebettet.

Diese Option ist ideal für den Export eines interaktiven Prototypen, der dem Kunden über eine URL online präsentiert werden kann, eignet sich allerdings nicht als Produktionsgrundlage für die später zu erstellenden Webseite, da Platzhaltergrafiken und ein nicht optimales HTML-Markup generiert werden. Auch basieren die Mouseover-Effekte auf Javascript-gesteuerten Bildwechseln.

In der Produktionsphase der Webseite stehen weitere Export-Optionen und Werkzeuge zur Verfügung. Unter anderem lassen sich CSS-Sprite Dateien sehr einfach zusammenstellen und exportieren. Auch ist es mit Fireworks (ab CS6) möglich, aus den grafischen Objekten CSS-Deklarationen zu erstellen. Das von Fireworks generierte CSS entspricht allerdings, bedingt durch die Veröffentlichungszyklen einer Desktop-Anwendung, nicht in jedem Detail dem aktuellen Stand der Technik. Die Erweiterung CSS Professionalzr behebt dieses spezifische Manko.

Tipp: Die generierte, interaktive PDF-Datei ist je nach Anzahl der enthaltenen Grafiken mitunter recht groß. Unter MacOS X kann die Größe der Datei mit Hilfe des Programms Vorschau und eigener Quarz-Filter deutlich reduziert werden.

Jedem Schuster seine eigenen Leisten

Das herausragende Merkmal von Fireworks ist das Bedienkonzept, dessen Mittelpunkt das Objekt ist. Gerade in Anwendungen wie Fireworks, auf dessen Leinwand eine Vielzahl an Objekten plaziert und gestaltet werden, bedeutet dies eine signifikante Steigerung der Effizienz gegenüber anderen Bedienkonzepten. Programme wie Sketch oder in den Startlöchern stehenden Anwendungen wie Adobe Edge Reflow, die beide einen ähnlichen Anwendungsbereich wie Fireworks abdecken, setzen auf das gleiche Prinzip.

Ich habe oft Kollegen über die Schulter geschaut, die Adobe Photoshop für die Entwicklung von Webdesigns einsetzen. Und war zumeist beeindruckt von der schlafwandlerischen Sicherheit, mit der sie die Software bedienten, ihrer Arbeitsgeschwindigkeit und Kreativität, nicht vorhandene Workflows und Funktionalität zu kompensieren. Wiederholt habe ich im Stillen darüber sinniert, wie sehr gerade diese äußerst fähigen Kollegen davon profitieren würden, eine auf diesen Aufgabenbereich zugeschnittene Software zu nutzen.

Ich kramte in meiner To-Do-Liste. Für den nächsten Tag stand das Composing einer Bild-Collage an. Und ich wusste schon jetzt, welches Programm ich – im Gegensatz zum gerade erstellten Protoyp – für diese Aufgabe nicht nutzen würde: Adobe Fireworks.

Ressourcen

Artikel

Software

Michel Balzer stellt in einem kommenden Artikel nützliche Erweiterungen für Adobe Fireworks vor.

Kommentare

Michael Bleicher
am 07.12.2012 - 00:47

Hallo Olaf,

Sehr guter Artikel. Ich selbst nutze aus Gewohnheit(glaub ich) Photoshop zur Prototypenerstellung und werde nach deinem Artikel diese alte Gewohnheit mal überdenken und mich mehr mit Fireworks beschäftigen. Danke für diesen Gedankenanstoß. Weiter so!

Permanenter Link
Olaf Gleba

Olaf Gleba (Autor)
am 10.12.2012 - 23:30

Hallo Michael,

das freut mich. Aus diesen Grund habe ich den Artikel geschrieben,- als Denkanstoß ;-)

gruss
Olaf

Permanenter Link

Philipp Melab
am 07.12.2012 - 08:18

Hallo!

Der Artikel bringt auf den Punkt was schon die längste Zeit in meinem Hinterkopf herumschwirrt. Als Entwickler bin ich der der tagtäglich am anderen Ende der Produktionskette Designs in ein CMS stampft. Und wie objektorientiert und konsistent der Designer denkt macht gut 30-40% meiner Arbeitszeit aus. Photoshop macht es leider all zu leicht "technische Details" wie Dokumentfluss und Konsistenz zu ignorieren. Und bei einem Design ohne roten Faden und unzähligen Ausnahmebehandlungen werden die Stylesheets immer an irgendeinem Punkt zu unwartbaren Monstern.
Fireworks mag nicht garantieren dass die Probleme verschwinden, und auch mit Photoshop können gut strukturierte Designs erstellt werden. Aber die richtige Denkweise wird gefördert. Und das spart mir Zeit ;)

Ein weiterer Punkt ist dass ich nicht einsehe warum ich eine Menge Geld für eine Photoshop Lizenz zahlen soll, nur um Farbwerte, Schriftgrade und Abstände pixelgenau auslesen zu können. Ein Fireworks HTML-Export ist für mich die viel bessere Basis weiterzuarbeiten.

LG Philipp

Permanenter Link

Gehrhard Heinrich
am 07.12.2012 - 09:51

Guter Artikel, werde meine Screens/Prototypen trotzdem mit Photoshop machen, weil ich da zuHause bin und ein umlernen auf Fireworks für mich im Moment nicht in Frage kommt, vor allem müsste ich den ganzen Workflow im Unternehmen umstellen?

Im Ansatz ist das aber natürlich Richtig!

Permanenter Link

Mario
am 07.12.2012 - 10:27

Hallo Olaf,

besser hätte man es nicht sagen können! Aber, leider wird Fireworks wohl einen langsamen (oder schnellen?) Tod sterben. Adobe hat seit der Übernahme fast nichts dran gemacht und FW wird auch kein „Retina-ready“-Update bekommen. Ich denke, FW CS 6 wird die letzte Version sein.

Auf der anderen Seite werden immer mehr Funktionen in PS eingebaut. Im Vorfeld zum Adobe Event am 11. Dezember habe ich heute morgen ein Video gesehen, was CSS Export in PS CS 6 zeigt.

Sketch ist ein schöner Ansatz, aber solange dort nur .sketch als Dateiformat akzeptiert wird bleibt das eine Insellösung. Kein Im-/Export von .psd, .ai, .eps oder (FW).png.

Was bleibt da übrig, als sich mittelfristig mit PS irgendwie zu arrangieren? Auch wen es eine Horrorvorstellung ist.

Viele Grüße

Mario

Permanenter Link
Olaf Gleba

Olaf Gleba (Autor)
am 07.12.2012 - 13:45

Aber, leider wird Fireworks wohl einen langsamen (oder schnellen?) Tod sterben

Hallo Mario,

ich würde dir gerne vehement widersprechen. Beobachtet man aber, mit welch mangelnder Priorität Adobe seit geraumer Zeit das Programm anfasst (besser: nicht anfasst), kann einem als langjähriger Anwender schon Angst und Bange werden.

Es scheint, Adobe hat trotz großen TamTam doch nur die Hälfte von "Wir können jetzt Web" verstanden. CSS-Export als Funktion innerhalb PS ist hierfür nur ein kleiner, aber bezeichnender Indikator.

Die Crux: Es gibt zum jetzigen Zeitpunkt IMO keine pragmatische Alternative zu FW für die Anwendungsbereiche Interface/Screendesign und Prototyping.

Im Moment bleibt nur Hoffen und Abwarten. Und möglichst laute Öffentlichkeit herstellen.

gruss
Olaf

Permanenter Link

Mario
am 07.12.2012 - 14:12

Hallo Olaf,

Prioritäten gibt es bei denen gar nicht. Hey, das ist Adobe! ;)

Als ich bei Erscheinen der ersten Beta von PS CS 6 nachgefragt habe, ob man jetzt denn mal endlich den Radius von Vectorobjekten im Nachhinein ändern könnte, hat man mich da im Forum überhaupt nicht ernst genommen. Warum das wichtig wäre und wenn ich das wolle, solle ich doch einen Vorschlag machen. Dann würde das Adobe Team das prüfen und evtl. umsetzen. Das könne man mal nicht so eben machen. Aber eine einzelne Person hat Ende letzten Monats ein Script geschrieben, was genau das macht.

Es sind so viele tolle Funktionen in FW enthalten, die man im Laufe der Jahre locker in PS hätte übernehmen können. Wenn man denn FW nicht weiterführen will. Aber was macht man? Man spendiert PS eine Video- Funktion. Es gibt ja auch noch keine Videosoftware von Adobe ...

Permanenter Link

Bertram Simon
am 08.12.2012 - 10:55

Für Photoshopler ist ein Blick auf Brick UI für das Prototyping sinnvoll:

http://www.behance.net/gallery/The-Bricks-UI-Framework/4738409

Permanenter Link

Julian Mengel
am 10.12.2012 - 11:03

Hallo Olaf,

danke für den sehr guten und unterhaltsamen Artikel.
Du sprichst mir aus der Seele.

Ich nutze Fireworks seit ca. 10 Jahren und kann es jedem, der noch mit Photoshop arbeitet, empfehlen sich das Programm genauer anzusehen.

Permanenter Link

Muli
am 11.12.2012 - 13:46

Fireworks ist und bleibt für Webdesign das Maß aller Dinge. Photoshop ist für Bildbearbeitung toll, aber nicht für Webdesign. Da ist es einfach viel zu umständlich.

Permanenter Link

Alex
am 17.12.2012 - 13:21

Fireworks wird keinen Retina Support erhalten -> Fireworks ist tot

http://www.stuffandnonsense.co.uk/blog/about/the_long_goodbye_to_fireworks

Es gibt jetzt Pixelwerte und liquid Layouts in InDesign, eventuell nimmt Adobe das Web jetzt in ihr eigenes Layout-Programm auf und begegnet den Anforderungen agiler Entwicklung (neuer responsive Webdesign Prozess) dort.

Für Adobe war es imho unlogisch zwei Layout-Programme parallel zu entwickeln. Macromedia gekauft, Fireworks aufs Abstellgleis und dort wird's wohl leider auch bleiben.

Permanenter Link

Olaf Gleba
am 17.12.2012 - 14:29

Aus meiner Sicht ist es eher unlogisch, Programme zusammen zu führen, die in ihren Anwendungsbereich nichts miteinander zu tun haben. Im schlechtesten Fall führt das zu einer völlig überladenen Bedienoberfläche und inkonsistenten Weiterentwicklung, die niemanden so richtig zufrieden stellt (stellen kann).

Firmen haben das Recht (und die Aufgabe), ihre Produktlinien selber zu gestalten. Während der Tod von FreeHand damals zwar sicherlich für viele schmerzvoll war, war es doch zumindest kein unlogischer Schritt, da das Portfolio von Adobe eine ähnliches Programm beinhaltete (Illustrator).

Aber Adobe konnte und kann es sich leisten, Hintergründe der geschäftlichen Ziele intransparent zu halten. Sich Marktanteile einzuverleiben und mit dem eingekauften Portfolio Geld zu verdienen (DW, dass einfach das bessere GoLive war) ist ja völlig o.k. Aber noch möglichst Geld aus einer Anwendung zu pressen, deren Tod schon seit etlichen Jahren offensichtlich beabsichtigt war ohne es offen (zeitnah) zu kommunizieren, ist in meinem Verständnis - ich sag mal - unsympathisch.

Ich sehe kein Produkt im Portfolio von Adobe, das das Programm Fireworks kurz- und mittelfristig ersetzen kann. Was Workflow und (für mich ein Qualitätsmerkmal) Fokussierung auf ein Anwendungsgebiet betrifft.

Permanenter Link

Die Kommentare sind geschlossen.