Auf der Kante zwischen Gestaltung und Code

Joely Tafanalo Seit die Softwareschmiede aus Kalifornien vor etwas mehr als drei Jahren begonnen hat, mit Edge Preview den Fokus auf offene Webstandards (HTML, CSS, JavaScript) zu legen, hat sich einiges bewegt.

Mit der Absicht, klassischen Designern, die im Web Fuss fassen wollen, und Entwicklern, die gutes Design schätzen, entsprechende Tools zu bieten, entstand das, was wir heute als Edge-Produktfamilie kennen. Im Mittelpunkt steht nach wie vor die Erstellung und Veröffentlichung von hochwertigen Inhalten für moderne Websites und Apps.

In Anlehnung an unsere bekannten Kreativitätstools eröffnen sich mit den noch jungen WYSIWYG-Werkzeugen Webdesignern und generell allen Publishern völlig neue Möglichkeiten. Eine kompakte Auslegeordnung soll hier helfen, aus dem gesamten Softwarepaket die passendsten Werkzeuge zu entdecken und mögliche Anwendungsszenarien abzuleiten.

Am Anfang war Print

Als klassischer Publisher hat man sich an die vielfältigen Layoutmöglichkeiten im Print gewöhnt, die uns die verschiedenen Layoutprogramme bieten.

Das heutige Web ist inzwischen genauso eine Plattform für kreativen Ausdruck. Es ist darum naheliegend, Publishern im Web die gleichen Möglichkeiten an hochstehendem Layout und hochstehender Typografie zu bieten, wie es bis anhin der Druck auf Papier ermöglichte. Grundelemente, die wir in be­währten Werkzeugen wie Photoshop und Illustrator verwenden, sollten idealerweise auch im Web verfügbar sein. Es gilt nämlich sicherzustellen, dass Inhalte veränderbar sind und Animationen konsistent von HTML bis CSS funktionieren, um möglichst einfach komplexere grafische Effekte anzuwenden.

Edge Animate CC 2014 – in der Bewegung liegt die Kraft

Mit Edge Animate CC 2014 können Webdesigner und Publisher ohne grosse Hürden interaktive HTML-Animationen für das Web, Digital Publishing, Bannerwerbung und anderes gestalten. Diese werden nicht zuletzt dank der Verwendung von Webstandards auf den Browsern von Desktop- und Mobilgeräten dargestellt.

Die einzelnen Elemente, die Assets, werden vorgängig aus den Programmen Photoshop, Illustrator oder InDesign importiert und auf einer zentralen Timeline animiert.

Edge Reflow CC (Preview) – alles im Fluss

Als junges Prototyping-Tool er­möglicht Edge Reflow CC die relativ einfache Erstellung oder Übernahme von responsiven Webdesigns. Es befindet sich im Preview-Status und ist unter anderem deshalb nur in zwei Sprachen (Englisch/Französisch) verfügbar.

Mittels Markern für Media Queries werden die entworfenen CSS-Layouts für verschiedene Bildschirmgrössen angezeigt. Andere Funktionen tragen dazu bei, schneller ein responsives Design zu gestalten. Edge Reflow CC ist direkt an Photoshop CC angebunden, sodass Designer mit wenigen Mausklicks einen statischen Entwurf in eine Komposition mit Ziel Responsive Design verwandeln können.

Ob und inwiefern dieses Tool einen festen Platz in Webworkflows einnehmen wird, ist noch offen.

Edge Code CC (Preview) – keine Angst vor Code

Dieses Entwicklerprogramm ist quasi der zu mietende Zwillingsbruder von Brackets (brackets.io), einem sehr beliebten, quel­loffenen Code-Editor für Webdesigner und Front-End-Entwickler. Auch Edge Code CC ist bis auf Weiteres nur in Englisch und Französisch verfügbar.

Edge Code CC ist ein schlanker Code-Editor für Webentwickler und ‑designer, die mit HTML, CSS und JavaScript arbeiten. Es wurde für die Verwendung mit Browsern entwickelt und verkürzt so die Ent­wicklungszeit, indem Änderungen am Code direkt im Browser angezeigt werden.

Wer ausschliesslich ein Tool zum Coden sucht und im Browser designen will, ist mit Brackets bereits bestens bedient. Die Version 1.0 wurde Anfang November präsentiert.

Edge Inspect CC – alles im Blick

