iMOTION
Titelbild: Kreativ unterwegs, Teil 2
16.11.2016 - Sven Dölle

Kreativ unterwegs, Teil 2

Webdesign mit den Kreativ-Apps von Adobe

Bedarf und Anspruch an Webauftritte sind in den letzten Jahren enorm gestiegen. Kaum ein Thema, Produkt oder Event, die im Web nicht mit einem Auftritt begleitet werden. Mit den Webdesigntools von Adobe können Sie Webauftritte auf hohem Niveau umsetzen – egal, ob Sie Entwickler, Designer oder Einsteiger sind.

Webdesign betrifft heute längst nicht mehr nur den eigenen Firmenauftritt

Heute braucht fast alles eine Website: Das neue Produkt, die Social-Media-Kampagne, das Event oder der Messeauftritt werden von Landingpages, Blogs und Streamings begleitet. Dabei ist die Zeitspanne vom Konzept bis zum Launch meist sehr kurz und gleichzeitig sind die Ansprüche sehr hoch. Die Zielgruppe erwartet Design auf hohem Niveau, dazu Animationen und Interaktivität. Und responsive muss natürlich alles sein, das heißt, die Website hat sich der Darstellung auf Desktop, Tablet oder Smartphone anzupassen und überall tadellos zu funktionieren. Webdesign ist heute also keine einfache Aufgabe. Dennoch muss oft bis zu einer kurzen Deadline gelauncht werden.

 

Kreatives Arbeiten Mit Dem IPad Pro

 

Jetzt fragen sich wahrscheinlich viele, die meinen Namen unter dem Artikel schon gesehen haben, warum ich über Webdesign schreibe. Die meisten denken bei mir erst einmal an Photoshop, Lightroom und Fotografie. Erstens kommt heute keiner mehr am Thema Webdesign vorbei. Auch ich habe bei Adobe fast täglich mit dem Thema zu tun, etwa wenn wir Landingpages für Events rund um unsere Produkte gestalten oder unseren Blog weiterentwickeln.

Zweitens ist mir das Thema nicht fremd. Im Gegenteil: Einige von Ihnen wissen vielleicht noch, dass ich ursprünglich über Macromedia zu Adobe gekommen bin und mehrere Jahre für unsere Webprodukte verantwortlich war. In der Webdesignpionierzeit von 1997 bis 2000 habe ich Webprojekte deutschlandweit betreut und implementiert. Damals war oft noch Einsatz von HTML-Coding angesagt – was hätte ich zu der Zeit für die Tools von heute gegeben!

Entwickler arbeiten natürlich auch heute noch oft und viel im Quellcode. Wenn es um die Optik der Website geht, ist aber visuelles Arbeiten von Vorteil und wird entsprechend oft von Designern bevorzugt, zumal die Auswirkung jeder Änderung sofort zu sehen ist. Dies erleichtert das Ausprobieren. Unser Webeditor Dreamweaver kann beides: Code und Livevorschau stehen in einem geteilten Fenster nebeneinander. Entwickler schätzen Dreamweaver wegen seines sauberen sowie übersichtlich strukturierten Quellcodes, der absolut webstandardkonform ist. Mit Dreamweaver haben Sie in der Entwicklung nicht nur die volle Flexibilität, Sie können außerdem auf Basis gängiger Contentmanagementsysteme wie WordPress und Drupal arbeiten.

Dreamweaver CC bringt ein starkes Paket mit, das Entwickler und Designer dabei unterstützt, die knappen Deadlines einhalten zu können. Mit an Bord sind viele Hilfen, mit denen sich das Layout den unterschiedlichen Bildschirmen, also Smartphone und Tablet, anpassen lässt. Sie können Breakpoints festlegen, bei denen das Layout auf die nächste Bildschirmgröße „umschaltet“ und sich neu anordnet.

 

Screenshots Dreamweaver Coding

 

