Fireworks Alternativen, Nachfolger von Adobe Fireworks

Fireworks, Dreamweaver, Freehand und Flash wurden ursprünglich von Macromedia entwickelt, später von Adobe aufgekauft

 

Eine alternative Software zu Fireworks war vor ein paar Jahren noch schwer zu finden. Das hat sich in der letzten Zeit radikal geändert.

Als Webdesigner nutze ich Fireworks bereits seit Version 2 von 1999, weil es ein echtes Webdesigntool war. Bis zur Jahrtausendwende war ich auch mal ein enger Freund von Photoshop. Aber schon vor 15 Jahren erforderte eine komplexe Homepage mit vielen Textelementen schnell 100 Ebenen und mehr in Photoshop. Bei Fireworks reichen bis heute normalerweise zwei Ebenen aus. Die Vektorbearbeitung ist überaus präzise, so gibt es in Fireworks z.B. harte und weiche Pixel. Unerreicht sind ebenfalls die komfortablen Bearbeitungsmöglichkeiten von Bitmapgrafiken per Doppelklick. Fireworks wurde dadurch weltweit schnell zu einem Webdesigntool ohne Alternativen. Photoshop ist vor allem für Fotografen und den Printbereich (CMYK-Modus) ein sehr gutes Bildbearbeitungstool, aber für Webdesign aus meiner Sicht nicht sonderlich gut geeignet, auch wenn Adobe das gerne so verkauft. Außerdem ist Photoshop über die Jahre zu einem Dinosaurier mutiert.

Wer mit Photoshop Webdesign machen will, möge dies weiterhin tun. Dieser Beitrag soll kein Vergleich zwischen Photoshop und Fireworks werden, sondern eine reelle Marktübersicht bieten, was Webdesigner -Innen in Zukunft an Designtools erwartet. Denn Fireworks wird von Adobe seit 2013 leider nicht mehr weiterentwickelt. Ein Aufschrei ging damals durchs Internet, erhört wurde er nicht. Fireworks stirbt dadurch einen sehr langsamen Tod. Die Preise für gebrauchte Stand-Alone-Versionen von Fireworks sowie für die gesamte Adobe CS6-Suite steigen seitdem, obwohl das teure Paket von 2012 langsam vergreist. Adobe hat dadurch seinen eigens geschaffenen „Quasi-Webdesign-Industriestandard Photoshop-Fireworks-Flash“ selbst abgesägt. Viele verweigern sich außerdem der wenig Vertrauen erweckenden Cloud: Software mieten – für viel Geld. Man beachte die negativen Amazon Bewertungen.

Darauf haben andere Hersteller natürlich nur gewartet. Sie haben schon ein Jahr später mit ganz neuer Webdesign-Technologie als Alternative zu Fireworks reagiert, die die klaffende Lücke im Bereich Webdesign schließen will. Die ersten Programme wie z.B. Sketch haben sich bereits in der dritten Version als echte Fireworks-Nachfolger bewährt. 2017 erwarten uns noch weitere Fireworks-Alternativen. Auf zu neuen Ufern:

Vectr

Vectr ist neu am Markt und fungiert als „einfacher Illustrator“. Die Grafik-Software wird primär dazu verwendet, um Vektor-Grafiken einfach und intuitiv zu erstellen. Es ist ein einfaches, aber leistungsstarkes Web- und Desktop-Cross-Plattform-Tool, um Webdesigns zu realisieren. Es gibt Browser- und Downloadversionen für alle Plattformen: Zum Download

Figma

Das brandneue „Collaborative Designtool“ läuft direkt im Browser. Den Machern geht es als Schwerpunkt um Zusammenarbeit im Team. Figma bleibt für Studenten kostenlos. Für alle anderen wird es wahrscheinlich ein Subscription-Modell geben. Das Tool ist ziemlich übersichtlich und läuft geschmeidig. Ein großer Vorteil: Sketch-Files können direkt importiert und bearbeitet werden. Figma hinterlässst bei mir einen professionellen Eindruck.

Bohemian Sketch-App

sketch-vs-fireworks

Screenshot Quelle: Sketch

