»Design for the Modern Web« – ein Rückblick auf die Veranstaltung

Am vergangenen Dienstag hatten wir mal wieder volles Haus. EdgeDocks.com und Adobe waren mit Ihrer »Tour de Edge« bei uns zu Gast. Geladen waren Kreative aus dem Print- und Webdesign zu vier Vorträgen, in denen die Adobe-Neuerungen für das moderne Webdesign vorgestellt wurden.

_DSC0356

Broschüre Tour de Edge


1. Modern Webdesign = Multi-Screen-Webdesign = Responsive Webdesign

Die Begrüßung machte Daniel Connerth von EdgeDocks.com mit der Quizfrage »Was kostet Responsive Webdesign«, für deren richtige Beantwortung  eine kostenlose Teilnahme an den Hands-On-Workshops am Folgetag in Aussicht gestellt wurde. Gleichzeitig diente die Frage (die natürlich nicht mit einem konkreten Preis beantwortet werden kann) auch als Überleitung zu einer wesentlichen Aussage des Abends: Modernes Webdesign = Multi-Screen-Design = Responsive Webdesign.

_DSC0344


2. Zur Entwicklung von Print- und Webdesign: eine Gegenüberstellung

Simon Widjaja (auch EdgeDocks.com) – der im Vorjahr bereits mit einem Vortrag zu Adobe Edge Animate bei uns zu Gast war – ließ die Gäste im Anschluss Revue passieren, wie sich Print- und Webdesign seit Anfang der neunziger Jahre entwickelt haben. Das Webdesign war von Anfang an großen, technischen Beschränkungen durch die Möglichkeiten der Browser unterworfen. Das spiegelte sich in der Gestaltung auch wieder. Im Print-Design war dagegen schnell vieles möglich: bildumlaufende Texte, Transparenzen, Mehrspaltigkeit, Blocksatz und eine ausgefallene Typografie – um nur einiges zu nennen. Pfiffige Webentwickler versuchen seit je her, die Beschränkungen des Webdesigns zu durchbrechen. Die Entwickler von Adobe sind in dieser Hinsicht an vorderster Stelle mit dabei und haben Tools geschaffen, die es Kreativen – auch Print-Designern – einfach machen sollen, ihre kreativen Ideen im Web zu verwirklichen. Diese Tools wurden im weiteren Verlauf des Abends auch vorgestellt.

_DSC0353


3. Responsive Webdesign mit Adobe Edge Reflow 

Im anschließenden, ersten Vortrag von Daniel Connerth (EdgeDocks.com) wurde der Begriff Responsive Webdesign erläutert. Beim Responsive Webdesign handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung von Websites, die auf Eigenschaften des jeweils benutzten Endgeräts reagieren können, also auf jedem Endgerät eine gute Performance und Usability haben. Der klassische Weg des Webdesigns, Seiten ausschließlich in Adobe Photoshop oder Illustrator zu gestalten und dann in die Entwicklung zu geben, eignet sich dafür nicht mehr. Aber es gibt in der Adobe Creative Cloud neue Tools, Websites direkt im Browser zu gestalten und zu sehen, was geht. Das im Anschluss vorgestellte Tool Adobe Edge Reflow ist solch ein Programm. Es dient in erster Linie dazu, Seiten grob zu layouten und die Funktionalität einer Seite mit ihren Inhalten auf verschiedenen Displaygrößen zu testen. Das erleichtert auch die Projektentwicklung mit dem Kunden. Falsche Vorstellungen über das Design und des Funktionierens einer Seite können somit schnell ausgeräumt werden. Und fortwährendes Testen der Website auf ihre Anpassungsfähigkeit gehört sowieso zu einem wesentlichen Element des Responsive Workflow. Da Edge Reflow nichts anderes als HTML5 und CSS3 ausgibt, können in Reflow layoutete Seiten im Prinzip auch direkt verwendet werden. Über die Genauigkeit des Codes gehen die Meinungen allerdings auseinander. Viele (auch der anwesenden) Entwickler sind der Meinung, dass Edge Reflow in der Projektplanung seine unbestreitbaren Stärken hat. Die eigentlichen Websites sollten dann aber doch »zu Fuß« und sauber programmiert werden.

_DSC0386


4. Neue Adobe-Entwicklungen im Webdesign

Nach einer kleinen Frischluft- und Stärkungspause ging es spannend weiter mit einem Vortrag von André Jay Meissner (der »Herr von Adobe«). Er zeigte, an welchen Layoutmöglichkeiten für das Web zurzeit entwickelt wird und demonstrierte dies auch mit beeindruckenden Beispielen. So ist es mit CSS Regions z. B. möglich, Text mehrspaltig zu layouten. Mit CSS Shapes kann Text um Bilder herumfließen oder in bestimmte Formen hineinfließen (siehe Demo »Alice in Wonderland«, Abb. und Link unten). Leider unterstützt Google Chrome diese Funktionalität noch nicht bzw. nicht mehr, weil es die Browsergeschwindigkeit noch zu sehr heruntersetzt. Die Entwickler von Adobe lassen sich davon aber nicht beirren. André Jay Meissners Vortrag machte jedenfalls Lust auf die nahe Zukunft des Webs, in der solche Grenzen hoffentlich bald überwunden sind.

_DSC0397

CSS Regions

http://html.adobe.com/webplatform/layout/regions/

CSS-Shapes_Demo

http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/

5. Web-Animationen mit Adobe Edge Animate

Im letzen Vortrag des Abends von Simon Widjaja (EdgeDocks.com, Abb. unten) standen dann die Möglichkeiten von Adobe Edge Animate im Mittelpunkt. Widjaja gilt hier als einer der Vorreiter, der – gemeinsam mit anderen Begeisterten – die Möglichkeiten des Programms durch JavaScript beständig erweitert. Eigentlich ist Edge Animate so etwas wie ein Nachfolger von Flash, das in Zeiten des Mobile Web für Animationen nicht mehr ohne weiteres geeignet ist. Mit Edge Animate gestaltet man Animationen auf Basis von HTML5 und JavaScript. Ohne Coding-Kenntnisse kann man schon eine Menge erreichen. Richtig spannend wird es dann allerdings doch, wenn man mit JavaScript hier und da mal »reingrätschen« kann.

_DSC0378

Kreative sollten sich also über kurz oder lang also doch mit dem Coding auseinandersetzen. Die klassische Arbeitsteilung Webdesigner/Entwickler ist nicht mehr aufrecht zu erhalten. Die neuen Tools von Adobe erleichten den Einstieg, Websites im Browser zu gestalten, so dass auch Print-Designer schneller die Hürde überwinden und zum Multi-Screen Designer avancieren können.

_DSC0370

Dieser Beitrag wurde unter Adobe, Design, InDesign, iPad, iPhone, Motion Graphics, Webdesign, Workflow abgelegt und mit , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.