Eine der unscheinbaren, aber durchaus praktischen Anwendungen ist Edge Inspect CC. Webdesigner und -entwickler, die für unterschiedliche Endgeräte produzieren dürfen, erfreuen sich gleichermassen daran. Mehrere iOS- und Android-Geräte können über dasselbe WLAN mit dem Arbeitscomputer verbunden werden. Von den verbundenen Geräten können nun Screenshots gespeichert und verteilt oder die Änderungen an HTML, CSS und JavaScript in Echtzeit überprüft werden. Um Edge Inspect CC zu nutzen, sind folgende Schritte durchzuführen:

• Edge Inspect CC auf den Computer herunterladen,
• die dazugehörige Google-Chrome-Erweiterung installieren,
• den mobilen Client auf dem ge­wünschten Gerät (iOS, Android, Kindle Fire) installieren.

Ergänzende Software

Zu den bereits genannten vier Applikationen für Animation, Prototyping, Coden und Prüfen von Inhalten gesellen sich weitere Dienste. Diese sind onlinebasiert und widmen sich dem Schriftmanagement und der Um­wandlung in Mobile Apps.

Edge Web Fonts

Bei Edge Web Fonts handelt es sich um eine Bibliothek mit kostenlosen Schriften zur ausschliesslichen Verwendung in Webprojekten.

Dieser Onlinedienst ist nicht zu verwechseln mit Typekit (siehe folgenden Absatz), dem Angebot für hochwertige Schriften für alle Projekte.

Beiträge an diese stets wachsende Sammlung steuern Adobe, Google und Fontdesigner aus aller Welt bei. Bereit­gestellt werden die Schriften von Typekit, damit die Performance und die Verfügbarkeit sichergestellt sind. Die vollständige Integration mit Edge Animate CC, Edge Reflow und Dream­weaver CC erlaubt das einfache Hinzufügen von Schriften in beliebige Webprojekte.

Typekit – Schriften im Abo

Mit Typekit (siehe Beitrag Seite 24) stiess – zumindest was Typo-Liebhaber und häufige Schriften-Nutzer betrifft – einer der lohnenswertesten Dienste zur abonnierten Crea­tive Cloud dazu. Es handelt sich um einen Fontdienst mit tausenden Webfonts und hunderten Desktopschriften für das Publishing. Um Lizenzfragen braucht sich der Anwender nicht zu kümmern, die verschiedenen Schriftlizenzen sind im Creative-Cloud-Abo enthalten.

Zwischenzeitlich ist Typekit nahtlos in InDesign, Photoshop sowie Illustrator integriert. Einmal aktivierte und synchronisierte Schriften sind sofort über sämtliche Applikationen auf dem System erreichbar, also auch in Dokumenten, welche mit anderer Software als derjenigen von Adobe erstellt wurden.

PhoneGap – von der Produktion auf das Endgerät

PhoneGap ist ein Framework zur Erstellung hybrider Apps. Es ist mit den aktuellen Versionen der Internetbrowser Chrome, Safari, Firefox und Internet Explorer kompatibel. Mit PhoneGap werden mobile Apps auf Basis der wichtigsten Webstandards – HTML, CSS und JavaScript – erstellt und danach ohne grösseren Aufwand in der Cloud für mehrere Plattformen kompiliert. So kann man Anwendungssoftware entwickeln, ohne die gerätespezifischen Programmiersprachen (beispielsweise Objective-C) beherrschen zu müssen.

Designprogramme mögen Edge

Als ausgewachsener WYSIWIG-Web­editor präsentiert sich Muse CC 2014. Das Programm richtet sich an klassische Designer und Publisher. Nicht zuletzt wegen der Anlehnung an das Look & Feel von InDesign.

Das Konzept von Muse CC 2014 basiert auf adaptivem Webdesign und nicht auf responsivem. Das heisst, es werden für die verschiedenen View­ports der Endgeräte einzelne Gestaltungsraster angewendet. Innerhalb eines Projekts finden sich dann beispielsweise drei Reiter – die Website für Desktop, Tablet oder Smartphone.

Seit dem Oktober-Release sind nicht nur Gestaltungselemente projektübergreifend, sondern auch Texte können gemeinsam aktualisiert werden.

Den Gestalter freut es, dass dies geht, ohne eine Zeile Code schreiben zu müssen. Wer coden kann oder HTML-Bausteine verwenden möchte, darf dies natürlich im entsprechenden Fenster in Muse CC 2014 tun. Konkret kann ein statisches Muse-Projekt mit animierten oder programmierten Edge-Inhalten aufgewertet werden.

Eine zunehmende Zahl von Widgets-Elementen erlaubt das Hinzufügen von Funktionalitäten per Drag & Drop – beispielsweise Diashows oder Social-Media-Inhalte.

