queo blog

Alternativen zur Adobe Creative Cloud – Screendesign

Mit dem Abozwang des Marktführers drängt sich die Frage auf, ob man denn als Designer dem Giganten Adobe irgendwie den Rücken kehren und stattdessen auf andere Kaufsoftware oder gar Open-Source-Tools umsteigen kann. Hierüber ist schon einiges geschrieben worden, z.B. hier oder hier. Ich möchte dieses Thema aber aus meiner ganz eigenen Sichtweise betrachten. In meiner Position als Junior Art Director für Interactive Design bei queo entwerfe ich haupsächlich Designs für statische und responsive Websites und Apps. Dafür verwende ich aktuell hauptsächlich Photoshop. Wenn ich nun aber herausgefordet werde, eine Adobe-ferne Alternative zu finden, warum dann nicht gleich auch mal die eigenen Wünsche und Anforderungen an das Werkzeug auf Basis aktueller Workflows und technischer Möglichkeiten überdenken und vielleicht auch in eine ganz andere Richtung gehen?

Ich wünsche mir ein Tool, das Charakteristiken eines Layoutprogramms aufweist, vergleichbar mit InDesign. Am Ende soll aber kein PDF herauskommen. Es soll ja nichts gedruckt werden, sondern eine Website entstehen. Ich möchte, dass das Resultat praktisch ist, vielleicht fallen am Ende automatisch schon alle benötigten Grafiken raus, besser noch, es entsteht bereits ein funktionaler Designprototyp in optimiertem HTML/CSS, für den Kunden zum angucken oder rumklicken, für die Entwickler zum weiterverwenden.

Photoshop als Status quo

Für Screendesign-Anforderungen stellt Adobe ja eigentlich Fireworks bereit. Ich habe auch schon gehört, dass es Leute und Agenturen geben soll, die dieses Programm tatsächlich benutzen. Die meisten Designer in meinem Umfeld sind damit aber nie warm geworden. Ich persönlich konnte mich damit auch nie anfreunden. Stattdessen nutzte und nutze ich dafür größtenteils, wie bereits erwähnt, Adobe Photoshop (wie auch ein Großteil der Designer und Agenturen, mit denen ich bisher Kontakt hatte).

Dadurch wird mit dem PSD-Format ein Quasistandard für Screendesigns definiert. Es existiert ein Austauschformat für die Zusammenarbeit mit externen Agenturen und Freelancern (auch wenn der Austausch von PSD-Dateien verschiedener CS- und CC-Versionen immer wieder Probleme aufwirft). Ein weiterer Grund, warum ich persönlich Photoshop verwende, ist sicherlich meine Ausbildung, in der ich Photoshop als DAS Tool für Webdesign kennenlernte.

Das ist es aber gar nicht. Photoshops größter und wichtigster Anwendungszweck ist die Erstellung und Bearbeitung digitaler Bilder. Die andauernde „Fehl“-Verwendung für Designzwecke hat über die Jahre dazu geführt, dass immer mehr Werkzeuge und Features hinzugefügt wurden, um auch diesen Anwendungsfall zu unterstützen.

Der aktuelle Workflow und was daran stört

So erstelle ich nun regelmäßig mit einem Bildbearbeitungsprogramm pixelgenaue Mockups von Internetseiten, die dann dem Kunden präsentiert werden. Der nimmt sie im Idealfall ab und der Entwickler setzt sie 1:1 in HTML und CSS um. Damals, als die meisten Nutzer noch mit relativ homogenen Bildschirmgrößen und vergleichbaren Auflösungen arbeiteten, legte man sich auf eine Standardbreite von 960 Pixeln für eine Webseite fest. Somit wurde sichergestellt, dass auch Nutzer an einem 14-Zoll-Monitor mit einer SVGA-Auflösung (1024 x 786 Pixel) die Seite optimal und bildschirmfüllend betrachten können. Für die wenigen Privilegierten mit einem besseren Anzeigegerät wurden einfach Ränder hinzugefügt.