Schon seit längerer Zeit gibt es das bereits etablierte Webdesigntool Sketch, welches ein würdiger Ersatz für Fireworks zu sein scheint, viele Fireworks-Umsteiger nutzen es gern. Sketch übernimmt keine proprietären Adobefiles wie PSDs, AIs usw. sondern funktioniert intern mit webkompatiblen SVGs und exportiert unter anderem PDFs. Eine zusätzliche Windows-Version könnte das Eis zum neuen Standard-Tool im Webdesign brechen. Leider ist Sketch wahrscheinlich auch auf lange Sicht nur für den Mac erhältlich, weil es viele Core-Elemente von OSX nutzt. Das UX-Programm hat auch als Download selbst nur unglaublich schlanke 30 MB und die zahlreichen Updates sind in sehr kurzer Zeit installiert. Noch schöner ist allerdings, dass auch die Arbeitsdateien extrem klein bleiben. Der typische Designentwurf für eine lange Desktopwebsite, eine Tabletversion und ein Mobiledesign in drei Artboards nehmen inklusive des verwendeten Fotomaterials keine 10 MB in Anspruch.

Eine sehr übersichtliche Oberfläche und ein gutes Preis-Leistungsverhältnis erleichtern den Umstieg von Fireworks. Dafür ist das Thema Pixel-Bildbearbeitung noch ein Stiefkind. Das Webdesign-Programm wird sich in Zukunft sicherlich prächtig entwickeln. Interessant ist auch der Artikel „Some early thoughts on Sketch 3“. Es gibt auch eine Trialversion und man findet Berge von Infos, wenn man nach „Fireworks vs Sketch“ googelt. Ein gutes Sketch-Tutorial mit flüssigen, kleinen Videos findet sich unter designcode.io/sketch. Zu den Updates zwischen Version 3 und 3.5 gibt es hier eine gute Zusammenfasung. Umsteiger von Photoshop sollten den Artikel von Joe Norton lesen. Laufend werden hochinteressante PlugIns für Sketch entwickelt – wie z.B. Silverflows oder Protoship.

Nachtrag 2016: Mittlerweile arbeite ich selbst mit der sogenannten „Sketch App“ im Berufsalltag und bin absolut begeistert. Spannend wird sicher noch das Rennen gegen den Affinity Designer (siehe unten), der Illustrator ersetzen will und eine gewisse Pixelbearbeitung bietet, dafür aber weniger direkt für UX, App- und Webdesign ausgelegt ist. Hier ist Sketch derzeit einfach richtig gut!

Nachtrag Juni 2015: Seit Version 3 setzt sich Sketch immer mehr als neuer Webdesign-Standard durch. Viele PlugIns, Tools und Schnittstellen bieten Sketch-Kompatibilität in einem Atemzug parallel zu Photoshop an. Zusammen mit OSX-Yosemite ergibt sich eine äußerst präzise und effiziente Arbeitsumgebung für Webdesigner und App-Entwickler. Zusammen mit dem älteren OSX-Mavericks hatte ich nach den letzten Sketch-Updates alle 2-3 Minuten kurze Aussetzer. War Fireworks 1999 die bahnbrechende Neu-Entdeckung für Webdesigner, ist es 2014 nun Sketch. Es gibt einen sehr interessanten Artikel von Adam Howell dazu – auch für alle Unentschlossenen.

Problematisch bleibt meiner Ansicht nach vor allem der alleinige Focus auf Macs, der Windows- und Linuxuser ausschließt. Nur die Wenigsten werden sich für ein 100,- Euro-Programm einen 1200,- Euro teuren Mac zulegen. Beides zusammen ist aber immer noch  günstiger als Photoshop. Ich habe mittlerweile herausgefunden, dass sich Elemente von Sketch über Copy & Paste im Affinity Designer – und umgekehrt – nahtlos weiter bearbeiten lassen. Der Affinity Designer von Serif ist ein neues, ebenfalls äußerst mächtiges Zeichenprogramm ähnlich Illustrator, das für Webdesigner ebenfalls hochinteressant ist.

Nachtrag November 2015: Es gibt einen exzellenten Artikel aus dem Smashing Magazine zum Thema „Softswitch“ von Fireworks zu Sketch. Außerdem gibt es mittlerweile eine sehr gute Tutorial DVD, um Sketch zu erlernen – mit sonorer Stimme von einem Google-Mitarbeiter moderiert. In English aber gut verständlich.

Macaw

Macaw ist ein weiteres Highlight für Webdesigner. Mit dem Slogan „Stop writing code, start drawing it“ schlägt es in die Kerbe von Adobe Edge und einem einfachen Webdesign-Zeichenprogramm. Laut ersten Tests erzeugt Macaw sehr sauberes, semantisches HTML und CSS. Macaw gibt es als Windows- und Mac-Version. Der Schwerpunkt liegt auf der sauberen Erstellung von Responsive Designs mit einer komfortablen Vorschau für gesetzte Breakpoints.

Nachtrag August 2016: Macaw ist von InVision aufgekauft worden und nun kostenlos als Download erhältlich.

Gravit

gravit-vs-fireworks

Screenshot Quelle: Gravit

