InDesign Layouts zu HTML5 exportieren mit in5

Das Softwaretool in5 wandelt Layouts, die in Adobe InDesign erstellt wurden, in HTML5 und CSS3 um. Selbstverständlich soll und kann eine solche Exportfunktion keinen Ersatz für die codebasierte Entwicklungsarbeit eines Webdesigners liefern. Es kann aber durchaus eine interessante Alternative darstellen, wenn Klone von Printprodukten jenseits des PDF-Formats von einem Kunden gewünscht werden (browserbasiert oder als mobile App). In5 tritt insoweit vor allem als kostengünstige und flexible Alternative zur Adobe Digital Publishing Suite an. Doch auch der Einsatz als Mockup-Tool kann in bestimmten (Agentur-) Konstellationen Sinn machen, ebenso wie das Konvertieren etwa von Unternehmenslogos.

Im nachfolgenden Gastbeitrag stellt Fabian Kaiser in5 vor. Er ist Inhaber und Geschäftsführer der Connex Design Werbeagentur für neue Medien in Wiesbaden und gestaltet für seine Kunden Werbemittel und Geschäftsauftritte in modernem Grafik- und Webdesign.

Kickstarter machte das Projekt möglich

AJ Petersen und Justin Putney sind die Entwickler von in5. Um ihre Idee umzusetzen, stellten sie ihr Projekt auf der Spendenplattform kickstarter.com ein um mindestens 5.000 Dollar zu sammeln. Doch die Spenden vielen am Ende großzügiger aus als gedacht und die zwei Geschäftspartner erzielten mit dem Projekt mehr als 12.000 Dollar. Das Ziel: Das Exportieren von HTML5 und CSS3 Inhalten aus Adobe Indesign. Mittlerweile steht die Software bereit und kann heruntergeladen werden.

Weblayouts über die Grenzen Indesigns hinaus entwerfen

Das Adobe Programm Indesign ermöglicht das Setzen von Texten und darüber hinaus dem Nutzer ganze Broschüren oder gar Bücher zu entwerfen und druckfertig zu machen. Allerdings bietet das Programm seit geraumer Zeit ebenfalls die Möglichkeit Weblayouts zu entwerfen und den integrierten HTML-Export zu nutzen. Allerdings werden bei dieser Funktion bisher nicht HTML5 und CSS3 unterstützt. Das Softwaretool in5 hat genau das zu bieten, was Indesign momentan in diesem Bereich noch fehlt. Das Programm setzt das Layout so genau wie möglich innerhalb einer HTML Datei um. Hierbei hat der User die Möglichkeit auch Grafiken, sofern dies gewünscht ist, zurückzugreifen.

Auch Video- und Audioinhalte können individuell eingebunden und integriert werden. Auf Wunsch kann auch eine Wischnavigation genutzt werden. Eine weitere Funktion ist die Möglichkeit HTML Seiten für die Offlinenutzung zu cachen.

Klare Vor- und Nachteile

Die Vorteile liegen auf der Hand: Das Programm in5 füllt die Lücke zwischen den bisherigen Indesign Funktionen und HTML5 und CSS3. Durch die Zuhilfenahme von Indesign ist das Erstellen von Weblayouts einfach und geht schnell vonstatten. Layouts müssen nicht per Code Schritt für Schritt umgesetzt werden, sondern können direkt visualisiert werden. Eine Alternative hierzu wäre Adobe Dreamweaver aber wer sonst lediglich im Printbereich aktiv und versiert ist, kann ruhig zum bekannten Programm Indesign greifen und seine Ideen für das Web umsetzen.

Allerdings gibt es auch Nachteile. Wie auch bei dem großen Bruder in Sachen Weblayout-Erstellung Dreamweaver lässt man sich schnell dazu verleiten über das Ziel hinaus zu schießen und mögliche Fehler durch mangelnde HTML5 und CSS3 Kenntnisse hinzunehmen und nicht auszubügeln. Wer allerdings in diesem Bereich bewandert ist, wird diesen Fehler nicht machen. Auch die teilweise ungenaue Ausgabe kann zum Problem werden. Das Softwaretool bemüht sich das Layout so exakt wie möglich zu übertragen, doch unter Umständen kommt es immer wieder zu mehr oder weniger großen Abweichungen. Hierbei läuft man Gefahr sich zu sehr von den Möglichkeiten des Programms in seiner Kreativität einschränken zu lassen. Um das einfach zu umgehen und trotzdem alle Vorteile von in5 zu nutzen sollte man vorher das Layout durchdenken und auf dem Papier skizzieren – dann geht auch nichts schief.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

, ,

Ebenfalls Lesenswert:

Trackbacks/Pingbacks

  1. CSS-Code aus Photoshop kopieren und exportieren | Webdesign lernen, Homepage erstellen | CSS einfach erklärt - 25. Januar 2013

    [...] oder App-Basiert konvertieren kann. Zugegebenermaßen ist der Einsatz der dort vorgestellten HTML5-Exportfunktion ziemlich exotisch und wird wohl eher in bestimmten Agenturkonstellationen zum Einsatz [...]

Hinterlasse eine Antwort