Diese Zeiten sind nun schon seit geraumer Zeit vorbei. Abgesehen von immer besser werdenden „echten“ Monitoren wollen nun schon seit einigen Jahren eine Vielzahl verschiedener mobiler Geräte beim Screendesign Beachtung finden. Es gibt inzwischen ganz unterschiedlich große Bildschirme mit genauso unterschiedlichen Formaten und Pixeldichten. Ein iPhone 5s z. B. hat im Landscape-Format (Querformat) eine Breite von 1136 Pixeln (auf ca. 8,85 cm). Das heißt, sie zeigen mehr Pixel an, als der genannte „Standard“-SVGA-14-Zoll-Monitor, der für die 1024 Pixel immerhin ganze 28,5cm Platz hatte.

Bildschirm-UEbersicht

Einige unserer Anzeigegeräte werden also physisch immer kleiner und haben trotzdem immer mehr Pixel zur Verfügung. Auch physisch große Displays, wie reguläre TFTs und Fernseher, arbeiten mit immer höher werdenden Auflösungen, die sich mit einer auf 960 Pixel Breite optimierten Website nicht mehr so richtig zufrieden geben wollen.

Anforderungen an einen moderneren Workflow

Modernes Webdesign muss auf eine Vielzahl von Ausgabemedien reagieren können (Stichwort „Responsive Design“). Dazu kommt noch, dass durch HTML5, CSS3 und Javascript im Web heute eine ganze Menge mehr möglich ist als vor 5 Jahren. Webseiten werden zu Webanwendungen. Statt statischer Seiten finden wir überall subtile bis aufwändige Animationen, dynamische geladene Inhalte, etc. Auch diese müssen konzipiert und gestaltet werden, um ein konsistentes Gesamtbild und eine optimale User Experience zu gewährleisten. Diese Anforderungen kann Adobe Photoshop nicht mehr vollständig abdecken. Anders gesagt: starre Mockups können dem Kunden nicht wirklich den Eindruck liefern, wie sich die Website letzenendes „anfühlen“ wird. Aber gibt es überhaupt ein Werkzeug, das da Abhilfe schaffen kann?

„MACAW“ – Vorstellung einer Alternative

Einen, wie ich finde, sehr interessanten Ansatz verfolgt das Web-Design-Werkzeug MACAW, dessen Macher mit dem Slogan: „Stop writing code, start drawing it.“ werben.

MACAW

„Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It’s time to expect more from a web design tool.“ Und? Macht das nicht auch Adobe Dreamweaver? Naja, er sollte es. Aber einerseits ist dort der WYSIWYG-Editor nicht mal im Ansatz ein Designwerkzeug bzw. das, was ich davon erwarte und andererseits ist der Code, der von Dreamweaver generiert wird, bekanntlich nicht wirklich zu gebrauchen. Aus diesem Grund benutzt ihn ja auch kaum jemand.

MACAW verspricht nun, alles besser zu machen und schaut man sich die umfangreiche Dokumentation an, scheint das auch zu funktionieren. Auf den ersten Blick begeistert es mich sehr, was ich da sehe. Funktionen und Möglichkeiten, von denen ich seit Jahren träume, finden sich auf der Liste der Features, von denen ich ein paar hier kurz benennen möchte:

  • MACAW hat ein eingebautes Grid-System. Ich muss mir also nicht irgendein schlecht bedienbares Plugin dafür instalieren oder das ganze mühsam mit Hilfslinien selbst bauen. Dokumentation: Grid
  • Eine Art „Absatzformate plus“. MACAW nennt sie „Global Styles“ und man kann sie in etwa mit Zeichen- und Absatzformaten in Indesign vergleichen. Dabei sind sie aber nicht auf Text begrenzt sondern generell für alle Elemente der Website anlegbar. Solche Funktionalitäten kann man sich zwar auch in Photoshop über Stile und seit CS6 auch für Schrift anlegen, in MACAW geschieht das jedoch alles auf Basis von CSS-Styles und ist somit für die Webanwendung optimiert. Dokumentation: Global Styles
  • Blindtexterzeugung à la Zen Coding oder Emmet. Ich brauche eine Textbox mit Blindtext. Dazu navigiere ich normalerweise im Netz zu einem entsprechenden Generator, wähle eine bestimmte Zeichen- oder Wortzahl und kopiere den Text in meine Photoshopdatei. Mit MACAW ziehe ich mir eine Textbox auf, tippe „lorem3w“, drücke Enter und ein Blindtext mit 3 Wörten ensteht (analog „lorem3p“ für 3 Absätze).Dokumentation: Text
  • Ich kann mein Design direkt in HTML/CSS veröffentlichen. MACAW soll validen HTML- und CSS-Code ausgeben. Ich habe das noch nicht getestet, aber wenn das wirklich so ist, könnte ein Entwickler optimalerweise damit gleich weiter arbeiten, und z.B. Grundgerüst und Styling (CSS) für die Umsetzung in einem CMS wie WordPress oder Typo3 verwenden. Dokumentation: Publishing