Für Windows und Mac wird derzeit das Designtool Gravit entwickelt. Das User-Interface-Tool soll zukünftig eine Menge Eigenschaften von Fireworks ersetzen können. Laut Smashing Magazine wird es bis zur Version 2 kostenlos sein und kann derzeit eher einfache Dinge. Es läuft derzeit schon auch ohne Download direkt in moderen Browsern wie Chrome. Besonders eigent es sich zur Erstellung von Titelbildern für soziale Netzwerke wie Facaebook, Twitter, Yoututube und Tumblr. Die teils kryptischen und sich ständig ändernden Vorlage-Größen sind hier gleich schon als Templates vorgegeben. Nachtrag 2017: Gravit hat sich mittlerweile erheblich weiterentwickelt, siehe designer.io.

Affinity Designer

Affinity Designer

Screenshot Quelle: Affinity Designer, Serif

Noch recht neu auf dem Markt ist der Affinity Designer für Macs und Windows, der schon den Apple Design Award 2015 gewonnen hat. Mit dem Vektor-Tool ist eine schnelle UI-Design-Erstellung möglich – das Zeichenprogramm läuft auf dem Mac butterweich. Auch das Interface sieht vielversprechend aus und erinnert mich etwas an frühere Macromedia-Programme, bzw. funktioniert ähnlich wie der Adobe Illustrator. Außerdem soll eine Bearbeitung von Adobe PSD, AI und SVG-Files möglich sein. Ein erster Test lief bei mir vielversprechend: Das Interface wirkt sehr aufgeräumt, modern, und ist logisch-leicht zu bedienen. Wenn man sich etwas mit Macromedia-bzw. Adobe-Programmen auskennt, findet man sich sehr schnell zurecht, auch viele Shortcuts funktionieren gleich bzw. sehr ähnlich.

Alles läuft sehr flüssig und präzise, auch ein CMYK-Modus ist implementiert. Das Öffnen einer 320 MB großen PSD-Datei funktionierte tadellos, hier konnten auch gruppierte Ebenen bearbeitet werden. Serif bietet dazu ein professionellen Foto- und ein Layoutprogramm ähnlich InDesign an, das eng verzahnt eine logische Suite à la Adobe ergibt… super Sache, wirklich! Obwohl Sketch und Affinity Designer völlig verschiedene UX/UI – Zeichenprogramme sind, war es mir möglich Elemente über die Zwischenablage aus dem Designer direkt in Sketch zu kopieren und dort so weiter zu bearbeiten, als hätte ich sie direkt in Sketch erstellt. Affinity Designer ist für mich  mittlerweile zum Universal-Tool geworden. Ich habe es fast täglich im Einsatz. Der Start von Illustrator dauert gefühlt 10x so lange und die Bedienung finde ich bei Affinity erheblich einfacher.

Nachtrag November 2015: Das smarte Designtool kann seit Oktober 2014 für faire 49,- EUR im Appstore gekauft werden. Der Preis sollte nicht darüber hinwegtäuschen, dass es sich um ein Tool mit professionellem Anspruch handelt. Das Interface und Funktionsabläufe wirken ausgereift und das Programm läuft wirklich schnell. Bugs gibt es natürlich in Version 1.x auch noch. Die ersten Kritiken der Nutzer sind ausgezeichnet. Seit dem Frühling 2015 gibt es  auch schon das Schwesterprogramm Affinity Photo, das als vollwertiger Pixelersatz für Photoshop fungieren wird. Auch hier sind gab es schon viel Lob, noch soll Photoshop für Profis aber leicht die Nase vorn haben. Es handelt sich hier ja um das allererste Release und in Anbetracht der sehr geringen Kosten (noch unterhalb von Photoshop Elements!) ist es sicherlich einen Versuch wert. Mehr Infos und Links

Nachtrag November 2016: Eine Windows-Version ist nun auch erhältlich. Die Mac-Version läuft bei mir derzeit flüssiger, mein Mac Mini ist allerdings auch 3 Jahre jünger und hat einen schnelleren Prozessor. Erfahrungsgemäß erhält die erste PC-Version in der nächsten Zeit noch einige Updates. Affinity Photo gibt es nun übrigens auch für den PC. Wie gesagt, beide Affinity-Tools laufen bei mir im Vergleich am Mac erheblich besser und haben weniger Bugs als unter Windows. Affinity wird sicherlich noch Korrekturen für den PC nachliefern. Sogar eine Tablet-Version ist für 2017 geplant.

Avocode

