Illustrator CC für Webdesigner: Kernkonzepte

Die Rolle von Illustrator im Webdesign

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video erfahren Sie, wie ein grundlegender Webdesign-Workflow aufgebaut sein kann und welche Rolle und Bedeutung Adobe Illustrator in den einzelnen Arbeitsschritten einnimmt.

Transkript

In diesem Video möchte ich mit Ihnen über den modernen Arbeitsablauf für das Webdesign sprechen und speziell meine ganz persönliche Vorgehensweise mit Illustrator beschreiben. Mein Arbeitsprozess verfolgt einen modularen Ansatz. Das bedeutet, dass ich verschiedene Prozesse in Kategorien einteile und fast alle beinhalten den Einsatz von Illustrator auf die ein oder andere Art. Der erste Schritt in meinem Design Workflow ist die Grobplanung in Form eines Wireframes. Dabei handelt es sich um einen konzep- tionellen Entwurf einer Internetseite. So kann ich meine Idee am schnellsten in eine Art physische Realität überführen. Innerhalb der Grobplanung entwerfe ich das Design, grundlegende Benutzerführung und die Schnittstellen mit denen der Benutzer später interagieren soll. Speziell bei dieser Phase ist Illustrator mit seinen Symbolbibliotheken, Paletten oder auch Dokumentvorgaben eine große Hilfe und Erleichterung. Der zweite Part meines Prozesses betrifft die konkrete Design-Umsetzung. Man kann also auch davon sprechen, dass ich das zuvor erstellte Grobmodell nun nach ästhetischen Gesichtspunkten perfektioniere. In diesem Prozess beginne ich damit, die Grundstruktur durch visuelle Elemente zu ergänzen. Das beinhaltet die Wahl der Farben oder auch der Typographie. Jetzt weise ich schrittweise meinem Projekt das entsprechende Design zu. Ich muss gestehen, dass das meist der Step ist, dem ich die meiste Zeit widme. Illustrator passt hier perfekt, denn mit seiner Hilfe erstelle ich Schritt für Schritt eine Art Beschreibungsvorschrift für mein Design-Projekt. Mit dem Adobe Color Service stelle ich Farben zusammen und speichere diese in Farbpaletten, die anschließend in Illustrator zu importieren sind. Ich mache mir Gedanken über benötigte Schriften und entwerfe eine Schriftarthierarchie, die auch die zuvor definierten Farben mit aufnehmen können. Wenn Sie sich vorstellen, die zuvor durchgeführte Grobplanung ist die Basisarchitektur eines Hauses, definiert diese, dann beinhaltet dieser Abschnitt die Auswahl der Tapeten, Wandfarbe oder sogar der Inneneinrichtung. Traditionell haben hier die reinen Frontend Designer mit ihrer Arbeit aufgehört und einfach das komplette Mockup, also den jetzigen Zeitpunkt, den Entwurf an die Programmierer weitergereicht. Heutzutage haben wir Zugang zu Werkzeugen, die es selbst Webdesign-Einsteigern sehr einfach machen, einen Prototypen zu erzeugen, also den nächsten Step durchzuführen. Und dieser Prototyp kann dem Kunden interaktiv gezeigt werden ja und sogar oft mit Hinweisen auch für die Programmentwickler versehen werden. Dieses Mockup erleichtert dem Designer die Kommunikation mit den Programmierern, da sie selbst bereits interaktive Abläufe visualisieren und implementieren können. In der Prototypenphase werden die Basisfunktionen bereits praktisch getestet und grundlegende klickbare Interaktionen erlauben dem Designer, den Entwicklern die Idee der Benutzerführung in Verbindung mit dem Design zu verdeutlichen. Die Schlussphase im Webdesign-Entwicklungsprozess ist für mich die Realisierungsphase. Hier nehmen Sie alles, was Sie bislang geplant, bezeichnet, gespeichert oder auch interaktiv getestet haben und liefern ist als Gesamtheit den Programmentwicklern und diese können dann damit beginnen, aus dem Design ein fertiges Produkt zu machen, sei es eine Website, eine App oder auch irgendetwas dazwischen. Illustrator ist der perfekte Begleiter für diese Arbeiten und erleichtert den Designprozess erheblich. Die Gestaltungswerkzeuge lassen mich alle Ideen, die ich habe schnell und einfach in Form bringen. Die Zeichenflächen in Illustrator erlauben die einfache Simulation unterschiedlicher Bildschirmgrößen und Geräte. Das macht das insbesondere ideal bei Webdesign-Entwicklungen für responsive Websites. Adobe bietet mit seinem Colour und Typekit Service Hilfen zur Farbwahl und Synchronisation von benötigten Zeichensätzen an. Das macht es unglaublich einfach, Design-Vorschriften im Dokument zu definieren und diese später auch auszutauschen. Wenn Sie im Team arbeiten, dann können alle Designer auf Ihre Farbpaletten zurückgreifen oder beispielsweise auch auf benötigte Fonds. Über die Adobe Cloud sind die Bibliotheken super einfach von einem Arbeitsplatz auf den nächsten übertragbar und last but Not least, Illustrator ist nach meiner Meinung das beste Programm in der Creative Cloud, um SVG-Grafiken, also Scalable Vector Graphics zu exportieren. Etwas Besseres für die weitere Entwicklung im Web gibt es so nicht. Ich darf nicht vergessen zu erwähnen, dass ich die Möglichkeit der Symbole in Illustrator nach wie vor für ein sehr wichtiges und relevantes Werkzeug halte, auch wenn Adobe den Bibliotheken-Panel eingeführt hat. Nicht jedes Element muss immer gleich über die Cloud verbreitet werden, kann also auch lokal und ganz privat verbleiben. Somit haben Sie auch auf diese Symbolelemente Zugriff, wenn Sie mal nicht in die Cloud kommen und das halte ich schon für elementar Betrachten wir uns meinen vorgeschlagenen Workflow einmal im Überblick. So starte ich mit der Ausarbeitung von Skizzen und das kann durchaus auch mobil auf meinem iPad geschehen, wann und wo immer ich möchte, ja selbst auf einer Serviette. Anschließend überführe ich diese Skizze in ein Grobkonzept mit Illustrator, das sogenannte Wireframe, in dem ich die Grundformen ziehe und so langsam ein Gefühl von Struktur und Aussehen erhalte. Nach dieser Phase verwende ich nahezu alle Werkzeuge, die Illustrator mir zu Verfügung stellt, um das Aussehen, also die Ästhetik meiner Design-Idee umzusetzen. Ich definiere Eingabe- und Ausgabeelemente, Inhaltboxen und versehe diese mit Farbvorschriften und Fontdeklarationen. Nachdem ich nun genau erkennen kann, wie mein Projekt aussehen soll, beginne ich mit der Umsetzung eines Prototypen. Meist nutze ich dafür Adobe Muse Okay, Adobe Muse ist nicht Gegenstand dieses Trainings, aber geben Sie mir eine Sekunde, das Programm ist echt klasse. und ich erhalte mit dieser Applikation nen vollständig funktionstüchtigen Prototypen. Das ist herrlich. Zu guter Letzt, nehme ich den Prototypen und demonstriere damit meinem Kunden und meinem Entwickler die Idee. Mit all dem dort erhaltenen Feedback kann ich nun die Programmierung des Projektes selbst in Angriff nehmen oder natürlich auch in Auftrag geben. Das Tolle an Adobe Muse ist die Kompatibilität mit Illustrator. Der Wechsel zwischen den beiden Applikationen ist sehr gut gelungen. Apropos Adobe Muse, wie gesagt, bei diesem Programm können Sie interaktive Websites entwickeln ohne eine einzige Zeile Code schreiben zu müssen. Die meisten Webdesigner nutzen Muse das erste Mal nur zögerlich, aber Sie werden merken, dass es sehr leicht und intuitiv zu bedienen ist und ganz schnell auch für Webprofis zu einem unverzichtbaren Werkzeug werden kann. Es geht nicht unbedingt darum, eine komplette Website final mit Muse umzusetzen. Ich würde es auch so nicht machen. Sondern es geht darum, eine Idee so schnell wie möglich auch in Form von Benutzerführung, Interaktion und Reaktion ausprobieren und demonstrieren zu können. Sie sehen, Adobe Illustrator kommt eine bedeutsame Rolle im modernen Workflow zu und in Grenzen ist Adobe Muse ebenfalls zu empfehlen, um komplett funktionstüchtige Designs umzusetzen.

Illustrator CC für Webdesigner: Kernkonzepte

Lernen Sie die grundlegenden Begriffe des Webdesigns kennen und konfigurieren Sie Illustrator für den teamfreundlichen Webdesign-Einsatz.

1 Std. 49 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.05.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!