InDesign CC 2014 ist bekanntlich das Programm der Wahl, wenn es um Design und Layout für gedruckte, aber auch digitale Publikationen in diversen Formaten (EPUB, DPS, PDF) geht. Neben dem herkömmlichen Platzieren von Grafikdateien werden im Zusammenhang mit den Edge Tools bewegte Inhalte oder HTML-Elemente importiert und verknüpft. So lassen sich auf einfache Weise zuvor in Edge Animate CC erstellte Inhalte weiterverwenden.

Zahlreiche Einsatzszenarien für den Alltag

Hat man einmal den Dreh mit den grundlegenden Funktionen der Edge-Applikationen gefunden, gilt es, das Zusammenspiel mit den Werkzeugen des Alltags zu erproben. Dies kann für den Einstieg InDesign CC sein, aber auch Muse CC und Photoshop CC sind dankbare Mitspieler.

Wer den Fokus auf Entwicklung und Gestaltung für das Web legt, setzt sich vielleicht direkt mit Edge Reflow CC auseinander. Der computergenerierte Code, aber auch eigene Scripts lassen sich am besten mit Edge Code CC be-arbeiten. Nachfolgend werden zwei ausgewählte Szenarien näher vorgestellt.

Szenario 1 – Animation exportieren und dann platzieren

Ist ein animiertes Projekt erst einmal fertiggestellt, geht es darum, dieses zu veröffentlichen. Für die Verwendung im Web geschieht dies in einzelnen Dateien, konkret die eigentliche HTML-Datei, begleitet von den notwendigen Javascripts und den Bild-Assets.

Um den Weg nach InDesign CC zu gehen, muss die Animation aber als so genanntes Animate-Bereitstellungspaket gespeichert werden. Entwicklern von iBooks für OS X steht in den Ein­stellungen eine entsprechende Option zur Verfügung. Die so entstandene kompakte OAM-Datei wird danach über den bekannten Befehl Datei > Platzieren im InDesign-Dokument eingefügt.

Wenn das so verknüpfte Animate-Bereitstellungspaket an der richtigen Stelle liegt, hilft das Bedienfeld Animation die Eigenschaften zu überwachen. Gleiches gilt auch für direkt in InDesign CC animierte Objekte.

Die Vorschau und Zeitleiste in Edge Animate CC spielte die vollständige Animation ab. Mit InDesign lässt sich im Bedienfeld EPUB-Interaktiviäts-Vorschau anzeigen, was dereinst in der digitalen Publikation passieren soll.

Szenario 2 – Webdesign nach Edge Reflow CC überführen

Im zweiten Anwendungsbeispiel für die Edge Tools soll nun ein zuvor in Photoshop CC konzipiertes Webdesign programmiert werden.

Als Prototypingwerkzeug für das responsive Design oder als Grundlage für das eigentliche Programmieren dient Edge Reflow CC. Der so genannte Generator unter der Haube von Photo­shop CC übernimmt hier die Aufgabe, die einzelnen Ebenen und Objekte direkt an Edge Reflow CC zu übergeben.

Dies funktionierte in den Anfängen nicht immer reibungslos, seit einem der letzten Updates jedoch meist einwandfrei. Umgekehrt kann auch direkt in Edge Reflow CC gestartet und eine Verbindung mit der gewünschten Bilddatei hergestellt werden. Diese Zusammenarbeit erspart in der Praxis eine Menge Arbeit, wie das separate Speichern für Web oder das noch­malige Importieren, wenn Korrekturen vorgenommen wurden.

Seit Creative Cloud Extract lassen sich Photoshop-Designs übrigens auch direkt in Dreamweaver extrahieren.

Fazit

Obschon sich die Hälfte der vier elementaren Programme noch im so genannten Preview-Status befindet und funktional noch Luft nach oben vorhanden ist, stehen Anwendern der Adobe Creative Cloud bereits sehr praktische Helfer zur Verfügung, wenn es darum geht, gestaltete Inhalte anzureichern oder für Screens zu publizieren. Von Fachkräften handgeschriebener Code wird noch lange besser bleiben, jedoch schliessen sich mit den aktuellsten Werkzeugen eindeutig Lücken zwischen der Kreation und der Entwicklung. Falls der eingeschlagene Weg bei den Edge Tools & Services konsequent fortgeführt wird, werden sich Webdesigner und Publisher immer einfacher und wendiger auf der Kante zwischen Gestaltung und Programmierung bewegen können.

Diesen Frühling wurde in Deutschland und der Schweiz die Eventreihe Design for the modern web durchgeführt. Das Echo hat gezeigt, dass zumindest auf Anwenderseite auch hierzulande ein grosses Interesse und Potenzial besteht, mit neuen Werkzeugen die Publishingzukunft mitzugestalten.