Avocode verfolgt ein neues Konzept. Es bildet einen nahtlosen Übergang zwischen Webdesign in Photoshop oder Sketch und der meist mühevollen Umsetzung innnerhalb der Programmierung. Avocode generiert nicht automatisch Webseiten, sondern fungiert als Tool zwischen Designern und Programmierern. Es ermöglicht exaktes Messen, Exportieren und intelligentes Teilen und Synchronisieren von Elementen. Es erleichtert den gesamten Website-Produktionsprozeß für Mac, Windows und Linux Nutzer. Zukünftig will der Hersteller noch mehr Designsoftware unterstützen. Avocode kann leider nur gemietet werden, dafür benötigen Programmierer mit diesem Tool als Schnittstelle gar kein Photoshop oder Sketch mehr.

Antetype

„The most efficient way to design beautiful, responsive UIs for apps, websites and enterprise software“ – das verspricht Antetype in der ersten Version allen Mac-Besitzern.

Inkscape

Inkscape ist ein kostenloses Vektor-Zeichenprogramm für Windows und Mac ähnlich Freehand und CorelDraw und soll hier nicht unerwähnt bleiben. Es ist kein richtiges Webdesignprogramm, kann aber durchaus dazu verwendet werden, zumal es z.B. dazu in der Lage ist, sehr saubere SVGs zu erzeugen. Inkscape wird seit Jahren langsam, aber stetig weiterentwickelt.

Pixelmator

pixelmator-vs-fireworks

Screenshot Quelle: Pixelmator

Eher ein schlanker Ersatz für Photoshop, da vor allem für Bildbearbeitung optimiert ist Pixelmator für den Mac. Das Programm ist sehr kostengünstig und kann fehlerfrei auch große PSD-Files mit Filtern bzw. Smart-Objects öffnen und editieren. Auch Vektorbearbeitung ist möglich. Pixelmator ist bereits nach kurzer Zeit auf dem Level von Photoshop-Elements. Es verfügt über gute Reparaturtools für Bildretouchen und kann mit CMYK-Farben umgehen. Das smarte MAC-Programm ist mittlerweile als günstige und praktische Alltags-Alternative zum behäbigen Miet-Dinosaurier Photoshop in vielen Agenturen, Redaktionen und bei Freelancern angekommen. Einziger Kritikpunkt ist das teilweise schlecht zu erkennende Interface mit sehr kleinen Schriften und viele, frei durch die Gegend schwebenden Paletten.

Google Webdesigner und Tumult Hype

Als kostenloses Pendant zu Adobe Edge Animate (dem inoffiziellen Nachfolger von Flash) gibt es zur Animation von Webseiten den Google Webdesigner, der sehr sauberen Code schreibt, aber recht kryptisch zu bedienen ist. Sehr gut gefallen hat mir die Testversion von Tumult Hype. Die Mac-Animationssoftware lässt sich ähnlich bedienen wie Flash. Es gibt zwei Versionen für faire 50,- oder 100,- USD. Die teurere Version erstellt auch responsive Animationen.

Adobe Experience Design CC

Adobe selbst hat ein Cloud-Programm namens „Experience“ für UX-Designer auf den Markt gebracht. Man hat sich wohl von Sketch etwas inspiriren lassen… Ich kennen keinen Webdesigner, der es nutzt. Ich möchte hier nicht näher darauf eingehen, denn es handelt sich wieder um die teure Mietsoftware aus der Cloud für sehr viel Geld, die nach den monatlichen Zahlungen nicht mehr läuft.

Fireworks Ressourcen-Links

So ganz tot ist das Fireworks-Pferd wohl doch noch nicht. Es galoppiert weiter und fällt irgendwann vergessen um – ähnlich wie Freehand. PlugIns, Templates und Tools werden für Fireworks weiterhin entwickelt. Viele davon sind kostenlos erhältlich, so z.B. auch ein SVG-Exportmodul. Als umfassenden Workaround empfehle ich diese Links aus dem Smashing Online Magazine:


> Useful Adobe Fireworks Resources, Part 2
> Useful Fireworks Resources (Extensions), Part1
> The Present And Future Of Adobe Fireworks
> Fireworks SVG Export-PlugIn – Tipp aus dem Berufsalltag!


Mein Favorit

aus allen UX-Design-Tools als würdiger Fireworks-Nachfolger ist eindeutig Sketch. Seit Anfang 2016 nutze ich das Tool regelmäßig im Berufsalltag. Unser Design-Team arbeitet auch sehr gern damit. Die Programmierer sind ebenfalls begeistert, ein weiteres Pixel-Tool zur Bildbearbeitung ist allerdings nötig. Hier habe ich mich mittlerweile für Affinity Photo und den Affinity Designer als „Mädchen für alles“ entschieden.

Sketch Tutorials & Tipps