MACAW hält noch eine Vielzahl an Möglichkeiten bereit, die ich hier jetzt nicht alle aufzählen werde. Bei Interesse kann sich natürlich jeder selber auf der Website informieren. Ich muss gestehen, dass ich aktuell, dank vieler laufender Projekte, Barcamps und Konferenzen, noch keine Zeit gefunden hab, das Tool ausführlich zu testen. Das möchte ich aber schnellstmöglich nachholen, um herauszufinden, ob es auch wirklich halten kann, was es verspricht. Sollte das erstaunlich gut, furchtbar enttäuschend oder in irgendeiner anderen Weise interessant werden, werde ich bestimmt hier im Blog einen Erfahrungsbericht hinterlassen.

Eins noch: Solche Tools können natürlich Photoshop nicht völlig ersetzen. Wir erinnern uns: Der eigentliche Anwendungszweck von Photoshop ist Bildbearbeitung. Auch davon benötigen wir im Design eine ganze Menge und genau dabei hilft z. B. MACAW nicht. Alternativen zu Adobe für diesen Bereich und auch für Vektor- und Printanwendungen sind Themen zukünftiger Blogartikel.


One thought on “Alternativen zur Adobe Creative Cloud – Screendesign

  1. Vielen Dank für diesen Artikel, insb. Ein Blick auf Macaw lohnt wirklich unbedingt. Falls ich nicht noch irgendwelche großartigen Unwegbarkeiten feststelle, habe ich meinen PS Ersatz gefunden (wie du richtig sagst kein wirklicher Ersatz, für Grafiken ein Muss..).

    Ich habe nun einen Prototypen umgesetzt und viele tolle Aspekte entdeckt, wie z. B. das gesamte Bedienkonzept. Im Grunde funktioniert alles so wie man sich das vorstellt. Alles sehr schlank gehalten, wunderschöne GUI. Die Integration des Responsive Features ebenfalls sehr gelungen.

    Nachteile sind leider auch einige gravierende aufgetaucht … aktuell habe ich bei einem noch überschaubarem DOM-Tree zu oft peeformance Probleme, was so weit geht, dass nur noch STRG ALT ENTF hilft. Bliebe das so, wäre Macaw aus dem Rennen, ich hoffe auf Besserung.
    Weiter funktionieren die Statusse bei bei mir überhaupt nicht. Was reine CSS Dropdown Menüs … oder sonstige interaktivität doch stark beschränkt.

    Was auch unverständlich ist … gibt man 2 Elementen die selbe Class, wird nicht der gleiche Style angewendet. Dies geht scheinbar nur über die Global Styles, welche ..auch bei ausgefuchster Benennung, mit zunehmender Zahl unübersichtlich werden.

    Das floating von Elementen gestaltet sich hin und wieder ebenfalls schwierig, man wünscht sich oft einfach schnell die Stylesheets manuell anpassen zu können. Dies geht allerdings erst nachdem man die seite denn generiert hat, sämtliche Anpassungen des generierten Codes gehen beim nächsten „publishen“ verloren.

    Fazit: Ich hoffe da wird noch fleißig dran gearbeitet, ich sehe da schon ein irres Potential drin. Ist das erstmal rund… traumhaft. Und … ein großer Pluspunkt.. es ist nicht Adobe. Keine verfluchte CC.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.