In Dreamweavers Layoutansicht können Sie das Verhalten ausprobieren. Mit Bootstrap unterstützt Dreamweaver CC das am häufigsten verwendete Framework zum Entwickeln von responsive Websites. Vorteil: Damit können Sie in Dreamweaver gebrauchsfertige CSS- und HTML-Vorlagen verwenden und anpassen. So brauchen Sie das Rad nicht jedes Mal neu zu erfinden und ersparen sich das Entwickeln moderner Tabellen, Schaltflächen, Navigationselemente und Bildkarussells. Stattdessen können Sie sich auf das Wichtigste – Ihre Ideen – konzentrieren.

Dreamweaver CC ist außerdem viel mehr als ein starker Webeditor: Als Teil der Creative Cloud funktioniert der Austausch von Assets mit anderen Programmen nahtlos und einfach. Webgrafiken liefert in aller Regel Photoshop (also geht es heute in diesem Artikel doch noch um mein Hauptprogramm ;). Photoshop kann für Dreamweaver nicht nur JPEGs und PNGs exportieren. Sie können in Dreamweaver PSD-Dateien mit mehreren Ebenen öffnen, z. B. Ihren Entwurf für das Screendesign. Dreamweaver kann Schriften, Farben, Verläufe und CSS-Code aus den Ebenen extrahieren. Mit der Extract-Funktion gelingt das Übersetzen von Designs in Code und Webgrafiken in kürzester Zeit.

Beim Thema Webdesign schreckt vor allem die Arbeit im Quellcode ab. Die gute Nachricht: Für viele Websites, die topmodern und aufwendig aussehen, etwa die scrollenden Singlepager, die oft Produkte vorstellen, ist die Arbeit im Code gar nicht nötig. Möglich wird das mit dem großartigen Tool Adobe Muse. Ich persönlich bin ein großer Fan von Muse, denn damit können Sie die Power von HTML 5 nutzen und sich gleichzeitig voll auf die Idee konzentrieren. Wenn Sie gut mit InDesign arbeiten, werden Sie sich in Muse umgehend wohlfühlen, denn die Arbeit ähnelt der in einem Layoutprogramm. Die Werkzeuge sind ähnlich und Sie können die Seiten von Musterseiten ableiten. Für gängige Elemente wie Navigation oder Diashows gibt es in Muse vorgefertigte, aber komplett anpassbare Objekte. Effekte wie Animationen beim Scrolling kann jeder ohne Code einfach mit Menüs gestalten und anpassen.

„Damals war oft noch Einsatz vom HTML Coding angesagt – was hätte ich zu der Zeit für die Tools von heute gegeben.“

Beim Veröffentlichen oder Testen der Website generiert Muse den Code automatisch. Dabei müssen Sie keine Kompromisse eingehen, etwa wenn es um responsive Webdesign geht. Ähnlich wie in Dreamweaver können Sie Breakpoints festlegen und das Verhalten der Layoutelemente wie Navigationsmenüs präzise steuern, sodass sich das Layout flüssig den verschiedenen Bildschirmgrößen anpasst.

Direktzugriff auf Assets und Bildmaterial

Wir machen uns bei Adobe viele Gedanken, wie der Workflow vereinfacht werden kann. Die Verwaltung und Bearbeitung von Assets sind im Webdesign oft ein Zeitfresser, weil viele Programme zum Einsatz kommen. Mit Creative-Cloud-Bibliotheken gibt es einen programmübergreifenden Ablageort, der in Muse und in Dreamweaver nicht nur Webgrafiken für das Projekt bereithält. Hier liegen zentral auch Farben und Schriften – einfach alles, was Sie zum Arbeiten brauchen. Das Thema Webschriften ist normalerweise ebenfalls kein einfaches. Hier gibt es den direkt angebundenen Dienst Typekit, der sich um die Einbindung der Webfonts mit CSS kümmert. Sie selbst kümmern sich um die Typografie, mehr nicht.

