Photoshop & UX/UI Design: 7 Bildbearbeitungsprogramme, die sich auch eignen

Diese Bildbearbeitungsprogramme heißen Affinity Photo 1.0, Sketch, Macaw oder Webflow und kommen immer häufiger zum Einsatz, um Interfaces zu konzipieren und zu gestalten. Natürlich ist Adobes Schlachtschiff in Sachen Bildbearbeitung nach wie vor das Maß der Dinge.

Aber den Ansprüchen zeitgemäßen Interaction Designs wird es nicht mehr gerecht. Dafür war es allerdings auch nie konzipiert, wurde aber aus Mangel an Alternativen über Jahre hinweg im Web- und Mobile-Design eingesetzt. Aber Websites sind heute keine starren Gebilde mehr, sondern Anwendungen mit dynamischen Inhalten, die den erweiterten gestalterischen Rahmen aktueller Technologien wie HTML5, CSS3 und JavaScript nutzen. Diese Designtools eint, dass sie ebendiese Technologien unterstützen. Wir stellen einige dieser Tools vor:

Affinity Photo 1.0

Hersteller Serif
URL http://affinity.serif.com/de/photo
Preis 50 Euro
Plattform Mac OS X

Als »Photoshop-Killer« (Abbildung oben) wird Affinity Photo 1.0 gefeiert. Ist es aber nicht wirklich. Tatsächlich erscheint mit der App des britischen Entwicklers Serif seit langer Zeit wieder ein Bildbearbeitungstool für den Mac, das es halbwegs mit dem Bran­chenführer aufnehmen kann.
Affinity Photo ist für professionelle Produktionen einsetzbar. Die wichtigsten Werkzeuge für Retusche und Composing stehen zur Verfügung. Gerade bei der Ebenenverwaltung weist das Tool bis hin zu den Icons eine frappierende Nähe zu Photoshop auf.
Derzeit dürfte es jedoch für professionelle Anwender vor allem an der fehlenden Kompatibilität zu den Adobe-Tools scheitern … Mit knapp 50 Euro ist Affinity Photo aber erheblich günstiger.

Sketch

Spezialist für UI Design
Hersteller Bohemian Coding
URL http://bohemiancoding.com/sketch
Preis rund 100 Euro
Plattform  Mac OS X

Sketch eignet sich insbesondere als Gestaltungs­tool fürs UI Design: Da es vektorbasiert ist, lassen sich alle Objekte und Attribute leicht anpassen und skalieren. Für viele Exportfunktionen braucht es in Sketch lediglich einen Klick. So verdoppelt beispiels­weise die »@2x«-Option die Auflösung von Grafi­ken für Retina-Displays, für das iPhone 6 gibt es den »@3x«-Export. Genauso einfach kann man für seine Designs CSS-Code generieren, was den Workflow zwischen Designer und Developer unterstützt, wäh­rend die Slice-Funktion vor allem dem Gestalter unliebsame Arbeit abnimmt.
Auf der Arbeitsfläche lassen sich in einem Dokument beliebig viele Screens anlegen, etwa um verschiedene Varianten zu evaluieren. Auch Grids und Hilfslinien kann man einblenden. Besonders praktisch: Als »Symbols« gruppierte Layer wie zum Beispiel Buttons synchronisiert Sketch automatisch im ganzen Dokument. Die »Mirror«-Funktion erlaubt es, Designs direkt auf iOS-Geräte zu spiegeln und live zu überprüfen, wie Anpassungen auf dem Zielgerät ausschauen. Zahlreiche Plug-ins und eine rege Com­munity, in der sich auch die Sketch-Entwickler einbringen, machen Sketch zu einem versatilen, leicht adaptierbaren Tool.

Webflow

WYSIWYG im Browser
Hersteller Webflow Inc.
URL https://webflow.com
Preis etwa 14 bis 70 Dollar im Monat
Plattform browserbasiert

Die Web-App setzt auf einen WYSIWYG-Editor, mit dem sich eine responsive Webseite per Drag-and-drop frei erstellen lässt. Daneben gibt es aber auch bereits vordefinierte Layouts. Webflow basiert auf dem CSS-Frontend-Framework Bootstrap, dessen res­ponsives Gridsystem auch viele WordPress-Templates verwenden. Ein Hosting-Service rundet Web­flow schließlich zu einem Komplettangebot inklusive Back-­up und Versionierung ab. Es ist mög­lich, den Code zu exportieren, um ihn extern weiterzubearbeiten und für eine eigens gehostete Seite zu verwenden.
Ähnlich wie in WordPress erstellt der Anwender eine Seitenstruktur mit Sections, die er mit Containern befüllt, in denen er wiederum seine Inhalte plat­ziert: Texte, Bild-, Audio- und Videodateien, Links, Formulare et cetera. Auch anpassbare Widgets (Social-Media-Icons, Slider et cetera) stehen zur Verfügung. Webflow unterstützt viele Bildformate (GIF, JPEG, PNG, SVG), auch in Retina-Auflösung, sowie die Fontbibliotheken Google Fonts und Typekit. De­signer mit Programmierkenntnissen können eigene CSS-Klassen oder Plug-ins ergänzen. Ein respon­si­ver Vorschaumodus zeigt, wie ein Projekt auf drei fixen Devicegrößen aussieht, die man mittels eigener Code-Ergänzungen auch anpassen kann.

Antetype

Prototypen fürs UI Design
Hersteller Ergosign Technologies
URL  www.antetype.com
Preis etwa 170 Euro Plattform Mac OS X