„Und noch ein Tipp: Wenn es mal ganz schnell und einfach gehen muss, gibt es Dritthersteller wie www.muse-themes.com, die zum kleinen Preis komplett anpassbare, wunderschön gestaltete Templates anbieten. Dann heißt es nur noch Bilderplatzhalter und Textkästen füllen – fertig.“

Webseiten nutzen heute oft große Bilder, zum Beispiel für Hintergründe. Wenn mal das richtige Bild fehlt, steht der direkt angebundene Dienst Adobe Stock mit 55 Millionen Bildern bereit, die von Adobe kuratiert werden und aus der weltweiten Kreativcommunity stammen. Sie können mit kostenlosen Vorschaubildern arbeiten und die finalen Bilder direkt aus Muse oder Dreamweaver kaufen.

Für den ersten Entwurf der nächsten Website müssen Sie jetzt auf keinen Servietten mehr scribbeln. Mit Adobe Comp CC gibt es eine App, mit der das Skizzieren auf dem Smartphone oder Tablet genauso schnell und einfach geht wie auf Papier. Aber die Striche und Boxen, die Sie einfach mit dem Finger (oder dem Apple Pencil auf dem iPad Pro) auf dem Bildschirm ziehen, verwandeln sich wie von Zauberhand in Textkästen, Farbflächen und Platzhalter für Bilder. Sie können bei der Wireframe-Optik bleiben oder unterwegs auch schon mit Farben, Schriftarten und Bildern von Adobe Stock experimentieren. Den Entwurf können Sie an Adobe Muse schicken, alles übernehmen und dort verfeinern. Mit Adobe CreativeSync wandern die Entwürfe von Gerät zu Gerät, ohne dass Sie sich darum kümmern müssen. So brauchen Sie am Desktop nicht von vorn anzufangen – die Idee ist schneller umgesetzt.

Ein wichtiges Thema neben dem Webdesign ist heute auch der Prozess, den Traffic auf die Websites zu bringen. Ein großer Teil davon kommt aus den sozialen Netzwerken. Dafür brauchen Sie oft täglich Grafiken, dazu kommen in der Regel Animationen oder kleine Storytelling-Websites. Das alles können Sie mit den Mobile und Web-Apps von Adobe Spark in wenigen Minuten gestalten. Das Prinzip ist: Vorlage wählen und mit Fotos und Text füllen. Ab damit auf Facebook, Instagram und Co. Ich nutze Spark immer wieder gerne, um meine sozialen Kanäle damit zu füttern. Probieren Sie es mal aus, die Werkzeuge sind komplett kostenlos!

 

Fazit

Webdesign gibt es heute in vielen Ausprägungen: Mal ist höchste Flexibilität bei der Entwicklung gefragt, mal reicht eine kleine Website nach gängigem Schema oder nur eine Grafik für soziale Netzwerke. Nur die Ansprüche an Design auf allen Geräten sind immer hoch. Adobe hat für jeden Fall das passende Tool im Programm. Damit Webdesigner die knappen Deadlines schaffen, verkürzen die Vorteile von Creative Cloud wie Bibliotheken für den Assetaustausch und CreativeSync für den Abgleich von Gerät zu Gerät den Zeitaufwand – vom Prototyp bis zur Veröffentlichung.

Sven Dölle
#Sven Dölle

Sven Dölle

Principal Business Development Manager Adobe

Sven Doelle ist als Principal Business Development Manager bei Adobe verantwortlich für Creative Cloud und die Photoshop-Produktfamilie. Nicht nur in der Foto-Community ist Doelle auch als Moderator bei Adobe-Events auf der Bühne, per Livestream und als Betreiber des Photoshop Direkt-Kanals auf YouTube bekannt. Auch privat gilt seine Leidenschaft der Fotografie – egal, ob am Auslöser der DSLR oder des Smartphones.

Ganzen Artikel lesen