Mit Antetype entwirft man User Interfaces für mobile und Desktop-Anwendungen. Die Prototypen kann man per URL teilen, Assets pixel- oder vektorbasiert exportieren (auch in Retina-Auflösung), CSS-Code allerdings nur für einzelne Elemente generieren. Das Interface präsentiert sich übersichtlich und leicht verständlich: Neben der großen Arbeitsfläche in der Mitte befindet sich am linken Rand ein Baukasten für die gängigen Seitenelemente. Vorkonfigurierte Buttons, Checkboxen et cetera lassen sich als Widgets schnell per Drag-and-drop platzieren, man kann aber auch eigene Custom Widgets erstellen. Der Style Inspector erlaubt es außerdem, einmal konfigurierte Stile projektübergreifend anzuwenden. Mit der Version 1.6.2 stellt Antetype sämtliche Designs in seiner Vorschau auch responsiv dar. Breakpoints lassen sich dabei variabel de­finieren, die Seitenelemente ordnen sich automatisch neu an.

Sparkle

Website per Baukasten
Hersteller River SRL
URL http://sparkle.cx
Preis rund 80 Dollar
Plattform Mac OS X

Sparkle ist ein vektorbasierter Baukasten für Web­seiten, der sowohl Templates anbietet, als auch die freie Seitengestaltung ermöglicht. Der Anwender befüllt die mit einem Raster strukturierte Arbeitsfläche mit Text, Fotos, Audio- und Videodateien. Die Bearbeitung von Textelementen gestaltet sich leider etwas umständlich, Bild- und Videofunktion erfüllen zumindest Minimalanforderungen, auch Retina-Displays werden unterstützt. Neben Links zu YouTube- oder Vimeo-Videos lassen sich auch andere URLs einfügen.
Im Vergleich zu den anderen hier vorgestellten Tools bietet Sparkle jedoch deutlich weniger Konfigurationsmöglichkeiten und hält vor allem einfache Einstellungen wie Rahmen, Schatten und Deckkraft bereit, dagegen fehlen Margin- oder Padding-Funktionen. Daher eignet es sich eher für kleine Projekte. Um responsives Verhalten anzulegen, gibt es zwar die Möglichkeit, verschiedene Breakpoints für eine Seite zu erstellen, allerdings werden die Elemente lediglich verkleinert und nicht neu angeordnet, sodass dabei Handarbeit gefordert ist. Eine Vorschau im Browser hilft bei der Kontrolle. Sparkle übersetzt den Inhalt des Webseitenentwurfs automatisch in HTML- oder CSS-Code, auch eigener Code lässt sich ergänzen.

Macaw

Konziser Code per Klick
Hersteller Macaw LLC
URL http://macaw.co
Preis circa 180 Dollar
Plattform Windows, Mac OS X

Auch Macaw bietet einen WYSIWYG-Editor, mit dem sich responsive Webseiten per Drag-and-drop bauen lassen. Der dabei entstehende Code in HTML, CSS und JavaScript lässt sich nicht nur zur Weiterverwendung exportieren, sondern ist im Vergleich zu ähnlichen Tools auch besonders konzise geschrie­ben. Macaw punktet speziell mit seiner Flexibilität im Responsive Design: So lassen sich die Breakpoints der Layouts frei definieren.
Die Benutzeroberfläche erinnert an klassische Layout- oder Bildbearbeitungstools. Designs erstellt man in einem frei konfigurierbaren Gridsystem. Bil­der lassen sich zurechtschneiden und für Webseiten optimieren, auch für Retina-Auflösung. Darüber hinaus erlaubt das Tool die Implementierung von Web-Fonts (Google Fonts und Typekit), auch Blindtext kann man relativ komfortabel in definierbaren Längen anlegen. Mit Macaw erstellte Formulare haben allerdings nur Designcharakter, keine Funktiona­lität. Wie andere Photoshop-Herausforderer erspart auch das Tool dem Gestalter Arbeit durch Wie­der­verwertbarkeit einmal definierter Designs: Style­sheets lassen sich als »Global Styles« definieren und jederzeit erneut nutzen. Seine Projekte kann man im integrierten Macaw-Browser oder einem Brow­ser seiner Wahl publizieren.

Squarespace

Schnelle Sites mit Templates
Hersteller Squarespace
URL www.squarespace.com
Preis etwa 8 bis 24 Dollar im Monat
Plattform alle, da browserbasiert

Squarespace ist ein Baukastensystem auf Grundlage von Templates, mit dem man schnell und einfach eine eigene Webseite erstellen kann. Der Anwen­der startet mit einer von 25 Designvorlagen, deren Elemente, Layout und Inhalt (Fonts, Farben, Hin­ter­grundbilder, Spacing, Padding et cetera) sich nach­träglich verändern lassen. Zudem bietet Square­space die Möglichkeit, die Seiten auf dem Square­space-Server zu hosten.
Kenntnisse in HTML und CSS sind für Square­space nicht zwingend nötig, das Business- oder Professional-Paket bietet aber die Option, das Design ebenfalls auf Code-Ebene (HTML, PHP, CSS) – wenn auch in begrenztem Umfang – zu bearbeiten. Außerdem gibt es einen Baukasten für Splash-Pages und eine »Device View«-Funktion, die die Darstellung auf unterschiedlichen Geräten im Browser anzeigt. Seit Version 7 ermöglicht das Tool über einen Splitscreen Änderungen an der Website direkt in einer Live-Vorschau zu begutachten.